Tiny Game Engine !? LittleJS を試してみる。

こんにちは k-jun です。今回は、極小のゲームエンジンライブラリ LittleJS を試してみます。

https://github.com/KilledByAPixel/LittleJS

README.md を見る限りでは、結構自由度が高そうです。2D に限定されているとはいえ、めちゃくちゃ重いはずの Game Engine が軽めに使用できそうでワクワクです。

Setup

github に全てのファイルが収まってるってすごいですよね。一旦 examples のディレクトリに格納されているゲームを遊んでみます。

$ git clone https://github.com/KilledByAPixel/LittleJS.git
$ LittleJS
$ python -m http.server 7777

http://localhost:7777 にアクセスしてみると、何やらパズルゲームが出迎えてくれます。

f:id:K-jun1221:20211030222038p:plain

http://localhost:7777/examples/ に階層を降りると、ゲームディレクトリが並んでいます。一通り見てみる。

f:id:K-jun1221:20211030222053p:plain

breakout

f:id:K-jun1221:20211030222155p:plain

platformer

f:id:K-jun1221:20211030222205p:plain

puzzle

f:id:K-jun1221:20211030222224p:plain

stress

f:id:K-jun1221:20211030222304p:plain

すごすぎ。特に platformer なんてどうやったらコレがあんなに小さいファイルたちで作れるのかわからないぐらいに完成度が高い。どうなってるんだ。

platformer の中身を見てみます。index.html の中身はこれだけ。

<html><head><title>LittleJS Platformer Example</title>
<meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1>
<link rel=icon type=image/png href=../../favicon.png>
</head><body>

<script src=../../engine/engine.all.js?53></script>
<script src=gameObjects.js?53></script>
<script src=gamePlayer.js?53></script>
<script src=gameEffects.js?53></script>
<script src=gameLevel.js?53></script>
<script src=game.js?53></script>

各種ファイルにそれぞれの設定が記述されているようです。驚くことにどのファイルも 400 行以下で記述されています。すごいなぁ。 精査してみていくと、どのゲームも以下のような構成で記述されているようです。gameUpdate() が 1秒間に 60 回程度実行され、ゲームを rendering しているようです。

/*
    LittleJS Hello World Starter Game
*/
'use strict';

///////////////////////////////////////////////////////////////////////////////
function gameInit()
{
}

///////////////////////////////////////////////////////////////////////////////
function gameUpdate()
{
}

///////////////////////////////////////////////////////////////////////////////
function gameUpdatePost()
{

}

///////////////////////////////////////////////////////////////////////////////
function gameRender()
{
}

///////////////////////////////////////////////////////////////////////////////
function gameRenderPost()
{
}

///////////////////////////////////////////////////////////////////////////////
// Startup LittleJS Engine
engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, 'tiles.png');

何か面白いものを作れればと思いましたが、僕の拙いゲーム力と、フロント力では何も生み出せませんでした...。 Unity などに詳しい方お願いします。それでは今回はこの辺で。