맵 에디터 내 오브젝트 관련 기능 중 랜덤말풍선이라는 기능을 구현하는 중 있었던 문제에 대해 기록하려고 한다. 해당 기능은 Phaser의 전반적인 기능을 구현하는 컨텐츠팀과 협업해야하는 기능이였다.
오브젝트 말풍선 기능은 맵의 오브젝트를 설치하고 오브젝트의 설정한 거리 내에서 인터랙션을 하면 해당 오브젝트가 NPC에게 말을 건 것처럼 말풍선이 팝업되는 기능이다.
새로 추가되어야 하는 기능은 랜덤말풍선 기능으로 에디터상에 오브젝트를 설정할 때 기존(고정말풍선)의 경우에는 하나의 말풍선만 뜨도록 되어있지만, 랜덤말풍선의 경우 유저가 설정한 문구와 갯수의 말풍선을 인터랙션마다 랜덤으로 띄워주는 기능이다.
Phaser의 전반적인 기능을 담당하는 mapsystem 파일에 에디터의 변경사항이 있을 때마다 에디터ui(Angularjs)에 유저가 입력한 말풍선에 관련된 data를 넘겨주고 해당 data에는 설치한 오브젝트의 데이터객체가 전달된다.
유저가 에디터에서 말풍선의 타입을 고정으로할지 랜덤으로할지 라디오버튼을 통해 선택하게되면 기본값 고정일 때의 inputField가 랜덤일 때는 기본 2개로 늘어나야하고 최대로 5개까지 추가할 수 있도록 구현해야했다.
그러므로 해당 컨트롤러 $scope내 랜덤말풍선 변수 초기 상태를 ['', '']의 형태로 선언하고 해당 변수를 html태그에 ng-repeat으로 바인딩하여 렌더링하려고 했다.
그런데 이 에러가 발생했다.
angular.js:15697 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: input in randomChatBalloon, Duplicate key: string:, Duplicate value:
AngularJS는 ng-repeat 지시문에서 중복을 허용하지 않는 이유때문이였다. 즉, 다음을 수행하려고 하면 오류가 발생한다.
// This code throws the error "Duplicates in a repeater are not allowed. // Repeater: row in [1,1,1] key: number:1" <div ng-repeat="row in [1,1,1]"> // This will work <div ng-repeat="row in [1,1,1] track by $index">
그래서 이때는 배열의 요소에 id로 부여할 수 있는 특정 요소를 참조시켜야했고 다음과 같이 각자 고유한 index를 참조시켜 해결하였다.