導入と最初のゲーム

このページでは、ソースワークスペースを取得して既存サンプルから始めます。エンジンのコピーなしで独立プロジェクトを作る場合は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ターゲットは成功扱いになりません。