日本語

English

日本語

English

外観

はじめる ​

必要なもの ​

  • Node.js 22 以降。
  • Vite プロジェクトのように、<script type="module" src="…"> を含む index.html から読み込まれるゲーム。Vite の設定があればそれを使うので、エイリアスやプラグインもそのまま動きます。

インストール ​

bash
npm install -D keiko
npx keiko init

keiko init はプロジェクトで使っているエンジン向けに最初のテスト（起動して、エラーなしで 5 秒プレイする）を書き出し、あとで埋める window.__KEIKO__ フックを表示します。既存のファイルを上書きすることはありません。Phaser 3 と PixiJS 8 のゲームはフックなしでも始められます。Keiko がエンジンから画面上のシーンやボタンを読み取るからです（フック不要）。

debuff を使っていますか？新しいプロジェクトには Keiko とサンプルテストが最初から入っています。npx debuff test で実行して、ゲームをプレイするまで読み飛ばしてください。

ゲームのステートを公開する ​

テストはゲームのスナップショットに対してアサートします。開発ビルドで、JSON にしやすいデータとして追加しましょう。

ts
// src/main.ts
if (import.meta.env.DEV) {
  window.__KEIKO__ = {
    state: () => ({ player: { x: player.x, y: player.y, vx: player.vx }, score, lives }),
    scene: () => currentScene, // 任意
  };
}

import.meta.env.DEV は本番ビルドでは false なので、バンドラーがこのコードを取り除きます。中身はチェックしたいものを入れてください。位置、速度、個数、フラグなどです。TypeScript なら、そのファイルに import type {} from "keiko"; を追加すると window.__KEIKO__ に型が付きます。

ゲームをプレイするのに必要なのはこれだけです。Keiko はあなたの requestAnimationFrame ループをステップ実行し、本物のキーボードとポインターのイベントを送ります。パラメータやコマンド、独自の固定ステップを持つエンジンについてはゲームを公開するを見てください。

テストを書く ​

tests/game.test.ts を作ります。

ts
import { expect, play, test } from "keiko";

interface State {
  player: { x: number; y: number; vx: number };
  score: number;
  lives: number;
}

test("the player walks right while ArrowRight is held", async () => {
  const game = await play<State>();
  const start = game.state.player.x;
  game.hold("ArrowRight", "1s");
  expect(game.state.player.x).toBeAbove(start + 50);
});

TypeScript を使っている場合は、tsconfig.json の include に "tests" を追加してください。

実行する ​

bash
npx keiko
text
keiko 稽古 · practice for web games

pass tests/game.test.ts › the player walks right while ArrowRight is held 41 ms

✔ 1 passed in 612 ms

Keiko は tests/ と src/ にある *.test.ts（と .js、.mts、.mjs）ファイルを見つけます。最初のテストは Vite のウォームアップで少し時間がかかりますが、その後はどのゲームも数十ミリ秒で起動します。

play() がやること ​

  1. 新しいヘッドレスページを開き、index.html のマークアップを読み込みます。
  2. ページのモジュールスクリプト（あなたのゲーム）を Vite 経由で実行します。時計は仮想で、Math.random() にはシードが入ります。
  3. ゲームの最初のネットワークリクエスト（アセットやデータ）が終わるのを待ちます。ready を渡していればそれも待ちます。
  4. 最初のフレームをプレイします。ブラウザがプレイヤーの操作より前に一度描画するのと同じです。

play() は毎回まっさらな新しいゲームです。テスト間で何も持ち越されません。

次へ ​