HTML5ゲームフレームワークのKiwi.jsが、結構良さそうだったのでちょっと使ってみました。
Kiwi.js
#特徴
- オープンソース (GitHub)
- Canvas, WebGLに対応
- ドキュメント、チュートリアル、サンプル等が充実
- プラグインで機能を追加できる（Plugins）
- TypeScriptで書きやすい
- ネイティブアプリ化するにはCocoonJSを活用する
Kiwi.js自体がTypeScriptで開発されており、TypeScriptで書くのに非常に向いています。
ドキュメント等はほとんどJavaScriptで説明されていますが、元がTypeScriptなので、
容易に読み替えることができると思います。
ただし、プラグインについてはJavaScriptのみで提供されているようで、
TypeScriptの定義ファイル（xxx.d.ts）も存在しないようでした。
以下に各APIのサンプルコードがあり、ここを見れば使い方はだいたいわかるかと思います。
Kiwi.js Examples
プラグインのサンプル等を含め、かなり詳細に記載されています。
BluePrintと呼んでいるテンプレートアプリがいくつか用意されており、
一から作らなくても、それらを元に改変しながら開発することも可能です。
※BluePrintといってもUnreal Engineのやつとは全く関係ありません
iOS／Androidでネイティブアプリ化するにはCocoonJSを使ってね、という感じのようです。
この辺はちょっと面倒な気がしますが、CocoonJS自体は使い易いように見えるので、
面倒なのは最初だけかもしれません。
JavaScriptでゲーム等をゴリゴリコーディングするのは、個人的には結構ストレスが溜まる感じなのですが、
TypeScriptだと補完も効くし書き易くて、とてもいい感じです。
#Phaserとの関係
Kiwi.jsは、同様のHTML5ゲームエンジンのPhaserに非常によく似ていて、
Kiwi.jsのWebサイトにも、**PHASER.JS (KIWI LITE)**とだけ書かれたページがあります。
Kiwi.jsとPhaserの関係については以下のフォーラムのやりとりで言及されていました。
http://www.html5gamedevs.com/topic/4281-kiwijs-vs-phaser/
それによると、
- Kiwi.jsは機能が多く、さらにTypeScriptで実装しなおしたりして公開までに時間がかかった
- そのため、Kiwi.js公開前に、一足先にKiwi.jsの軽量版をPhaserとして公開した
- Phaserを先に公開してしまったら、結構使われて人気が出た。
という経緯のようです。現在もPhaserの方が圧倒的に人気があります。
＃Kiwi.jsの中の人は面白くないだろうなぁ、と思ってしまう。
PhaserはPixi.jsを使用し、JavaScriptで実装されていますが、.d.tsファイルが同梱されているので、
TypeScriptでの開発も可能です。
#HelloWorld (JavaScript)
HelloWorldのソースが用意されているので、とりあえずそれを動かしてみます。
以下のページの
http://www.kiwijs.org/documentation/getting-started-with-kiwi-js-in-javascript/
「Download and unzip the Hello World test folder.」というリンクから、ファイル一式をダウンロードします。
この中にはフレームワークのjsファイルは含まれていないので、
ダウンロードしたkiwi.jsファイルを、同じディレクトリにコピーします。
Canvasの中に以下の画像が表示されていればOKです。
なお、Kiwi.RENDERER_CANVASを、Kiwi.RENDERER_WEBGLに変えるとWebGLで実行されます。
※SecurityErrorが出る場合、Chromeの場合は起動時に--allow-file-access-from-filesオプションを付けてください
#HelloWorld (TypeScript)
次に、HelloWorldのソースをTypeScriptで書き換えてみます。
HelloWorldのサンプルでは、helloworld.htmの中に直接JavaScriptを書いてしまっているので、
外部ファイルに書くように修正します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kiwi.js - Hello World</title>
</head>
<body>
<script src="kiwi.js"></script>
<script type="text/javascript" src="helloworld.js"></script><!-- ←ここを変更 -->
</body>
</html>
次にTypeScriptで書いたhelloworld.tsファイルを作ります。こんな感じです。
/// <reference path="kiwi.d.ts"/>
class MyState extends Kiwi.State {
private logo:Kiwi.GameObjects.StaticImage
public constructor() {
super("my_state")
}
public preload() {
super.preload()
this.addImage("logo", "kiwilogo.png")
}
public create() {
super.create()
this.logo = new Kiwi.GameObjects.StaticImage(this, this.textures["logo"], 100, 100)
this.addChild(this.logo)
}
public update() {
super.update()
}
}
var game = new Kiwi.Game(null, "Hello World", null, {renderer: Kiwi.RENDERER_CANVAS})
game.states.addState(new MyState(), true)
helloworld.tsと同じディレクトリに、kiwi.d.tsファイルを置いておいてください。
kiwi.d.tsはGitHubのbuildディレクトリにあるものをコピーします。
helloworld.tsを作ったら、これをhelloworld.jsにコンパイルします。
helloworld.htmを実行し、同じように画像が表示されればOKです。
#（補足）TypeScriptのエディタとコンパイルについて
TypeScriptのエディタには、私はAtomをオススメします。
Atom + atom-typescript
Atom自体にNode.jsが含まれているため、別途Node.jsをインストールしなくても、
上記だけでTypeScriptのコンパイルができます。（たぶん…）
.tsを保存するだけで.jsに自動でコンパイルされ、さらにtsconfig.jsonが自動生成されます。
自動補完も効き、コンパイルエラーも表示されます。
ただ、AtomはChromiumベースなのでエディタとしては重めです。
Atomを使わず、TypeScriptを直接コンパイルするには、以下の手順でコンパイルが可能です。
- Node.jsをインストール
npm install -g typescripttsc helloworld.ts
ちなみにAtom以外のTypeScriptのエディタとしては、以下のようなものがあります。
#おわりに
軽く動かしてみた程度ですが、結構使い易い印象です。
もう少し使ってみたら、また記事を書くかもしれません。
以上です。