官方套件 · 遊戲引擎

用 WebSocket 打造 Phaser 多人房間

完整的 Phaser 4 範例：房間列表、四人座位、房主、準備狀態、有輸入中提示的聊天與反應力遊戲，全部畫在 canvas 上。Phaser、瀏覽器與 Godot 玩家可以在同一個房間遊玩。

@hibira-io/lobby線上展示 ↗GitHub ↗

• Lobby 套件只需要 pusher-js，在 Phaser 中直接就能用。
• 每次點擊都是房間頻道上的用戶端事件，不必架設遊戲伺服器。
• 名稱與聊天用的是疊在 canvas 上的真正輸入框，中文、日文與韓文輸入法都能用。

登入後，範例程式碼會自動帶入您的叢集主機。 登入

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

開始之前

• 在應用程式設定中開啟「允許用戶端事件」，玩家之間才能互傳動作與點擊。
• 私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →