Kiwi.jsを使ってみる

HTML5ゲームフレームワークの`Kiwi.js`が、結構良さそうだったのでちょっと使ってみました。
[Kiwi.js](http://www.kiwijs.org/)

#特徴
- オープンソース ([GitHub](https://github.com/gamelab/kiwi.js))
- Canvas, WebGLに対応
- ドキュメント、チュートリアル、サンプル等が充実
- プラグインで機能を追加できる（[Plugins](http://www.kiwijs.org/documentation/kiwi-js-plugin-tutorials/)）
- TypeScriptで書きやすい
- ネイティブアプリ化するには[CocoonJS](https://www.ludei.com/cocoonjs/)を活用する

Kiwi.js自体がTypeScriptで開発されており、TypeScriptで書くのに非常に向いています。
ドキュメント等はほとんどJavaScriptで説明されていますが、元がTypeScriptなので、
容易に読み替えることができると思います。
ただし、プラグインについてはJavaScriptのみで提供されているようで、
TypeScriptの定義ファイル（xxx.d.ts）も存在しないようでした。

以下に各APIのサンプルコードがあり、ここを見れば使い方はだいたいわかるかと思います。
[Kiwi.js Examples](http://examples.kiwijs.org/)
プラグインのサンプル等を含め、かなり詳細に記載されています。

[BluePrint](http://www.kiwijs.org/blueprints/)と呼んでいるテンプレートアプリがいくつか用意されており、
一から作らなくても、それらを元に改変しながら開発することも可能です。
※BluePrintといってもUnreal Engineのやつとは全く関係ありません

iOS／Androidでネイティブアプリ化するには[CocoonJSを使ってね](http://www.kiwijs.org/documentation/tutorials/using-kiwi-js-with-cocoon-js-on-ios/)、という感じのようです。
この辺はちょっと面倒な気がしますが、CocoonJS自体は使い易いように見えるので、
面倒なのは最初だけかもしれません。

JavaScriptでゲーム等をゴリゴリコーディングするのは、個人的には結構ストレスが溜まる感じなのですが、
TypeScriptだと補完も効くし書き易くて、とてもいい感じです。

#Phaserとの関係
Kiwi.jsは、同様のHTML5ゲームエンジンの[Phaser](https://phaser.io/)に非常によく似ていて、
Kiwi.jsのWebサイトにも、**PHASER.JS (KIWI LITE)**とだけ書かれた[ページ](http://www.kiwijs.org/phaserjs-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です。
![kiwilogo.png](https://qiita-image-store.s3.amazonaws.com/0/19872/1b597723-9ce5-2db7-d14c-d74ba0acae26.png)

なお、`Kiwi.RENDERER_CANVAS`を、`Kiwi.RENDERER_WEBGL`に変えるとWebGLで実行されます。
※SecurityErrorが出る場合、Chromeの場合は起動時に`--allow-file-access-from-files`オプションを付けてください


#HelloWorld (TypeScript)
次に、HelloWorldのソースをTypeScriptで書き換えてみます。
HelloWorldのサンプルでは、`helloworld.htm`の中に直接JavaScriptを書いてしまっているので、
外部ファイルに書くように修正します。

```html
<!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`ファイルを作ります。こんな感じです。

```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](https://atom.io/) + [atom-typescript](https://atom.io/packages/atom-typescript)

Atom自体にNode.jsが含まれているため、別途Node.jsをインストールしなくても、
上記だけでTypeScriptのコンパイルができます。（たぶん…）
`.ts`を保存するだけで`.js`に自動でコンパイルされ、さらに`tsconfig.json`が自動生成されます。
自動補完も効き、コンパイルエラーも表示されます。
ただ、AtomはChromiumベースなのでエディタとしては重めです。

Atomを使わず、TypeScriptを直接コンパイルするには、以下の手順でコンパイルが可能です。

1. Node.jsをインストール
1. `npm install -g typescript`
1. `tsc helloworld.ts`

ちなみにAtom以外のTypeScriptのエディタとしては、以下のようなものがあります。

- VisualStudio
- Visual Studio Code
- WebStorm
- Eclipse + [TypEcs](http://typecsdev.com/)
- Sublime Text + [T3S](https://github.com/Railk/T3S)
- Vim


#おわりに
軽く動かしてみた程度ですが、結構使い易い印象です。
もう少し使ってみたら、また記事を書くかもしれません。


以上です。