水島 克

スマホゲームの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 というプロパティです)

おしまい。


菅野 明洋

第2回 Game Gatling LTに登壇してきました!


はじめに

初めての人は初めまして、前回の記事(まべ☆てっく vol.1に登壇してきました!)見てくれてる人こんにちは!
大阪スタジオ インフラチームの菅野明洋です。
業務では、大阪スタジオのサービスインフラを担当させていただいております。

今回は、2016年10月2日の日曜日に大阪で開催されました第2回 Game Gatling LTにて、スピーカーとして私と藤井が登壇させていただきましたので、レポートとしてまとめました。

GGLTとは

関西でゲーム開発に携わるエンジニア、デザイナー、プランナー等の人が集まり、ライトニングトークを行うイベントになります。

今回発表させていただいた内容について

今回の発表は、剣と魔法のログレス いにしえの女神で使われている技術やノウハウの話になります。

■菅野明洋:スマホ版ログレスでグローバル展開を想定したサーバ構築をAnsibleで試してみた話

■藤井章暢:スマホ版ログレスにポストエフェクトを組み込んだ話


私の方ではAnsibleでの設定例を中心に発表しております。
Ansibleとなりますと、色んな書籍やブログ等でベストプラクティスや使用方法が記載されていると思いますが、今回の発表ではグローバル展開を想定した際に、どのように工夫をしたのかをまとめました。
グローバル展開を行ったとしても、サーバの構成が一切変わらないとなれば特に悩む必要はないのですが、現地のインフラ事情や新規実装を行うとなると日本版と全く同じサーバ構成と言うわけにはいかないケースもあると思います。
構成を国やデータセンター毎の差分を管理を行い、各地で行った改善内容を別の地域へ反映するなど相互的に良い事を取り込み合うことが出来たら良いかなと思いました。

藤井の発表では、クライアントにポストエフェクトを導入した話になります。
戦闘中のシーンに合わせて放射線状にブラー処理を入れ、従来の戦闘シーンをより迫力のあるシーンにしています。詳しくはスライドをご覧ください。

■発表中の様子

2016102402

発表中の菅野

2016102401

発表中の藤井

感想

LTとなりますと、「あれもこれも話したい。でも時間がない」といった葛藤があります。
ベースとなる発表資料は一週間から数日前には完成していたのですが、発表直前までスライドの編集したり脳内練習したり等、発表直前まで調整していました。

結果的には、一回目のドラがなったラスト1分前で私の喋りがスピードアップし、制限時間の終了を表すドラと同時に「ご静聴ありがとうございました」と言う形になりました(ギリギリセーフ?)。

最後に

GGLT運営の皆様、会場に来場した方々、登壇の機会を頂きありがとうございました。
とても貴重な経験をさせていただくことができました。


KLab Creative Fes’16に参加してきました!

画像


こんにちは。デザイナーの兵頭です。

今回の開発者ブログは「ラブライブ!スクールアイドルフェスティバル」等で有名なKLab株式会社様が主催された「KLab Creative Fes’16」に参加した話です。

KLab Creative Fes’16とは

KLab Creative Fes’16
静止画部門、動画部門から成る学生CG作品コンテストをメインコンテンツとし、
当日はコンテスト本選以外にいくつかのコンテンツで構成されるイベントです。

IMG_5302 (2)

少しわかりにくいですが会場の様子です。
最終選に残った学生さん達が各々の作品をアピールしていました。

どういった形で参加したのか

当日のコンテンツとして「3DCG LIVE BATTLE」が行われました。
各ゲーム会社からクリエイターが3人一組で出場し、発表されたテーマに沿った作品を制限時間6時間以内に作成して競うというものです。 続きを読む


itai

Unityを使ったエフェクト作成方法を発表しました。


初めまして、Aimingのデザイナの板井です。

先日社内の勉強会にて、Unityを用いたエフェクト作成方法を発表させて頂きました。

IMG_0150-2

内容は、Unity(3D)でのエフェクト作成未経験の方を対象としたものとなっています。
まず最初に、エフェクト作成の簡単な流れ、作成に使用するツール(particle)等の説明とその手順、そしてその機能を用いたエフェクトの作例等という構成になっております。
作例には「幻塔戦記グリフォン~新章~」で実際に作成したエフェクトも紹介させて頂きました。


今回の説明は、Aiming台湾・東京・大阪と三カ所で行わせていただきました。
この発表が、Unityでのエフェクト作成の手助けになれば幸いです。

 

「幻塔戦記グリフォン~新章~」公式サイト

game_griffon

©SEGA/©Aiming All Rights Reserved

 

▼▼スライド内の参考動画▼

※Internet Explorer / Windows では動画が再生ができない事があります。

・パーティクルにできる事

・パーティクル作業の流れ

・3Dmodelにできる事

・3Dmodelにできる事2

・3Dmodelエフェクト作業の流れ

・グリフォンのパーティクルエフェクト例

・グリフォンの3Dmodelエフェクト例

・グリフォンUIエフェクト作業の流れ

・グリフォンUIエフェクト作例