인스턴트 게임 빠른 시작

게임 클라이언트 만들기

앱이 설정되었으면 이제 게임 클라이언트를 만들어야 합니다. 게임 클라이언트의 루트 디렉터리에 index.html 파일이 있어야 합니다. 먼저 이 라인을 추가하여 인스턴트 게임 SDK를 가져오세요.

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

Facebook의 SDK는 비동기식 기능에 프라미스를 광범위하게 활용합니다. FBInstant.initializeAsync()가 실행된 후에만 읽어들이기 UI와 상호작용할 수 있습니다.

FBInstant.initializeAsync()
  .then(function()
  // Start loading game assets here
);

Facebook의 게임 클라이언트에서는 번들(.zip 파일)을 한 번에 다운로드하지 않습니다. 대신에 구성(fbapp-config.json) 및 기본 파일(index.html)의 루트를 검색합니다. 그런 다음 기본 파일에 포함된 로직을 실행하고 거기에서 자산 다운로드를 시작하게 됩니다. 개발자는 자산을 읽어들이는 순서와 시간을 완벽하게 제어할 수 있습니다.

게임 초기화에 필요한 자산의 다운로드가 시작되면 플레이어에게 로딩이 진행 중임을 표시할 수 있도록 SDK에 로딩 진행 상태를 알려야 합니다.

var images = ['sprite1', 'sprite2', ...];
for (var i=0; i < images.length; i++) {
  var assetName = images[i];  
  var progress = ((i+1)/images.length) * 100;  
  game.load.image(assetName);

  // Informs the SDK of loading progress
  FBInstant.setLoadingProgress(progress);
}

// Once all assets are loaded, tells the SDK 
// to end loading view and start the game
FBInstant.startGameAsync()
  .then(function() {
  // Retrieving context and player information can only be done
  // once startGameAsync() resolves
  var contextId = FBInstant.context.getID();
  var contextType = FBInstant.context.getType();

  var playerName = FBInstant.player.getName();
  var playerPic = FBInstant.player.getPhoto();
  var playerId = FBInstant.player.getID();

  // Once startGameAsync() resolves it also means the loading view has 
  // been removed and the user can see the game viewport

  game.start();
});

initializeAsync(), setLoadingProgress(), startGameAsync() 메서드에 대한 자세한 내용은 SDK 참고 자료를 참조하세요.

인스턴트 게임 콘텐츠는 Facebook 인프라에서 호스팅되므로 게임 콘텐츠를 직접 호스팅하거나 타사 서비스를 이용하지 않아도 됩니���. 게임을 테스트할 준비가 되면 모든 게임 파일을 하나의 .zip 파일로 패키징합니다.

참고: index.html 파일은 하위 폴더가 아니라 이 아카이브의 루트에 있어야 합니다.

.zip 파일 업로드 방법:

1. 앱 대시보드에서 웹 호스팅 탭을 클릭합니다.
2. 드롭다운 메뉴에서 인스턴트 게임을 선택하고 +버전 업로드를 클릭하여 .zip 파일을 Facebook 호스팅 서비스에 업로드합니다.
3. .zip 파일을 선택하고 버전 변경 사항에 대한 자세한 내용을 추가한 다음, 업로드를 클릭합니다.
4. 몇 초 후면 .zip 파일 처리가 완료됩니다. 상태가 '대기 중'으로 바뀌면 "★"을 클릭하여 빌드를 프로���션으로 푸시합니다.

이제 모바일 기기에서 빌드를 테스트할 수 있습니다. 빌드를 게시하면 Messenger 내 게임 리스트의 개발 중 섹션에 표시됩니다.

개발 속도를 높이려면 이 가이드에 따라 그래프 API를 통해 명령줄에서 빌드를 업로드하거나 개발 서버에서 바로 테스트해보세요. 자세한 내용은 인스턴트 게임 테스트, 게시 및 공유를 참조하세요.

컨텍스트는 게임을 플레이할 수 있는 모든 환경을 정의합니다. 일반적으로 컨텍스트는 Facebook 게시물 또는 그룹 등을 식별합니다.

아래의 예는 컨텍스트 업데이트를 보내는 방법과 Messenger 대화에 표시되는 방식을 보여줍니다.

1단계: 구성 파일에서 템플릿 선언

맞춤 업데이트를 선언하려면 fbapp-config.json이라는 구성 파일을 만들고 index.html 파일과 함께 번들의 루트에 포함해야 합니다.

지원되는 구성에 대한 자세한 내용은 번들 기반 구성 섹션을 참조하세요. 이 데모에서 파일 콘텐츠는 다음과 같아야 합니다.

{
  "instant_games": {
    "platform_version": "RICH_GAMEPLAY",
    "custom_update_templates": {
      "play_turn": {
        "example": "Edgar played their move"
      }
    }
  }
}

2단계: updateAsync로 맞춤 업데이트 전송

구성 파일에서 템플릿을 선언한 후에는 FBInstant.updateAsync의 필수 template 필드를 채우는 데 사용할 수 있습니다. 다음은 Tic-Tac-Toe에서 상대방의 차례임을 알리기 위해 호출이 사용되는 방식입니다.

// This will post a custom update. If the game is played in a messenger
// chat thread, this will post a message into the thread with the specified
// image and text message. And when people launch the game from this
// message, those game sessions will be able to access the specified blob
// of data through FBInstant.getEntryPointData().
FBInstant.updateAsync({
  action: 'CUSTOM',
  cta: 'Play',
  image: base64Picture,
  text: {
    default: 'Edgar played their move',
    localizations: {
      en_US: 'Edgar played their move',
      es_LA: '\u00A1Edgar jug\u00F3 su jugada!'
    }
  }
  template: 'play_turn',
  data: { myReplayData: '...' },
  strategy: 'IMMEDIATE',
  notification: 'NO_PUSH'
}).then(function() {
  // Closes the game after the update is posted.
  FBInstant.quit();
});

오른쪽에서 메시지가 표시되는 모습은 다음과 같습니다.

맞춤 컨텍스트 업데이트에 대한 자세한 내용을 알아보려면 인스턴트 게임 SDK 참고 문서를 참조하세요.

다른 플레이어에게 메시지를 보낼 시기, 알림을 전송할 시기, 업데이트에 포함할 가장 적합한 콘텐츠를 포함한 모범 사례는 모범 사례 가이드를 참조하세요.

참고: 컨텍스트 업데이트는 Messenger 외부로 전송되지 않습니다. context.getType() 메서드를 사용하고 THREAD를 감지하여 환경을 맞춤 설정하는 데 유용하게 사용할 수 있습니다. context.switchAsync, context.chooseAsync 또는 context.createAsync를 사용하여 더 적절한 컨텍스트로 전환할 수 있습니다.