ニュース
【CEDEC2017】限りなくシンプルなUIを目指した「ゼルダ」。オープンエアーの世界における表現とは
2017年9月2日 20:15
- 8月30日～9月1日 開催
- 会場：パシフィコ横浜
「ゼルダの伝説」で目指したUI表現とは
CEDEC2017の最終日となった9月1日には、任天堂による「『ゼルダの伝説 ブレス オブ ザ ワイルド』のUIが目指したこと～世界に溶け込み、かつ印象的なUI表現～」と題したセッションが行われた。講演したのは同社のUIプログラム担当の北山茂寿氏と、UIリードデザイン担当の長谷隆広氏だ。
これまで今回の「ゼルダ」関連のセッションで繰り返し「これまでのゼルダにないもの」をテーマに展開したと語られてきたが、UI表現についても同じで、「ゼルダのアタリマエを見直す」というのが開発テーマだった。前作の「ゼルダの伝説 スカイウォードソード」では、体力を表すハートマークや持っているルピーの額、操作方法のアイコンなどはかなり大きく表現されているが、本作ではうって変わってとてもシンプルな物となった。これは、ぱっと見て変わったと感じてもらうことに加え、オープンエアーとなったゼルダの世界に没頭してもらうことが狙いだった。なのでUIのアートコンセプトも「なければない方がよいUI」となった。
しかし情報を与えるという本来の役割を考えると、なくせないものもある。この相反するテーマについて、グラフィックス、フォント、仕様・設計、アニメーションの4つのポイントに分けて語られた。
まずはグラフィックスだ。邪魔せず、悪目立ちをしないで存在感を抑えることを目的として設計。情報をまとめて、見るべき場所を減らし、邪魔しないよう作られた。全体的にサイズを小さくし、存在感を抑えると共に、アイコンも縁線をなくしてべた塗りにするなどし、クセを排除して悪目立ちをさせないように考えられた。起動した際のメニュー画面も選択肢を大きく表示するのではなく、余白を生かしたデザインに。すっきりと見せることを心がけた。武器や防具の選択画面では見慣れたルールを採用すると共に、初見でもわかりやすい構図を利用した。
そしてシンプルな表現の元になったのが「ゼルダホワイト」と呼ばれる色使いだ。これは真っ白よりも若干黄色がかかった色で、すべての画面にこれを使うことで統一感を出した。この色はロゴやパッケージデザインにも使われたので、今作全体にさらなる統一感を与える結果となった。
次にフォントだ。過剰な演出を置き換えるため、白抜きや縁なし、単色塗りといったものにして装飾要素がゼロになるよう心がけて制作された。大きさも、日本語については極太で展開し、海外向けのフォントは社内で制作された。日本語版フォントは力強さと懐かしさを共存させるよう、カタカナには「ロゴGブラック」、漢字には「ラグランパンチ」とフォントの種類をそれぞれ変更。斜体をかけることでテキストが引き締まって読みやすくなるよう設計されている。このフォントに合わせてロゴも設計され、こちらも統一感を出した。
そしてUIの仕様・設計についてだが、常に表示されるのではなく、必要な時に表示される方向へと変更された。これにより画面から圧迫感が消えた。しかしこれでも、ゲームを進めていくと徐々に常時表示されるUIが増えてきて画面に圧迫感が出てきたため、海外チームより「もっとなくして欲しい」と言われ、プロモードを作成。この画面ではゼルダの世界をより感じられるようになり、没入感が強まることとなった。
そして本作で重要な役割を果たす「シーカーストーン」についてだが、これはアートメンバーと連携を取り、古代技術を表現することでほかのUIと差別化を図ったとのこと。ここでは逆に装飾的な表現が用いられている。またマップ画面については、構成や覚えるべき操作方法をそろえることで、プレイを阻害しないための工夫が施されている。
また本作の特徴となっているのが、ゲームを初期起動したあと、チュートリアルが存在しないこと。これもゲームへの没入感を強くするための設定。操作パネルを必要な時に表示したり、ポップアップでのヘルプを作ったりと、ゲームをやらされている気持ちにならないように配慮されている。
このほか、文字表示などにはあえてアニメーションを多用し、印象的に働きかけることに。これは、サイズを小さくしたため、情報を伝えるのが不十分だったから。そのためアニメ－ションを取り入れて強調表示し、伝えることとした。ダメージを受けた時にハートゲージが減る時も、発光させて後追いアニメにしたり、シンプルなUIを高品質に見えるよう模索をしたとのこと。これらの表現だが、テクスチャをキャプチャして加工できるツールを用意することで作られたそうだ。
プログラマーとの連携で効率的なUI設計が行えるように
そしてここからは技術的な側面からUIの設計について語られた。UIについては、明確なアートコンセプトは序盤からあったものの、デザイナーは実質2名と少なく、作らなければいけない物量を考えると、かなり厳しかったのだという。そこでプログラマーとデザイナーのあいだで、さまざまな工夫が施された。
まず制作環境だが、Wii UとNintendo SwitchのSDKで提供されている「LayoutEditor」を使用。これに内製のライブラリを加えて拡張し、デザイナーのプレビュー環境を強化すると共に、デザイナーがツール上で使えるよう、データドリブンで設定可能な機能を追加した。LayoutEditorでは、デザイナーが画面ノードの配置やアニメーションを作成できるほか、付属のライブラリでプログラマが制御できるようになっている。またノードについては親子関係を持たせ、親の移動やスケール、回転が子に伝わるようにした。
制作環境だが、これまではデータ作成をしたあとのビューアがゲーム上では展開できなかったため、デザイナーが作成したあとプログラマーによる実装が不可欠だった。それを今回はゲーム画面に重ねてプレビューできるように変更。リソースを編集しなくても、ゲーム実行中に描画ノードを調整したりできるようにした。この結果、プログラマーがデバッグする時にも活用できたので有用だったという。
フィールドマップの作成だが、全体を120の区画に分けて動的に読み込むように対応。これはそれぞれの区画において、四段階のズームが可能であり、未オープンのエリアは色分けされるといった構造になっているので、合計で2,344枚の画面が必要となる。これをそれぞれ手作業で行なうのはとても困難だ。このため、これらのマップは自動生成するように設計された。具体的には、地形や水場、樹木、建物、街道など16種類の高さ情報を合成。各区画ごとに毎日夜間にテクスチャを自動生成するようにした。これにより、地形アーティストがデータをブラッシュアップした結果がすぐに反映されるので、UIデザイナーも同時に作業をできるというメリットが生まれた。
また本作のツールで用意されたキャプチャ機能についてだが、キャプチャ機能は汎用的な物だが、一見すると何ができるのがわかりにくい。しかし1度理解すると応用範囲が広く、さまざまな用途に使えるというものだ。今回用意されたキャプチャ機能は、さまざまな使い方をデザイナーが編み出し、想定された以上の結果をもたらしてくれたという。
例えば剣を入手した時の表現だが、こちらにはフィルム処理を用いた台紙表現が導入されている。実際には、フレームバッファをキャプチャして、明度の調整とレベル補正を行なって貼り付け。明るい部分はくらく、暗い部分は沈みすぎないようにすることで、台紙内での明度の差を小さくできる。こうした使い方は、上にUIを乗せる台紙として、随所で使われたそうだ。
例えばポーチでアイテムのアイコンが移動する画面があるが、ここでは背景の描画をキャプチャして保持。ボタン（アイコン）を描画させてマスクさせたい内容にはさみ、保持していた背景にマスク処理を駆けて再描画している。これにより、両端では次に表示されるボタンがボケた状態で画面送りができるような表現が可能となった。これに似たものに一言メッセージの閉じる表現があり。テキストと台紙をキャプチャしたあと、それを左右2つのノードに分けて描画。マスクテクスチャをスクロールさせて乗算することで、左右から中央に流れて消える表現が作られている。
こうして、デザイナーがプログラマーと双方で工夫することで、目指していた方向性に向かうことができたと語る。任天堂が開催したその他のセッションでもそうだったが、今回の「ゼルダ」はかなり大規模な開発になることが予想され、それに対応するため必要な部分は自動化し、クリエイティブに力を入れるよう、システムが設計されているように感じた。クリエイターとエンジニア双方の協力により、本作は生まれたことがよく分かるセッションであった。