Frontend/Cocos Creator

[Cocos Creator] Facebook Instant Games 개발하기

에반황 2018. 5. 30. 18:35


Facebook Instant Games

Cocos Creator v1.9부터는 페이스북 인스턴트 게임즈 플랫폼을 위한 게임을 만드는 것을 지원한다고 합니다. 우리 개발자들은 이제 페이스북 인스턴트 게임즈 플랫폼의 기술적 기준에 맞춰 빠르게 게임을 퍼블리싱 할 수 있을 것 같네요. 페북 게임은 WeChat 미니 게임이나, QQ Play 게임과 달리 순수한 HTML5 환경에서 작동합니다. 이것은 폰 뿐만 아니라 데스크탑 브라우저에서 동작할 수도 있다는 것을 의미하죠. 뿐만아니라 개발이나, 디버깅 또한 더 편리해졌다는 것입니다. 


Cocos Creator가 제공하는 부분:

  • Facebook Instant Games SDK와 통합된 로직, 자동 초기화(페이스북 게임에서는 초기화를 지원하고 있다), 관련된 API를 직접 호출할 수 있음.
  • Cocos Creator Build 패널에서 원클릭으로 Facebook Instant Games의 모든 세부사항을 충족하는 패키징 프로세스를 제공함

유저가 직접 해야하는 부분:

  • 플랫폼 관련 특징에 대한 문의는 Facebook Instant Games SDK에 하시는 걸로
  • 페이스북 Release 프로세스에 따라 Cocos Creator 패키지 버전을 페북에 업로드


배포 프로세스

  • Cocos Creator를 이용해서 게임 빌드
  • Facebook background에 게임 업로드
  • 게임 테스트
  • Facebook에 게임 공유


첫째, 게임 빌드를 위해 Cocos Creator 사용하기

일단 퍼블리싱할 게임 프로젝트를 Cocos Creator를 이용해서 키고 Build 패널(맥은 cmd + shift + b)에 Platform을 Facebook Instant Games로 설정해 빌드를 해봅시다. 

빌드가 완료되면, fb-instant-games 가 생성되고 자동으로 폴더가 열릴 것 입니다. 여기서 zip 파일이 바로 페이스북 인스턴트 게임즈 플랫폼에 올릴 빌드 파일이죠.


둘째, 페이스북에 업로드

일단 페이스북에 게임을 내기 위해 앱 세팅을 해야합니다. 앱 세팅은 이 포스트를 참조.

설정된 앱에서 좌측 메뉴에서 인스턴트게임 - 웹 호스팅 탭을 눌러 들어갑니다. 업로드 버전을 클릭한 후 위에서 빌드한  zip 파일을 넣어줍니다.

상태 탭이 대기로 바뀌면  "★" 버튼을 눌러 빌드 버전을 프로덕션 환경에 올립시다.


셋째, 게임 테스트

로컬 웹 서버에서 테스트 하기

게임 개발은 완료했지만, 사용자가 어떻게 페이스북 인스턴트 게임즈 플랫폼 위에서 게임을 할지 테스트해보진 못했습니다. 이를 위해 페이스북에서는 로컬 서버에서 테스트를 진행할 수 있도록 해줍니다. embed된 테스트 플레이어를 통해 이루어지고, 약간의 구성은 해야하지만요.

  • 1. http-server 패키지를 npm을 통해 설치합니다.npm을 설치하지 않았다면 Node.JS 웹사이트의 설치 안내를 따르세요. 그런 다음 아래 명령을 실행합니다.

    $ npm install -g http-server

  • openssl을 통해 private key와 증명서를 만듭니다. 아래 명령어를 쳐야하는 경로는 프로젝트를 빌드했던 fb-instant-games 디렉토리입니다.

    $ cd fb-instant-games/
$ openssl genrsa 2048 > key.pem
$ openssl req -x509 -days 1000 -new -key key.pem -out cert.pem

  • private key와 증명서가 준비되면 웹 서비스는 SSL을 통해서 로컬에서 동작할 수 있게 됩니다.

    $ http-server --ssl -c-1 -p 8080 -a 127.0.0.1

  • https://localhost:8080 한번 쳐볼까요? 그리고 나오는 보안 정보를 무시하고 들어가봅시다. 이 과정은 브라우저가 아까만든 private key와 증명서로 페이스북 whitelist를 통해 접근 허락을 받는 것 입니다. 아직 이 과정에서는 여러분이 만든 게임의 미리보기는 볼 수 없습니다. 인스턴트 게임즈 SDK가 아직 초기화되지 않았기 때문이죠. 아래의 방법을 사용해야합니다. 


Facebook에서 미리보기

Facebook Instant Games SDK를 모두 활용하려면 https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080 링크로 들어가되 YOUR_GAME_ID 이 부분에 여러분이 만든 앱 ID를 넣어주면 됩니다.

아래와 같이 성공적으로 미리보기를 할수가 있습니다. (사실 작성자는 여기서 난관에 봉착하게 되는데.. 일단 우리나라는 인스턴트 게임이 허용되지 않았기 때문에 '죄송합니다. 회원님의 지역에서는 아직 이 기능이 지원되지 않습니다.' 라는 문구가 보일 것입니다. Chris Hawkins 라는 페이스북 파트너 관리 담당자에게 화이트리스트 허용 문의를 넣어야한다고 합니다.)


넷째, 페이스북에 게임 공유

인스턴트 게임 앱 창에서 웹 호스팅 부분에서 빌드한 게임을 배포했던 것 기억하시죠? 이제 웹 호스팅 탭이 아닌 상세 정보 탭으로 이동해봅시다. 스크롤을 맨 아래로 내려 게임을 공유할 수 있습니다.

자세한 사항은 다음을 참고하세요. Testing, Publishing, and Sharing an Instant Game.

경고

페북 호스팅은 많은 제약이 있습니다. 제일 중요한 것은 다음과 같습니다.

  • 서버 사이드 로직은 지원하지 않음 (php)
  • 업로드되는 파일의 총 크기는 200MB 초과할 수 없음
  • 단일 앱 업로드에 포함되는 파일 수는 500개 초과할 수 없음

Custom Instant Games

프로젝트 최상위 폴더 내에서 build-templates/fb-instant-games 폴더를 만들면 그 안에 여러분이 원하는 빌드 설정을 직접 할 수 있습니다. 어디서 아래의 파일을 구할지 모르겠다면, build/fb-instant-games로 들어가보세요.

  • fbapp-config.json: 전체 패키지의 환경설정 파일입니다. 공홈의 번들 구성 방법를 참고하세요.
  • index.html: Instant Games SDK 버전을 바꿀 수 있습니다.
  • main.js: SDK 초기화와 자원 로딩에 대한 부분을 바꿀 수 있습니다.



SDK Instructions

Cocos Creator는 페이스북 인스턴트 게임즈 SDK를 통합했고 게임이 로드될 때 자동으로 초기화 합니다. (즉 페북 SDK 중 initializeAsync, startGameAsync) 여러분은 다른 초기화 작업 없이 코드 내에서 FBInstant 네임스페이스를 바로 접근할 수 있습니다.

게다가, 페이스북은 소셜 기능에 접근할 수 있는 자바스크립트용 Facebook SDK 또한 제공합니다. 이 SDK는 FB라는 네임스페이스로 접근해야합니다. 그러나 Cocos Creator에는 통합되지 않았으므로 직접 도입해야한다고 합니다. 이 문서를 참조하세요. 





반응형
저작자표시