はじめに

UZU PlayScreen v3 SDK を使ってマルチプレイ対応の Web ゲームを作成する手順を説明します。

前提条件

ツール	バージョン
Node.js	20+
TypeScript	5.7+
Vite	6.0+

パッケージの取得

GitHub Packages npm レジストリからインストールします。~/.npmrc を作成してレジストリを設定してください。

//npm.pkg.github.com/:_authToken=<GITHUB_PAT>
@uzupj:registry=https://npm.pkg.github.com

プロジェクトの作成

CLI コマンドでプロジェクトを生成します。

npx @uzupj/uzu-cli create-2d-game my-game
cd my-game
npm install

生成されるファイル構成:

my-game/
├── manifest.json       # ゲームメタデータ
├── package.json        # npm 設定
├── tsconfig.json       # TypeScript 設定
├── vite.config.ts      # Vite 設定
├── index.html          # エントリー HTML
└── src/
    └── main.ts         # エントリーポイント

manifest.json

ゲームの ID や名前などのメタデータを定義します。詳細は manifest リファレンス を参照してください。

{
  "id": "my-game",
  "build": "npm run build",
  "output": "dist",
  "playerCount": 1
}

開発サーバーの起動

npm run dev

ブラウザで http://localhost:5173 を開くとゲームが表示されます。roomId パラメータがない場合はローカルモードで動作し、サーバーなしでゲームロジックをテストできます。

マルチプレイをテストするには URL に ?__dev=2 を付けてください。2 画面の iframe が並んで P2P でマルチプレイをシミュレートできます。

パブリッシュ

npx uzu publish

manifest.json を読み取り、ビルド → ZIP 化 → R2 アップロード → リビジョン登録まで自動で行います。--skip-build でビルドをスキップできます。

パッケージの役割

パッケージ	役割
@uzupj/uzu-sdk	マルチプレイ通信・状態同期・ボイスチャット・サウンド再生
@uzupj/engine-2d	Canvas 描画・アニメーション・入力・物理演算 (推奨ランタイム)
@uzupj/uzu-cli	プロジェクト生成 (create-2d-game) とパブリッシュ (publish)

次のステップ

• API リファレンス — init / run / sync / firstFrameReady / gameReady 等
• 開発パターン — Relay / run() / sync() の使い分け
• 認証要件 — publish 前に満たすべき MUST 要件