Bắt đầu nhanh trò chơi tức thời

Tạo ứng dụng trò chơi

Giờ đây khi đã thiết lập ứng dụng, bạn cần bắt đầu tạo ứng dụng trò chơi. Ứng dụng trò chơi cần phải có một file index.html trong thư mục gốc. Hãy bắt đầu bằng cách nhập SDK Trò chơi tức thì thông qua việc thêm dòng này.

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

SDK của chúng tôi sử dụng rộng rãi Cam kết cho chức năng không đồng bộ. Bạn chỉ có thể tương tác với giao diện người dùng tải sau khi FBInstant.initializeAsync() khắc phục.

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

Ứng dụng trò chơi của chúng tôi sẽ không tải xuống toàn bộ gói (file .zip) cùng lúc. Thay vào đó, ứng dụng sẽ tìm kiếm thư mục gốc của cấu hình (fbapp-config.json) và file chính (index.html). Sau đó, ứng dụng sẽ bắt đầu thực hiện logic trong file chính và tải xuống tài sản từ đó. Với tư cách là nhà phát triển, bạn có toàn quyền kiểm soát đối với thứ tự và thời gian tải tài sản của mình.

Sau khi bắt đầu tải xuống các tài sản cần thiết để khởi chạy trò chơi, bạn cần thông báo cho SDK về tiến trình tải để chúng tôi hiển thị vòng tải cho người chơi.

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

Để biết thêm thông tin về phương thức initializeAsync(), setLoadingProgress() và startGameAsync(), hãy xem Tài liệu tham khảo về SDK.

Nội dung Trò chơi tức thời được lưu trữ trên cơ sở hạ tầng Facebook nên bạn không cần tự lưu trữ nội dung trò chơi hoặc sử dụng dịch vụ bên thứ ba. Sau khi trò chơi đã sẵn sàng thử nghiệm, hãy đóng gói tất cả các file trò chơi vào một file .zip.

Lưu ý: file index.html phải nằm trong thư mục gốc của file lưu trữ này và không nằm trong bất kỳ thư mục phụ nào.

Cách tải lên file .zip:

1. Từ bảng điều khiển của ứng dụng, hãy nhấp vào tab Lưu trữ web
2. Chọn Trò chơi tức thì từ menu thả xuống và nhấp vào +Tải phiên bản lên để tải file .zip lên dịch vụ lưu trữ của Facebook.
3. Chọn file .zip, thêm chi tiết về các thay đổi với phiên bản và nhấp vào Tải lên
4. Quá trình xử lý file .zip chỉ mất vài giây. Khi trạng thái chuyển thành Chế độ chờ, hãy nhấp vào "★" để chuyển bản dựng cho bộ phận sản xuất

Bạn hiện có thể thử nghiệm bản dựng trên thiết bị di động. Bản dựng đã phát hành sẽ hiển thị với bạn trong danh sách trò chơi bên trong Messenger, ở phần có tên là Đang phát triển.

Để tăng tốc quá trình phát triển, bạn có thể tải bản dựng lên từ dòng lệnh thông qua API Đồ thị hoặc thử nghiệm ngay từ máy chủ phát triển của mình. Tìm hiểu thêm về Thử nghiệm, phát hành và chia sẻ Trò chơi tức thì.

Ngữ cảnh xác định mọi môi trường có thể chơi trò chơi. Thông thường, ngữ cảnh sẽ xác định những nội dung như bài viết hoặc nhóm trên Facebook.

Ví dụ dưới đây cho biết cách gửi nội dung cập nhật ngữ cảnh và cách nội dung này hiển thị trong cuộc trò chuyện trên Messenger.

Bước 1: Công bố mẫu trên file cấu hình

Để công bố các nội dung cập nhật tùy chỉnh, bạn cần tạo file cấu hình có tên fbapp-config.json và đặt file này vào thư mục gốc của gói cùng với file index.html.

Để biết thêm thông tin về các cấu hình được hỗ trợ, vui lòng tham khảo phần Cấu hình dựa trên gói. Trong bản demo này, nội dung file sẽ như sau:

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

Bước 2: Gửi nội dung cập nhật tùy chỉnh với updateAsync

Sau khi công bố mẫu trong file cấu hình, bạn có thể sử dụng mẫu này để điền vào trường template bắt buộc trong FBInstant.updateAsync. Đây chính là cách sử dụng lệnh gọi trong trò chơi cờ caro để thông báo cho đối thủ rằng đã đến lượt họ.

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

Sau đây là cách thông báo sẽ hiển thị:

Để biết thêm thông tin về nội dung cập nhật ngữ cảnh tùy chỉnh, hãy xem lại Tài liệu tham khảo về SDK Trò chơi tức thì của chúng tôi.

Để biết cách làm tốt nhất, bao gồm thời điểm nên nhắn tin cho người chơi khác, thời điểm nên thông báo cho họ và nên đưa nội dung nào vào những nội dung cập nhật này, hãy tham khảo hướng dẫn Cách làm tốt nhất của chúng tôi.

Lưu ý: bạn không thể gửi nội dung cập nhật ngữ cảnh bên ngoài Messenger. Hành động điều chỉnh trải nghiệm bằng cách sử dụng phương thức context.getType() và phát hiện THREAD có thể là việc làm hữu ích. Bạn có thể chuyển sang ngữ cảnh thích hợp hơn bằng cách sử dụng context.switchAsync, context.chooseAsync hoặc context.createAsync.