見出し画像

ゲームエンジンのkaboom.jsの良いところ3点

2DゲームエンジンをGitHubで探すのが日課なのですが、たまたま見つけた「kaboom.js」が良かったので紹介します。

kaboom.jsはJavaScript用の2Dゲームエンジンです。概要として公式サイトには次のように書いてあります。

Kaboom.js is a Javascript game programming library that helps you make games fast and fun.

公式サイトより

"fast and fun"とあるとおり、実際に触ってみると、一瞬でスーパーマリオのようなアクションゲームが作れる気がしました。
今回は私が「これはゲームが簡単に早く作れる!」と感じたポイントを3点紹介します。

・アクションゲームに特化している
・デフォルトでキャラクター画像が用意されている
・ライブラリの関数がすべてグローバル関数になっている

まずはチュートリアル紹介

3点を紹介する前に、今回私が動かしたソースコードを紹介ます。ほんの30行ですがこれだけで、プレイヤーがジャンプするゲームの完成です。

<!DOCTYPE html>
<head>
  <script src="https://unpkg.com/kaboom@3000.0.1/dist/kaboom.js"></script>
</head>
<body>
  <script>
// start the game
kaboom()

// define gravity
setGravity(2400)

// load a default sprite
loadBean()

// add character to screen, from a list of components
const player = add([
    sprite("bean"),  // renders as a sprite
    pos(120, 80),    // position in world
    area(),          // has a collider
    body(),          // responds to physics and gravity
])

// jump when player presses "space" key
onKeyPress("space", () => {
    // .jump() is provided by the body() component
    player.jump()
})
    </script>
</body>
完成したゲーム

緑色のキャラクターは私が描いたのではなく、デフォルトで用意してある画像です。続いて「これはゲームが簡単に早く作れる!」と感じたポイント3点です。

2Dアクションゲームに特化している

ゲームといってもいろいろあります。描画として2Dと3Dがあり、ゲームの種類としてアクションゲーム、RPG、カードゲームなどがあります。その中でもこのライブラリは2Dのアクションゲームに特化しています。
アクションゲームとは、物理法則を利用したゲームです。たとえばスーパーマリオをイメージするとわかりやすいですが、ボタンを押すと上にジャンプし、重力で下に落ちてきます。これを利用して壁を乗り越えたり、敵をよけたりします。このライブラリではこのような実装が数行でできてしまいます。

重力の設定

setGravity(2400)

ジャンプの設定

// jump when player presses "space" key
onKeyPress("space", () => {
    // .jump() is provided by the body() component
    player.jump()
})

特にjump()というメソッドがデフォルトで用意されてるライブラリはあまりないのですごいと思いました。今回の例ではジャンプのみですが地面のブロックを置いたり、クリボーなどの敵を置いて当たったら死ぬような処理も簡単に書けます。

デフォルトで画像が用意されている

ゲームを作るときに意外に面倒なのは、画像を用意することです。
気持ちとしては、まずは動くゲームを作り、後から画像を用意したいので、最初とからとりあえず画像が用意されているのはありがたいです。
"loadBean()"と書くだけで、緑のキャラクターが使えます。見た目があまりかわいくないですが、"とりあえずの絵"としては十分です。

かわいくはないキャラ

ライブラリの関数がすべてグローバル関数になっている

最後はライブラリ全体の考え方についてです。
このライブラリは"add"や"onKeyPress"など、多くの関数がグローバル関数になっています。よくあるライブラリだと、たとえば"kaboom.body.add"のように階層化されているので、タイピング量が多くなりがちですが、kaboom.jsでは"add"で済むのでスッキリ書けます。ただこれは階層化した方がよいこともあるので絶対的にkaboom.jsが良いとは言えませんが、少なくとも「サッとゲームを作る」という目的に対してはとてもよい設計だと思います。

以上、kaboom.jsを触ってみて「これはゲームが簡単に早く作れる!」と感じたポイント3点です。ちょっとしたスキマ時間でもゲームが作れちゃうのでよかったら遊んでみてください。公式サイトのチュートリアルの通りにやればマリオとクリボー程度のゲームが完成しますので是非。


この記事が気に入ったらサポートをしてみませんか?