kiwi.js入門: 背景画像を表示、クリック回数を描画 #Kiwi.js

参考

Kiwi.JS Examples

必要なファイル

kiwi.js
bg.png : 適当な画像をご用意ください。
index.html : これから作ります。
gettingStarted.js : これから作ります。

出来上がるもの

背景画像(bg.png)の表示
背景画像をクリックしたらクリック回数が表示されます。

作成

Clicking a spriteを参考。

index.html

<meta charset=utf-8 />
<script type="text/javascript" src="kiwi.js"></script>
<script type="text/javascript" src="gettingStarted.js"></script>

gettingStarted.js

//描画サイズ
var gameOptions = {
    width: 768,
    height: 512
};

// stateをPlayにセット
var state = new Kiwi.State('Play');

//spaceにbg.pngを割当て。以降spaceという名前で参照できる
state.preload = function () {
    this.addImage('space', 'bg.png');
};

// 即時関数。実行内容を定義
state.create = function () {
    //背景の定義
    this.space = new Kiwi.GameObjects.Sprite(this, this.textures.space);
    //文字の定義
    this.textField = new Kiwi.GameObjects.Textfield(this, '');
    this.textField.x = this.game.stage.width / 2;
    this.textField.y = 10;
    this.textField.color = '#FFFFFF';
    this.textField.fontFamily = 'Roboto, sans-serif';
    this.textField.textAlign = Kiwi.GameObjects.Textfield.TEXT_ALIGN_CENTER;
    //文字用のカウンター。クリックした回数用
    this.counter = 0;
    //背景を有効にする
    this.addChild(this.space);
    //文字を有効にする
    this.addChild(this.textField);
    //イベントハンドラ(背景をクリックするとstate.clickedの処理を行う)
    this.space.input.onUp.add(this.clicked, this);
};

//背景をクリックするとstate.clickedの処理を行う
state.clicked = function(){
    this.counter++;
    this.textField.text = this.counter + ' 回クリックしました。';
};

var game = new Kiwi.Game('game-container', 'LoadingAnImage', state, gameOptions);

起動

python -m SimpleHTTPServer

http://localhost:8000/ にアクセスし動作することを確認。

今回使わなかったが、スプライト画像を頂いておく。

enchant.jsでHTML5＋JavaScriptゲーム開発入門（3）：enchant.jsで重要なスプライトとシーンを使うには (2/4) - ＠ITからスプライト画像を拝借。