แพ็กเกจอย่างเป็นทางการ · เอนจินเกม

ห้องผู้เล่นหลายคนของ Phaser ผ่าน WebSocket

ตัวอย่าง Phaser 4 ที่สมบูรณ์: รายการห้อง ที่นั่งสี่คน โฮสต์ สถานะพร้อม แชตพร้อมสถานะกำลังพิมพ์ และเกมวัดความไว ทั้งหมดวาดบน canvas ผู้เล่น Phaser, เบราว์เซอร์ และ Godot เล่นห้องเดียวกันได้

@hibira-io/lobbyเดโมสด ↗GitHub ↗

• แพ็กเกจ Lobby ใช้ใน Phaser ได้ทันที เพราะต้องการแค่ pusher-js
• ทุกการแตะเป็นอีเวนต์ฝั่งไคลเอนต์บนแชนเนลของห้อง ไม่ต้องดูแลเกมเซิร์ฟเวอร์
• ชื่อและแชตใช้ช่องกรอกจริงที่วางทับ canvas จึงใช้ IME ภาษาจีน ญี่ปุ่น และเกาหลีได้

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

1. ติดตั้ง

   git clone https://github.com/hibira-io/examples
   cd examples/phaser-lobby
   npm install && npm run dev

2. ใช้งาน

   import Pusher from 'pusher-js';
   import { Room } from '@hibira-io/lobby';
   
   const pusher = new Pusher(import.meta.env.VITE_HIBIRA_APP_KEY, {
     cluster: 'hkg',
     wsHost: 'ws.hibira.io',
     channelAuthorization: { endpoint: '/api/hibira/auth' },
   });
   const room = Room.join(pusher, 'presence-room-42', { capacity: 4 });
   room.on('start', ({ data }) => this.scene.start('Game', data));

ก่อนเริ่ม

• เปิด "อนุญาตอีเวนต์ฝั่งไคลเอนต์" ในการตั้งค่าแอป เพื่อให้ผู้เล่นส่งการเคลื่อนไหวและการแตะถึงกันได้
• แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →