公式パッケージ · ゲームエンジン

WebSocket で作る Phaser のマルチプレイルーム

Phaser 4 の完成したサンプル。ルーム一覧、4 人分の席、ホスト、準備完了フラグ、入力中表示付きのチャット、反射神経ゲームをすべてキャンバスに描きます。Phaser、ブラウザ、Godot のプレイヤーが同じルームで遊べます。

@hibira-io/lobbyライブデモ ↗GitHub ↗

• Lobby パッケージは pusher-js だけで動くので、Phaser でもそのまま使えます。
• タップはすべてルームチャンネルのクライアントイベント。ゲームサーバーは不要です。
• 名前とチャットはキャンバスの上に置いた本物の入力欄なので、日本語・中国語・韓国語の 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));

始める前に

• アプリの設定で「クライアントイベントを許可」をオンにすると、プレイヤー同士で操作やタップを送り合えます。
• プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。 無料でアカウントを作成 →