2135
1
0

スマホゲームにおけるUIワークフローとUI実装を楽にした話

Published at December 2, 2019 10:17 a.m.
Edited at December 1, 2019 1:29 p.m.

Happy Elementsカカリアスタジオ Advent Calendar 2019の7日目の記事です。
この記事ではゲーム制作のUIワークフロー改善の取り組みについて振り返ってみようと思います。

スマホゲームにおけるUIの役割

私たちがゲームを遊ぶときに、画面を操作するために必要な情報を表示したり、ユーザーの操作を受け付ける部品のことをユーザーインターフェース（UI）と言います。

ゲームにおいて UI はどのような役割を担うでしょうか。

私たちが普段何気なく遊んでいるゲームですが、ユーザーが何か行動を起こすには判断材料となる情報が必要です。UIには ユーザーに必要な情報を画面に表示する という役割があります。

また、ゲームはインタラクティブな娯楽なので、コンピュータがゲームの進行を行うためには、ユーザーの命令をコンピュータに伝えることが必要です。

特にスマホゲームでは、ユーザーの入力がタッチパネルで検出されるため、ユーザーの操作を受けつける という役割も担います。

以上のことから、スマホゲームにおいて UI はユーザーとゲームの橋渡しを担当する存在 ということが言えるでしょう。

UIワークフロー

さて、UI が担う役割を説明したところで、本題に入っていきたいと思います。

ここからは製作者の目線で、まずはスマホゲームの画面がどのように作られていくかという話をしたいと思います。

UIワークフローの全体像

こちらの画像は、UI が作られるまでの工程をざっくりまとめた図になります。

ゲーム制作はひとりでは完結しないため、各職群から意見を出し合い実装を行います。

UI に関連するところでいうと、プランナー／デザイナー／エンジニア が中心になって進めていくことが多いと思います。

工程としては、次のようなイメージになります。

  • 各画面で実行可能な操作と必要な情報を定義
  • UI/UXの観点からユースケースを検討しデザインを作成
  • 画面仕様とデザインを元に機能を実装

このように、各フェーズで様々な検討事項が話し合われ UI が出来上がっていきます。

UI実装を楽にする

今回はUIワークフローの中でも、特にUI実装の中心となる デザイン→開発 に焦点を当てて、UI実装の課題や楽にするための取り組みについて話をしたいと思います。

デザイナーとエンジニアの作業環境

まず今回の話の前提として次のツールを使います。

  • Photoshop
  • Unity

各ツールについては業界標準なので説明も不要かと思いますが、Photoshop はUIデザインの制作を行い、Unity で実際にゲーム画面を組み込んでいきます。

UI実装で大変なこと

スマホゲームを制作する上で、開発者としては次の苦労があるあるだと思っています。

  • デザイナーとエンジニアで作業を切り分けるのが難しい！
  • とにかく画面数が多い…！
  • 多解像度対応が大変！

もっと効率よくUI実装を行えないかな？という問題意識がありました。

Photoshop と Unity を連携するツール

効率よくUI実装を行うアプローチとして、作業の切り分け／作業量の軽減という観点から、Photoshop と Unity を連携するツールを作成しました。

こちらのツールを使うことにより Photoshop のデザインを Unity で再現すること が可能になり、次のメリットがありました。

  • デザイナーとエンジニアの作業の切り分けができる
  • Unity上にUIを組み込む作業負担の軽減

Prefabの組み込みをどうするか問題

UI実装をどのように行っていくかは、プロジェクトによって作法が異なるように思います。

UI実装を次の工程に分けた場合、

  1. Photoshop で画面イメージを作成
  2. Unity で Prefab 作成
  3. UnityでUIを実装

1, 3 はそれぞれ、デザイナーとエンジニアで担当が明確に分かれますが、2 の工程を誰が担当するかは明確な答えが見つけづらいと思っています。

その理由として、デザイナーが Unity を扱えるかどうかという観点があり、デザイナーが Prefab 制作まで担当するとなると、ワークフローに属人性が生まれてしまうという課題があると思います。

上記の観点から、ではエンジニアが Prefab 作成をするのがよいかというと、それはそれで課題があって、デザイナーが想定していた配置とズレる、多解像度対応のやり取りが煩雑になる、など難しい問題が浮上してきます。

ツールを使った場合のUI実装フロー

ツールを使う場合、2 の工程をほぼツールが吸収してくれるので、

  • Photoshop でデザインを行う
  • Unity で Prefab を作成する

という作業を並行して行うことが可能になり、デザイナー側で 2 の工程まで対応できるようになりました。

また、ワークフローの属人性問題については、Unity の知識が必要ではあるものの、手順化を行うことにより、作業の敷居は低くなったのではないかと考えています。

さらに、Unity 上で画面の挙動を確認しながら Photoshop でデータを調整出来るようになったおかげで、PSDデータと Prefab の差分が少なくなったという声もありました。

多解像度対応の考慮

Prefab の制作工程において多解像度対応をいかに行うかという課題もあったのですが、こちらもツール上で実験的な試みをしていて、PSDデータ上で多解像度対応の指定ができるようにしてみました。

具体的には PSDデータ に特定の書式でレイヤー名を記述することにより、アンカーの設定などがボタン一発で設定できるようにしたのですが、これが手付け箇所を減らすのに大きく貢献しました。

ツールの技術的概要

最後にツールで使用した技術について話をして締めたいと思います。

Photoshop には拡張機能という形で、PSDに対して行う操作を JavaScript で記述することができます。

こちらを利用して、PSDのレイヤー構造を Unity が把握できるように中間ファイルを生成するようにしました。

PSDtoUIを用いたデータ変換のフロー

工程としては次のようになります。

  1. Photoshopでデザインを作成し、ツール用に調整
  2. Photoshopデザインを中間ファイルに変換
  3. 中間ファイルを Unity で GameObject に変換

中間ファイルのデータの持ち方

中間ファイルは json 形式になっていて、以下の情報を保持します。

  • 各部品のレイヤー構造（Photoshop のレイヤー → Unity のヒエラルキー）
  • 位置とサイズに関する情報（画像やテキストの大きさ → RectTransform）
  • 各コンポーネントに紐づく情報（画像のファイル、テキストのフォント など）

このように Photoshop と Unity のコミュニケーションを、中間ファイルでやり取りを行うというアプローチでツールを制作しました。

補足

拡張機能を作成する上で、とても役立つリファレンスがあったので紹介します！
Adobe Photoshop CC JavaScript Reference

おわりに

スマホゲームのUI制作について、ワークフローという切り口から、大変になりがちな工程をどうやって改善したかという話でした。

ゲーム開発をする上で UI は避けて通れない箇所で、わりとスムーズに導入するのが難しい分野だったりするので、このような情報が役に立てばよいなと思っています。

最後まで読んでいただき有難うございました。