การเริ่มต้นใช้งานอย่างง่ายสำหรับเกมทันใจ

สร้างไคลเอ็นต์เกมของคุณ

ขณะนี้กำลังตั้งค่าแอพของคุณ คุณจะต้องเริ่มสร้างไคลเอ็นท์เกมของคุณ ไคลเอ็นต์เกมต้องมีไฟล์ index.html ในไดเร็กทอรี่รูท เริ่มต้นโดยการนำเข้า SDK เกมทันใจด้วยการเพิ่มบรรทัดนี้

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

SDK ของเรานำ Promise มาใช้งานกับฟังก์ชั่นการทำงานแบบไม่ซิงโครไนซ์อย่างกว้างขวาง คุณจะโต้ตอบกับ UI การโหลดได้ก็ต่อเมื่อแก้ไข FBInstant.initializeAsync() แล้วเท่านั้น

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

ไคลเอ็นต์เกมของเราจะไม่ดาวน์โหลดชุดรวมของคุณ (ไฟล์ .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

เมื่อแสดงสิทธิ์เทมเพลตของคุณในไฟล์การกำหนดค่าแล้ว คุณจะสามารถใช้เพื่อสร้างช่อง template ที่จำเป็นใน FBInstant.updateAsync ได้ นี่คือวิธีใช้การเรียกใน 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