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 파일을 넣어줍니다.
상태 탭이 대기로 바뀌면 "★" 버튼을 눌러 빌드 버전을 프로덕션 환경에 올립시다.
셋째, 게임 테스트
로컬 웹 서버에서 테스트 하기
1.
http-server패키지를npm을 통해 설치합니다.npm을 설치하지 않았다면 Node.JS 웹사이트의 설치 안내를 따르세요. 그런 다음 아래 명령을 실행합니다.$ npm install -g http-serveropenssl을 통해 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.pemprivate key와 증명서가 준비되면 웹 서비스는 SSL을 통해서 로컬에서 동작할 수 있게 됩니다.
$ http-server --ssl -c-1 -p 8080 -a 127.0.0.1https://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에는 통합되지 않았으므로 직접 도입해야한다고 합니다. 이 문서를 참조하세요.
'Frontend > Cocos Creator' 카테고리의 다른 글
| [CocosCreator] Localization, i18n(Internationalization) (0) | 2018.09.20 |
|---|---|
| [Cocos Creator] Video Player 다루기 (0) | 2018.07.04 |
| [Cocos Creator Particle System] 1. Particle Editor 사용하기 (0) | 2018.02.12 |
| [Cocos Creator 물리] 3-2. Physics Collider Component (2) | 2018.02.05 |
| [Cocos Creator 물리] 3. Physics Manager (0) | 2018.02.01 |
| [Cocos Creator 물리] 2. Collision Manager (1) | 2018.02.01 |
