初めてのenchant.js 010イベント(touchその2)[JavaScript]

前回は「初めてのenchant.js 009イベント(touchその1)[JavaScript]」で、bearにイベントを設定してみました。
今回はbearをドラッグ&ドロップ出来るようにしてみたいと思います。
HTMLの方は特に変更なしで、main.jsをいじっていきます。

完成サンプル

[main.js]

enchant();
window.onload = preloadAssets;

var game;
var scene;
var bear;
var score;


function preloadAssets(){
	game = new Game(320,320);
	game.preload(
		'images/chara0.gif',
		'images/chara1.gif',
		'sounds/jump.wav',
		'sounds/gameover.wav'
	);
	game.onload = init;
	game.start();
}


function init(){
	game.scale = 1;
	scene = new Scene();
	scene.backgroundColor = "#000";
	game.pushScene(scene);
	
	bear = new Sprite(32,32);
	bear.image = game.assets['images/chara1.gif'];
	bear.x = 100;
	bear.y = 100;
	scene.addChild(bear);
	
	score = new Label("0123456");
	score.color = "#FC9";
	score.font = "normal normal 15px/1.0 monospace";
	score.text = "00990";
	scene.addChild(score);	
	
	main();
}


function main(){
	bear.addEventListener(Event.TOUCH_START,touchStart);	
	bear.addEventListener(Event.TOUCH_MOVE,touchMove);	
	bear.addEventListener(Event.TOUCH_END,touchEnd);	
}


function touchStart(e){
	console.log(e.type);
}


function touchMove(e){
	console.log(e.type);
	bear.x = e.x - ( bear.width / 2 );
	bear.y = e.y - ( bear.height / 2 );
}


function touchEnd(e){
	console.log(e.type);
}

コード解説

function main(){
	bear.addEventListener(Event.TOUCH_START,touchStart);	
	bear.addEventListener(Event.TOUCH_MOVE,touchMove);	
	bear.addEventListener(Event.TOUCH_END,touchEnd);	
}

bear(Spriteオブジェクト)に対してaddEventListener()関数を使ってイベントを設定しています。
 TOUCH_STARTは、タッチ開始。
 TOUCH_MOVEは、タッチした状態での移動(移動している間連続で発生します。)
 TOUCH_ENDは、タッチ終了。
それぞれ関数が呼び出される様に設定した。

function touchMove(e){
	console.log(e.type);
	bear.x = e.x - ( bear.width / 2 );
	bear.y = e.y - ( bear.height / 2 );
}

TOUCH_START、TOUCH_ENDは特に何もしていません。(コンソールへの出力のみ)
TOUCH_MOVEで呼び出されるtouchMove関数で、bearをドラッグする仕組を設定しています。
イベントから取得できるマウス位置より、bearの位置を設定しています。
( bear.width / 2 ) は、bearの中心点でドラッグ出来るように補正値をいれています。
気になる方は、子の部分を外して試してみると良いと思います。

このようにイベントを使うことによってオブジェクトに
インタラクションをつけていくことができます。

次回は「初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]」です。

初めてのenchant.js 一覧

こちらもオススメ(別サイト)

enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。

ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です