XELF개발자모드를 활용한 길건너기를 부탁해 제작 가이드

개발자 모드로 콘텐츠를 만들어볼까요?

저번 포스팅에서 개발자 모드를 활용하여 자가보안진단테스트 콘텐츠를 제작하는 방법에 대해 설명을 해드렸는데요!  ▶http://blog.xelf.io/?p=963

이번 포스팅에서는 개발자 모드를 통해 스크립트 코드를 추가하여 길건너기를 부탁해 게임을 제작하는 방법에 대해 살펴보도록 하겠습니다.

 

 

 

 

 

 

 

 

 

길건너기를 부탁해 게임은 길건너 친구들을 모티브로 제작된 XELF게임입니다.

귀여운 다람쥐 캐릭터가 장애물을 요리조리 피해 도토리를 획득 후 집으로 무사히 돌아가게 하는 재미있는 스토리를 담고 있습니다.

아래 링크를 들어가시면 제작된 길건너기를 부탁해 게임 콘텐츠를 확인 하실 수 있습니다.

https://xelf.io/land/421e6c10-5b52-4b8b-9cff-03aa1ed3b3f5

설명드릴 중심적인 개발 기능은 다음과 같습니다.

  • 자동차 이동 구현
  • 자동차 연기 움직임 구현
  • 자동차와 다람쥐의 충돌판정 구현

 

▶ 자동차 이동 구현


먼저 자동차 이동 구현에 필요한 변수의 설정은 다음과 같습니다.

변수 설정을 마친 후 변수 이름에 리스트로 되어있는 변수들에 정보를 아래와 같이 채워 넣어 줍니다.

여기서 getObjectList(pageId) API란 해당 페이지 아이디에 관련되어있는 오브젝트들을 리스트 형태로 모두 가져오게 됩니다.

가져온 오브젝트 리스트들을 forEach라는 내장 API 함수를 통해 리스트의 처음부터 마지막까지 하나하나 체크하며 필요한 정보들을 입력해 줍니다.

또한 Element에 이벤트를 걸기 위해 getObjectElementsByName(pageId, obj.name) API를 이용하여 해당 페이지에 해당 오브젝트 이름을 가진 Element들을 모두 찾은 리스트를 반환 받아 0번째 Element를 가져옵니다.

Tip

디자인 모드에서 오브젝트가 겹치지 않게 하여 유니크한 이름을 가진 오브젝트의 Element가 하나가 되도록 해줄 시 getObjectElementsByName 반환된 리스트 중 0번째를 확신하여 가져올 수 있습니다.

모든 정보가 입력되었다면 sortAndClassifyCarObjectInfo 라는 함수를 만들어 정보의 이름에 따라 데이터를 정렬해 줍니다.

이제 변수 설정 및 정보입력이 완료되었다면 움직임을 실행해줄 Loop 함수를 구현하겠습니다.

부드러운 움직임을 위해 setInterval 함수 보다는 같은 Javascript 내장 함수인 requestAnimationFrame 이용하여 Loop 함수를 구현하였습니다.

if 조건문을 통해 게임을 클리어 하거나 클리어를 실패하였을 경우를 위해 isCanMove라는 변수를 통해 Loop문을 멈출 수 있도록 하였습니다.

 

▶ 자동차 연기 움직임 구현


다음은 자동차 연기의 움직임을 구현해 보겠습니다.

자동차와 연기의 움직임은 XELF API 중 playMove를 이용하여 구현하였습니다.

playMove를 사용 시 주의하여야 할 사항중 하나가 옵션중 by 라는 옵션에 따라 value에 따른 좌표로 이동하는지 혹은 value에 따른 만큼 이동을 하는지 잘 생각하여 구현하여야 합니다.

마지막 줄의 if 조건문은 자동차 오브젝트가 (이동된 위치 – 처음 위치)가 총 움직여야 할 거리보다 클 시에는 setObjectProperty API를 이용하여 자동차와 연기를 처음 위치로 이동시키는 코드입니다.

 

▶ 자동차와 다람쥐의 충돌 판정 구현


충돌 판정을 구현하기 위해선 자동차들의 정보만이 아닌 다람쥐의 정보도 필요로 합니다. 자동차와 마찬가지로 변수를 설정한 뒤 정보를 넣어 주어야 합니다.

squirrelInfo 변수에서 horizonIndex와 verticalIndex는 다람쥐가 있는 수평과 수직의 Index 입니다.

이 두개는 충돌 계산을 할 라인의 자동차들의 정보 혹은 다람쥐가 길을 전부 무사히 건넜는지 판단에 필요한 데이터가 됩니다.

변수 설정과 변수들에 정보들을 다 채워 넣은 후 checkCrashField 라는 이름의 함수를 만들어 충돌 판정을 구현합니다.

checkCrashField 내부에서 처음 if 조건문을 추가하여 다람쥐가 있는 라인의 자동차 정보가 없거나 점수를 추가할 수 없는 상황이 될 시 충돌 판정에 들어가지 못하도록 반환시킵니다.

조건문에 걸리지 않고 넘어갔을 시 다람쥐가 서 있는 라인의 자동차 들과 다람쥐가 현재 있는 곳을 Element의 함수 중 getBoundingClientRect를 이용하여 자동차와 다람쥐의 좌표를 구해 조건에 충족할 시 충돌하는 액션이 일어나도록 구현하였습니다.

playCrashInteraction 함수에서는 playVisible API를 이용하여 기본 다람쥐 모습을 숨기고, 충돌한 다람쥐의 오브젝트를 보이게 하며 playScale를 이용해 충돌하는 이미지의 비율과 투명도를 조절하여 충돌 이펙트를 보여줍니다.

또한 이번에 추가된 API중 충돌할때의 사운드를 내기 위하여 playSoundByName 함수를 만들어 소리를 실행 시켜 줍니다.

playSoundByName 함수는 아래와 같습니다.

getPageAudios(pageId) 해당 페이지에 있는 오디오를 전부 가져와 파라미터 값으로 받은 soundName과 같을경우 playAudio를 이용하여 소리를 실행시켜 줍니다.

지금까지  XELF의 개발자 모드를 이용한 길건너기를 부탁해 개발코드를 설명해드렸는데요.
해당 게임은 장애물 피하기 게임, 길 찾기 등의 다양한 게임으로 응용해서 제작을 하실 수 있습니다. 해당 프로젝트는 재사용이 가능하니 소스코드를 확인하여 자유롭게 수정해 원하는 게임 콘텐츠를 제작해보세요!!