UIと2D/3Dと私 ～2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話～

UIと2D/3Dと私 ～2D/3Dを混在させたUIを作ったら、とてもめんどくさかった話～

• 1.
  UIと2D/3Dと私 ～2D/3Dを混在させたUIを作ったら、 とてもめんどくさかった話～ 浜崎 正哉 縦横フリースタイルで遊ぶ スマホゲームを作った個人開発者の振り返り その 3
• 2.
  2 14 スマホ向け アクションゲーム Android™対応 β版公開中！ GooglePlayにて配信中！ 宣伝
• 3.
  3 14 多数の解像度・比率への対応に悪戦苦闘した話 https://www.slideshare.net/masayahamazaki/ss-91315339 これまで公開したスライド https://www.slideshare.net/masayahamazaki/gotandaunity-93d アセットを購入・使った時に悪戦苦闘した話 過去 ネタ
• 4.
  4 14 2D/3D を混在～略～とてもめんどくさかった話本題 2D3D メンドクサイ……という話 ＋ ＝
• 5.
  5 14 面倒くさい 読み方：めんどうくさい 別表記：面倒臭い、めんどう臭い 手間や困難さを考えて気が進まない。面倒である。億劫だ。 by weblio.jp メンドクサイとは？ メンドクサイ 読み方：めんどくさい 自分のやりたいことが、手間が多くて面倒である。 ……が故に「これができたら楽しそうじゃん、どうす れば実現できるのか考えるのチョー楽しい！」という 前向きな気持ち。　byhamazaki 本題 ということにしておきます。 実際に 15％くらいはそんな感じですし。
• 6.
  6 14 1 座標変換がメンドクサイ Unityで使う座標系。 　ワールド座標 3Dワールドを表現する座標系 　スクリーン座標 解像度と一致した座標系 　ビューポート座標 スクリーン座標の値を0〜1にした物 場所を指定する際に使う 　canvas座標 uGUIのオブジェクトを表示する座標系 どこに何を置いてどう使うかは、自由に設計可能。 その分、それぞれに対する座標変換が発生します。 とはいえ、Unityには変換するためのAPIが用意されていますので、 単にメンドクサイというだけの問題です。 Level
• 7.
  7 14 1 それぞれの座標系 Level 　ワールド座標 原点(0,0,0) Y X Z (1,1) ビューポート座標 座標変換がメンドクサイ カメラが 映している画面 (0,0) (1,1) canvas座標中央が原点 ワールド スクリーン ビューポート canvas スクリーン座標の場合は、 右上が対象プラットフォームの解像度になる Y X (0,0)
• 8.
  8 14 2 UIに必要なシステム構築がメンドクサイ UIのパーツとして3Dオブジェクトを使ったりすると、 ボタンなどの必要な機能をイチイチ自前で実装する必要があります。 BBBでは、コントローラーとボタンを スプライトオブジェクトで作成。 コントローラー部は標準Inputを利用。 片手用にTouchScriptを利用して、 フリック入力に対応しています。 Level https://assetstore.unity.com/packages/tools/input- management/touchscript-7394 TouchScript
• 9.
  9 14 3 端末によって違う画面比への対応がメンドクサイ Level uGUIを使えば、端末による解像度・画面比などへ対応するために 必要なことを受け持ってくれます。3Dオブジェクトを使ったりすると、 これらの機能をすべて自前で実装する必要があります。 uGUIでは、Anchorの設定をうまく使うことで複数の画面比へ対応できます。 AnchorはUIの親のUIのサイズとの比率からUIのサイズや位置を調整する機能です。 これはいわゆる9パッチと呼ばれる技術です。親UIの大きさを％で分割し、各マージンの大きさを求めます。 引用）テラシュールブログ UnityのuGUIのレイアウト調整機能について解説してみる（RectTransform入門） http://tsubakit1.hateblo.jp/entry/2014/12/19/033946#Anchor%E3%81%AE%E8%A8%AD%E5%AE%9A 16：9 2：116：9 4：3 左上 右上 左下 右下 基本は 四隅へ集まる ように設定
• 10.
  10 14 3 背景に3Dオブジェクトを使うだけでもメンドクサイ Level端末によって違う画面比への対応がメンドクサイ 見せるべきものが、どの端末でも見られるか？　これを判定するだけでも面倒。 3DオブジェクトにUI機能を持たせてしまったら、オブジェクト同士の干渉はもちろん、 2DのUIとかぶらないようにしなければなりません……どうすりゃいいの？ キャラクターは普通の3Dモデ ルを利用しています。 ミニマップはCSVで管理して いるマップデータからメッシュ を作成して表示しています。 ワールドの看板は、world spaceに設定したcanvas にuGUIオブジェクトを配置。 uGUIでは、ヒエラルキー によって描画順が決まるた め、1枚のcanvasに配置 すると一部で描画順がおか しくなりますが、 内側から 眺めるので問題なし。 使われている3Dオブジェクト マップ選択のメニューは、uGUI のスクロールビューを利用してま す。ボタンパーツの置かれている 座標をリアルタイムでチェック。 メニュー中央からの距離に応じて 拡大率と透明度を変更すること で、3Dっぽい表現にしています。
• 11.
  11 14 3 解決策１）多少ずれても気にしない Level端末によって違う画面比への対応がメンドクサイ UIで使う3Dオブジェクトは見せるだけと割り切り、仮にキャラクターが見切れても 成立するレイアウトを心がけ、あたかも「問題がない」ようにごまかしました。 表示ギリギリまで攻めたり、 わざと胸 を強調するところで切ったり、 縦・横 の画面でそれぞれ空きスペースを埋め るようにカメラアングルを考えたりと、 とにかくごまかしまくってます。結局、 3Dオブジェクトは見せるだけと割り 切ったため、なんとか絵として成立す れことだけを考るだけで済んでいます。 必殺技で使っている2Dの文字演出も、 雰囲気重視。切れて見えようが、気に ならないようになっています。
• 12.
  12 14 解決策2）平行投影カメラを使う3 Level 端末によって違う画面比への対応がメンドクサイ BBBでは、UI用に使う3Dオブジェクトをパースのかかったメインカメラとは別に 並行投影（Orthographic）のカメラで映すようにしています。 イベント用の3Dモデルやアイテムのプレビュー用3Dモデルは、メインとは別のカメラで映しています。 パースがないことで、Z軸をずらして重ね合わせても大きさが 変わることがなくなり、3Dモデルを2Dっぽく扱うことができます。 ディープアリーナのステージとボスの サムネイルの場合、手前にボス、奥 にステージのオブジェクトを置くだけ でOK。ボスをステージの中央に置き たいときには、ステージオブジェクト の中心XY座標に置くだけ。なにも考 えずに位置合わせができます。
• 13.
  13 14 平行投影カメラを使った理由は？ もともと並行投影のカメラは、バトル中のUI（敵HPゲージやダメージ表示）と、 ヒットエフェクトを優先順位を変えて表示するためのものとして用意。 優先順位 （低） エフェクト ▼ 敵HPゲージ ▼ ダメージ数値 （高） 3 Level 端末によって違う画面比への対応がメンドクサイ 特にヒットエフェクトは、そのままだと 敵オブジェクトと重なり、見栄えが悪い ものでした。 この描画優先順位を変えるため、処理負荷 を犠牲にしても、なにも考えずにZ軸で優先 順位を決められる平行投影カメラを用意して しまえ！　と勢いで決めました。
• 14.
  14 14 メンドクサイを乗り越えて、 デ 空 間設 計 ザイン力をゲーム制作に役立てよう！ まとめ 2D、3Dに関わらず、デザイナーが得意とする空間設計力は、 ゲームを作るうえで超強力な武器となります。 Unityにはそれを役立てる強力な機能がたくさんあります。 （覚えて使うのは、かなりメンドクサイですが……） 　自由にできる裁量がないよーというときは、個人制作（沼）がありますので、 ぜひ、Unityを使ってのゲーム制作にチャレンジしてみてください！ ご清聴ありがとうございました。 おしまい
• 15.
  エフェクトパーティクルオブジェクトのプーリングに利用。 余談 お世話になったあの人へ（謝辞） http://tsubakit1.hateblo.jp/entry/2016/04/28/023104 タップした位置にエフェクトを表示する https://qiita.com/yuji_yasuhara/items/1f438f0f27f5ef854a73 RigidbodyのDragから終端速度を得る キャラクターの移動を物理で 制御するための必須知識。 私はコレで、ポジション移動を やめられました。 ユニティ・テクノロジーズ・ ジャパン合同会社 山村 達彦氏、 安原祐二氏に 圧倒的感謝を！