LeanTouchで実現するスマホのマルチタッチ操作
どうも初めまして、G-kunです。
A-kun ひとり Advent Calendar 2024の7日目です。
はじめに
今回は、LeanTouchというAssetについて紹介します。
LeanTouchは、Unity向けの軽量なマルチタッチ入力ライブラリで、タッチジェスチャ（ピンチ、回転など）の処理を簡単に行うことができます。今回の記事では、LeanTouchの概要とサンプルの解説を行います。
この記事を読んで欲しい人
- スマホアプリ開発をしていて、マルチタッチ等の処理で悩んだ経験のある人
- LeanTouchでどんなことができるのか知りたい人
- 今日のご飯がチキン南蛮弁当だった人
サービスの特徴
Lean Touchは無料で提供されており、Unity Asset Storeからダウンロード可能です。また、追加のデモシーンやコンポーネントを含む有料版のLean Touch+も提供されています。
ドキュメントは下記を参考にしてください。
インストール方法
下記アセットストアからMyAssetsに追加してください。追加したら、Unityの上のタブからWindow -> Package Managerを選択し、Package Manager Windwo の上記タブから下三角ボタンをクリック、MyAssetsを選択したら左側に表示されるAsset一覧kらLeanTouchを選択してインストールしてください。
サンプルの解説
Sample01 Finger Down
画面をタッチした時に、タッチした位置に赤い点が移動するサンプルです。
Sample02 Finger Up
赤い点がと青い点がそれぞれ画面おタッチした位置に移動するサンプルです。赤い点は画面をタッチした際に移動し、青い点は画面から手を離した時に移動します。
Sample03 Finger Swaip
スワイプするとスワイプで得た情報を表示してくれるサンプルです。
Sample04 Finger Swaip - Rotation
（すみません、これわからなかったです...）
Sample05 Finger Swaip - Direction 4
矢印の方向にスワイプすると、その方向の矢印にあたる方位が表示されます。上の矢印がN(North), 下の矢印がS(South), 左の矢印がW(West), 右の矢印がE(East)です。
Sample06 Finger Swaip - Direction 8
矢印の方向にスワイプすると、その方向の矢印にあたる方位が表示されます。Sample05の8方位バージョンです。
Sample07 Finger Tap
タッチした回数だけTap Countが増えます。一定程度スワイプすると、Contがリセットされます。
Sample08 Finger Tap - Spawn
タッチした部分に火花が散るサンプルです。
Sample09 Finger Tap - Block
タッチした部分に火花が散ります。ただし、白い部分にタッチしても火花が出ません。
Sample10 Finger Tap - Double
ダブルタッチをした部分に火花が散るサンプルです。2回目のタッチをした部分で火花が散ります。
Sample11 Finger Old
タッチしている状態かタッチ画面から手を離している状態かをテキストで表示してくれるサンプルです。
1本指でドラッグすることでオブジェクトを移動、二本指でドラッグすることでオブジェクトを回転・拡大縮小するサンプルです。
LeanTouchでは、controlキーとクリックの組み合わせで二本指でのドラッグがシミュレート可能です。
controlキーを押して1本目と2本目の指の中央の位置を確定させたら、カーソルを移動させてクリックすることで2本目の指の位置を確定させることができます。この時、日本の指の位置がピンク色のカーソルで表示されます。
あとはカーソルを移動させることで、回転や拡大縮小が可能です。
Sample13 Transform - Relative
基本的にはSample12と同じです。ただし、回転・拡大縮小の中心は Alt + Clickで指定した地点を原点として行われます。
Sample14 Selectable
（すみません、これも分かりませんでした...）
Sample15 Tap To Select
タッチしたオブジェクトが緑色になります。何もないところをタッチすると、全てのオブジェクトが白色になります。
Sample16 Tap To Select - Limit = Stop At Max
基本的にはSample15と同じですが、緑色にできるオブジェクトの最大の個数を設定することができます。最大数まで緑色のオブジェクトを増やすと、それ以上オブジェクトを緑色にすることができません。
Sample17 Tap To Select - Limit = Deselect First
基本的にはSample16と同じですが、最大数まで緑色にし、さらに選択しようとすると、最初に選択したオブジェクトが選択解除されます。
Sample18 Tap To Select - Destroy
タッチしたオブジェクトが消えます。
Sample19 Tap To Select - Transform
Sample13 と Sample 15 の機能を合わせたサンプルです。緑色にしたオブジェクトだけ移動・回転・拡大縮小が可能です。
オブジェクトの回転・拡大縮小はオブジェクトの画面上の中心位置が用いられます。
（Alt + Clickについてテキストがありますが、このシーンではは特に何も動作しません。）
Sample20 Tap To Select - Transform Relative
基本的にはSample19と同じですが、Alt + Clickをすることでオブジェクトの回転・拡大縮小がClickした位置を中心に行われます。
Sample21 Tap To Select - Tap To Togle
タッチしたオブジェクトを緑色にすることができます。もう一度タッチすると、緑色が解除されます。
Sample22 Press To Toggle
オブジェクトをクリックしている間、緑色になります。離すと緑色が解除されます。
Sample23 Press To Select - Transform Relative
オブジェクトをタッチしている間、緑色になります。オブジェクトをドラッグすることで、オブジェクトを移動・回転・拡大縮小することができます。回転・拡大縮小は、Alt + Clickで指定した位置を中心に行われます。
Sample24 Press To Select - Transform Relative - Isolate
基本的にはSample23と同じですが、オブジェクトは移動のみ可能で、回転・拡大縮小はできません。
補足
LeanTouchには有料番のLeanTouch+もあります。こちらも20ドル(2024/12/7現在)とそこまで大きな負担にならないので、ぜひ導入をご検討ください。
おわりに
今回はLeanTouchの概要と可能になる動作について説明しました。次回はそれぞれの動作をどう実現しているのかなどの、機能面によりフォーカスを当てたいと思います。
Discussion