【AdobeXD】ステート機能、複数インタラクション設定をつかってコンシューマゲームのUIをつくる

※こちらの記事はAdobe XD Advent Calendar 2019 - Adventar の21日目の記事です※

概要

XDの新機能を使い、ゲームのUIを作成していきます。

f:id:Sa_takahashi:20191222025449p:plain

また、今回はコントローラ操作とマウス操作を一つのプロトタイプの中で実現させるようにします
タブをクリックしても画面遷移できるし、コントローラでも遷移できるようにする、ということですね。

制作データは公開するので、自由にカスタマイズして試してみてください

内容としては初心者向けです。

今回はApexレジェンズのメニューの模倣を例に紹介します。今回は以下のみ紹介します(ほかの分は後日更新します)

  • タブメニュー

タブメニューを作ってみよう

まずはタブメニューをステートを使って作成していきます。

ここでは、Apex、フォートナイトのようにコントローラではRB/LB、マウスではクリックでページ遷移してる場合を前提に作成します

今回、コンポーネントやステートを入れ子状にして作成しますが、改めてステートの機能を色々試してみて、思ってたようにインタラクションまわりが作用しなかったのが躓いたところでした。

ちょっと作り方の順番も重要だなと思ったので、順を追って説明します。

  1. 必要なページ数分アートボードを作成
  2. タブボタンのコンポーネントを作成
  3. タブ側のステート(初期、ホバー時、現在のページ)を作成
  4. タブボタンを必要個数分複製、ページ名を変える
  5. タブ全体のコンポーネントを作成
  6. 初期設定ステートの状態で、各タブボタンにタップで対応するページに遷移するように設定
  7. 各ページになっている状態のステートを作成
    1. 設定でつけた遷移リンクは引き継がれない為、都度トリガーを設定しているオブジェクトをコピペする必要あり
    2. このタイミングでゲームパッドで各ページに遷移するように設定
  8. 完成!

一つずつ順を追って説明していきます。

 

1.必要なページ数分アートボードを作成

今回はApexを参考作成していきます。

Apexのメニューはおおまかに

  • プレイ
  • レジェンド
  • ロードアウト(武器庫)
  • バトルパス
  • ストア

になります。各ページの中でまたタブが合ったりもしますが、今回はそれは考慮しません

 

今回はトップページ(プレイ)だけそれっぽい写真を使いましたが、あとは作りこまないので簡単に済ませてしまいました。

2.タブボタンのコンポーネントを作成

さて、Apexのタブはこんな構成です

まずはこのタブ部分のコンポーネントを作成します。ここは簡単なのでさくっと終わらせます

こんな形でさくっとプレーンの状態のコンポーネントを作成します

このタイミングでヘッダーのベース部分も作ってしまいましょう

3.タブ側のステート(初期、ホバー時、現在のページ)を作成

このコンポーネントに、ホバー時と現在のページを示す際のステートを追加します。

 

この際の注意点

  • 今回はタップトリガーなどでステートが遷移するように設定しない
  • 「現在のページ」ステート内に初期設定設定ステートのレイヤーを入れておいて非表示にしておくか、レイヤー名を変えること
    • これをやっておかないと、「現在のページ」ステートから初期設定ステートに戻る際、チラチラ白いのが光ってしまいます

 

4.タブボタンを必要個数分複製、ページ名を変える

複製する際、マスターコンポーネントではなく、普通のコンポーネントでやっておきましょう。(私はついやりがち)

それから、初期設定でテキスト部分を変えていても、各ステートには反映されないようなので、忘れず各ステートでも確認してみてください

(これもっといい方法があるのでしょうか・・・反映されても良さそうなものですが。あれば是非教えてください)

5.タブ全体のコンポーネントを作成

このタイミングで、ヘッダーの他のパーツも作成してしまいます。各々コンポーネントしてしまいます

さらっと紹介します。まず一つはゲームロゴ。これは簡単。画像一枚追加するだけで良いですね。

次にゲーム内通貨表示。

これは、このあたりにホバーすると

ちょっと離れたところに詳細が表示されます。実際のゲームではカーソルに合わせて表示が追従しますが、XDはそこまで再現できないので、ホバーで表示するところまでやります

初期設定ステート

この段階からあとで表示される通貨詳細のデータを入れておき、非表示にしておきます。

ホバーでは表示しておくだけ良いです。

なお、ホバーが効く範囲はコンポーネントのサイズです。コンポエーネントのサイズは何かオブジェクトが置かれている範囲を囲う矩形なので

初期設定では、このサイズですが

ホバー時はここまで領域は広がってしまいます。

挙動としては通貨表示にカーソルを載せて詳細が表示された後、結構カーソルを離さないと表示が消えない、という状況が起こります。

逆に、見えなくてもコンポーネント内にあれば領域を広げてくれるので、例えば初期設定ではわざわざ透明のオブジェクトをおいてホバーがきく範囲を増やしています

 

最後にキーヘルプです。

ゲームパッドで操作する場合、必ずどのキーを押すべきなのか示します。今回はどのキーを押すとページが切り替わるかを示すキーヘルプです(ここではXboxに合わせたRBにしちゃいました)

ここはさくっとこんな感じで画像置いちゃうだけで良いです。

 

さて、パーツができたなら、

これらを合わせた大きいコンポーネントを作成しましょう

 

 

6.初期設定ステートの状態で、各タブボタンにタップで対応するページに遷移するように設定

ここからプロトタイプのトリガーを設定する作業に入ります。

この作業を行う際は、アートボード内にヘッダーのコンポーネントを置いて行うようにしてください。

今いるアートボードは遷移先選べないのが不都合なためです

 

 

既にホバーステートを設定しているため、このような表示になっているかと思います。

ここでこの「+」をクリックすると遷移トリガーが追加されます

するとインタラクションメニューはこのような画面になっています。ここで今追加したトリガーの設定をします

ここで、タップした後各画面に遷移するように設定します

ページ名をアートボードにしてわかりやすくしておくとよいです

 

これを各タブ・ページ分行います

こんな形でつながっているでしょうか?

7.各ページになっている状態のステートを作成

各画面でのヘッダーの状態差分をステートとして設定していきます。

プレイ画面を例に進めます。まずは「プレイ」というステートをヘッダーコンポーネントに対して作りましょう。

a.設定でつけた遷移リンクは引き継がれない為、都度トリガーを設定しているオブジェクトをコピペする必要あり

さて、じつは新しいステートを作ったタイミングで初期設定でつけていた各画面へのリンクが切れてしまいます

タブコンポーネントで設定していたホバーステートやタップをすると別のステートに切り替わる、ということは引き継がれます。

えぇ・・・って正直思ったのですが。引き継がれないのか・・・
そもそもここまで入れ子にして使うような用途ではないのかもしれないですね。

 

 

そこで、初期設定のタブボタンを「プレイ」ステートにコピペします。位置もリンクも引き継がれます

ヘッダーを初期設定ステートに戻し、タブボタンを選択します。リンクの部分も水色になっていることを確認してください。
この状態でコピーします

 

そしてまたヘッダーのステートを「プレイ」に戻し、こちら側のタブボタンを削除しましょう

初期設定ステート時にコピーしたタブボタンをペーストします。

私は最初戸惑ったのですが、コンポーネントやグループ内にペーストしたい場合は下のように、その中のレイヤーを選択した上でペーストします

すると「プレイ」ステートに各画面への遷移を持ってくることができます

煩わしい作業ではありますね・・・なんかいい方法あるんだろうか。あれば教えて欲しいです・・・!

このタブボタンをヘッダーコンポーネントの外にコピペしておく方が楽なのですが、位置の引き継ぎを考えるとこれでやるしかないのかな

b.このタイミングでゲームパッドで各ページに遷移するように設定

ここでゲームパッドのR1/L1(RB/LB)で左右に振れるようにします。また、各画面に切り替わっているときの表示もここで設定します。

さて、ここから先は私の都合でPS4コントローラーで進めていきます。xboxコントローラーでもどっちでも良いです。

 

お?コントローラーをXDに??どうやって???

そんな方もいらっしゃると思うので、そんな方は以下をご参照ください、ということで・・・!

 

キーヘルプ画像にゲームパッドトリガーを設定します。R1を押したら次のページに行く仕様なので

次のページに行くように設定しておきます。

 

最後に現在のページの部分のタブを「現在のページ」ステートに変更します。

たとえば今いる画面がプレイ画面なら、プレイと書かれたタブのステートを「現在のページ」にしておきます

 

さて、これを各画面分やっていきます!

いいですか?a・bの作業を、各画面分やるのです・・・!

 

するとこんな感じになります

この作業を行なったヘッダーをコピーしてもアートボード外(ペーストボード)ならリンクを維持します。

私はここまでやって、(これ、ステートやる意味もあんまりないのでは・・・?)と思いました・・・苦しい・・・
ここまで付き合わせたのに!すみません・・・

ステートを切り替えるたびヘッダーレイヤーを選択しないといけないのがいけないんだ・・・

多分6番までやったら、各画面にヘッダーをコピペして、タブのステートを設定してしまってもよいと思います。
でもここは、一応ステートでもできるよということで・・・!w

おそらく画面内の構成物に対して、十字キーおよびアナログスティックを動かし選択する、みたいな場合(リストUIとか)は7.のような段階が必要で、
ここでゲームパッドでのステート間遷移を設定すると良いのかなと思います。
ここでステート間遷移のトリガーにゲームパッドがあれば簡単にできるはずなんですが・・・現状はできず・・・
これについてはまた近々記事にしてみたいと思います。乞うご期待・・・!w

 

ちなみに、各画面への遷移はマスターコンポーネントには引き継がれないです

コンポーネントリストから取り出してくるとこんな感じで各ページへの遷移は無くなっています

って思ったけどあれ?コンポーネントでないものにつけたリンクは引き継がれてる・・・?

L1だけコンポーネント解除して作ってみたら、ここだけリンクが残っていました。コンポーネントのままのR1はリンク消えてるのに・・・

多分コンポーネントにつけているリンクは残らないけど、そうでなければ残るのかもしれない・・・?
とはいえ、あとでデザイン差し替えるの簡単になるように各パーツをコンポーネント化しておきたいですよね・・・リンク用の透明オブジェクトでトリガー設定すれば良いのか・・・?
あ、でもそれだとタップで遷移させることと、ホバーが共存しない・・・うぅ・・・

ここはまたいつかちゃんと調べてまとめたいなと思いました。

 

8.完成!

さて、こいつを各画面のアートボードに配置していきましょう

上記のように画面分ヘッダーをコピペして、各ステートに設定した状態のものでやるとトリガーが維持されたままでうまくいきます。
(これだとちゃんとおなじ位置に表示されるXDのコピペのいいところガン無視なのが恐縮なのですが・・・!ヘッダーならこれでいいかなと)

 

 

さて、これで準備は整いました!これで完成です!

早速プレビューしてみましょう

▼共有リンク こちらで体験できます
https://xd.adobe.com/view/34f4d63b-8723-4e61-5627-288c88deca38-42c5/screen/2ae52326-3782-43fe-a204-0516f5d4fe2a/-?hints=off

注意!!Google Chromeで閲覧しないとゲームパッドトリガーが対応していません!

注意!!PS4コントローラーで作成しているため、PS4コントローラーでやらないとゲームパッドトリガーが対応していません!

 

今回のXDデータはこちらになります(こっちもPS4コントローラでつくってるのでXboxコントローラの方はすみません・・・!)

Apex_Menu1.xd

 

Apexと似たようなメニュー構成であれば、このデータを流用して独自に使うことも可能かと思います。
ご自由にお使いください。

もう少しカスタムしやすく流用しやすいようなデータができたら共有できたらなと思います。


 

至らないところもあったかと思いますが、最後まで読んでいただきありがとうございました!