タッチイベント

このエントリーをはてなブックマークに追加




 タッチイベントの使い方についてです。基本的にはタップと同じイメージで使用できます。ただタッチの場合、触って、移動して、離すという動作になるので、そこがタップとは違ってきます。触った瞬間から離すかキャンセルするまで、移動するたびにイベントが発生することです。
 ということで、基本的な使い方(イベントの追加、削除、影響範囲など)はタップの説明を確認してください。


1. 「タッチ」と「タップ」

 まず初めにタッチとタップのイベントを同時に実行すると、どうなるかを確認しましょう。以下のプログラムを実行すると、緑色の円が表示され、タップやタッチをするとコンソール画面に「tap」や「touch」といった文字が表示されます。


local function tap(event)
    print("tap")
end

local function touch(event)
    print("touch : ", event.phase)
end

local circle01 = display.newCircle(display.contentCenterX, display.contentCenterY, 100)
circle01:setFillColor(0, 1, 0, 1)
circle01:addEventListener("tap", tap)
circle01:addEventListener("touch", touch)


 さて、まずはタップをしてみましょう。すると、コンソール画面に以下のように表示されると思います。
touch : began
touch : ended
tap

 ここで重要なのは、タップをするとタッチイベントが2回発生するということです。そして、タッチイベント完了後にタップイベントが発生します。ここを勘違いしてしまうとアプリ作成時に、思った通りに動作しないということになります。
 それはどういうことかというと、タップするとそのオブジェクトを削除、タッチするとそのオブジェクトを分裂させる、といった動作をしたいとします(泡をタップすると破裂させて削除、タッチで2つに切るイメージ)。何も考えずにタッチイベント発生時に分裂させてしまうと、タップするとタッチイベントが2回発生するので・・・どうなるのでしょうか。プログラム方法にもよりますが、2回分裂して1個削除といった動きや、2回分裂して、削除する対象物がなくなる、など色々と考えられます。まあ、タップとタッチを1つのオブジェクトで同時に使わなければこのような問題は起きませんが・・・。


2.タッチイベント

 さて、前置きが長くなってしまいました。何を言いたかったかといいますと、タップとタッチは似ているので、使うのは簡単ですが、注意が必要ですよ、という話でした。
 では、タッチイベント発生時の関数に渡される引数(プロパティ)についてです。引数(プロパティ)はテーブル形式となっています。中身は以下の通りです。

テーブルのID 説明
target タッチイベントを発生させたオブジェクト(テーブル)
id idです。複数のタッチイベントを制御する際に使用
name "touch"が入っています
phase "began":開始時
"moved":移動中
"ended":終了時(離したとき)
"cancelled":キャンセル時(endedと違うので注意)
pressure 3D Touchで使用
time アプリが起動してからの時間
x 現在タッチしている位置:x座標
y 現在タッチしている位置:y座標
xStart タッチを開始した位置:x座標
yStart タッチを開始した位置:y座標

 それでは実際にタッチイベントを発生させ、プロパティの中身を確認してみましょう。以下のプログラムでは、緑色の円を触るとタッチイベントが発生します。タッチイベントが発生すると、コンソール画面にプロパティの中身が表示されるので、実際にプログラムを実行し確認してみてください。
 色々説明するよりも触ってみた方が早いので、緑色の円を触りそのまま円の外に移動するとどうなるのかなど確認してみてください。


local startTime = 0

local function tap(event)
    print("tap")
end

local function touch(event)
    print(string.format("Touch : %s, Time(%d)", event.phase, event.time))
    print(string.format("Start(%d,%d), Current(%d,%d)", event.xStart, event.yStart, event.x, event.y))

    if (event.phase == "began") then
        startTime = event.time
    elseif (event.phase == "ended") then
        print("touch time", event.time – startTime)
    else
       — Empty
    end
end

local circle01 = display.newCircle(display.contentCenterX, display.contentCenterY, 100)
circle01:setFillColor(0, 1, 0, 1)
circle01:addEventListener("tap", tap)
circle01:addEventListener("touch", touch)


 実際にゲームやアプリケーションを作成する場合、タッチ動作をよく理解していないと問題が発生してしまいます。例えば、

  • タップと同時に使い思った動きにならない
  • タッチイベントでendedが発生しなくて動作がおかしくなる
  • タッチでタップを作ろうとして、開始位置と離した位置で仮想タップを作ったが、移動したのち同じ位置で離すという動作もタップになるとか、そもそも全く同じ座標で離すのが難しい
など、色々と考えられます。



       



<更新履歴>

更新日 Corona SDKのバージョン
新規作成 2016年7月19日 v2016.2913






前へ          メニューへ



コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)