LeanTouchで実現するスマホのマルチタッチ操作


どうも初めまして、G-kunです。
A-kun ひとり Advent Calendar 2024の7日目です。

## はじめに

今回は、LeanTouchというAssetについて紹介します。
LeanTouchは、Unity向けの軽量なマルチタッチ入力ライブラリで、タッチジェスチャ（ピンチ、回転など）の処理を簡単に行うことができます。今回の記事では、LeanTouchの概要とサンプルの解説を行います。

## この記事を読んで欲しい人
- スマホアプリ開発をしていて、マルチタッチ等の処理で悩んだ経験のある人
- LeanTouchでどんなことができるのか知りたい人
- 今日のご飯がチキン南蛮弁当だった人

## サービスの特徴

Lean Touchは無料で提供されており、Unity Asset Storeからダウンロード可能です。また、追加のデモシーンやコンポーネントを含む有料版のLean Touch+も提供されています。

ドキュメントは下記を参考にしてください。

https://carloswilkes.com/Documentation/LeanTouch#GetLeanTouch

## インストール方法

下記アセットストアからMyAssetsに追加してください。追加したら、Unityの上のタブからWindow -> Package Managerを選択し、Package Manager Windwo の上記タブから下三角ボタンをクリック、MyAssetsを選択したら左側に表示されるAsset一覧kらLeanTouchを選択してインストールしてください。

https://assetstore.unity.com/packages/tools/input-management/lean-touch-30111?locale=ja-JP

## サンプルの解説

### Sample01 Finger Down

画面をタッチした時に、タッチした位置に赤い点が移動するサンプルです。

[![Image from Gyazo](https://i.gyazo.com/e2c122471d44563329968871dc382d23.jpg)](https://gyazo.com/e2c122471d44563329968871dc382d23)

### Sample02 Finger Up

赤い点がと青い点がそれぞれ画面おタッチした位置に移動するサンプルです。赤い点は画面をタッチした際に移動し、青い点は画面から手を離した時に移動します。

[![Image from Gyazo](https://i.gyazo.com/d42caf5fdd24daf43e63fbf3e7844d5a.jpg)](https://gyazo.com/d42caf5fdd24daf43e63fbf3e7844d5a)

### Sample03 Finger Swaip

スワイプするとスワイプで得た情報を表示してくれるサンプルです。

[![Image from Gyazo](https://i.gyazo.com/80a27970f767f518babffa5e81550433.jpg)](https://gyazo.com/80a27970f767f518babffa5e81550433)

### Sample04 Finger Swaip - Rotation

（すみません、これわからなかったです...）

[![Image from Gyazo](https://i.gyazo.com/72d34277bdf38e8157b399a7afc61c3b.jpg)](https://gyazo.com/72d34277bdf38e8157b399a7afc61c3b)

### Sample05 Finger Swaip - Direction 4

矢印の方向にスワイプすると、その方向の矢印にあたる方位が表示されます。上の矢印がN(North), 下の矢印がS(South), 左の矢印がW(West), 右の矢印がE(East)です。

[![Image from Gyazo](https://i.gyazo.com/4654e09228b2ca78b8bddd293fb185a5.jpg)](https://gyazo.com/4654e09228b2ca78b8bddd293fb185a5)

### Sample06 Finger Swaip - Direction 8

矢印の方向にスワイプすると、その方向の矢印にあたる方位が表示されます。Sample05の8方位バージョンです。

[![Image from Gyazo](https://i.gyazo.com/b9442b941e9877cb8155e82082a8a44b.png)](https://gyazo.com/b9442b941e9877cb8155e82082a8a44b)

### Sample07 Finger Tap

タッチした回数だけTap Countが増えます。一定程度スワイプすると、Contがリセットされます。

[![Image from Gyazo](https://i.gyazo.com/a3aa148a6e362a80dbaa8dfe169e3d37.jpg)](https://gyazo.com/a3aa148a6e362a80dbaa8dfe169e3d37)

### Sample08 Finger Tap - Spawn

タッチした部分に火花が散るサンプルです。

[![Image from Gyazo](https://i.gyazo.com/ab6b79f37fdd932714da0a3a94a5c62f.jpg)](https://gyazo.com/ab6b79f37fdd932714da0a3a94a5c62f)


### Sample09 Finger Tap - Block

タッチした部分に火花が散ります。ただし、白い部分にタッチしても火花が出ません。

[![Image from Gyazo](https://i.gyazo.com/740a28ec9f1cd38cbe0460ab65778340.jpg)](https://gyazo.com/740a28ec9f1cd38cbe0460ab65778340)

### Sample10 Finger Tap - Double

ダブルタッチをした部分に火花が散るサンプルです。2回目のタッチをした部分で火花が散ります。

[![Image from Gyazo](https://i.gyazo.com/b5eb0ca02213142fd2b99f02919d38df.jpg)](https://gyazo.com/b5eb0ca02213142fd2b99f02919d38df)

### Sample11 Finger Old

タッチしている状態かタッチ画面から手を離している状態かをテキストで表示してくれるサンプルです。

[![Image from Gyazo](https://i.gyazo.com/ef1150f2166e07b0155928499bb7618b.jpg)](https://gyazo.com/ef1150f2166e07b0155928499bb7618b)


1本指でドラッグすることでオブジェクトを移動、二本指でドラッグすることでオブジェクトを回転・拡大縮小するサンプルです。

LeanTouchでは、controlキーとクリックの組み合わせで二本指でのドラッグがシミュレート可能です。

controlキーを押して1本目と2本目の指の中央の位置を確定させたら、カーソルを移動させてクリックすることで2本目の指の位置を確定させることができます。この時、日本の指の位置がピンク色のカーソルで表示されます。

あとはカーソルを移動させることで、回転や拡大縮小が可能です。

[![Image from Gyazo](https://i.gyazo.com/22b348187b8a08c3ea836fb01a124c79.jpg)](https://gyazo.com/22b348187b8a08c3ea836fb01a124c79)

### Sample13 Transform - Relative

基本的にはSample12と同じです。ただし、回転・拡大縮小の中心は Alt + Clickで指定した地点を原点として行われます。

[![Image from Gyazo](https://i.gyazo.com/ab6e8d18f1b003c682bebd0599b4d87d.jpg)](https://gyazo.com/ab6e8d18f1b003c682bebd0599b4d87d)

### Sample14 Selectable

（すみません、これも分かりませんでした...）

[![Image from Gyazo](https://i.gyazo.com/29465c44cf31da4dc80c77451046791c.jpg)](https://gyazo.com/29465c44cf31da4dc80c77451046791c)

### Sample15 Tap To Select

タッチしたオブジェクトが緑色になります。何もないところをタッチすると、全てのオブジェクトが白色になります。

[![Image from Gyazo](https://i.gyazo.com/2c15af577f701558b8a901ff6f14211a.jpg)](https://gyazo.com/2c15af577f701558b8a901ff6f14211a)

### Sample16 Tap To Select - Limit = Stop At Max

基本的にはSample15と同じですが、緑色にできるオブジェクトの最大の個数を設定することができます。最大数まで緑色のオブジェクトを増やすと、それ以上オブジェクトを緑色にすることができません。

[![Image from Gyazo](https://i.gyazo.com/1cdcb46925fa2d15d523a355dea9ed0e.jpg)](https://gyazo.com/1cdcb46925fa2d15d523a355dea9ed0e)

### Sample17 Tap To Select - Limit = Deselect First

基本的にはSample16と同じですが、最大数まで緑色にし、さらに選択しようとすると、最初に選択したオブジェクトが選択解除されます。

[![Image from Gyazo](https://i.gyazo.com/471f03bbb711f3d60ce627d78b9ca978.jpg)](https://gyazo.com/471f03bbb711f3d60ce627d78b9ca978)

### Sample18 Tap To Select - Destroy

タッチしたオブジェクトが消えます。

[![Image from Gyazo](https://i.gyazo.com/98a5e9a7d01d14d8d8f2fd6044307fb0.jpg)](https://gyazo.com/98a5e9a7d01d14d8d8f2fd6044307fb0)

### Sample19 Tap To Select - Transform

Sample13 と Sample 15 の機能を合わせたサンプルです。緑色にしたオブジェクトだけ移動・回転・拡大縮小が可能です。
オブジェクトの回転・拡大縮小はオブジェクトの画面上の中心位置が用いられます。
（Alt + Clickについてテキストがありますが、このシーンではは特に何も動作しません。）

[![Image from Gyazo](https://i.gyazo.com/1b3bf8fe7e349b12f27e1a9f95d10a27.jpg)](https://gyazo.com/1b3bf8fe7e349b12f27e1a9f95d10a27)


### Sample20 Tap To Select - Transform Relative

基本的にはSample19と同じですが、Alt + Clickをすることでオブジェクトの回転・拡大縮小がClickした位置を中心に行われます。

[![Image from Gyazo](https://i.gyazo.com/6c337e69083710f08c38b2febe3faf7f.jpg)](https://gyazo.com/6c337e69083710f08c38b2febe3faf7f)

### Sample21 Tap To Select - Tap To Togle

タッチしたオブジェクトを緑色にすることができます。もう一度タッチすると、緑色が解除されます。

[![Image from Gyazo](https://i.gyazo.com/90d5ce283e611c10053b8c8a35afe65c.jpg)](https://gyazo.com/90d5ce283e611c10053b8c8a35afe65c)

### Sample22 Press To Toggle

オブジェクトをクリックしている間、緑色になります。離すと緑色が解除されます。

[![Image from Gyazo](https://i.gyazo.com/9ec22dcc34cc385e52da80077b212abb.jpg)](https://gyazo.com/9ec22dcc34cc385e52da80077b212abb)

### Sample23 Press To Select - Transform Relative

オブジェクトをタッチしている間、緑色になります。オブジェクトをドラッグすることで、オブジェクトを移動・回転・拡大縮小することができます。回転・拡大縮小は、Alt + Clickで指定した位置を中心に行われます。

[![Image from Gyazo](https://i.gyazo.com/76468382cc640f092cb2771f3a6d5002.jpg)](https://gyazo.com/76468382cc640f092cb2771f3a6d5002)

### Sample24 Press To Select - Transform Relative - Isolate

基本的にはSample23と同じですが、オブジェクトは移動のみ可能で、回転・拡大縮小はできません。

[![Image from Gyazo](https://i.gyazo.com/7fc0c180df28e85ef3365f31d8f365db.jpg)](https://gyazo.com/7fc0c180df28e85ef3365f31d8f365db)

## 補足
LeanTouchには有料番のLeanTouch+もあります。こちらも20ドル(2024/12/7現在)とそこまで大きな負担にならないので、ぜひ導入をご検討ください。

https://assetstore.unity.com/packages/tools/input-management/lean-touch-72356?aid=1101l4Jks

## おわりに
今回はLeanTouchの概要と可能になる動作について説明しました。次回はそれぞれの動作をどう実現しているのかなどの、機能面によりフォーカスを当てたいと思います。