はじめに
準備
注意点
参考URL
1. 公式API

はじめに

画面のタッチを検出する方法を紹介します。

↓　最終的にこうなります　↓

準備

１、新規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");
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

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);

1	対象のオブジェクト.addEventListener(egret.TouchEvent.TOUCH_TAP, egret.TouchEvent.TOUCH_TAP, 関数, this);

を使用します。

対象のオブジェクト.touchEnabled = true;

1	対象のオブジェクト.touchEnabled = true;

で図形へのタッチを有効化します。

注意点

eui.UILayer等、オブジェクトサイズが全画面の場合は、四角形と背景、どちらもタッチイベントが作動することがありますので、コンソールで一度確認することをお勧めします。

また、ゲームをリトライする際、removeEventListenerをしないと、Eventは重複していきますので注意してください。

タッチするタイミングは「押した瞬間」「押している間」「離した瞬間」など、いろいろあります。

詳細は公式APIより確認してください。

公式API public class TouchEvent

参考URL

公式API

public class TouchEvent

public class Shape (AddEventListenerについてはこちら)

public class DisplayObject（stageについてはこちら）

HTML5 Egret Engine 入門へ戻る