Overriding-メイキング

Overridingメイキング第4回: Unityで音楽ゲームのUIデザイン

こんにちは、Boltzです。

長大祭はいよいよ明日ですね!

今回ばかりは前日に書いたものを予約投稿をしています……。
多分明日の今頃は、現地で準備をやっていると思うので。

ということで、本編に入ります!

今回はPC向け音楽ゲームであるOverriding制作過程を連載する企画の第4回目!

 

UIデザインについて書いていきたいと思います!

 

この記事をご覧になっている方で、UIデザイン、
またはUI(ユーザインタフェース)といった言葉を聞いたことがある方はいますか?

 

最初に自分が認識しているUIデザイン、
UIという言葉についてざっくりと解説していきたいと思います。

流れでUIデザインまでやることになってしまったような人の説明なので、
違っている部分も多いとは思いますが……。

 

UIとは何か検索してみると、だいたい「ユーザとデバイスの接点のこと」というような
結果が表示されるのではないでしょうか。
これでは抽象的なので、ゲームに置き換えて表現してみます。

すると「ゲームプレイヤーとゲームの接点のこと」となります。

 

この接点には何があるのか?
代表的なものとして、操作説明のパネルや画面の解説文、
画面の構成といったものが挙げられるのではないでしょうか。

 

前回の記事で、音楽ゲームOverridingに必要なものはオープニング画面と
モードセレクト画面、曲選択画面、リザルト画面という状況になりました。

 

これらを作っていくのが今回のUIデザインだと言えそうです
(画面間のデータの受け渡しを含むプログラム的な話は、
UIデザインと離れた内容になってしまうためパスしておきます)

 

まず、UIデザインに優れたゲームと言われて、
私が真っ先に思いつくのが「3Dゼルダシリーズ」です。

 

具体的に言えば、時のオカリナ64や風のタクト、トワイライトプリンセスなどの作品を指しています(ワイルドな最新作は趣が異なるので、今回の記事では話題に上げません)

 

どこが優れているかというと、画面右上にコントローラのボタンのマークが表示されており、
それに被さるようにして「押したら何ができるか」ということが書いてある点です。

 

こうすればアクションゲームに慣れていない初心者でも、
何を押したらどのような動作ができるか(ゲームの画面上で)一目で確認することができ、
非常に親切です。

 

私が初めてプレイしたアクションゲームは「ゼルダの伝説 風のタクト」で、
当時は小学生でした。

それまでRPGしかプレイしたことのない子供だったので、
リアルタイムなゲームについていけるか不安だったのですが、
このUIにかなり助けられた覚えがあります。

 

なぜ優れたUIの話や思い出話が唐突に出てきたかというと、
今作OverridingのUIは3DゼルダのようなUIを目指して作られているからです。

 

前回の記事(リンク)で初めてメジャーなリズムゲームを遊んだ話を書きました。

初めてゲームを遊んだとき、現在ゲームセンターで稼働しているゲームは
わりと玄人向けの設定も多く、難易度を変える設定すら
(画面をよく読まない私が悪い部分も多くあるのですが……)
確認しにくいといった印象を受けました。

 

あれもあれで機能的でかっこよくていいのですが、

今回は「音楽ゲーム初心者が初めてプレイしてもわかりやすいUI」を目指し、
必要な機能のみを目立たせて伝えることを重視して製作しました。

結果、このような画面になりました。

 

この画面を作った時に私はわかりやすい画面を作ることができたと思っていました。

しかし、テストプレイをしてくれるという人に遊んでもらうと、そもそもサイドボタンの存在がわからないと言われました。

 

そのため、「音楽ゲーム初心者が見てもわかりやすく、サイドボタンの存在も十分確認できるUI」に方針を変更して、以下の変更を加えました。

サイドボタンの色が灰色になっています。

 

これは、先程話に出てきたテストプレイをしてくれた人の意見を参考にして、
灰色のボタンがガイドにあるという違和感をもとに、
サイドボタンを探してもらうガイドにしました。

 

また、ボタンを押すと、そのボタンに対応するガイドが点滅するようにしました。
こうすることで上側の1番右のボタンをガイドでいう端のボタンだと
勘違いさせないように修正しました。

 

このように、いいデザインができたと自分で思っていたとしても、
試しに遊んでもらわなければ実はわかりにくいデザインだったことに
気づかないという結果になってしまいます。

 

自分以外の人が触る部分をデザインするため、
人に触ってもらいつつ意見を取り入れることがとても大切になってくる分野であることが
再確認できました。

 

こうしてUIデザインもひと段落つき、
だいたい遊べるようになってきました。

これでゲームも完成間近です!……ソフトウェア面では。

 

UIデザインが終了したのがだいたい10月の上旬でした。
ここからなかなか進んでいなかったハードウェア製作を一気に進めることとなります。

 

2019/11/8 追記 / リズムゲーム制作本を作成します。

この度、当サークルはC97という同人誌即売会にて
「Unityで作るリズムゲーム」という本を頒布します!!

この本は、Unityでリズムゲームを制作する際のプログラミングや譜面制作、UIデザインについて読めばまるっとわかる本を目指して作っています!

内容は、基本的なリズムゲームの作り方に加え

・どうやってノーツの生成(レベルデザイン)を簡単にするか?
・BMSも読み方と作り方
・ソフラン(テンポ変化のある曲)にどうやって対応するか?
・実装はどうするのか
・UIデザインの考え方
・譜面制作のパターン
・付録「サンプルゲーム」と「Unityのプロジェクト」

ぜひ会場(火曜日南地区 “ユ “ 26a)でお買い求めください!

※今後の情報発信はこちらのTwitterアカウントをご覧ください

2020/1/1 追記 / 頒布を始めました!

この記事で紹介している本をboothで頒布開始しました!よろしくお願いします!

ダウンロード版
https://ecml.booth.pm/items/1739359

書籍版
https://ecml.booth.pm/items/1739286

(追記ここまで)