前回は「初めての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 001 基本的なこと[JavaScript]
- 初めてのenchant.js 002 基本セッティング[JavaScript]
- 初めてのenchant.js 003シーンの表示[JavaScript]
- 初めてのenchant.js 004画像の表示[JavaScript]
- 初めてのenchant.js 005文字の表示[JavaScript]
- 初めてのenchant.js 006音を鳴らす[JavaScript]
- 初めてのenchant.js 007ちょっとごちゃってきたのでリファクタリング[JavaScript]
- 初めてのenchant.js 008イベント(基本編)[JavaScript]
- 初めてのenchant.js 009イベント(touchその1)[JavaScript]
- 初めてのenchant.js 010イベント(touchその2)[JavaScript]
- 初めてのenchant.js 011イベント(ENTER_FRAME)[JavaScript]
- 初めてのenchant.js 012イベント(キーボード)[JavaScript]
- 初めてのenchant.js 013当たり判定[JavaScript]
- 初めてのenchant.js 014オブジェクトの拡張[JavaScript]
- 初めてのenchant.js 015簡単なミニゲーム作成[JavaScript]
こちらもオススメ(別サイト)
enchant.js 怒涛の 100 tips
phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになるはず。
ドットインストール:enchant.jsの基礎
こちらは、逆にうーん説明見てもよくわからんなぁーって人向け、登録は必要だけど、ビデオをみながら説明が入るのでチョー分かりやすい&enchant.js以外にも様々なレッスンビデオがやばいくらいいっぱい。しかも無料ときたもんだ。
コメントを残す