Tutorial Singkat Game Instan

Membuat klien game

Setelah aplikasi Anda disiapkan, Anda harus mulai membuat klien game Anda. Klien game harus memiliki file index.html di direktori root. Mulailah dengan mengimpor SDK Game Instan dengan menambahkan baris ini.

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

SDK kami memperluas penggunaan Promise untuk fungsionalitas asinkron. Anda hanya dapat berinteraksi dengan UI pemuatan setelah FBInstant.initializeAsync() diresolusi.

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

Klien game kami tidak akan mengunduh paket (file .zip) Anda sekaligus. Akan tetapi, klien game akan mencari root untuk konfigurasi (fbapp-config.json) dan file utama (index.html). Lalu ini akan mulai mengeksekusi logika yang ada pada file utama, dan akan mulai mengunduh aset dari sana. Sebagai developer, Anda memiliki kontrol penuh atas urutan dan waktu aset Anda dimuat.

Setelah Anda mulai mengunduh aset yang diperlukan untuk menginisialisasi game, Anda harus menginformasikan SDK tentang kemajuan pemuatan agar kami dapat menampilkan lingkaran pemuatan kepada pemain.

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();
});

Untuk informasi selengkapnya tentang metode initializeAsync(), setLoadingProgress(), dan startGameAsync(), lihat Referensi SDK.

Konten Game Instan di-hosting di infrastruktur Facebook, jadi Anda tidak perlu melakukan hosting konten game tersebut ke layanan milik Anda sendiri atau layanan pihak ketiga. Setelah game siap untuk pengujian, kemas semua file game ke dalam file .zip tunggal.

Catatan: file index.html harus berada di root arsip ini dan bukan di sub-folder mana saja.

Untuk mengunggah file .zip:

1. Dari dasbor aplikasi, klik tab Hosting Web.
2. Pilih Game Instan dari menu pilihan, klik +Unggah Versi untuk mengunggah file .zip ke layanan hosting Facebook.
3. Pilih file .zip, tambahkan perincian tentang perubahan versi, dan klik Unggah
4. Seharusnya hanya diperlukan beberapa detik untuk memproses file .zip. Ketika status berubah ke Siaga, klik "★" untuk mendorong build ke tahap produksi.

Anda sekarang dapat menguji build di perangkat seluler. Build yang diterbitkan kini akan dapat Anda lihat di daftar game dalam Messenger, yaitu di bagian Dalam Pengembangan.

Untuk mempercepat proses pengembangan, Anda dapat mengunggah build dari baris perintah melalui API Graf, atau menguji secara langsung dari server pengembangan Anda. Pelajari selengkapnya tentang Menguji, menerbitkan, dan membagikan Game Instan.

Konteks adalah lingkungan apa pun tempat game dapat dimainkan. Secara umum, konteks mengidentifikasi hal-hal seperti postingan atau grup Facebook.

Contoh di bawah ini menampilkan cara mengirimkan update konteks dan tampilan konteks tersebut di percakapan Messenger.

Langkah 1: Menyatakan templat di file konfigurasi

Untuk menyatakan update khusus, Anda harus membuat file konfigurasi yang bernama fbapp-config.json dan meletakkannya di root paket Anda, bersama dengan file index.html Anda.

Untuk informasi selengkapnya tentang konfigurasi yang didukung, harap buka Bagian konfigurasi berdasarkan paket. Untuk demo ini, konten file tersebut harus seperti berikut ini:

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

Langkah 2: Kirimkan update khusus dengan updateAsync

Setelah templat Anda dinyatakan di file konfigurasi, Anda dapat menggunakannya untuk mengisi kolom wajib template di FBInstant.updateAsync. Berikut ini cara panggilan digunakan di Tic-Tac-Toe untuk memberi tahu bahwa sekarang giliran mereka.

// 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();
});

Berikut ini tampilan pesan nantinya:

Untuk informasi selengkapnya tentang update konteks khusus, bacalah Referensi SDK Game Instan kami.

Untuk praktik terbaik, termasuk kapan mengirimkan pesan kepada pemain lain, kapan memberi tahu mereka, dan konten yang sebaiknya disertakan di update semacam ini, bacalah panduan Praktik Terbaik.

Catatan: update konteks tidak dikirimkan di luar Messenger. Ini dapat bermanfaat untuk menyesuaikan pengalaman Anda menggunakan metode context.getType(), dan mendeteksi THREAD. Anda dapat mengubahnya menjadi konteks yang lebih sesuai menggunakan context.switchAsync, context.chooseAsync, atau context.createAsync.