【Egret Engine】画像にクリック判定やTouchEventを付与する方法

投稿者: | 2019年1月7日

はじめに

画像に「pixelHitTest」や「touchEnabled」を付与することで、TouchEvent を使用したクリック判定を取得する方法を紹介します。

 

フィア
画像の透明部分を無視する方法も紹介しているよ
カレン
TouchEventの使い分けが結構面倒だから頑張ろうね

 

準備

1、以下の記事を参照して画像の読み込み方法とTouchEventについて理解しておいてください。

画像の読み込み方法と表示方法「eui.Image」

画面タッチでイベントを実行する「egret.TouchEvent.TOUCH_TAP」

 

2、使用する画像を「resource」フォルダに入れる。

今回は「karen0.png」という画像を使用しています。

この記事ではeui.Imageを使って画像を表示させていますが、RES.getRes等を使用しても構いません。

 

スポンサーリンク

 

画像にクリック判定やTouchEventを付与する方法

Main.ts

 

スポンサーリンク

 

画像にクリック判定を付与「touchEnabled」

touchEnabled = trueで、画像の上でクリックすると反応します。

 

画像の透明部分のタッチ判定を取り除く「pixelHitTest」

touchEnabled = true だけでは、画像の透明部分(α = 0)にもクリック判定があります。

pixelHitTest = true;で透明部分のクリック判定を取り除くことができます。

 

様々なクリック判定を付与

クリックした瞬間→ドラッグ中→離した瞬間の条件分けは結構複雑です。

クリックした瞬間だけなら、

でいけます。

しかし、そこからドラッグ中に移行するには、

が必要です。

 

これは、最初にタッチしたときに発動するaddEventListener、

には連続実行機能はないため、最初のBeginでメソッドを抜けてしまうためです。

 

addEventListenerとonceの違いは、addEventListenerは実行した後もデータとして残りますが、onceは実行後、破棄されます。

 

おわりに

フィア
もう少しTouchEventが簡単に扱えるようになればいいね
カレン
新しい関数に定義してもいいかもね

 

HTML5 Egret Engine 入門へ戻る

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください