KAPLAY とは｜部品を並べてブラウザ向けの2Dゲームを作るライブラリ
KAPLAY は、ブラウザで動く2Dゲームを作るための JavaScript と TypeScript のライブラリです。ゲームの中の物を、位置・当たり判定・体力といった部品の並びとして組み立てます。
- 分類
- ゲームエンジン・フレームワーク
- 制作の流れ
- 開発ツール
- 日本語対応
- 日本語非対応
- 費用
- 無料（MIT ライセンス）
- 公式サイト
- https://kaplayjs.com/確認日 2026-09-18
KAPLAY の概要
KAPLAY（カプレイ）は、ブラウザで動く2Dのゲームを作るための JavaScript と TypeScript のライブラリです。公式サイトは「KAPLAY (/ˈkæpleɪ/) is a JavaScript and TypeScript game library that makes it easy to create games for the web.（KAPLAY は、ウェブ向けのゲームを作りやすくする JavaScript と TypeScript のゲームのライブラリです）」と書いています。
公式のリポジトリは、KAPLAY を2Dのゲームのライブラリとし、ゲームを作っている最中もゲームのように感じられることを狙って作ったとしています。公式のリポジトリの話題の札には、もとになった企画を指す kaboom-js が残っています。
公式サイトは、KAPLAY がオープンソースで、無料で、これからもずっとそうであるとしています。
KAPLAY の特徴
KAPLAY は部品を並べて物を組みます
KAPLAY では、ゲームの中の1つの物を、部品の並びとして add() に渡して作ります。公式のリポジトリが挙げている部品は次のとおりです。
| 部品 | 何を足すか |
|---|---|
sprite() |
絵として描かれるようにします |
rect() |
四角として描かれるようにします |
pos() |
位置（座標）を持たせます |
area() |
当たり判定を持たせます |
body() |
物の動きの計算に従う体を持たせます |
health() |
体力を持たせます |
text() |
文字を描きます |
outline() |
輪郭を描きます |
anchor() |
位置の基準となる点を決めます |
物には札（タグ）と、自由な値の組も一緒に渡せます。札を使うと、同じ札を持つ物をまとめて動かせます。振る舞いは player.onCollide("enemy", …)、player.onUpdate(…)、onKeyDown("w", …) のように、起きたことに応じて呼ばれる形で書きます。
自分で部品を作ることもできます。公式サイトは、識別子と add() を持つ対象を返す関数として書く例を載せています。
KAPLAY の入れ方
公式のリポジトリは、入れ方を3通り示しています。
| 入れ方 | 命令・書き方 |
|---|---|
| 雛形から始める | npx create-kaplay my-game を実行し、http://localhost:5173 を開いて src/game.js を書き換えます |
| パッケージの管理から入れる | npm install kaplay／yarn add kaplay／pnpm add kaplay／bun add kaplay |
| ブラウザで直に読み込む | 配信網の URL を script の要素で読み込みます |
パッケージの管理から入れた場合は、Vite や ESBuild のようなまとめ上げのツールが要ると書かれています。
KAPLAY の TypeScript への対応
公式サイトは、TypeScript への対応が最初から入っていることを、掲げる4点の1つにしています。
公式のリポジトリには、型の読み込み方が2通り書かれています。import "kaplay/global"; と書いて全体に行き渡る型を読み込む形と、tsconfig.json の types に型の宣言のファイルを書く形です。公式のリポジトリは、後者を勧めています。ゲームを公開する段になったら、全体に行き渡る形は使わない方がよいという断りも添えられています。
型だけを個別に読み込むこともできて、import type { TextCompOpt } from "kaplay" のような書き方と、import type * as KA from "kaplay" のようにまとめて読み込む書き方が示されています。
KAPLAY の試し場と資料
公式サイトは、ブラウザの上で動く編集の場として KAPLAYGROUND を用意しています。公式のリポジトリは、そこで即座にコードを試せること、例が90本以上あることを書いています。
公式の資料には、始め方・入れ方・基本の考え方・ゲームの中の物・部品の解説と、Chrome の恐竜のようなゲームを作る手引きが並びます。多人数プレイについては、Colyseus と組み合わせる手引きが別に置かれています。資料の頁には、KAPLAY がまだ新しいオープンソースの企画で、資料も進んでいる途中だという断りが入ります。
KAPLAY の費用とライセンス
KAPLAY は無料です。公式のリポジトリは、ライセンスを MIT ライセンスとしています。
MIT ライセンスとは
MIT ライセンス（MIT License）は、著作権の表示とライセンス文を残せば、商用も含めて自由に使ってよいとする短い決まりです。
| 項目 | 内容 |
|---|---|
| 費用 | 無料 |
| ライセンス | MIT ライセンス |
| 作っているところ | KAPLAY Team と中心の貢献者（ほかに82名以上の貢献者） |
| 入手の方法 | npx create-kaplay／npm・yarn・pnpm・bun／配信網の URL |
| 版 | v4000（先行して試せる版が公式サイトで案内されています） |
公式サイトには寄付と貢献の入口があります。素材については、公式のリポジトリが謝辞の節を設けていて、色の組（mulfok32）、burp() の音、例で使っている素材、いくつかの書体について、それぞれ提供元の名前を挙げています。
- KAPLAY｜公式サイトhttps://kaplayjs.com/
情報源
- KAPLAY — 公式サイト（KAPLAY の定義・掲げる4点・部品を並べる書き方の例・自分で部品を作る例・無料であること）https://kaplayjs.com/確認日 2026-09-18
- kaplayjs/kaplay — 公式リポジトリ（2Dのライブラリであること・部品の一覧・札と振る舞いの書き方・入れ方3通り・TypeScript の型の読み込み・ライセンス・謝辞）https://github.com/kaplayjs/kaplay確認日 2026-09-18
- KAPLAY Guides — 公式の資料（資料の並び・最初のゲームの手引き・Colyseus と組み合わせる手引き・資料が進行中である断り）https://kaplayjs.com/docs/確認日 2026-09-18