第47回_プレゼン資料_菅原(～よく人に質問されるTIPSと冬休みに勉強した技術紹介～)

Size: px

Start display at page:

Download "第47回_プレゼン資料_菅原(～よく人に質問されるTIPSと冬休みに勉強した技術紹介～)"

ゆりかむらかわ
8 years ago
Views:

Unity はじめるよよくに質問される TIPS と冬休みに勉強した技術紹介統合開発環境を内蔵したゲームエンジン http://japan.unity3d.

1 Unity はじめるよよくに質問される TIPS と冬休みに勉強した技術紹介統合開発環境を内蔵したゲームエンジンいろんな職業のがる資料なので説明を簡単にしてある部分があります正確には本来の意味と違いますが上記理由のためですご了承くださいこの資料内の部の画像部の章は Unity 公式サイトから引しています

2 本の内容よく質問されることと TIPS 冬休みに勉強した技術

3 よく質問されることと TIPS ポストプロセッシングスタックの使いクリックした位置に UI を移動させたい FPS 指定法画分割プレハブについて

4 ポストプロセッシングスタックの使い

5 概要ポストプロセッシングスタックの使い以前はグラフィックのクオリティを上げる表現 Bloom( 強い光源から光が滲み出すような表現 ) Depth of Field( カメラのぼかし表現 ) SSAO( モデルの凹凸の奥まった部分位影をつける ) などなどは ImageEffect として提供されていました現在はポストプロセッシングスタックという名称でアセットストアや Github からにれることができます Github のが最新

6 しずおかアプリ部ポストプロセッシングスタックの使い ON OFF

7 ポストプロセッシングスタックの使い何が変わった? ImageEffect の頃から何が変わったかというと各機能ごとバラバラに提供されていたものが元管理されるようになり速度画質とも良くなったということですバージョンによって使いがコロコロ変わるのでとりあえず現時点での最新バージョンでの使いを説明します

8 ポストプロセッシングスタックの使い基本的な使い概念的にはポストプロセスの処理内容を設定したプロファイルを作ってポストプロセスのスクリプトにセットすることで利しますまずはから最新版を DL 解凍し中にある PostProcessing フォルダをプロジェクトにインポートします

9 順 1 ポストプロセッシングスタックの使いプロジェクトビューで右クリックして Create > Post-processing Profile でプロファイルを作成します

10 順 2 ポストプロセッシングスタックの使いプロジェクトビューで右クリックして Create > Post-processing Profile でプロファイルを作成しますこんなファイルができれば OK

が付くコンポーネントが出てきますその中から Post-processLayer を選択

11 順 3 ポストプロセッシングスタックの使いヒエラルキーで MainCamera を選んでインスペクターの AddComponent ボタンを押し検索窓に post と打つと名前に post が付くコンポーネントが出てきますその中から Post-processLayer を選択 Post-processLayer はどのレイヤーを対象とするかアンチエイリアス処理をうかなどを設定するコンポーネントです今回は Default を選んでおきます

12 順 4 ポストプロセッシングスタックの使いもう度 AddComponent ボタンを押し Post-processVolume を選択 Post-processVolume の Profile に先ほど作ったプロファイルをセットする isgloabal のチェックをれておきます

13 順 5 ポストプロセッシングスタックの使い Post-processVolume の Add effect ボタンを押して利したいエフェクトを追加します試しに Depth of Field を追加してみましょう

14 順 6 ポストプロセッシングスタックの使い Depth of Field と書かれている部分をクリックすると隠れていたプロパティが表されます設定したい項のをクリックすると値を変更をできます Depth of Field の場合 Focus Distance : ピントを合わせたい位置 ( カメラからの距離 m を指定 ) Aperture : レンズの明るさ ( 数字がさいほど明るくなりボケやすい ) FocalLength : 焦点距離 ( 数字がきほどボケやすい ) MaxBlurSize : ボケの強さとなります

15 ポストプロセッシングスタックの使いポストプロセッシングスタックを使えば軽に画のクオリティを上げることができます AntiAlias Bloom Depth of Field Ambient Occlusion Color Grading は特に使いたくなるエフェクトですアクションやレースゲームなら Motion Blur も効果的ただポストプロセス全般的に GPU 負荷がきいので注意イベントシーンだけ使うとか使い所は要検討してください

16 クリックした位置に UI を移動させたいスクリプトから狙った位置に UI を移動させたい

17 クリックした位置に UI を移動させたい概要今回は Canvas の CanvasScaler コンポーネントの UIScaleMode が ScaleWithScreenSize の場合かつ動かしたい画像のアンカーを中とした場合の話です

18 クリックした位置に UI を移動させたい ScaleWithScreenSize の場合実環境のディスプレイ解像度に関係なく仮想スクリーンサイズの座標系となります ScreenMatchMode で仮想スクリーンサイズとアスペクトの異なるディスプレイに対応する法を選ぶ

19 クリックした位置に UI を移動させたい何が難しく感じるのかというと座標を動かせる変数が複数あるのでどの値を変更すれば良いのかわからないということマウスの座標系と UI の座標系が異なるため座標変換をわなければならないということ

20 クリックした位置に UI を移動させたい UI の座標をスクリプトから操作するなら RectTransform の anchoredposition をいじるのがわかりやすいと感じます

21 順 1 クリックした位置に UI を移動させたい実スクリーンと仮想スクリーンのサイズの違いをスケール値として出すスケール値 1080 / 640 = / 1152 = 仮想スクリーン実スクリーン

22 順 2 クリックした位置に UI を移動させたい画のアスペクト対策 ScreenMatchMode の値に合わせた値の計算 Match のスライダーは Width が 0 Height が 1 となるアスペクト値を求めるのは下記の計算アスペクト値.x = Mathf.Lerp(1.0f, スケール値.y / スケール値.x, Match); アスペクト値.y = Mathf.Lerp( スケール値.x / スケール値.y, 1.0f, Match);

23 順 3 スクリーン座標の座標系からオフセット値を求めるスクリーン座標は左下が原点で右上向に + となるクリックした位置に UI を移動させたい (+,+) (+,+) (0,0) (0,0) スクリーン座標系 (-,-) アンカーがセンターの場合のUI 座標系座標系を合わせるためにどれだけ原点がずれているかのオフセットを求めるオフセット値.x = - 仮想スクリーンサイズ.x * 0.5f; オフセット値.y = - 仮想スクリーンサイズ.y * 0.5f;

24 順 4 順 3 までに求めた値を使って座標変換するクリックした位置に UI を移動させたい変換後.x = ( 変換したい値.x * スケール値.x + オフセット値.x) * アスペクト値.x; 変換後.y = ( 変換したい値.y * スケール値.y + オフセット値.y) * アスペクト値.y;

25 ソース using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; クリックした位置に UI を移動させたい /// <summary> /// クリックした位置に Image を移動させるスクリプト. /// Imageにアタッチして使用する. /// </summary> public class ImageController : MonoBehaviour { [SerializeField] GameObject m_canvas; // Canvas を受け取っておく [SerializeField] Text m_debugtext; Image m_image; // デバッグ情報表示用 TEXT // 移動させる画像 // 1 パターン目の方法で利用 CanvasScaler m_canvasscaler; Vector2 m_scale; Vector2 m_aspect; Vector2 m_offset; // CanvasScaler // 画面解像度と仮想スクリーンサイズの拡大縮小率 // 画面のアスペクト比対策 // マウスの座標系は左下が (0,0) なのでオフセット用の変数を用意しておく // Use this for initialization void Start () { // Imageコンポーネントを取得 m_image = GetComponent<Image>(); // CanvasScalerを取得 m_canvasscaler = m_canvas.getcomponent<canvasscaler>(); // 画面解像度と仮想スクリーンサイズの拡大縮小率を求める m_scale.x = m_canvasscaler.referenceresolution.x / Screen.width; m_scale.y = m_canvasscaler.referenceresolution.y / Screen.height; // 画面のアスペクト比対策 m_aspect.x = Mathf.Lerp(1.0f, m_scale.y / m_scale.x, m_canvasscaler.matchwidthorheight); m_aspect.y = Mathf.Lerp(m_scale.x / m_scale.y, 1.0f, m_canvasscaler.matchwidthorheight); } // マウスの座標系は左下が (0,0) なのでオフセットを求める m_offset.x = -m_canvasscaler.referenceresolution.x * 0.5f; m_offset.y = -m_canvasscaler.referenceresolution.y * 0.5f; // Update is called once per frame void Update () { // マウスの左ボタンを押したら if (Input.GetMouseButtonDown(0)) { // 求めた座標に移動 m_image.recttransform.anchoredposition = ConvertScreenToUICoordinate(Input.mousePosition); // デバッグ表示 m_debugtext.text = " マウス座標 ( " + Input.mousePosition.x + ", " + Input.mousePosition.y + " )" + " n" + "UI 座標 ( " + m_image.recttransform.anchoredposition.x + ", " + m_image.recttransform.anchoredposition.y + " )"; } } /// <summary> /// スクリーン座標をUI 座標に変換する. /// 条件 UIScaleModeが ScaleWithScreenSize であること /// </summary> /// <returns>the screen to UI Coordinate.</returns> /// <param name="pos">position.</param> Vector2 ConvertScreenToUICoordinate(Vector2 pos) { // 座標を求める Vector2 ret; ret.x = (pos.x * m_scale.x + m_offset.x) * m_aspect.x; ret.y = (pos.y * m_scale.y + m_offset.y) * m_aspect.y; } return ret; }

26 画分割

27 画分割カメラを 2 つ意してそれぞれの ViewportRect を設定する左下が原点の正規化 (0~1) された座標左右分割ならカメラ1 X=0, Y=0, W=0.5, H=1 カメラ2 X=0.5, Y=0, W=0.5, H=1 上下分割ならカメラ1 X=0, Y=0.5, W=1, H=0.5 カメラ2 X=0, Y=0, W=1, H=0.5

28 FPS 指定

29 FPS 指定 FPS( フレーム / 秒 ) を指定する法モバイル環境だとデフォルトは 30FPS となっている電池節約のためスクリプトから Application.targetFrameRate = 60; と設定すれば変更可能注意点 QualitySettings の vsynccount が Donʼt Sync でないと targetframerate の設定が有効にならないスクリプトからは QualitySettings.vSyncCount = 0; で Donʼt Sync にできる

30 プレハブについて

31 プレハブについて同じオブジェクトを量に作る時に変役につプレハブプレハブを元にしたオブジェクトは元のプレハブを変更すれば全てのオブジェクトに変更が反映される便利なものしかしプレハブの中にプレハブを置いた場合 ( ネスト化 ) 中のプレハブは元の変更の影響を受けなくなるので注意が必要解決するアセットもあるようです

32 ミップマップについて

33 ミップマップについてミップマップとはカメラとの距離に応じて参照するテクスチャを切り替える技術のことです解像度の違うテクスチャを意し遠くにくにつれて解像度の低いテクスチャに切り替える効果は遠くのテクスチャが綺麗になじむ処理負荷軽減などミップマップのイメージ

34 ミップマップについて Unity の場合テクスチャのインポート設定で動でミップマップを成することができます私の場合モバイル環境向けの開発が多いためメモリや容量をわないようミップマップを成しないことが多かったのですがテクスチャが細かい図柄だと思った以上に効果があることを知りましたザラザラした感じやモアレがきく軽減できます

35 しずおかアプリ部ミップマップについてミップマップありミップマップなし静画だとわかりにくいかもしれませんがミップマップ無しの場合実のザラザラがかなり気になります

36 冬休みに勉強した技術本当は冬休みどころではない実物をせながら紹介します

37 冬休みに勉強した技術 1 の流れゲームの世界の時刻を管理するクラスを作成時間に影響するものは全てそのクラスを参照するディレクショナルライトの X 軸回転で空のと影の向き & さを作っている平線より太陽が下がった時に影が上に向かわないように太陽平線に近づくにつれて影を薄くしている時刻に合わせてライトのと強さを空のの濃さを変更天気も変化する不然な天気の変化が起きないように過去の天気のバッファを保持して天気の変化の確率をコントロールしている

38 冬休みに勉強した技術シェーダーについて利しているシェーダーのほとんどはいじっているまたは作っている不要な処理を消して速化 & りない処理を追加テクスチャについて速化のためなるべく共通のテクスチャを使うようにしている地 (256x256 を 3 枚 + RGBA カラーマップ 512x512 を 1 枚 ) UI(2048x2048) モブキャラは全体で共通 (2048x2048) 建物や植物などは全体で共通の不透明テクスチャ (2048x2048) 半透明テクスチャ (2048x2048) の 2 枚だけ

39 地の表現地の表現法は悩みました頂点カラーポリゴン数を増やさないと表現が乏しくなる冬休みに勉強した技術頂点カラー + テクスチャポリゴンのつなぎのテクスチャがくっきりしすぎて不然頂点カラー値を利したテクスチャブレンド + 頂点アンビエントオクルージョンテクスチャを変えられるのがポリゴン単位となってしまう頂点カラー + RGBカラーマップを利したテクスチャブレンド + アルファ値アンビエントオクルージョン RGBカラーマップの分のテクスチャが必要となってしまう RGB 値でテクスチャをブレンドしているので地に使えるテクスチャが3 種類まで 256 段階でブレンドしているので 128 段階でブレンドにすれば 6 枚いけるかなけどマップを作るのが変そう

40 空の表現空は Unity 標準のプロシージャル SkyBox を調整して利太陽とレンズフレアも標準機能を利冬休みに勉強した技術雲と星空はドーム状のオブジェクトにテクスチャを貼って描画雲は UV アニメーション + グレースケールを利した半透明度調整で雲っぽくせている道雲は単なるテクスチャや雪は速化の為に頂点シェーダーで動くものを作ったけど屋根を突き抜けて屋内にってきちゃうからボツ予定建物や植物について頂点カラー + テクスチャ + フォグ + ライトカラー + 光の強さを設定できるシェーダーを不透明と半透明の 2 種類作成草や花は上記 + の表現できるシェーダーを作成

41 勉強中 & これから勉強すること LOD の使い動かないものは問題無し動くもので Blender で作のものがうまくいかん冬休みに勉強した技術シェーダー LOD カメラに近い時はリッチな表現離れた時は速度優先処理にする技術アニメーション管理 Animator の管理の変がもうイヤ ( 思った通りのアニメーションに遷移してくれない制御の難しさ ) もちろんノンスクリプトで使える便利なところもあるキャラクターのような複雑なステートの制御では使いたくない Unity 社がシンプルなアニメーション管理ができる SimpleAnimation というスクリプトを公開しているテラシュールブログが参考になります

42 冬休みに勉強した技術遠くのオブジェクトの更新頻度を下げるモンハンワールドでもやってるね特許とか怖い知らぬ間になっていたことが特許を侵害していたらアプリ内通貨の扱いの法律的な話 ( 資決済法 ) とか参考アプリ開発の雑記帳

43 まとめ技術的に知っていたとしても Unity ではどうやってやるんだろうとかなんでこれでうまくいかないんだ? とか結構ありますねもちろん知らないこともいっぱいあるので常に勉強は続けなくてはと思いました効率よく開発するためクオリティアップのため数の積もりの正確性をあげるためなどなど

44 ご清聴ありがとうございました

第26回_プレゼン資料_菅原(Unityはじめるよ～NavMesh基礎～)

第26回_プレゼン資料_菅原(Unityはじめるよ～NavMesh基礎～) Unity はじめるよ NavMesh 基礎統合開発環境を内蔵したゲームエンジン http://japan.unity3d.com/ いろんな職業のがる資料なので説明を簡単にしてある部分があります正確には本来の意味と違いますが上記理由のためですご了承くださいこの資料内の部の画像部の章は Unity 公式サイトから引しています NavMeshってナビゲーションシステムによって