この記事は RPGツクールMV Advent Calendar 2017 13日目の記事です。
RPGツクールはPCやコンシューマーで発達してきた背景からか、UIがコントローラーのある端末に向けたものになっていて、タッチ操作で完結させようと思うとユーザビリティ（使いやすさ）がガタ落ちしてしまいます。
もちろん、この3年で対策のためのプラグインやノウハウも積み重なってきましたが、個人的に残っていた不満点が
- キャンセルが2本指タップって！
- 「目的地をタッチして待つ」移動方法がちょっと…なんとなく歩き回りたいときはどうすればいいの？
#キャンセル操作について
ツクールMVの「キャンセル」ボタンは、タッチ操作では「2本指タップ」に割り当てられています。しかし、覚えにくいし直感的ではないし、キャンセルのたびに（2本の指を空けるために）スマホを持ち直さなければなりません。
対策したいのですが、全ての入力ウインドウを改造して「戻る」選択肢を逐一追加するのは現実的ではありません。
そこで、uchuzineさんの仮想ボタンプラグインを参考に、キャンセルだけのボタンを常時設置するプラグインを書いてみました。
自分用なので至らない点もあるかもしれませんが、ご自由にお使いください。
画面右下が、今回のプラグインで追加されたボタンです。
- マップ画面では「メニュー」ボタンを表示
- その他では「戻る」ボタンを表示
どちらを押しても、二本指タップと同じ挙動になります。
プラグインコマンドでこのボタンを隠すこともできます。
ただ、「メニュー不可」設定の間はメニューボタンを隠す処理が必要になることは おととい気づいたので、その処理はまだ入れていませんごめんなさい。自分のためにも、後日追加しておきます。
##仕組み
###canvasを追加しました
ちょっと反則技です。
ゲーム画面全てに同じボタンを配置する手っ取り早い方法として、小さなcanvasを追加してそこにボタンを配置しています。全シーンにまたがってオーバーライドするのは無理だと判断しまして…。プラグインでシーンが追加されることもよくあるし。
ただ、描画レイヤーが増えた分、アニメーションがもっさりする場合があります。
###ボタンを配置するだけのためにcanvas要素を追加したのはなんで？
imgタグで良くね？…いえ、理由があります。
ダブルタップによるズーム対策です。
スマホのブラウザから画像をダブルタップすると「これが見たいんでしょ？」と画像だけをズームしてくれます。ふだんは便利な機能ですが、インタラクティブな操作には邪魔になるので、canvasに置き換えることで回避しているのです。
#移動操作について
かくいう私はスマホゲーには疎いので、マップ移動操作の最適解は模索中なのですが、最近ポケ森をやって使いやすかったので、挙動を真似したくなりました。
- 一点を短くタップすると、その位置に移動して調べる。これはツクールMVデフォルトの挙動と同じ
- 長くタップし続けると、タップしている方向に移動を続ける。指を離すと歩くのをやめる
デフォルトでもタップし続けると似た感じにはなりますが、指を離しても「直前に指を置いていた位置まで歩き続けるのをやめない」ので、立ち止まってほしいのに通り過ぎてしまってイラッとする結果になります。
これを改善するためにプラグインをクラフトしてみました。
トリアコンタンさんのマップタッチ仕様変更プラグインを改変させていただいたものです。
こちらもご自由にお使いください。改変元のライセンスに基づいてMITライセンスとします。
さらに別途導入した方がよさそうなプラグインを挙げておきます。
- ダッシュを常時禁止にできるプラグインSlowandSlow
- タップした時のハイライト表示を変えたり隠したりできるプラグインDestination Sprite
*ダッシュの常時禁止を勧める理由は、ダッシュ可になっていると「目的地まで移動する」速度が速すぎて、タップ長押しの際に操作しづらくなってしまうからです
##手で操作キャラを隠さないために
「指を置きっぱなしで歩かせる」という操作体系にすると、操作する手と反対方向の斜め上側（右手操作のときは左斜め上）に歩かせたときに、とても使いづらいです。手でプレイヤーキャラクターが隠れてしまううえに、指が一番届きにくい箇所を押し続ける必要があるためです。対策は2つありそうです。
###あまり斜め上方向に歩かなくていいマップにする
手でキャラが隠れる方向には極力操作させないように、マップの構造を見直す必要があります。上移動を全廃することは難しいですが、せめて「斜め上」ではなく「真上」に動けばいいようにするとか。
ポケ森の場合は「奥から手前に移動して、メニューボタンで他のマップに遷移」という動線にしていることで「使いづらい方向に歩かせない」工夫をしているようですね。
###自キャラを大きく表示させる
指で隠れてもなんとかなるようにキャラを大きめに表示できると、さらに使いやすくなりそうです。
とりあえず、上記のサンプル画面では、マップ画面だけズームさせるプラグインDP_MapZoom.jsを採用していますが、もっと思い切って大きくしたほうが良さそうですね。ただ、あまりズームすると今度は周りが見渡せなくなってしまうので悩みどころです。