OSS探訪
GitHubでログイン
GitHubで見るプロジェクトサイト

部品を組み合わせるAPIとブラウザー上の試作環境で2Dゲームを作る

OSS規模スコア 199.8OSS健全度 88更新ペース 5 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
1,809
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/10/03
ページ内ナビ

概要

KAPLAYは、JavaScriptとTypeScriptで2Dゲームを作るためのライブラリです。スプライト、位置、当たり判定、物理挙動、体力などの部品をゲームオブジェクトへ組み合わせ、更新処理や入力イベントをコードで記述します。ブラウザー上のKAPLAYGROUNDでは、環境構築前にコードと多数の例を試せます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

主な特徴

ゲームオブジェクトへ必要な振る舞いを組み合わせる

addへsprite、pos、area、body、healthなどを渡し、描画、座標、当たり判定、物理挙動、状態を一つのゲームオブジェクトへ構成できます。タグを使って複数の敵をまとめて更新するなど、場面に応じた振る舞いも記述できます。

出典：[1]

入力、衝突、毎フレームの処理をイベントで結ぶ

onKeyDownでキー入力を移動へ結び付け、onCollideで衝突時の処理を定義し、onUpdateで毎フレームの状態を更新できます。画像を読み込んでスプライトとして配置する最小例から、段階的にゲームの規則を追加できます。

出典：[1]

向いている用途

2Dゲームの学習、試作、ブラウザー向け制作に向く

JavaScriptやTypeScriptを使って2Dゲームの仕組みを学びたい人、操作感やルールをすばやく試したい開発者に向きます。KAPLAYGROUNDには90件を超える例が案内されており、APIを確認しながらブラウザーで挙動を試す入口として利用できます。

出典：[1]

導入前の確認

配布方法、名前空間、採用する版を決める

npmなどで導入する場合はViteやesbuildのようなバンドラーが必要です。グローバルAPIは学習や試作には簡潔ですが、READMEは公開用ゲームではグローバル名前空間を避ける選択肢を案内しています。規模が大きくなる場合はモジュールとして読み込み、素材管理、画面構成、入力方式、性能確認を別途設計します。

安定版3001.0.19が公開されている一方、既定ブランチのpackage.jsonは4000.0.0-alpha.27.1を示し、パッケージ開発・ビルド環境のNode.js要件も、安定版の20以上から開発版では24以上へ変わっています。コード例や型定義の差を混在させず、安定版か開発版かを決めて依存版と資料をそろえてください。

出典：[1][2][3][4]

参考にした公式資料

  1. [1]KAPLAY 3001.0.19 README(2026-10-04)
  2. [2]KAPLAY 3001.0.19 package manifest(2026-10-04)
  3. [3]KAPLAY package manifest at reviewed commit(2026-10-04)
  4. [4]KAPLAY 3001.0.19 release(2026-10-04)
編集部からの補足

短いコードで2Dゲームの動きを試し、必要な機能を部品として追加していく設計が分かりやすいライブラリです。学習や試作ではKAPLAYGROUND、本格的な開発ではnpmパッケージとバンドラーを使い、採用する版を固定して進めると比較しやすくなります。

3ステップで試す

  1. 1

    KAPLAYGROUNDを開く

    現在の公式ブラウザー試作環境を開きます。KAPLAYGROUND自体は安定版3001.0.19への固定を保証しないため、この手順は現在の試作用APIを確認するものです。

    https://play.kaplayjs.com
  2. 2

    最小のゲームコードを入力する

    現在のKAPLAYGROUNDが既定で公開するグローバルkaplay APIを使い、bean.png画像を読み込んで配置します。

    kaplay({ background: "#6d80fa" }); loadSprite("bean", "https://play.kaplayjs.com/bean.png"); add([sprite("bean")]);
  3. 3

    実行結果を確認する

    画面上の「Run」を押し、青い背景にbeanの画像が表示されることを確認します。

    Run
公式READMEで確認

成長

成長の推移 · 直近30日

1,809 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
5
Open PR
27

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • javascript
  • game-dev
  • game-library
  • kaboom-js
  • kaboomjs
  • game-development
  • game-engine
  • typescript
Stars
1,809
Forks
119
Watchers
11
Open Issues
69
Contributors
95
所有者種別
Organization
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/10/03
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？