[Cocos Creator] Facebook Instant Games 개발하기

2018. 5. 30. 18:35· Frontend/Cocos Creator
목차
  1. 첫째, 게임 빌드를 위해 Cocos Creator 사용하기
  2. 둘째, 페이스북에 업로드
  3. 셋째, 게임 테스트
  4. 로컬 웹 서버에서 테스트 하기
  5. Facebook에서 미리보기
  6. 넷째, 페이스북에 게임 공유


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에는 통합되지 않았으므로 직접 도입해야한다고 합니다. 이 문서를 참조하세요. 






반응형
저작자표시 (새창열림)

'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
  1. 첫째, 게임 빌드를 위해 Cocos Creator 사용하기
  2. 둘째, 페이스북에 업로드
  3. 셋째, 게임 테스트
  4. 로컬 웹 서버에서 테스트 하기
  5. Facebook에서 미리보기
  6. 넷째, 페이스북에 게임 공유
'Frontend/Cocos Creator' 카테고리의 다른 글
  • [CocosCreator] Localization, i18n(Internationalization)
  • [Cocos Creator] Video Player 다루기
  • [Cocos Creator Particle System] 1. Particle Editor 사용하기
  • [Cocos Creator 물리] 3-2. Physics Collider Component
에반황
에반황
"어른이면서 애이기도 하고 싶다."
에반황
에반, 어른반
에반황
전체
오늘
어제
  • 전체보기 (118)
    • About (1)
    • Backend (5)
      • Django (3)
      • Spring (2)
    • Database (2)
      • 아키텍처 (0)
      • SQL (0)
      • Redis (2)
      • 코딩 테스트 (0)
      • 요구 사항 해결 (0)
    • Infra, Cloud (0)
      • AWS (0)
      • GoCD (0)
      • Docker (0)
      • Kubernetes (0)
      • Mesos Marathon (0)
    • Basic (34)
      • C (1)
      • C# (4)
      • C++ (1)
      • Java (9)
      • Javascript (6)
      • Typescript (5)
      • GO (0)
      • Python (4)
      • 프로그래밍 기초 (1)
      • 게임 디자인 패턴 (1)
      • 운영체제 (0)
      • 알고리즘 (2)
      • 자료구조 (0)
    • Computer Science (0)
    • Frontend (74)
      • Swift (1)
      • Unity (31)
      • Android (13)
      • Vue.js (2)
      • Phaser (1)
      • Cocos2D JS (2)
      • Cocos Creator (16)
      • Facebook Instant Game (8)
반응형

인기 글

최근 댓글

hELLO · Designed By 정상우.v4.2.2
에반황
[Cocos Creator] Facebook Instant Games 개발하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.