Help us understand the problem. What is going on with this article?

Kiwi.jsを使ってみる

More than 5 years have passed since last update.

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です。
kiwilogo.png

なお、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を直接コンパイルするには、以下の手順でコンパイルが可能です。

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

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

  • VisualStudio
  • Visual Studio Code
  • WebStorm
  • Eclipse + TypEcs
  • Sublime Text + T3S
  • Vim

おわりに

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

以上です。

tkyaji
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした