【イベント】『ダビマス』で目指した“快適性”とわかりやすさが徹底された画面レイアウト　ドリコム主催の2D&3Dデザイナー向け勉強会を取材

2017年4月26日、東京・目黒にてドリコム主催のエンジニア向け勉強会「Drecom Tech Espresso #2」が開催された。

好評を博した前回（関連記事）に続き、2回目の開催となった本会では「2D&3Dデザイナが語る　ダビマスにおけるデザイナの役割とは」と題し、同社の人気作『ダービースタリオン マスターズ』の開発に携わったデザイナーが講演を行った。

 

■デザイナー目線で見る、『ダビマス』3つの課題

最初に登壇したのは、ドリコムの2Dデザイナーである冨田篤氏だ。同氏は、『ダービースタリオン マスターズ』でアートディレクションとUIデザイン・設計を担当した。なお、Social Game Infoでは以前、同氏へインタビューを行っており、ダビマス開発チームの取り組みについてはこちらの記事を参照してほしい。
 
■関連記事
【インタビュー】「チームのテンションはゲームに滲み出る」…『ダビマス』を彩るデザイナーたちが目指したのは“馬と自然の美しさ”
 
『ダービースタリオン マスターズ』は、プレイヤーが馬主となって、最強の競走馬を育てるシミュレーションゲームだ。25周年を迎えた『ダービースタリオン』シリーズの1つとして多くのファンに愛されている。
 
冨田氏によれば、本作のデザインは、シリーズ旧作から忠実に継承する部分と、新規追加となる機能とストーリーがあり、両方を違和感なく盛り込んでいく必要があったという。また、UIデザインの面では、“スマホでサクサク”というキャッチフレーズに表れているように、高い操作性と快適性が要求され、リリースまでにかなりの量の画面を用意しなくてはならなかった。
 
さらに、冨田氏が頭を悩ませたのは、Cocos2d-xによる3D表現だった。当時、ドリコムはCocos2d-xを用いた2Dゲーム開発を主流としていたため、Cocos2d-xで開発を進めることとなった。そのノウハウを活かしつつ、テレビ中継のような複雑でリアルなカメラワークを実現する必要もあったため、Cocos2d-xの3D機能を利用して開発を進めることとなったのだ。Cocos2d-xでの3D表現は事例がほとんどなく、非常に珍しいケースだったという。
 
このような経緯から、冨田氏はデザイナーとして3つの課題に直面した。
 
1つ目の課題は、2Dで表現するものと3Dを用いる部分の選別。2つ目は、縦持ち対応だ。従来の『ダービースタリオン』作品はコンシューマー向けのタイトルであるため、画面は横長にデザインされている。しかし、今作はスマートフォンを縦に持ってプレイするため、画面はどうしても縦長になってしまう。複雑なシミュレーションゲームを、縦持ちでも快適に遊べるような工夫が必要とされた。
 
3つ目の課題は、制作物の多さだ。開発当初から制作する画面の多さが予見されたことに加え、騎手、馬、施設などの種類も多く、効率よく量産できる体制を整えなくてはならなかった。

 

■2Dと3Dの住み分け

2Dにしろ3Dにしろ、一方で作ってしまった後は、途中で他方に変更することは難しい。そこで、冨田氏は、見栄えの良さ、制作・修正コスト、パフォーマンスを踏まえて、開発序盤に明確な「2D / 3Dの住み分け」方針を打ち立てたという。
 
まず、本作で3Dを用いるべきとしたのが「競馬場」と「動きのある馬」だ。競馬場は、ニンテンドー3DS版のモデルをスマートフォン向けに最適化したもので、直近の競馬場の様子を再現できるようにしている。馬については、レース、パドックなど多様なモーションやカメラワークが要求されるシーンで3Dが採用されている。



一方、静止している絵、デフォルメされているものは2Dで表現している。また、バナーは、馬の3Dモデルをレンダリングした素材をレタッチして作られている。




 

■画面レイアウトは「動くモノ」で検証する

画面レイアウトを検討する上で、冨田氏は2つの「ありそうな話」を挙げた。1つは、「プランナーから渡された画面仕様書通りに作っても、結局はユーザーにとって使いづらいデザインになってしまう」というケース。もうひとつは、「そもそも明確な画面仕様書がなく、開発メンバーがそれぞれ異なる解釈をしてしまい、終盤で大がかりな修正が必要となる」ケースだ。
 
特に、本作の開発にあたっては、「従来の横長画面をスマートフォン向けに変換するにはデザイン的な難しさがあり、それをチームで十分に共有できるか」という懸念を抱いていたのだという。
 
そういった状況を回避するため、プロトタイピングツールとアニメーション作成ツールを利用した。これらのツールで主要画面の操作感を確認し、フィードバックと修正を繰り返しながら、レイアウトを決定していったのだそうだ。動く画面で検証を繰り返すという制作フローにすることで、メンバー間の齟齬をなくすことができる上、修正が発生した場合でも影響範囲や優先度を把握してコミュニケーションを行える。本格的な実装の前に実機で十分に検証できるため、エンジニアに負担をかけずに、デザイナー側の裁量で細かな修正を施すことも可能となった。



 

■快適性とわかりやすさが徹底された画面レイアウト

『ダービースタリオン マスターズ』における画面レイアウトのパターンは、大きく分類すると下の写真のようになる。
 


まず、ホーム画面にあたる「牧場 / 厩舎」画面は、頻度や重要度などを鑑みて配置が決定されている。過密にならないようにボタンが厳選されており、よく使われるものは右下に、直接関連のない施設 / 機能は上下に配置され、ユーザーの目線を妨げない、使い勝手の良いレイアウトとなっている。



レース画面は、カメラワークと表示物のバランスを鑑みたサイズとなっている。カメラワークには、寄りすぎれば順位を把握できず、引きすぎると、馬を見分けづらくなるという問題があった。また、レースの様子を表示する範囲が縦に広すぎると不要なものが映り込んでしまい、狭すぎては迫力に欠けてしまう。このような試行錯誤の末、レースの表示領域は現在のサイズに決まったのだそうだ。



各施設のトップ画面は、キャラクターが大きめのレイアウトとなっている。本作では、キャラクターと施設（機能）が紐付いており、この紐付けは、シナリオやキャラクターデザイン・設定にも色濃く反映されている。




本作はシミュレーションゲームということもあり、全体を通じて、キャラクターによるコメントが多い。そこで、各シーンを「馬についてのコメント」「ユーザーに対するコメント」「ダイアログ的な用途」の3つのパターンに分類し、それぞれに合わせたレイアウトが設定されている。
 


 

■ゲーム開発でデザイナーが押さえるべきポイント

講演の最後に、冨田氏は、ゲーム開発の上でデザイナーが押さえるべきポイントをまとめた。まず、「初期段階の計画が大事」と話し、デザインは計画の段階で十分な検討が必要不可欠であることを強調した。
 
また、UIデザインという面では、プランナーやエンジニアとの関わりが多いパートであるため、「デザイナーだけで閉じていると危険」だといい、自分の意図を積極的に伝えていくことが求められる、と述べた。そして、開発をスムーズに進捗させるには「実機で実際に動くもので検証」し、確認と修正のサイクルを高めていくことが重要だと話した。



 

■Cocos2d-xによる3D表現への挑戦

2つ目のセッションでは、3Dデザイナーの松村武利氏が登壇した。松村氏は、アニメの制作会社で経験を積んだ後、ゲームの3Dアーティストに転向してスキルを磨いてきたデザイナーだ。現在は、『ダービースタリオン マスターズ』と『フルボッコヒーローズX』の3D制作を担当している。
 
『ダービースタリオン マスターズ』の開発が始まった当初、最初のセッションを行った冨田氏から「Cocos2d-xで3D表現をすることになった」と告げられ、松村氏は戸惑いを隠せなかったという。Unityによる手法も模索したが、当時のドリコムはUnityに関する知見が十分にあるとは言えない状況だったので、松村氏はCocos2d-xを用いた3D表現に踏み出すこととなった。
 
しかしながら、その試みは一筋縄ではいかなかった。本作はパフォーマンスを重視しており、負荷のかかる処理を組み込むことができなかったのだ。そのため、当初はデカール表現（ライトの影響を受けないテクスチャのみ表示すること）のみに限られていたという。

加えて、当時のCocos2d-xの3D表現はいささか機能不足の感が否めなかった。たとえば、松村氏は「光と影の表現をテクスチャでやりたかった」のだが、Cocos2d-xはマルチUVが使えず、表現の幅がかなり狭まってしまったのだそうだ。今でこそ、3D機能は揃ってきたものの、「あの時は、本当にどうしようかと思った」と、苦笑を交えて振り返っていた。

こうして、様々な制約がある中で「3DはMaya2016で作成し、デカール表現を前提に、FBXで出力してCocos2d-xに渡す」という手法で開発が進められた。

 

■競走馬を彩る「テクスチャの切り替え」

本作は、馬や騎手の種類が多く、様々なパターンが発生する。松村氏によれば、これは「テクスチャの切り替え」によって実現されているのだという。
 
同氏は、レースに出走する際の競走馬を例にして、「テクスチャの切り替え」について解説を行った。まず、馬のボディ、顔、足先、尻尾、ゼッケンなど、ベースとなるテクスチャを作成する。次に、このベーステクスチャに合わせて、切り替え用のパーツテクスチャを用意する。パーツテクスチャは、馬の体色、ゼッケンの番号とカラーといった色差分で、パーツ毎にそれぞれ作成する。そして、プログラム処理でベーステクスチャの上にパーツテクスチャを上書きすることで、テクスチャの切り替えを実現しているのだという。
 
ゲーム上では、レース直前の読み込みでテクスチャの切り替えが行われており、メンコ（競走馬用の覆面）のような装備品は更に上書きして表現されている。




 
 

■チームのサポートで危機を乗り越える

本作で作成された3Dモデルは、競馬場だけでも11箇所分があり、季節と天候によってテクスチャ差分がある。競馬場のゲートもモデルがあり、調教コースは2種存在する。馬は、競走馬と牧場にいる馬では異なるモデルが使用されている。人物のモデルもあり、モーションは人・馬合わせて約100種あるという。
 
ゲーム内でユーザーが目にする機会は少ないものの、競馬場は観客席や周辺の建物まで詳細に作り込まれており、勉強会ではモデル全体が披露された。




このように、松村氏は手の込んだ3Dモデルを多数制作したが、作業期間はわずか3ヵ月ほどだという。しかも、その間には妻の緊急入院と出産という大きな出来事もあった。作業のできない日が続くこともあったが、プロデューサーの金山氏をはじめ、チームのメンバーから「家族を大事にして、しっかり休暇を取ってほしい」と、温かい励ましとサポートをしてもらい、乗り越えることができたのだそうだ。

今回の勉強会も、高い問題可決力と、チーム一丸となってゲーム開発に取り組む社風を感じる、ドリコムらしい内容となった。

なお、ドリコムの公式技術ブログ「Tech Inside Drecom」には、『ダービースタリオン マスターズ』の技術面が紹介されている。興味のある方はぜひチェックしてみてほしい。