XELF개발자모드를 활용한 THE SCREEN 탈출게임 : 더 스크린 제작 가이드

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

저번 포스팅에서는 길건너기를 부탁해 게임 제작에 필요한 코드 부분을 설명해드렸는데요!
http://blog.xelf.io/?p=1141

이번 포스팅은 어떤 게임인지 궁금하시죠?
다들 한번쯤은 친구들과 방탈출 카페를 가보신 경험이 있을텐데요,

이번 포스팅에서는 개발자 모드에서 스크립트 코드를 추가하여 PC와 모바일에서 즐길 수 있는THE SCREEN 방탈출 게임을 제작 하는 방법에 대해 설명해드릴려고 합니다.

 

 

 

 

 

 

 

 

THE SCREEN 탈출게임 : 더 스크린

THE SCREEN 탈출게임은 아이템을 획득 후 문제를 하나씩 해결하여 최종적으로 방을 탈출하는 시뮬레이션 게임입니다.

https://xelf.io/land/b23a481e-a782-46d0-9d20-fba0d5704f0b

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

  • 페이지 간 아이템 데이터 입력 및 사용

 

▶ 페이지간 아이템 데이터 입력 및 사용


Tip

현 버전의 개발자 모드에서 페이지들의 개발 코드들은 모두 독립적인 코드들이어서 페이지 간에 서로 데이터를 주고 받을 수가 없습니다. 이 문제를 해결하기 위해서는  XELF API의  setGlobalData, getGlobalData 를 사용해주세요.

setGlobalData, getGlobalData 두가지의 API를 통해 모든 페이지에서 데이터를 공유할 수 있도록 한 곳에 데이터를 저장해 둘 수 있습니다.

이번 게임에서 가장 중요한 API 아니지 않을까 싶은데요! 그럼 이 두가지 API를 활용하여 개발한 코드를 지금부터 설명해 드리겠습니다.

※ 지금부터 설명하는 코드 내용에는 아직 방탈출 게임을 플레이 하시지 않은 분들은 스포일러가 될 수 있습니다! 스포일러를 원하지 않으신다면 플레이를 하신 뒤 해당 글을 보실 것을 추천해드립니다

 

 

 

 

 

 

 

 

 

그러면 방탈출 페이지 중 위의 이미지를 가진 페이지를 참고하여 설명을 하겠습니다.

먼저, 변수 설정부터 하겠습니다.

방탈출 게임에서는 아이템 습득, 미습득에 따라 오브젝트 또는 오브젝트에 관련된 이벤트가 활성화 되었는지 유무를 잘 확인을 해야합니다.

이로 인해서 한 페이지에 모든 코드를 넣은 길건너기를 부탁해 게임과 달리 XELF API중 onPageEvent가 상당히 중요하게 작동을 하는데요.

onPageEvent

해당 페이지에서 상태가 변경되거나 페이지가 그려지기 전 무엇인가를 처리해야 하는 경우 사용합니다.

코드상에서 addGetItemEvent, addUseItemEvent 함수들을 onPageEvent에서 실행을 하는데 이름 그대로 아이템을 획득 후 아이템을 사용할 때  해야 하는 일을 화면이 전부 그려지기 전에 처리하여 획득한 아이템은 보이지 않거나  아이템을 사용할 시 보여주는 화면을 표시 할 수 있습니다.

addGetItemEvent 함수를 보시면 setGlobalData API 이용하여 아이템 데이터를 추가하는 것을 보실 수 있습니다.

isGetItem은 아이템을 습득 하였는지, isUseItem은 아이템을 사용하였는지를 판별합니다.

아이템을 습득 했을 때에는 removeObject API를 이용하여 오브젝트를 지우게 됩니다.

새로고침하거나 게임클리어 후 다시 시작을 하거나  페이지가 다시 로드 될 시에는 지웠던 오브젝트도 다시 나타나게 되는데요. 이런경우를 위해 onPageEvent에서 계속 아이템의 상태를 체크하는 것 입니다.

지금까지 각 페이지 간에 데이터 입력 및 사용 방법에 대한 활용 코드를 살펴보았는데요.

XELF API 매뉴얼 사이트를 참고하여 다양한 API를 활용해 멋진 콘텐츠를 제작해보시면 어떨까요?개발자가 아니더라도 사용방법도 쉽고 간단해 응용하여 콘텐츠를 제작해 친구들과 함께 게임을 즐겨보세요!
http://manual.xelf.io/library/index.html

해당 콘텐츠는 재사용이 가능하니 소스코드를 확인하여 자유롭게 수정해 원하는 게임 콘텐츠를 제작해보세요!