週末で1本ゲームが作れる。Kaboom.js後継のKAPLAYが楽しすぎた

はじめに

「いつかゲームを作ってみたい」と思いながら、UnityやUnreal Engineの学習コストの高さに尻込みした経験はありませんか。エディタの使い方を覚え、C#やC++を学び、ビルド設定と格闘して……気づけば肝心のゲームを1行も作らないまま挫折してしまう。そんな話は珍しくありません。

普段JavaScriptを書いているWebエンジニアなら、もっと近道があります。KAPLAYを使えば、ブラウザとテキストエディタだけで、本当に数十行のコードから動くゲームが作れるのです。実際に触ってみたところ、「遊ぶように作れる」という表現がぴったりの体験だったので、この記事でその魅力を紹介します。

KAPLAYとは

KAPLAY（カプレイ）は、JavaScript/TypeScript向けのオープンソース2Dゲームライブラリです。かつてReplit社が開発していた人気ライブラリ「Kaboom.js」のメンテナンス終了を受けて、コミュニティが開発を引き継いだ後継プロジェクトで、現在も活発に更新が続いています。

「fun-first（楽しさ第一）」を掲げており、ゲームを作る過程そのものがゲームのように楽しいことを重視した設計になっています。

主な特徴

直感的なコンポーネントベースAPI - add([sprite("bean"), pos(80, 40), body()]) のように、機能を配列で組み合わせるだけでゲームオブジェクトが完成します
物理エンジン・衝突判定を標準搭載 - 重力、ジャンプ、当たり判定といったゲームの基本要素が組み込み済みで、外部ライブラリは不要です
TypeScript完全対応 - 型定義が同梱されており、エディタの補完を受けながら快適に開発できます
KAPLAYGROUNDで即体験 - ブラウザ上のプレイグラウンドに90以上のサンプルが用意されており、インストールせずに試せます

インストール

一番手軽なのは、公式のスキャフォールディングツールを使う方法です。

npx create-kaplay my-game
cd my-game
npm run dev

既存プロジェクトに追加する場合は、各パッケージマネージャーでインストールできます。

# npm
npm install kaplay

# yarn
yarn add kaplay

# pnpm
pnpm add kaplay

ビルドツールを使わずに試したい場合は、CDNから直接読み込むこともできます。

<script src="https://unpkg.com/kaplay@3001/dist/kaplay.js"></script>

基本的な使い方

まずは「スペースキーでジャンプするキャラクター」を作ってみましょう。これだけのコードで、重力・地面・ジャンプが揃ったゲームの土台が動きます。

import kaplay from "kaplay";

// ゲームの初期化（キャンバスが自動生成されます）
kaplay({
  background: "#87ceeb",
});

// 公式マスコット「bean」のスプライトを読み込み
loadSprite("bean", "https://play.kaplayjs.com/bean.png");

// 重力を設定
setGravity(1600);

// プレイヤーを追加
const player = add([
  sprite("bean"),   // 見た目
  pos(120, 80),     // 初期位置
  area(),           // 当たり判定
  body(),           // 物理挙動（重力の影響を受ける）
]);

// 地面を追加
add([
  rect(width(), 48),      // 画面幅いっぱいの矩形
  pos(0, height() - 48),
  area(),
  body({ isStatic: true }), // 動かない物体
  color(127, 200, 255),
]);

// スペースキーでジャンプ
onKeyPress("space", () => {
  if (player.isGrounded()) {
    player.jump();
  }
});

注目してほしいのは add() に渡している配列です。KAPLAYでは、sprite() や body() といったコンポーネントを組み合わせてゲームオブジェクトを定義します。「見た目が欲しければ sprite()、物理挙動が欲しければ body() を足す」というシンプルなルールなので、覚えることが非常に少なく済みます。

実践的なユースケース

次は一歩進めて、障害物を避け続けるミニゲームを作ってみます。スコア表示、ゲームオーバー、リトライまで含めた「遊べる」構成です。

import kaplay from "kaplay";

kaplay({ background: "#1f102a" });

loadSprite("bean", "https://play.kaplayjs.com/bean.png");
setGravity(2400);

// ゲーム本編のシーン
scene("game", () => {
  let score = 0;

  const player = add([
    sprite("bean"),
    pos(80, 40),
    area(),
    body(),
  ]);

  // 地面
  add([
    rect(width(), 48),
    pos(0, height() - 48),
    area(),
    body({ isStatic: true }),
    color(72, 61, 139),
  ]);

  onKeyPress("space", () => {
    if (player.isGrounded()) {
      player.jump(900);
    }
  });

  // 一定間隔で障害物を生成
  loop(1.2, () => {
    add([
      rect(48, rand(24, 72)),
      pos(width(), height() - 48),
      anchor("botleft"),
      area(),
      move(LEFT, 320),   // 左方向へ移動
      offscreen({ destroy: true }), // 画面外に出たら削除
      color(238, 143, 203),
      "obstacle",        // タグを付けておく
    ]);
  });

  // 障害物に当たったらゲームオーバー
  player.onCollide("obstacle", () => {
    go("gameover", score);
  });

  // スコア表示
  const scoreLabel = add([text("0"), pos(24, 24)]);
  onUpdate(() => {
    score += dt();
    scoreLabel.text = Math.floor(score).toString();
  });
});

// ゲームオーバーのシーン
scene("gameover", (score) => {
  add([
    text(`Game Over\nScore: ${Math.floor(score)}\n[Space] Retry`),
    pos(center()),
    anchor("center"),
  ]);
  onKeyPress("space", () => go("game"));
});

go("game");

わずか60行ほどですが、ポイントがいくつも詰まっています。

scene() と go() - タイトル画面、本編、ゲームオーバーといった画面遷移を宣言的に管理できます
タグと onCollide() - オブジェクトに "obstacle" のような文字列タグを付けておくと、タグ単位で衝突イベントを処理できます
loop() と offscreen() - 敵の定期生成や画面外オブジェクトの自動破棄など、ゲームで頻出する処理がワンライナーで書けます

このコードをベースにスプライトを差し替え、効果音（loadSound() と play()）を足すだけで、オリジナルゲームとして十分成立します。筆者はこの構成から始めて、週末のうちに友人に遊んでもらえるレベルのミニゲームまで持っていけました。

ゲームジャムへの参加作品、プログラミング教育の教材、自社サイトに埋め込む販促ミニゲームなど、「短期間でWeb上に動くゲームを出したい」場面全般でKAPLAYは強力な選択肢になります。