アングリーバードを作った会社のUIを見てみよう

こんにちは、キャプです。

今回はROVIOが出している「BATTLE BAY」のUIについて行こうと思います。

ちなみに、ROVIOは日本でも流行ったアングリーバードを手掛けてる会社なので内容に期待です!

「BATTLE BAY」ってどんなどんなゲーム?

簡単にまとめると、5対5の3Dリアルタイムオンラインバトルシューティングゲームです。

シューティングなので、動きが早いFPS視点のゲームかと思いますが、バトルの舞台が波がある海のなので、そんなにスピード感があるバトルではなく視点もTPSなのでシューティングゲーム初心者でも意外と出来る印象です。

(グレンジ内で最弱ゲーマーの称号を持つ私でも初めてのバトルで勝つことができました!) 


主なゲームの流れ

①まずは船長を訓練

②船を購入&武器の装着

③いざバトル

もちろん始めはチュートリアルもしっかりありますが、ざっくりな始めの流れはこのような感じです。



横画面ゲームコントローラーUIについて

本題のUIUXについてです!

縦画面のとは違い、画面目一杯をプレイ画面として使用でき、コントローラーを左右に配置することができるので移動と攻撃を片方ずつに割振ることができます。(極端に分けると上ののようなイメージ) 

横画面だと複数の機能を片手で操作しなくて良いのが特徴ですね。

また、一般的なコンシューマーゲームのコントローラーに持ち方が近く、ボタン配置も同じように配置できるため、1度でもコンシューマーゲームを触ったことがあるユーザーからすると抵抗がありません。

ちなみに「BATTLE BAY」の場合...

左コントローラー:移動と旋回

右コントローラー:ターゲットカーソルの移動と攻撃

右コントローラー上:ターゲットロックオン

画面右:武器種切り替え

画面右下:スタンプによるコミュニケーションパレットの表示


両手で持った時のボタン位置について

上の画像は「The Thumb Zone」の横画面バージョンをバトル画面に重ねたものです。

操作頻度の高い機能がNaturalのエリアにのがわかりますね、だからと言って極端に画面端に配置すればいいというわけではないこともわかります。

( Natural:負荷なく触れるエリア。Stretch:少し負荷がかかるけど触れるエリア) 

BATTLE BAYの場合、速度を要求される操作がほぼなくフリック操作もないため、指をコントローラーのホームポジションから離したりするも少ないため、少し中央よりにコントローラーを配置してもプレイ時の視野を狭めたりしないような設計になってます。( プレイヤーも画面のセンターから大きく移動する作りではないというのもあります要素としてあります) 


モバイルゲームだからこそ、端末のサイズや遊び方、画面の向きをより考慮したデザインが必要になり、些細な位置や大きさの違いが思ったよりも大きな影響をユーザーに与えるかもしれません。



最後に...

UIデザイナーにとっては当たり前!みたいなことを書きましたが、UIデザイナーってどんなことするの?どんなこと考えてデザインしてる?と言ったことを少しでも理解していただけると嬉しいです。

ゲームは好きだが、バトルは弱いキャプでした〜。

0コメント

  • 1000 / 1000