LotosLabo

プログラミング技術とか気になった情報を載せていきます

enchant.jsについて

enchant.jsとは

javaScriptでかける、ゲーム開発フレームワークです。


開発環境

インストールは公式サイトより出来ます。
http://enchantjs.com/ja/

Downloadよりしてください。
そしてzipを解凍したら

build -> enchant.min.js
images -> chara1.png
example/beginner/hellobear -> index.html

を持ってきてください。

そして、main.jsを作成します。


main.js

enchant();
window.onload = function(){
};



これだけ記述します。

そしてindex.htmlも編集します。

index.html
例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="enchant.min.js"></script>
    <script src="main.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>



ファイルのパスだけ変更しました。

それではこのmain.jsに色々と追加していきます。

enchant.jsを始める

まず先ほどの画像の中の熊を表示する処理をします。

まず表示する全体をCoreObjectと言います。
そしてその中にrootSceneというものがあり、その中にSpriteと呼ばれる画像を配置することで表示が可能になります。


熊を表示する

例: main.js

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.onload = function() {
		var bear = new Sprite(32,32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		core.rootScene.addChild(bear);
	}
	core.start();
};

まず、enchant() でスタートします。
次にwindowをロードした時に、新しいcoreobjectを320×320のサイズで作成します。
次にキャラ画像を読み込んで、その中の一番左上の熊の画像を32×32で作成します。
そして、x=0,y=0の位置に生成します。
それをrootSceneに追加して、coreをスタートします。

こんなかんじで表示されます。

f:id:lo25131:20140402114701j:plain


熊を動かす

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
		var bear = new Sprite(32,32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		bear.frame = 0;
		bear.addEventListener('enterframe', function(){
			this.x += 10;
			if (this.x > 320) this.x = 0;
			this.rotate(2);
			this.scale(1.01,1.01);
		});
		core.rootScene.addChild(bear);
	}
	core.start();
};



5行目のfpsで一秒間に何回画像が書き換わっているかを指定します。
つまり、移動する速度です。今回は15fpsぐらいにします。

11行目でframeを最初は0に設定します。これは画像の左上の熊を使います。

12行目で動きを追加していきます。イベントでenterframeというのを使います。
画像をx方向に10ずつ追加していきます。
もし320より大きくなったら0に戻ります。
そして2度の角度で回転します。
また、サイズをx,y方向に1.01ずつ大きくしていきます。

f:id:lo25131:20140402120908g:plain


アニメーションを作る

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
		var bear = new Sprite(32,32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		bear.frame = 5;
		bear.addEventListener('enterframe', function(){
			this.x += 5;
			this.frame = this.age % 3 + 5;
			if (this.x > 320) this.x = 0;
		});
		core.rootScene.addChild(bear);
	}
	core.start();
};



11行目のframeでは今回は5を指定しました。これは一番最初に表示する画像なのですが、fpsを小さくしなければ特に見えないのでなんでもいいです。5というのは白い熊の直立ポーズです。

14行目ではアニメーション処理を行っています。frameを指定して、5が直立ポーズなのでそこから3つの画像を指定して、動きをつけるようにしています。
ここでは直立ポーズ、手足を動かしたポーズ左右を3つ使うことで動いているように見せています。

f:id:lo25131:20140402122425g:plain


熊を操作する

十字キーで移動する操作
・マウスクリックで何もない場所にクリックするとその場所に表示する
・熊をクリックすると消える

この3つの処理を組み込みます。

例:

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
		var bear = new Sprite(32,32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		bear.frame = 0;
                //十字キーで操作
		bear.addEventListener('enterframe', function(){			
			if (core.input.left) this.x -= 5;
			if (core.input.right) this.x += 5;
			if (core.input.up) this.y -= 5;
			if (core.input.down) this.y += 5;
	    });
                //タッチしたところに表示
		core.rootScene.on('touchstart', function(e){
			bear.x = e.x;
			bear.y = e.y;
		});
                //熊をタッチすると消える
		bear.on('touchstart',function(){
			core.rootScene.removeChild(this);
		});
		core.rootScene.addChild(bear);
	}
	core.start();
};



14行目より十字キーでそれぞれの方向に5ずつ移動させます。

20行目で、画面上をタッチすることで、e.軸でそこに移動させます。

24行目で、熊をタッチするとルートシーンから熊を削除します。

f:id:lo25131:20140402124843g:plain


ラベルを表示


例:

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
		var bear = new Sprite(32,32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		bear.frame = 0;
		bear.addEventListener('enterframe', function(){
	    });
		var label = new Label();
		label.x = 200;
		label.y = 5;
		label.color = 'red';
		label.font = '14px "Arial"';
		label.text = '0';
		label.on('enterframe', function() {
			label.text = (core.frame /core.fps).toFixed(2);
		});
		core.rootScene.addChild(label);
		core.rootScene.addChild(bear);
	}
	core.start();
};



ラベルを表示し、数字が1秒ずつ増えていく処理をしました。

14行目よりnew Labelでラベルを作成します。
位置、フォント色、フォントのサイズ、種類、テキストの中身を指定します。
そしてテキストをフレーム/fpsで割って1秒の早さを導き出します。

最後にルートシーンに追加します。

f:id:lo25131:20140402125743g:plain


衝突判定とゲームオーバー処理


例:

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
		var bear = new Sprite(32,32);
		bear.image = core.assets['chara1.png'];
		bear.x = 0;
		bear.y = 0;
		bear.frame = 0;
		bear.addEventListener('enterframe', function(){
            //移動
			if (core.input.right) this.x += 5;
		    //衝突処理
			if (this.within(enemy,10)) {
				core.pushScene(gameOverScene);
				core.stop();
			}
	    });
                //敵の設定
		var enemy = new Sprite(32,32);
		enemy.image = core.assets['chara1.png'];
		enemy.x = 80;
		enemy.y = 0;
		enemy.frame = 5;
                //ゲームオーバー処理
		var gameOverScene = new Scene();
		gameOverScene.backgroundColor = 'black';
                //ラベル生成
		var label = new Label();
		label.x = 280;
		label.y = 5;
		label.color = 'red';
		label.font = '14px "Arial"';
		core.rootScene.addChild(label);
		core.rootScene.addChild(bear);
		core.rootScene.addChild(enemy);
	}
	core.start();
};



衝突処理はenemyに当たった時にゲームオーバーシーンが呼び出され、ゲームが停止します。

敵(enemy)に当てるために、enemyを表示しておきます。

ゲームオーバーはシーンを新しく作成し、画面の背景色を黒にします。


f:id:lo25131:20140402131001g:plain


たくさん表示させアニメーションを表示

前使った、var vearからを削除して使います。


例:

enchant();
window.onload = function(){
	var core = new Core(320,320);
	core.preload('chara1.png');
	core.fps = 15;
	core.onload = function() {
var Bear = Class.create(Sprite, {
			initialize: function(x,y) {
				Sprite.call(this,32,32);
				this.x = x;
				this.y = y;
				this.frame = rand(5);
				this.opacity = rand(100) / 100;
				this.image = core.assets['chara1.png'];
				
				this.tl.moveBy(rand(100), 0,40, enchant.Easing.BOUNCE_EASEOUT)
				.moveBy(-rand(100), -rand(20), rand(20))
				.fadeOut(20)
				.fadeIn(10)
				.loop();
				core.rootScene.addChild(this);
			}
		});
		var bears = [];
		for (var i = 0; i< 100; i++){
			bears[i] = new Bear(rand(320),rand(320));
		}
	}
	core.start();
};
function rand(n) {
	return Math.floor(Math.random() * (n+1));
}


f:id:lo25131:20140402132033g:plain