水島 克

スマホゲームのUI仕様書


ゲームデザイナの水島です。

Aimingでは定期的に社内勉強会をやってます。

自分は若いプランナー向けにゲーム開発の基礎的な話をすることが多いのですが、新しいメンバーが増えてくると、何年か置いて同じ話を繰り返しすることもあります。手抜きといえばそのとおりなんですが、自分の中でも定期的に見直す良い機会だと思ってまして、今回もそんなお話です。

5年前に行った勉強会のスライド「企画が考えるスマホUIデザイン」は、現在27万viewと多くの方にみていただきました。

でもいま見返すと古いと感じるところも結構あります。当時はブラウザのソーシャルゲームからの移行期で、スマホネイティブのゲームも今ほど多く無かったため、いろいろ手探りの状態だったな~と思い出します。弊社の話でいうと、制作のパイプラインなんかは、その後だいぶ改善されたと感じてます。

そこで今回はもうちょっとテーマを絞って、UI仕様書について話してみることにしました。

スライドの中でも触れてますが、プランナーが書く仕様書の位置づけはチームによってバラバラ。しかも人によってはこだわりを持つ部分でもあるため、時に議論のたねになります。例えば、エクセル方眼紙のメソッドは宗教論争みたいになることもあって、傍から見てると面白い。

今回はもうちょっとマイルドに、「チーム毎に仕様書の項目の優先度をつけて書いてみてはどうか」という提案を盛り込んでみました。これが正解!というつもりもなく、選択肢の一つになるとよいかなと思います。

スマホゲームのUI仕様書

ちなみに5年前のスライドはこちらです。

企画が考えるスマホUIデザイン


mewlist

uGUI 描画優先度のチートシート


皆様,こんにちは!
株式会社Aiming の 土井と申します!
リードソフトウェアエンジニアをやっております!

ここ数年は,業務で Unity の uGUI を使って UI 開発をする機会が多いのですが、
Order in Layer, Sorting Layer, ヒエラルキ上の並び順……(つд⊂)ゴシゴシ
Unity では重なり順を指定する項目が多いですよね。
これらの項目間の優先度が実際にどうなっているのか理解していなかったため、調査を兼ねてチートシートを作ってみました!

描画優先度を指定するものを列挙してみた

どうやらこれらの関係を全て調べ上げれば良さそうです。

チートシート

調べました。
画像は実際に Unity の GameView で表示されたもののキャプチャです。

これで、もう UI の重なり順で悩まない!

解説

カメラ毎の優先度

  • Canvas に設定された Camera による優先度
    • ScreenSpace: Overlay 設定のものが最優先
    • 次いで Depth 値が高いものが優先

同じカメラに設定されたキャンバス同士

  • SortingLayer が高い Canvas が優先
    • 同じ SortingLayer 同士では、 Order In Layer の値が高い Canvas が優先
      • さらに同じ Order In Layer 同士では、Z 値が低い(カメラに近い) Canvas が優先

Mesh や パーティクルなど UI 以外の Renderer について

  • SortingLayer や Order In Layer の値による重なり順の制御ができる
  • ただし、SortingLayer と Order In Layer が同じ値を持つ Canvas がある場合、ヒエラルキ上の並び順による重なり順のソートは行われないので、 固有の Order In Layer 値を設定しよう

Render Queue について

  • UI の描画は、 RenderQueue = “Transparent” にて行われるため、独自のマテリアルを使用する場合は RenderQueue の値に 2501 以上を指定する必要がある

最後に

  • UI のレイヤーの間に 3D モデルを表示したりエフェクトを出したりといった要件のときには、まず全体の UI のレイヤー構成を整理して仕様化しましょう。行き当たりばったりで重なり順をいじっていると混迷を極めます
  • MeshRenderer などは標準でインスペクタ上から SortingLayer や Order In Layer が設定できません。
    • https://docs.unity3d.com/ja/current/ScriptReference/Renderer.html
    • 自前でスクリプトから設定する必要があります
      • (Order In Layer は sortingOrder というプロパティです)

おしまい。


shiwano

UI/UX他社合同セミナーで発表を行いました


こんにちは、UX エンジニアの岩野です。

9月27日に KLab 株式会社さん主催「UI/UX他社合同セミナー」にて、「Gamer Experience (仮)」というタイトルで発表、パネルディスカッションで登壇させていただきました。

当日発表したスライドは下記のものです。

登壇企業が Web サービス系とゲーム系に分かれていたので、主にゲーム側の視点から UX とは何なのかということを考えて、発表を行いました。

OLYMPUS DIGITAL CAMERA

UI/UX の重要性はすでに広く認知されていますが、それをどのように現実のワークフローに落としこんでいくかについては最適解がなく、各社とも試行錯誤している段階だと思います。

そうした中、各社どのような取り組みをしていて、また苦労をしているのか共有できたことは、とても有益で、弊社ももっと UI/UX の強化をしていかなければなという思いを強くしました。

このような場をくださいました KLab 株式会社さん、ありがとうございました!


水島 克

モバイルデザインパターンとゲームUI


ゲームデザイナの水島です。少し前の話題ですが、aimingでランチの時間に読書会をやってました。

mobiledesignpattern

テーマはこれです。オライリー・ジャパンの『モバイルデザインパターン――ユーザーインタフェースのためのパターン集』

ナビゲーション、フォーム、リスト、フィルター…という具合に、モバイルのアプリケーションのさまざまなパターンを網羅的に収集・命名して解説していく、というシンプルな本です。普段我々が目にするアプリのほとんどの定型が詰め込まれてます。

続きを読む