공식 패키지 · 게임 엔진

WebSocket으로 만드는 Phaser 멀티플레이 방

완성된 Phaser 4 예제입니다. 방 목록, 4인 자리, 호스트, 준비 상태, 입력 중 표시가 있는 채팅, 반응 속도 게임을 모두 캔버스에 그립니다. Phaser, 브라우저, Godot 플레이어가 같은 방에서 함께 놀 수 있습니다.

@hibira-io/lobby라이브 데모 ↗GitHub ↗

• Lobby 패키지는 pusher-js만 있으면 되므로 Phaser에서 그대로 동작합니다.
• 모든 탭은 방 채널의 클라이언트 이벤트입니다. 게임 서버를 운영할 필요가 없습니다.
• 이름과 채팅은 캔버스 위에 올린 실제 입력창이라 한국어·일본어·중국어 입력기가 동작합니다.

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

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와 똑같이 동작합니다. 무료 계정 만들기 →