前回の記事に入り切らなかった最適化の内容です。
タッチ制御なしの場合はチェックを外す、無駄な計算を省けます。
チェックすると、α値が0以下の時に頂点データを転送しません。
Animatorは常にCanvasを更新するため、一時的なUI演出などに使うと良いです。 こちらのUnity公式ページも言及しています。
前回の最適化でも少し触れましたが、左右や上下に揺れる周期性のある動きはシェーダで表現するのも手です。GPU処理のためCanvasの更新も走らないです。
こういう表現とか面白いですよね。 baba-s.hatenablog.com
UI開発シリーズ、最後は最適化です。CanvasのBatch処理、Overdrawを例に上げた後、Profilerによる確認方法をまとめてます。
全てのUIはCanvas配下になります。何も考えず大量にUIを配置するとパフォーマンスを低下させます。
最も効果的なのはBatch処理です。これはザックリ言うとCPUがGPUに描画の命令を出す時に、必要な情報(Material, Texture)をまとめる事で命令数を減らしCPUの負荷を軽減するというものです。
という訳で、以下にBatch処理を有効にする条件・注意点をまとめました。
同じTextureを参照
Batch処理を有効にするために、個別TextureをAtlas化して一つのTextureにまとめてにます。
kan-kikuchi.hatenablog.com
同じMaterialを参照
Textureと同様にまとめれるものは同じMaterialを参照します。
UIのレイヤー表示に注意
MaterialA, MaterialB を参照するImageを下図のように交互に重ねて表示する場合、Batch処理が効かないです。
この場合はMaterialをまとめるか、重ねない表示にするかです。
同じCanvasに配置
uGUIのBatch処理はCanvas単位で実行されます。前述でまとめたTexture,Materialが他のCanvasを跨がないよう調整します。
Canvas単位の表示制御に注意
UIをCanvas単位で表示・非表示する時はCanvasを無効にしてください。Canvas を無効化すると頂点データを維持するため、次回有効時に頂点バッファの更新せずにすむためです。
Canvasの親子関係に注意
ただし、Canvasに親子関係を設定している場合、子Canvasの無効化時に親Canvasは更新されてしまいます。
動かさない
各UIを更新すると都度Batch処理が実行されます。これは中々に重たい処理でUI生成時など限定的なタイミングならまだ良いですが毎フレーム走る場合は問題になります。
Canvas単位でBatch処理を実行するため、動かしていない他UIも含めて影響します。
Canvasを分割する
とはいえ毎フレーム更新するUIは出てきます。対処法の１つは更新用Canvasに分割します。
こうすれば更新用CanvasのみBatch処理が走り、影響範囲を最小限に抑えれます。
ただし、Canvasを分割し過ぎると今度はBatch処理の意味がなくなるので、負荷を計測して分割数を決めていきます。
Shaderで動かす
もう１つの対処法は周期性(左右・上下振動)のある表現をシェーダで実装します。GPU側で処理するためCanvasのBatch処理は走らないです。
baba-s.hatenablog.com
半透明のUIを大量に重ねると余計な描画処理が発生するため、なるべく半透明UIを重ねないよう気をつける必要があります。Overdrawは下図のようにSceneビューで確認できます。明るい所ほどポリゴンが重なっており負荷が高いです。
最後にUnityのProfilerを使い、ここまでの最適化の効果を確認する方法です。
Window > Analysis > Profiler で開きます。
Batch処理の発生回数・負荷を確認できます。下図の検索フォームに "Canvas.BuildBatch" と入力すると確認できます。
Batch処理の実行回数と対象オブジェクトを確認できます。
Batch処理失敗の原因をBatch Break Reasonで確認できます。
UI/UI Details の右下に表示されるウインドウです。Batch範囲とOverdrawを確認できます。
composite overdraw を選択すると対象UIの overdraw を確認できます。
重なりに応じた色分けをします。
Canvasを中心に最適化方法をまとめました。Batch処理・OverdrawはUIに限らず3Dでも注意すべき内容です。UnityのProfilerはすぐに起動できて詳細情報も確認しやすく優秀です。
これらを活用して普段からパフォーマンスを意識して開発をしたいですね。終盤でバタバタしながら対応するのは大変ですし・・^_^;
https://unity3d.com/jp/how-to/unity-ui-optimization-tips
Unityでパフォーマンスの良いUIを作る為のTips | PPT
今回もUIです。UIアニメーションでよく使うTween関連です。
シンプルな動きはTween制御系Assetが便利です。有名な DOTween, LeanTween, iTweenの特徴とサンプルコードを貼ってます。
また、パフォーマンス比較はDOTween公式サイトにまとまってます。
ちなみに私はパフォーマンス重視なのでLeanTweenを使ってます。また、ゲーム仕様に依存する部分はこちらやこちらを参考に自前のTween制御を書いてます。
無料版はパッケージにコードは含まれないです。(GitHubにアップはされている)有料版はTextMeshPro対応とEditor上でTweenを編集できます。
// !!初回起動時に１回だけ呼ぶ必要あり. DOTween.Init(); // 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知. Tweener twr = this.transform.DOMove( targetPos, 2.0f ); twr.SetEase( Ease.Linear ); twr.onComplete = OnComplete; // 中断. twr.Kill( complete:true ); // 一時停止. twr.Pause(); // 再開. twr.Play();
パフォーマンス重視のTweenです。コードは全て含まれてるのでカスタムしやすいです。
// !!初回起動時に１回だけ呼ぶ必要あり. LeanTween.init(); // 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知. LTDescr dsc = this.transform.LeanMove( targetPos, 2.0f ); dsc.setEase( LeanTweenType.linear ); dsc.setOnComplete( OnComplete ); // 中断. LeanTween.cancel( dsc.uniqueId, callOnComplete:true ); // 一時停止. dsc.pause(); // 再開. dsc.resume();
iTween.cs だけのシンプルな作りです。
// 実行. 2秒で targetPos へ Linear補間で移動後、OnCompleteに通知. var hash = iTween.Hash( "position", targetPos, "time", 2.0f, "easetype", iTween.EaseType.linear, "oncomplete", "OnComplete" ); iTween.MoveTo( this.gameObject, hash ); // 中断. iTween.Stop( this.gameObject ); // 一時停止. iTween.Pause( this.gameObject, includechildren:true ); // 再開. iTween.Resume( this.gameObject );
上記3つのTweenの時間制御は Time.deltaTime を参照しています。こちらの値は Time.timeScale の影響を受けます。そして、これは演出系のUIアニメーションで問題になる場合があります。
例えば以下のような格闘ゲームのKO演出です。キャラ・背景は一時停止していますが、"KO"のUIはアニメーションしてます。
ゲーム全体のアニメーションを停止であればTime.timeScaleの値を変更すれば良いです。
しかし、このケースではUIアニメーションは影響を受けない設定が必要です。
以下に各TweenのTime.timeScaleの影響を受けない設定をするサンプルコードです。
DOTween
twr.SetUpdate( UpdateType.Normal, isIndependentUpdate:true );
LeanTween
dsc.setIgnoreTimeScale( useUnScaledTime:true );
iTween
// "ignoretimescale" に true を設定する. var hash = iTween.Hash( "position", targetPos, "time", 2.0f, "easetype", iTween.EaseType.linear, "oncomplete", "OnComplete", "ignoretimescale", true ); // ←ここ.
Tweenとは別ですがParticleSystemで作られたUIエフェクトは Delta Time を Unscaled にすると TimeScale の影響を受けません。
Tween制御系Assetをまとめてみました。簡単なアニメーションはTweenはとても便利です。 より複雑なアニメーションは Animator, AnimationClip を使う感じですかね。
前回に引き続きUnityによるUI開発です。今回はテキスト編です。
Unityのテキスト表示は uGUI標準のText と TextMeshPro です。
今回はTextMeshPro を取り上げます。
Window > TextMeshPro > Import TMP Essential Resources から最低限のアセットをインポートします。
TextMeshProでテキストを表示するためにFontAssetを作成します。
TextMeshProコンポーネントの Font Asset に作成した Font Asset を設定するだけです。
Font Asset をダイナミックフォント的な扱いを可能にする Dynamic SDF 形式にする方法です。
Font Asset 内に無い文字を指定した際、別のFont Assetを参照する機能です。
設定方法は対象Font Asset を選択
Font Fallback Asset に Font Asset を設定します。
使用例としては
英数字は良く使うが、全角文字はほぼ使わないゲームがあるとします。
・ASCII制御文字(半角英数字・記号) のみの Font Asset A を作成
・そのFontFallback に Dynamic SDF 形式 の 全角文字のFont Asset B を設定
こうすれば、普段は A を参照しつつ、全角文字を使う際は B を参照し
フォント用テクスチャのメモリ消費を抑えられます。
TextMeshProはテキスト領域に絵文字を挿入できます。Sprite Asset を必要とします。
以下の方法でオフセットを調整すると直ります。
Sprite Asset の Sprite Glyph Table を開き個別にオフセットを調整します。
まとめて設定したい場合は Sprite Glyph Table の最下部にある Global Offsets & Scale を調整します。
TextMeshPro はルビ(ふりがな)を設定できます。コガネブログさんのサイトがとても参考になります。
baba-s.hatenablog.com
TextMeshPro は各アセット作成の手間はありますが表現の幅とパフォーマンスは uGUI標準のText よりも良いです。単純なテキスト表示であれば Text でも十分です。
【Unity】TextMeshProにFont FallbackとDynamic SDF Systemが追加、日本語が使いやすくなった。 - テラシュールブログ
Unity Live Help
TextMesh Pro: Sprite Assets - Unity Learn
あけましておめでとうございます。久しぶりの更新です ^_^;
今回は、UnityのuGUIを軸としたUI開発をまとめてみました。
uGUIはCanvasコンポーネントを起点とします。このコンポーネント配下に各UI要素を配置します。
UIの描画方式を設定します。
| Render Mode | 概要 |
|---|---|
| Screen Space - Overlay | 通常のUI作成はこれを使います。カメラは参照せず常に最前面に表示されます。 |
| Screen Space - Camera | 指定したカメラ範囲に収まるUIを表示します。UIは常にカメラに向きます。Perspectiveビューも設定できるため3Dモデルを間に挟んで表示できます。キャラ選択画面でUI上に3Dキャラを表示する等に使います。 |
| World Space | 指定したカメラの3D空間にUIを表示します。3Dキャラの頭上に表示するHPゲージ等に使えます。 |
モバイルは端末によって解像度が異なる問題を解決する必要があります。ここではアスペクト比を固定化する方法です。
Unity2019.3以降であれば Device Simulator を使いエディタ上で大まかな判定が可能です。テラシュールさんの記事が綺麗にまとまってます。
【Unity】Device Simulatorでノッチとセーフエリアの対策 - テラシュールブログ
これはとても重要です。事前にUIデザイナーとエンジニアでルールを決めないと後で痛い目にあいます・・いやほんと・・(TAT)
Canvas内に限定した話であれば、Hierarchyビューの並びで描画順が決まります。
Screen Space - Overlay と Screen Space - Camera / World Space で異なる設定になります。
Screen Space - Overlay
・常に Screen Space - Camera と World Space のUIよりも手前に描画
・Sort Order で描画順を制御
Screen Space - Camera / World Space
・カメラDepth > Sorting Layer > Order In Layer の順で奥から手前に描画
こちらのサイトがとても綺麗にまとまっています。
uGUI 描画優先度のチートシート │ Aiming 開発者ブログ
例えばUI > Particle > UI で表示したい場合、Sorting Layer が同じ値ならOrder In Layer で調整できます。
手前のUI要素を 別Canvasの子にしてOrder In Layer を変更します。 (UI要素の Sorting Layer と Order In Layer は Canvas 単位の設定値になるため)
ただし、この方法はCanvasを増やすためパフォーマンス(SetPass増)に影響します。
この辺はゲーム仕様に応じて使い分けると良いです。
画像やシンプルな矩形を表示するコンポーネントです。
Imageに使用するテクスチャは Texture Type を Sprite (2D and UI) に設定します。
| ImageType | 表示 |
|---|---|
| Simple | 最もシンプルな表示です。拡大縮小すると画像全体を引き伸ばします。 |
| Sliced | 拡大縮小時にBorder(境界)部分の大きさは固定したままで、中心部分だけ引き伸ばします。 |
| Tiled | Borderの制御はSlicedと同じです。中心部分を繰り返し表示にできます。 |
| Filled | Fill Methodで指定した方式で表示領域を変更します。 |
Sliced, Tiled を使う場合は Sprite Editor で Border の設定を必要とします。
1. 対象テクスチャのInSpectorビューから「Sprite Editor」を選択
2. Sprite Editor ウインドウ左上のプルダウンから「Custom Outline」を選択
3. Border の値を入力して右上の「Apply」をクリックで完了
Image同様に画像を表示するコンポーネントです。
Imageと違い、Texture Type に依存しないので
・ネットワーク経由でダウンロードした画像
・ゲーム内の3Dモデルをテクスチャ
等に使用できます。
こちらのプロパティを編集することで UV ScrollやTilingを設定できます。
Canvasとそれに紐づく解像度対応や描画順、最後に簡単に画像表示できる Image・RawImage について書きました。これだけでもかなりの量になりました。。本当はテキスト、アニメーション、パフォーマンスと書きたい事は沢山ありますが今回はこの辺で ^_^;
https://learning.unity3d.jp/tag/ui/
Unityでパフォーマンスの良いUIを作る為のTips | PPT
Unity Live Help
今回は Google Mobile Ads SDK Unity プラグインを使った動画リワード広告を試してみました。
ユーザーが広告を操作・視聴するのと引き換えに、アプリ内で報酬を獲得できるものです。スマホのアプリでよくある、ここから先は動画広告を見たら遊べる的なやつです。
まずは Google AdMob でAdMobアカウント、アプリ情報、広告ユニットの作成をします。すでにある方は読み飛ばしてOKです。
こちらの Google AdMob にアクセス、アカウントが無ければ以下のような表示になります。
必要な情報を入力してAdSence 利用規約を確認してチェックを入れたら「ADMOBアカウントを作成」をクリック
ちなみに私は以下の情報で作成
国または地域：日本
タイムゾーン：(UTC+09:00) 東京
お支払い通貨：(JPY¥)
最後にPINコードの入力をします。
電話番号の前に国番号(日本は+81)を付けるのを忘れないでください。
以下のような管理画面が表示されたら完了です。
アプリ固有のアプリIDを取得するためにアプリ情報を作成してAdMobに追加します。
サイドバーの「アプリ」から「アプリを登録して利用を開始」をクリック
アプリを公開済みなら「はい」を選択して自身のアプリを設定します。
アプリ名の入力とプラットフォームの指定を行い「追加」をクリック
アプリ情報が追加されアプリIDが発行されました。
アプリ用の広告ユニットを作成します。
対象アプリを選択して「アプリの概要」から「広告ユニットを追加」をクリック
広告フォーマットを選ぶ画面になるので、今回はリワード広告を選択します。
次に広告ユニット名、報酬の数、報酬アイテムを入力して「広告ユニットを作成」をクリック
広告ユニットが作成され、広告ユニットIDが発行されました。
こちらのGitHubから GoogleMobileAds-v[バージョン].unitypackage をダウンロードします。
適当なUnityプロジェクトを作成して Assets > Import Package > Custom Package からダウンロードした .unitypackage をインポートします。
インポート中に Package Manager Resolver ウインドウが表示され、Game Package Registry by Google のレジストリをPackage Managerに追加して良いかと聞かれるので 「Add Selected Registries」をクリックします。
次に Assets > Google Mobile Ads > Settings を選択
GoogleMobileAdsSettings.assetが生成されます。
Android用の設定
Assets > External Dependency Manager > Android Resolver > Settings を選択
Enable Auto-Resolution, Enable Resolution On Build のチェックを外しておきます。
最後に Assets > External Dependency Manager > Android Resolver > Resolve を選択すると
Android 固有ライブラリ(AARなど) が Assets/Plugins/Android に配置されます。
iOS用の設定
Cocoapods が未インストールの場合は
Assets > External Dependency Manager > iOS Resolver > Install Cocoapods からインストール
次に Assets > External Dependency Manager > iOS Resolver > Settings を選択
Xcode Project - Add Cocoapods to the Xcode project を選択後、OKをクリック
これでUnity Editor上で必要な設定は完了です。
適当なCSファイルを作成して広告表示までの処理を書いていきます。
アプリ起動時などに MobileAds.Initialize() を一度だけ呼び出して初期化します。
using UnityEngine; using GoogleMobileAds.Api; using GoogleMobileAds.Common; public class SampleAds : MonoBehaviour { void Start() { // 広告を読込前に一度だけ呼び出す. MobileAds.Initialize( OnInitCompleted ); } void OnInitCompleted( InitializationStatus initStatus ){ } }
広告ユニットIDを設定してリワード広告オブジェクトの作成と読込を行います。
RewardedAd m_rewardedAd; void CreateAndLoadRewardedAd() { // プラットフォームに応じた広告ユニットIDを設定. string adUnitId = "unexpected_platform"; #if UNITY_ANDROID adUnitId = "ca-app-pub-xxxxxxxxxxxxxxxxxxx/xxxxxxxxxxx"; #elif UNITY_IPHONE adUnitId = "ca-app-pub-xxxxxxxxxxxxxxxxxxx/xxxxxxxxxxx"; #endif // リワード広告オブジェクトを作成. m_rewardedAd = new RewardedAd( adUnitId ); // リワード広告を読込. AdRequest request = new AdRequest.Builder().Build(); m_rewardedAd.LoadAd( request ); }
リワード広告の表示は RewardedAd.Show() を呼ぶだけです。ただし、広告を１回表示するとそのRewaredAdオブジェクトは破棄されるので、このオブジェクトを使い回して以降の広告を読込/表示はできません。
void Show() { if( m_rewardedAd.IsLoaded()){ m_rewardedAd.Show(); } }
以下のようにRewardedAdに広告用イベントを設定できます。
m_rewardedAd.OnAdLoaded += OnAdLoaded; // 広告読込完了時に呼び出される. m_rewardedAd.OnAdClosed += OnAdClosed; // 広告を閉じた時に呼び出される.
設定できるイベントは以下です。
| イベント | 説明 |
|---|---|
| OnAdLoaded | 広告読込完了時に呼び出される。 |
| OnAdFailedToLoad | 広告の読込失敗時に呼び出される |
| OnAdOpening | 広告が表示されると呼び出される。用途は必要に応じてアプリの音声やゲームループを停止する等 |
| OnAdFailedToShow | 広告の表示が失敗時に呼び出される |
| OnAdClosed | ユーザが「閉じる」アイコンまたは「戻る」ボタンをタップして広告を閉じると呼び出される。用途は必要に応じてアプリの音声やゲームループを再開する等 |
| OnUserEarnedReward | 動画広告を視聴したユーザへのリワード付与時(動画を最後まで視聴した時)に呼び出される。引数のRewardには広告ユニットに設定した報酬アイテム(Type)報酬の数(Amount)が入る |
<注意>上記イベントはUnityのメインスレッドとは別スレッドで実行されるので、設定したイベント内でUnityのAPIを呼びたい場合は以下のように MobileAdsEventExecutor.ExecuteInUpdate() を使って例外を回避する必要があります。
[SerializeField] UnityEvent m_onLoadedAd; void OnAdLoaded( object sender, EventArgs args ) { MobileAdsEventExecutor.ExecuteInUpdate( ()=>{ m_onLoadedAd.Invoke(); }); }
イベントをキューイングしてUpdate()で実行してるだけなので同様の処理を自前で書いても良いです。
開発中にテスト広告を使わずに何度もリリース用の広告を呼び出すと不正な操作と検出されてAdMobアカウントをBANないしは利用制限が掛かる可能性があります。
遷移やイベントの検知確認などのアプリをリリースする前のチェックであればこちらにテスト広告ユニットIDが用意されているのでこれらを使用してください。
テスト広告ユニットではなく自分の作成した広告ユニットで確認したい場合、対象端末のテストデバイスIDを追加すれば確認できます。
テストデバイスIDの確認と設定方法は以下です。
1.まずは先程のスクリプトの公告ユニットIDを設定するところをテスト広告ユニットIDに変更します。
void CreateAndLoadRewardedAd() { // 動画リワードのテスト広告ユニットIDを設定. string adUnitId = "unexpected_platform"; #if UNITY_ANDROID adUnitId = "ca-app-pub-3940256099942544/5224354917"; #elif UNITY_IPHONE adUnitId = "ca-app-pub-3940256099942544/1712485313"; #endif m_rewardedAd = new RewardedAd( adUnitId ); AdRequest request = new AdRequest.Builder().Build(); m_rewardedAd.LoadAd( request ); }
2.上記スクリプトが含まれる確認用アプリを作成して起動後のログからテストデバイスIDを取得します。
Android
adb logcat | grep I/Ads から確認できます。
I/Ads (12708): Use RequestConfiguration.Builder().setTestDeviceIds(Arrays.asList("ここにテストデバイスIDが入る") to get test ads on this device.
iOS
・XCode の View > Debug Area > Active Console から確認できます。
<Google> To get test ads on this device, set: GADMobileAds.sharedInstance.requestConfiguration.testDeviceIdentifiers = @[ @"ここにテストデバイスIDが入る" ];
以下のエラーが出る場合、iOS端末の 設定 > プライバシー > 広告 > 追跡型広告の制限をオフにしてアプリを再起動してください。
<Google> Limit Ad Tracking may be enabled. To get test ads on this device, disable Limit AdTracking.
3.確認したテストデバイスIDを AdRequest.AddTestDevice() に設定します。
<注意>リリース版ではAddTestDevice()が含まれないようにしてください
// リワード広告を読込. AdRequest request = new AdRequest.Builder() .AddTestDevice( AdRequest.TestDeviceSimulator ) #if UNITY_ANDROID .AddTestDevice( "テストデバイスID for Android" ) #elif UNITY_IPHONE .AddTestDevice( "テストデバイスID for iOS" ) #endif .Build();
これで準備が完了です！自分の作成した広告ユニットを使いテストデバイスによる確認ができます。長かった・・・^_^;
最後に簡単なミニゲームとリワード広告を連携させたサンプルをこちらのGitHubにアップしておきました。
・始める | Unity | Google for Developers
・[Xcode]Mac OS Catalinaにアップデートしたらpodコマンドが通らなくなった
Enumファイルを自動生成するEditor拡張を作ってみました。生成部分は .Net Framework の System.CodeDom.Compiler を使ってます。
