導入と最初のゲーム
このページでは、ソースワークスペースを取得して既存サンプルから始めます。エンジンのコピーなしで独立プロジェクトを作る場合はnpm SDK・配布アーカイブからの導入を参照してください。v0.1.0のレジストリ初回公開は準備中です。
必要な環境
- Node.js 22.12以上とnpm。CIはNode 24を使用します。
- WebGL、ResizeObserver、ES2022に対応するブラウザを中心に検証します。
- 自動検証対象はChromiumです。Safari・Firefox・実機スマートフォン全般の動作保証はありません。
git clone https://github.com/oz-coden/Simpludify.git
cd Simpludify
npm ci
npm run dev -- --example character
表示された http://127.0.0.1:4173 を開き、ゲーム領域をクリックするかTabで選択し、WASDで移動します。
最初のコード
examples/character/main.tsの本体です。サンプル共通の起動補助を除いたSDKの使い方は次のとおりです。
import {
Action,
ActionController,
Character,
defineActions,
Game,
KeyboardBindings,
} from "@simpludify/web";
const game = new Game();
const Actions = defineActions({ Move: Action.axis2D() });
const controls = new ActionController(Actions, {
scene: game.engine.scene,
input: game.engine.input,
bindings: { Move: KeyboardBindings.WASD },
});
game.add(Character({ movement: controls.reader(Actions.Move) }));
await game.run();
examples/character/index.htmlがページの高さとエントリーポイントを用意しています。既存例のHTMLをそのまま使えます。
<style>
html, body, #app { margin: 0; width: 100%; height: 100dvh; }
</style>
<main id="app"></main>
<script type="module" src="./main.ts"></script>
CharacterはTransform・Renderable・Motionのプリセットで、movementを渡した場合だけActionMovementを追加します。移動とComponentでは倍率変更と独自制御を説明します。画像なしでもプレースホルダーを表示できます。既定位置は世界座標(400,225)、速度は180単位/秒、サイズは32です。Gameの既定の論理解像度は800×450です。
別のゲーム用ディレクトリをつくる
npm run create -- ../my-game
cd ../my-game
npm ci
npm run dev
既存ディレクトリには上書きしません。エンジンソース・ツール・文書をコピーする方式です。エンジン更新は自動反映されません。UIを作るならexamples/ui-scenes/main.ts、収集ゲームならexamples/signal-runを参照してください。
検証と配信
npm run check
npm test
npm run build -- --target web --example character --base /my-game/
ゲーム単体の出力はdist/です。LICENSE.txt、THIRD-PARTY-NOTICES.txt、sbom.jsonを含む全ファイルを静的ホストへ置きます。ルート配信では--base /、相対配置には既存CLIの既定./を使えます。
公式サイトと全サンプルの統合出力は別コマンドです。
npm run site:build -- --base /Simpludify/
npm run site:serve
サーバーの表示URLに/Simpludify/を付けて開きます。詳細はビルドと公開を参照してください。
困ったとき
- 真っ暗・起動エラー:WebGLとブラウザのハードウェアアクセラレーション設定を確認します。起動に失敗したサンプルは案内を表示します。
- キーが効かない:ゲーム領域へフォーカスします。標準Button上ではEnter/SpaceはUI操作、WASD等の未消費キーはゲーム操作です。文字・数値・Selectの編集中はゲームキーを解放します。Tabで編集欄から移動し、新たにキーを押してください。
- 画像がない:選択したサンプルの
public/へ置くかViteでimportし、サブパスを考慮します。 - もっと詳しい診断:
npm run doctor -- --json。未実装のWindowsターゲットは成功扱いになりません。