1. uchuzine

    Posted

    uchuzine
Changes in title
+RPGツクールMVのスマホUIを考える
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,225 @@
+こんにちはuchuzine(うちゅーじん)です。Qiita初投稿になります。
+
+このたびRPGツクールが、12/17発売の最新作「[RPGツクールMV](https://tkool.jp/mv/)」(以下「MV」)で
+**スマホ出力**に対応した(!)ということで、約15年ぶりにツクールに触れ始めました。
+
+MVは、公式コミュニティスタッフが**「世界一簡単にスマホゲームが作れる」**と語る通り、
+中学生でも(小学生でも)簡単にRPGが作れるツールが**html5書き出し**に対応し
+スマホブラウザからも遊べるようになった事が、今回の大きな目玉となっています。
+
+たとえば、数時間の余暇にちょこっと作ったゲームをボタンひとつでフォルダに書き出し、
+サーバにアップしてURLをツイートするだけで、スマホ・PCから**誰にでもすぐに遊んでもらえる**。
+
+先日、先行テスター様がツイート投稿した「[SIerクエスト](http://sifue.github.io/SIerQuest/)」なるMV製の3分ゲームが
+**[Yahoo!ニュースに掲載](http://headlines.yahoo.co.jp/hl?a=20151118-00000044-it_nlab-sci.view-000)**されていました(!!)が、そういった作り手の発想次第で
+一気に拡散するコンテンツが現れる可能性は、今後も大いにあります。
+
+#無限のプレイヤーの入り口となる、MVのスマホUI
+そんな夢あふれるMVですが、誰でも満足なプレイ体験が得られるわけではありません。
+ゲームとプレイヤーを繋ぐ**架け橋**であり、同時にプレイヤーを払う**壁**ともなる、UIの問題です。
+> UIとは、User Interface(ユーザインターフェース)の略で、ユーザーとコンピュータとが
+情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法を指します。
+
+MVのUIは、良くも悪くも過去作のそれを引き継いでしまっており、
+今回初対応である**スマホへの、操作の最適化はなされていません**。
+
+ですが、MVのUIは、そのすべてを**javascriptで書き換えることが可能**で、
+プラグインという形でユーザ同士で共有することが可能です。
+
+そこで、MVにおけるUI最適化の方法を、
+**「仮想ゲームパッドの設置」**と**「タッチパネルの拡張」**の2方向で考えてみたいと思います。
+
+
+##MVの初期スマホ操作
+MV発表当時から気になっていたのが、**スマホ操作はどうなるのか?**という疑問。
+体験版を遊んでみると、このようになっていました。
+
+- 画面レイアウトはPCのまま。選択肢やアイテム等は、そのままタップで選択。
+- 仮想十字キー・ボタン類は無し。マップ上の移動、会話は**目的地タップ式**
+- メニュー呼び出し、キャンセル操作は**二本指タップ**
+- ダッシュボタン、PageUP/PageDownボタン等は対応せず(オプションで常時ダッシュは選択可能)
+
+
+つまり、ツクール伝統のUIデザインをほぼ変えずに、**タッチパネル式**の操作を適用した形です。
+しかし、やはりキーボード(ゲームパッド)操作とタッチ操作は違うもの。
+物理ボタン用に作られたUIを、そのままスマホ上で使うには限界があります。
+###◆操作性の問題
+私が気になったのは、下記の4点です。
+
+1. 一番の問題は、やはり**二本指タップ**。ゲーム内で説明しなければまず気づいてもらえない上に、
+キャンセル操作のたびに二本指で操作するのは、少々億劫。
+
+2. 戦闘コマンドやアイテム等、選択メニューの**縦幅が狭い**。
+縦に小さく積まれたボタンを、指で押し分けるのは困難。
+
+3. マップ上の目的地や、選択メニューの出現位置によっては、画面のかなり上部を押さなくてはならず
+**指の動作範囲**が広がってしまうため、親指のみの片手操作は困難。
+
+4. 固定配置の決定ボタンが存在しないため、
+戦闘シーンで毎ターン「**攻撃**をタップ→**敵の名前**をタップ」を繰り返す必要があるのが面倒。
+また**敵の画像**を直接タップしても選択できない事にも困惑する。
+
+このうち、**2.**の問題は、うろろこ様のプラグイン「[スマホ用UI](http://tm.lucky-duet.com/viewtopic.php?f=5&t=153)」で解消できます。
+こちらは、選択メニューの行間を広げ、ボタンの縦幅を広げるというもの。
+(これを導入するだけでもかなり快適ですので、是非使ってみてください!)
+また**4.**については、MV同梱プラグインの「YEP_BattleEngineCore」を導入すると、
+画像タップで選択できるようになります。
+
+##仮想ボタンプラグインを作ってみた
+というわけで、二本指タップの手間をクリアすべく、キャンセル/メニューボタンを設置してみました。
+
+jsからキャンセル/メニュー(escape)ボタンをトリガーするには、
+`Input._currentState['escape'] = true;`を指定すれば良いようです。簡単ですね。
+
+あとはボタン画像を配置し、タッチしたとき`true`、離したとき`false`とするだけです。
+こんな感じで置いてみました。
+
+```lang:javascript:キャンセルボタンの設置・オンオフの設定
+
+function Locate_EscapeButton() {
+ this.initialize.apply(this, arguments);
+}
+Locate_Button.prototype.initialize = function() {
+ this.Div = document.createElement("div");
+ this.Div.style.position = 'fixed';
+ this.Div.style.right = '10px';
+ this.Div.style.bottom = '10px';
+ this.Div.style.width = '100px';
+ this.Div.style.height = '100px';
+ this.Div.style.zIndex = '10';
+ this.Div.style.background = 'url(./img/system/CancelButton.png) 0 0 / cover no-repeat';
+
+ this.Div.addEventListener('touchstart', function() {
+ Input._currentState['escape'] = true;
+ }, false);
+
+ this.Div.addEventListener('touchend', function() {
+ Input._currentState['escape'] = false;
+ }, false);
+
+ document.body.appendChild(this.Div);
+};
+```
+
+プラグインによる画像の追加は、**ゲーム画面(canvas)内に描画**するのが定石かと思いますが
+ゲーム画面とモバイル機画面の縦横比が一致しないときに、
+ゲーム画面の**外側にまたがって**ボタンを配置したほうが、プレイ画面を占拠せず操作もしやすいため
+あえて`appendChild(this.Div);`と、新規にDOM要素を追加しています。
+
+
+![canvas外に置きたい](http://uchuzine.x0.com/demo/qiita/qiita1.jpg)
+
+
+そんな調子で決定、キャンセルボタン、方向ボタンを配置しました。
+<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">RPGツクールMVのスマホ操作に、仮想ボタンを追加してみた&#10;&#10;<a href="https://t.co/Gx9GT9U8Ih">https://t.co/Gx9GT9U8Ih</a> <a href="https://t.co/eh727RdiJV">pic.twitter.com/eh727RdiJV</a></p>&mdash; 宇宙人かに (@uchuzine) <a href="https://twitter.com/uchuzine/status/660618819828781056">2015, 11月 1</a></blockquote>
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>こちらを後日プラグイン化したものを、http://uchuzine.x0.com/demo/ で配信しています。
+プラグインをONにするだけで、スマホ実行時に仮想ボタンが出てきます。
+###◆操作性を良くするために
+仮想ゲームパッドにおいて、操作性の良し悪しを決めるのは**レバー(方向ボタン)の接触判定**です。
+この設計が甘く、ユーザーレビューで「操作性が悪い」とこき下ろされている企業アプリも少なくありません。
+
+![操作しやすい仮想十字キー](http://uchuzine.x0.com/demo/qiita/qiita2.png)
+
+###◆仮想ゲームパッドの問題点
+仮想ゲームパッドは、物理ゲームパッド用に設計されたUIをそのままアプリで使用できるようになるため
+既存ゲームのプログラムを流用し、端末側でハード処理を再現する**エミュレーション**式アプリや
+コンシューマー機からの**移植アプリ**ではよく採用される手段です。
+
+しかし、画面の大部分をボタンが占めてしまうため、視界を奪い、プレイ領域が制限される問題や、
+選択式のタッチパネルに比べ**表現力に乏しく、ユーザーの行動を導きにくい**という欠点があります。
+
+また、操作にはある程度の**「慣れ」**を要求するので、ライトユーザーにとっては敷居が高くなってしまい、
+物理ゲームパッドに慣れたゲーマー層には、**「操作しにくいもの」**というイメージを持たれているようです。
+
+結果として、仮想ゲームパッドは採用されにくい傾向にあります。
+
+本作MVでも、物理ゲームパッド用のUIを継承しているにも関わらず、仮想パッドが配置されずに
+タッチパネル操作が採用されたのは、そういった理由からと思われます。
+
+##タッチパネル操作を最適化する
+そこで、既存のタッチパネル方式を**スマホで操作しやすく再レイアウトする**方向も検討してみます。
+
+ただし、ゲームをweb公開にした場合、PCからアクセスした時にもスマホ用のレイアウトになっていると
+かえって操作しにくくなってしまうので、**端末を判定**した上で、組み替えを行うのが理想的です。
+
+###◆モバイルのときだけ表示を変える
+
+
+
+ユーザーの実行環境がPCか携帯端末(スマホ・タブレット)かの判定は、
+`rpg_core.js`に定義されている関数 `Utils.isMobileDevice()` を使えばどこからでも取得できます。
+
+```lang:javascript:MVのモバイル判定
+if(Utils.isMobileDevice()){
+ //モバイル機の組み換え処理
+}
+```
+この分岐をかけることで、同一ソースのゲームを
+
+![MVのユーザーエージェント分岐](http://uchuzine.x0.com/demo/qiita/qiita3.jpg)
+このように、スマホのときだけメニューボタンを大きくする処理もできるわけです。
+(この関数で、モバイルのときだけ説明テキストを変えるイベントとかも作れますね)
+
+
+##RPGツクールのUIをスマホに最適化したらどうなる?
+MVのスマホUI最適化を考えたとき、一番参考になるアプリはズバリ、
+**スマホ移植版のドラクエ、FF**シリーズです。安直だ・・と言われればその通りなのですが、
+
+そもそもRPGツクールのUI自体が、完全に**ドラクエ、FFに倣っています**。MVもしかり。
+ドラクエ、FFの移植アプリは、原作のUIをなるべく維持しつつ、スマホ用に最適化されています。
+つまり、**アプローチの過程が一緒**なんですね。これを参考にしない手はない。
+
+実際、意識して遊んでみると、**そのまま採用したくなるUIが盛りだくさん**です。
+
+そこでRPGのシーン別に、MVのスマホ最適化UIを具体的に考えてみました。
+今回は横長の画面でサンプル画像を作成しましたが、縦長(縦持ちの片手操作)の対応も想定しています。
+###◆イベント選択肢
+**指の可動範囲**を考えると、選択肢その他のボタン類は、**画面下部**に置くのがベターです。
+縦よりも横に並べたほうがタッチミスを防げるので、長い選択肢でなければ、左の配置になると良いです。
+(スマホ版のドラクエ4ではこの方式が採用されていました。)
+
+![canvas外に置きたい](http://uchuzine.x0.com/demo/qiita/qiita4.jpg)
+###◆マップ画面、メニュー
+タッチ操作では、移動中にも使用頻度の高いメニューは**常に表示**されていると便利です。
+アイテムと魔法(スキル)はワンタッチで使用可能で、その他のメニューは1箇所にまとめた例です。
+
+![canvas外に置きたい](http://uchuzine.x0.com/demo/qiita/qiita5.jpg)
+###◆戦闘画面
+高頻度で使う戦闘コマンドは、なるべく大きめに押しやすく、またアイコンを使って記号化すると直感的です。
+フロントビューでは、パーティのステータスを上部に置いてしまっても良さそうです。
+(左の画面はスマホ版のドラクエ、右の画面はFFを参考にしています。)
+
+![canvas外に置きたい](http://uchuzine.x0.com/demo/qiita/qiita6.jpg)
+
+***
+では、最終的に仮想ゲームパッド設置とタッチパネル拡張のどちらを採用するかを考えてみます。
+
+##仮想ゲームパッド設置とタッチパネル拡張、どちらを採用するか?
+これは、一概にどちらが良いとは言えません。
+貴方の作りたいゲームの条件によって、下記のような採用基準があるでしょう。
+
+ |仮想ゲームパッド設置|タッチパネル拡張
+---|:---:|:---:
+ターゲット層|ややゲーマー向け|ライトユーザー向け
+画面比率|4:3向け|16:9向け
+デバイス方向|横持ち向け|縦/横どちらでも
+プレイスタイル|両手操作向け|片手操作も可
+指の動作範囲|狭くて済む|広くなりがち
+プラットフォーム|マルチ展開向け|スマホのみ展開向け
+エンカウント制|ランダム/シンボル|シンボルは不向き
+
+ざっくり言えば、PC・スマホで同時展開し、UXを統一したいのであれば仮想パッドを採用、
+スマホ展開のみ・ライトユーザーを重視するなら、タッチパネル方式を拡張するのが良いでしょう。
+
+もちろん、「マップ画面でのみ十字パッドを出現させる」といったハイブリッド式(?)を
+採ることも可能です。シーンによって上手に使い分けるのが理想です。
+
+
+
+#おわりに
+ゲームUIを考える事は、**ゲームのルールをいかに解りやすく視覚化し、誘導するか**を考える事です。
+つまり、ゲームルールの数だけUIの答えがあり、プラグインを作るにしても、ベストな形を提示するのは難しい。
+
+せっかくのマルチプラットフォーム対応を最大活用するために、
+貴方のゲームにベストなUIを考えてみてはいかがでしょうか?
+