Sample Page

Game Engine API Sample

ここは実装の入口として使うサンプルページです。 Cube の追加、Camera の追尾、PNG / VRM の読み込み、 スクリプトからの制御を、すぐ確認できる形でまとめています。

Home Open Editor Explanation

API Reference

API 用途 返り値 メモ
app.spawn(type, options) オブジェクトを作成します。 SceneObject Cube / Empty / PNG / VRM の起点です。
app.setCameraTarget(object, camera?) カメラの追尾先を設定します。 void Scene View と Game View の切り替え確認にも使えます。
app.loadImageAnimation(frames, options) PNG フレーム列を読み込みます。 Promise<ImageAnimation> SpriteSheet / frame list の両方を想定します。
app.loadVrm(source, options) VRM を読み込みます。 Promise<VrmObject> 待機ポーズ、モーション、表情の起点です。

app.spawn(type, options)

オブジェクトを作成します。Cube / Empty / PNG / VRM などを追加する起点です。

const obj = app.spawn("Cube", {
  position: { x: 0, y: 0, z: 0 },
  size: { x: 1, y: 1, z: 1 },
});

app.setCameraTarget(object, camera?)

カメラの追尾先を切り替えます。Scene View の補助操作にも使えます。

app.setCameraTarget(player);
app.setCameraTarget(player, "SceneCamera");

app.loadImageAnimation(frames, options)

PNG のフレーム列を読み込んで、再生可能なアニメーションに変換します。

const clip = await app.loadImageAnimation(
  ["idle_01.png", "idle_02.png"],
  { loop: true, fps: 8 }
);

app.loadVrm(source, options)

VRM を読み込み、モーションやポーズの再生対象として使います。

const avatar = await app.loadVrm("assets/character.vrm", {
  pose: "idle",
});

Quick Start

1. Cube を作る

最小のオブジェクトを追加して、Scene 上で選択・移動できる状態にします。

const cube = app.spawn("Cube", {
  position: { x: 0, y: 1, z: 0 },
  size: { x: 1, y: 1, z: 1 },
});

2. Camera を追尾する

選択中のオブジェクトを Camera が見るようにして、編集しやすくします。

app.setCameraTarget(cube);
app.setCameraTarget(cube, "SceneCamera");

3. PNG を動かす

画像アニメーションをスクリプトから再生し、表示の確認を行います。

const sheet = await app.loadImageAnimation(
  ["walk_01.png", "walk_02.png"],
  { loop: true }
);
app.playImageAnimation(sheet, cube.id);

4. VRM モーション

VRM とモーションを読み込み、再生・停止・シークを操作できます。

const vrm = await app.loadVrm("assets/character.vrm");
app.playVrmMotion(vrm, "idle");
app.seekVrmMotion(vrm, 0.5);

5. アプリ起動時の初期化

起動時に Scene を組み立てて、ゲームとしての初期状態を作ります。

app.onReady(() => {
  const scene = app.scene.create("MainScene");
  const player = app.spawn("Empty", { position: { x: 0, y: 0, z: 0 } });
  scene.add(player);
  app.scene.open("MainScene");
});

6. 出力用の操作例

実行中の状態をまとめて、あとでアプリ出力に繋げやすい形にします。

app.command("moveForward", { speed: 2.0 });
app.command("setPose", { name: "idle" });
app.command("captureState");

Script Example

Editor の Play 時に流す想定の例です。オブジェクト生成、カメラ追尾、アニメーション再生をまとめて書けます。 

const cube = app.spawn("Cube", {
  position: { x: 0, y: 0, z: 0 },
  size: { x: 1, y: 1, z: 1 },
});

const helper = app.spawn("Empty", {
  position: { x: 2, y: 0, z: 0 },
});

app.setCameraTarget(cube);

const motion = await app.loadVrm("assets/character.vrm");
app.playVrmMotion(motion, "idle");

input.on("Space", () => {
  helper.transform.rotate(0, 90, 0);
});

Asset Examples

PNG Animation

画像アニメーションは、SpriteSheet を読み込んで再生できます。

const run = await app.loadImageAnimation(
  ["run_01.png", "run_02.png", "run_03.png"],
  { loop: true, fps: 12 }
);
app.playImageAnimation(run, cube.id);

VRM Pose / Motion

VRM は待機ポーズとモーションを分けて切り替えられます。

const avatar = await app.loadVrm("assets/character.vrm");
app.playVrmMotion(avatar, "idle");
app.playVrmMotion(avatar, "wave");

Editor Script

Editor で同じスクリプトを使えば、Play で挙動確認できます。

const target = app.spawn("Cube");
app.setCameraTarget(target);
app.select(target.id);