フリック検知するには(AndroidMode編)

◆PROCESSING 逆引きリファレンス

 カテゴリー:Web・スマホ

フリック検知するには(AndroidMode編)

【概要】

PROCESSINGにAndroidMode を導入する事で、PROCESSINGで開発したプログラムをAndroid端末上で動かす事ができるようになります。

AndroidModeの導入については「PROCESSINGをAndroid端末で動かすには(4.0版)」記事を参照してください。

フリックとは指で画面をピッと弾くように、素早く動かして離す動作です。スワイプとの違いは、素早く動かすことと、最後に指を離す事です。文字入力操作などに利用しますよね。

(画像URL:illust-AC 様:かみたまさん、amiyaoさん)

AndroidModeで画面のフリックを検知するには、surfaceTouchEvent 関数を利用します。

ただしsurfaceTouchEvent 関数だけでは、単純に指を動かされたのかフリックされたのかを判別するのが困難なため、Android SDKの GestureDetector クラスを利用して判別するのが便利です。

GestureDetector クラスの利用方法については「スワイプを検知するには(AndroidMode編)」記事を参照して下さい。

GestureDetector クラスの利用方法について、ポイントだけ紹介すると

  • SimpleOnGestureListener を継承したクラスを用意する
  • setup()関数で GestureDetector クラスを生成する
  • surfaceTouchEventでGestureDetector のonTouchEventを呼び出す

といった処理を行うことになります。

SimpleOnGestureListener を継承したクラス内で onFling メソッドをオーバライドする事で、フリックを処理することができるようになります。

 

【詳細】

フリックイベント

フリックイベントboolean bl = onFling ( MotionEvent e1, MotionEvent e2, float velocityX, float velocityY ) ;

e1 : フリック開始座標(起点)
e2 : 現在のフリック座標
velocityX : 横方向の加速度
velocityY : 縦方向の加速度

velocityX 、velocityY には縦横の加速度(1秒間あたりに移動するピクセル数)が渡されてきます。

このピクセル数が大きければ、それだけ早く指を動かした事になります。

velocityX 、velocityY は指を動かした方向により正負が異なります。

(画像URL:illust-AC 様:かみたまさん)

onFling  はある程度勢いをつけて指を動かし、その指を離した際に呼び出されます。ゆっくりと指を画面の上ですべらせるだけでは発生しない事に注意してください。

また onFling は、最後に画面をタップした指のフリック情報を通知してくるようです。

複数の指でフリックした場合、すべての指のフリック情報を onFling で検知する事はできません。

複数の指でフリックする操作を処理したい場合は、onScroll などのイベントを利用して、自力でがんばるしかなさそうです。

 

【関連記事】

 


サンプルプログラム

シンプルなフリックを検知する例:

onFling でフリックイベントをキャッチして、フリック情報をコンソール領域に表示しています。

<出力サンプル>

 

フリック方向を検知する例:

onFling でフリックイベントから得た情報を、getDirection 関数で判別しています。

移動速度と移動距離から、上下左右斜め8方向のどちらに向かってフリックされたかを判定し、矢印画像を回転させます。

FIRE_DISTANCE_MAX、FIRE_DISTANCE_MIN、FIRE_VELOCITY の各定数値で反応感度を調整してください。

なお画像の回転方法については「画像を回転するには」記事を参照してください。

<出力サンプル>

(画像URL:illust-AC 様:anny さん)

 


PROCESSING逆引きリファレンス一覧 へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。