LoginSignup
36
32

More than 5 years have passed since last update.

RPGツクールMVAdvent Calendar 2015Day 11
@uchuzine(uchuzine)

RPGツクールMVのスマホUIを考える

Last updated at Posted at 2015-12-11

こんにちはuchuzine（うちゅーじん）です。Qiita初投稿になります。

このたびRPGツクールが、12/17発売の最新作「RPGツクールMV」（以下「MV」）で
スマホ出力に対応した（！）ということで、約15年ぶりにツクールに触れ始めました。

MVは、公式コミュニティスタッフが「世界一簡単にスマホゲームが作れる」と語る通り、
中学生でも（小学生でも）簡単にRPGが作れるツールがhtml5書き出しに対応し
スマホブラウザからも遊べるようになった事が、今回の大きな目玉となっています。

たとえば、数時間の余暇にちょこっと作ったゲームをボタンひとつでフォルダに書き出し、
サーバにアップしてURLをツイートするだけで、スマホ・PCから誰にでもすぐに遊んでもらえる。

先日、先行テスター様がツイート投稿した「SIerクエスト」なるMV製の３分ゲームが
Yahoo!ニュースに掲載されていました（!!）が、そういった作り手の発想次第で
一気に拡散するコンテンツが現れる可能性は、今後も大いにあります。

無限のプレイヤーの入り口となる、ＭＶのスマホＵＩ

そんな夢あふれるMVですが、誰でも満足なプレイ体験が得られるわけではありません。
ゲームとプレイヤーを繋ぐ架け橋であり、同時にプレイヤーを払う壁ともなる、UIの問題です。

UIとは、User Interface（ユーザインターフェース）の略で、ユーザーとコンピュータとが
情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法を指します。

MVのUIは、良くも悪くも過去作のそれを引き継いでしまっており、
今回初対応であるスマホへの、操作の最適化はなされていません。

ですが、MVのUIは、そのすべてをjavascriptで書き換えることが可能で、
プラグインという形でユーザ同士で共有することが可能です。

そこで、MVにおけるUI最適化の方法を、
「仮想ゲームパッドの設置」と「タッチパネルの拡張」の２方向で考えてみたいと思います。

MVの初期スマホ操作

MV発表当時から気になっていたのが、スマホ操作はどうなるのか？という疑問。
体験版を遊んでみると、このようになっていました。

  • 画面レイアウトはＰＣのまま。選択肢やアイテム等は、そのままタップで選択。
  • 仮想十字キー・ボタン類は無し。マップ上の移動、会話は目的地タップ式
  • メニュー呼び出し、キャンセル操作は二本指タップ
  • ダッシュボタン、PageUP/PageDownボタン等は対応せず（オプションで常時ダッシュは選択可能）

つまり、ツクール伝統のUIデザインをほぼ変えずに、タッチパネル式の操作を適用した形です。
しかし、やはりキーボード（ゲームパッド）操作とタッチ操作は違うもの。
物理ボタン用に作られたＵＩを、そのままスマホ上で使うには限界があります。

◆操作性の問題

私が気になったのは、下記の４点です。

  1. 一番の問題は、やはり二本指タップ。ゲーム内で説明しなければまず気づいてもらえない上に、
    キャンセル操作のたびに二本指で操作するのは、少々億劫。

  2. 戦闘コマンドやアイテム等、選択メニューの縦幅が狭い。
    縦に小さく積まれたボタンを、指で押し分けるのは困難。

  3. マップ上の目的地や、選択メニューの出現位置によっては、画面のかなり上部を押さなくてはならず
    指の動作範囲が広がってしまうため、親指のみの片手操作は困難。

  4. 固定配置の決定ボタンが存在しないため、
    戦闘シーンで毎ターン「攻撃をタップ→敵の名前をタップ」を繰り返す必要があるのが面倒。
    また敵の画像を直接タップしても選択できない事にも困惑する。

このうち、2.の問題は、うろろこ様のプラグイン「スマホ向けUI」で解消できます。
こちらは、選択メニューの行間を広げ、ボタンの縦幅を広げるというもの。
（これを導入するだけでもかなり快適ですので、是非使ってみてください！）
また4.については、MV同梱プラグインの「YEP_BattleEngineCore」を導入すると、
画像タップで選択できるようになります。

仮想ボタンプラグインを作ってみた

というわけで、二本指タップの手間をクリアすべく、キャンセル／メニューボタンを設置してみました。

jsからキャンセル／メニュー（escape）ボタンをトリガーするには、
Input._currentState['escape'] = true;を指定すれば良いようです。簡単ですね。

あとはボタン画像を配置し、タッチしたときtrue、離したときfalseとするだけです。
こんな感じで置いてみました。

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外に置きたい

そんな調子で決定、キャンセルボタン、方向ボタンを配置しました。


こちらを後日プラグイン化したものを、 で配信しています。
プラグインをONにするだけで、スマホ実行時に仮想ボタンが出てきます。

◆操作性を良くするために

仮想ゲームパッドにおいて、操作性の良し悪しを決めるのはレバー（方向ボタン）の接触判定です。
この設計が甘く、ユーザーレビューで「操作性が悪い」とこき下ろされている企業アプリも少なくありません。

操作しやすい仮想十字キー

◆仮想ゲームパッドの問題点

仮想ゲームパッドは、物理ゲームパッド用に設計されたUIをそのままアプリで使用できるようになるため
既存ゲームのプログラムを流用し、端末側でハード処理を再現するエミュレーション式アプリや
コンシューマー機からの移植アプリではよく採用される手段です。

しかし、画面の大部分をボタンが占めてしまうため、視界を奪い、プレイ領域が制限される問題や、
選択式のタッチパネルに比べ表現力に乏しく、ユーザーの行動を導きにくいという欠点があります。

また、操作にはある程度の「慣れ」を要求するので、ライトユーザーにとっては敷居が高くなってしまい、
物理ゲームパッドに慣れたゲーマー層には、「操作しにくいもの」というイメージを持たれているようです。

結果として、仮想ゲームパッドは採用されにくい傾向にあります。

本作MVでも、物理ゲームパッド用のUIを継承しているにも関わらず、仮想パッドが配置されずに
タッチパネル操作が採用されたのは、そういった理由からと思われます。

タッチパネル操作を最適化する

そこで、既存のタッチパネル方式をスマホで操作しやすく再レイアウトする方向も検討してみます。

ただし、ゲームをweb公開にした場合、PCからアクセスした時にもスマホ用のレイアウトになっていると
かえって操作しにくくなってしまうので、端末を判定した上で、組み替えを行うのが理想的です。

◆モバイルのときだけ表示を変える

ユーザーの実行環境がPCか携帯端末（スマホ・タブレット）かの判定は、
rpg_core.jsに定義されている関数 Utils.isMobileDevice() を使えばどこからでも取得できます。

javascript：MVのモバイル判定
if(Utils.isMobileDevice()){
    //モバイル機の組み換え処理
}

この分岐をかけることで、同一ソースのゲームを

MVのユーザーエージェント分岐
このように、スマホのときだけメニューボタンを大きくする処理もできるわけです。
（この関数で、モバイルのときだけ説明テキストを変えるイベントとかも作れますね）

RPGツクールのUIをスマホに最適化したらどうなる？

MVのスマホUI最適化を考えたとき、一番参考になるアプリはズバリ、
スマホ移植版のドラクエ、FFシリーズです。安直だ･･と言われればその通りなのですが、

そもそもRPGツクールのUI自体が、完全にドラクエ、FFに倣っています。MVもしかり。
ドラクエ、FFの移植アプリは、原作のUIをなるべく維持しつつ、スマホ用に最適化されています。
つまり、アプローチの過程が一緒なんですね。これを参考にしない手はない。

実際、意識して遊んでみると、そのまま採用したくなるUIが盛りだくさんです。

そこでRPGのシーン別に、MVのスマホ最適化UIを具体的に考えてみました。
今回は横長の画面でサンプル画像を作成しましたが、縦長（縦持ちの片手操作）の対応も想定しています。

◆イベント選択肢

指の可動範囲を考えると、選択肢その他のボタン類は、画面下部に置くのがベターです。
縦よりも横に並べたほうがタッチミスを防げるので、長い選択肢でなければ、左の配置になると良いです。
（スマホ版のドラクエ４ではこの方式が採用されていました。）

canvas外に置きたい

◆マップ画面、メニュー

タッチ操作では、移動中にも使用頻度の高いメニューは常に表示されていると便利です。
アイテムと魔法（スキル）はワンタッチで使用可能で、その他のメニューは1箇所にまとめた例です。

canvas外に置きたい

◆戦闘画面

高頻度で使う戦闘コマンドは、なるべく大きめに押しやすく、またアイコンを使って記号化すると直感的です。
フロントビューでは、パーティのステータスを上部に置いてしまっても良さそうです。
（左の画面はスマホ版のドラクエ、右の画面はFFを参考にしています。）

canvas外に置きたい

では、最終的に仮想ゲームパッド設置とタッチパネル拡張のどちらを採用するかを考えてみます。

仮想ゲームパッド設置とタッチパネル拡張、どちらを採用するか？

これは、一概にどちらが良いとは言えません。
貴方の作りたいゲームの条件によって、下記のような採用基準があるでしょう。

仮想ゲームパッド設置 タッチパネル拡張
ターゲット層 ややゲーマー向け ライトユーザー向け
画面比率 4:3向け 16:9向け
デバイス方向 横持ち向け 縦／横どちらでも
プレイスタイル 両手操作向け 片手操作も可
指の動作範囲 狭くて済む 広くなりがち
プラットフォーム マルチ展開向け スマホのみ展開向け
エンカウント制 ランダム/シンボル シンボルは不向き

ざっくり言えば、ＰＣ・スマホで同時展開し、UXを統一したいのであれば仮想パッドを採用、
スマホ展開のみ・ライトユーザーを重視するなら、タッチパネル方式を拡張するのが良いでしょう。

もちろん、「マップ画面でのみ十字パッドを出現させる」といったハイブリッド式（？）を
採ることも可能です。シーンによって上手に使い分けるのが理想です。

おわりに

ゲームUIを考える事は、ゲームのルールをいかに解りやすく視覚化し、誘導するかを考える事です。
つまり、ゲームルールの数だけUIの答えがあり、プラグインを作るにしても、ベストな形を提示するのは難しい。

せっかくのマルチプラットフォーム対応を最大活用するために、
貴方のゲームにベストなUIを考えてみてはいかがでしょうか？

36
32
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
36
32