【Egret Engine】画面タッチでイベントを実行する「egret.TouchEvent」
2018-12-25
はじめに
画面のタッチを検出する方法を紹介します。
↓ 最終的にこうなります ↓
準備
１、新規Projectの作成
【Egret Wing】新規Projectの作成とエディタの使い方を参考にして、新規Projectを作成してください。
私は「TestProject」という名前で作成しました。
２、不要ファイルの削除
【Egret Engine】TypeScript の基礎を参考にして、asset等の不要ファイルやコードを削除してください。
画面タッチでイベントを実行する「egret.TouchEvent」
Main.ts
class Main extends eui.UILayer {
public constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.addToStage, this);
}
private addToStage() {
Game.init(this.stage);
egret.startTick(this.tickLoop, this);
}
tickLoop(timeStamp:number):boolean{
return false;
}
}
class Game{
static I : Game;
static mainStage: egret.Stage;
static height: number;
static width: number;
static init(stage:egret.Stage) {
Game.I = this;
Game.height = egret.MainContext.instance.stage.stageHeight;
Game.width = egret.MainContext.instance.stage.stageWidth;
Game.mainStage = stage;
/* メソッドなどを記入*/
new GameStage();
new Background();
new Rect();
}
}
class GameStage extends egret.DisplayObjectContainer{
static display : egret.DisplayObjectContainer = null;
constructor(){
super();
this.initial();
}
initial(){
GameStage.display = new egret.DisplayObjectContainer();
Game.mainStage.addChild(GameStage.display);
}
}
class GameObject extends egret.DisplayObjectContainer{
object: egret.DisplayObjectContainer = null;
static objects: GameObject[] = [];
constructor(){
super();
this.initial();
}
initial(){
this.object = new egret.DisplayObjectContainer();
GameStage.display.addChild(this.object);
GameObject.objects.push(this);
}
}
class Rect extends GameObject{
constructor(){
super();
this.method();
}
method(){
//四角形の描画
let rect:egret.Shape = new egret.Shape();
rect.graphics.beginFill(0xeb8a44);
rect.graphics.drawRect(100,0,100,100);
rect.graphics.endFill();
this.object.addChild(rect);
//四角形へのタッチを有効化
this.object.touchEnabled = true;
this.object.addEventListener(egret.TouchEvent.TOUCH_TAP, this.tap, this);
}
tap(){
egret.log("四角形");
}
}
class Background extends GameObject{
constructor(){
super();
this.method();
}
method(){
//四角形の描画
let rect:egret.Shape = new egret.Shape();
rect.graphics.beginFill(0x8eba43);
rect.graphics.drawRect(0,0,Game.width,Game.height);
rect.graphics.endFill();
this.object.addChild(rect);
//四角形へのタッチを有効化
this.object.touchEnabled = true;
this.object.addEventListener(egret.TouchEvent.TOUCH_TAP, this.tap, this);
}
tap(){
egret.log("back");
}
}クリックやタッチを検出するには、
対象のオブジェクト.addEventListener(egret.TouchEvent.TOUCH_TAP, egret.TouchEvent.TOUCH_TAP, 関数, this);を使用します。
対象のオブジェクト.touchEnabled = true;で図形へのタッチを有効化します。
注意点
eui.UILayer等、オブジェクトサイズが全画面の場合は、四角形と背景、どちらもタッチイベントが作動することがありますので、コンソールで一度確認することをお勧めします。
また、ゲームをリトライする際、removeEventListenerをしないと、Eventは重複していきますので注意してください。
タッチするタイミングは「押した瞬間」「押している間」「離した瞬間」など、いろいろあります。
詳細は公式APIより確認してください。
参考URL
公式API
public class Shape (AddEventListenerについてはこちら)
