CanvasのScaleWithScreenSizeで気をつけなければならないこと

・はじめに
今回はUnityのCanvasのScaleWithScreenSizeが原因で端末によってUIの大きさが変わってしまったことがあったため、このブログに残しておきます。

・前提

私は今回CanvasコンポーネントにあるCanvasScalerのUI Scale ModeをScaleWithScreenSizeにしていました。下のような感じですね。

このようにすると当たり前ですがCanvasのScaleが変わっていますね!

今回はSimulatorでMotorola Moto Eを選択しているため、Scaleが0.5になっています。

・本題

GooglePlayConsoleで内部テストを行うとスクリーンショットからMotorora G20の一部のテキストが大きくなっていることに気がつきました。

SimulatorでMotorola Moto Eを選択してみるとテキストが2倍になっている事が分かりました。また、別の端末を選択して実行してみると、テキストのサイズが変更されているように見えました。

なにが原因か探るため、スクリプトの中身を見てみると

Numbers.transform.localScale = new Vector3(1f, 1f, 1f);

というコードがありました。
Numbersは普通のGameObjectですね。

これの問題点はNumbersがCanvasの子オブジェクトであったことでした。さっきも書いた通りCanvasScalerのUI Scale ModeをScaleWithScreenSizeにすると操作する端末によって、CanvasのScaleが変わるのです。そこにこのスクリプトがあると、その変わったスケールを基準にゲームオブジェクトのスケールも変わるようになります。もし、SimulatorでMotorola Moto Eを選択していると、Canvasのスケールは0.5なのでゲームオブジェクトの子オブジェクトのスケールは2になります。

・最後に
今回も限定的な話ですが、限定的な話こそ解決方法が見つかりにくいためここに書きました。
参考になれば幸いです。良いUnityライフを!

NumberBlendのプライバシーポリシー

プライバシーポリシー CPUはNumberBlendアプリをAd Supportedアプリとして構築しました。このサービスはCPUによって無料で提供され、そのままの状態で使用することを意図しています。

このページは、サービスを利用することを決定した場合、個人情報の収集、利用、開示に関するポリシーを訪問者に通知するために使用されます。

サービスを利用することを選択すると、このポリシーに関連する情報の収集と使用に同意したものと見なされます。収集した個人情報は、サービスの提供と改善に使用されます。私はこのプライバシーポリシーで説明されている以外の方法で、情報を使用または共有しません。

このプライバシーポリシーで使用されている用語は、NumberBlendで定義されていない限り、利用可能な利用規約と同じ意味を持っています。

情報の収集と利用

より良いエクスペリエンスを得るために、サービスを使用している間に、広告について含む特定の個人情報を提供する必要があるかもしれません。本アプリでは、AdMob(Google Inc.)を広告配信ツールとして使用しており、AdMobがご利用者の情報を自動的に取得する可能性があります。取得される情報、利用目的、第三者への提供については、以下の広告配信事業者のアプリケーション・プライバシーポリシーのリンクから確認してください。Google広告に関するポリシーはhttps://policies.google.com/technologies/ads?hl=ja

policies.google.com

です。私がリクエストする情報は、いかなる方法でも私によって収集されず、お使いのデバイスに保持されます。

アプリは、あなたを識別するために使用される情報を収集する可能性があるサードパーティサービスを使用しています。

アプリが使用するサードパーティサービスプロバイダのプライバシーポリシーへのリンク

ログデータ

サービスを使用する際に、アプリのエラーが発生した場合、私はデータと情報(サードパーティ製品を介して)を収集します。このログデータには、デバイスIPアドレス、デバイス名、オペレーティングシステムのバージョン、サービスを利用する際のアプリの構成、サービスの使用日時、およびその他の統計情報が含まれる可能性があります。

クッキー

クッキーは、一般的に匿名のユニークな識別子として使用される、小さなデータのファイルです。これらは、訪れたウェブサイトからブラウザに送信され、デバイスの内部メモリに保存されます。

このサービスは、これらの「クッキー」を明示的に使用しません。ただし、アプリは「クッキー」を使用して情報を収集し、サービスを改善するために使用するサードパーティのコードやライブラリを使用する場合があります。クッキーを受け入れるか拒否するかを選択するオプションがあります。クッキーがデバイスに送信されるときに通知することもできます。クッキーを拒否する場合、このサービスの一部を使用できなくなる可能性があります。

サービスプロバイダ

私は以下の理由で、サービスの提供を支援するために、サードパーティの企業や個人を雇用するかもしれません。

  • 当社のサービスを容易にするため
  • 当社の代理でサービスを提供するため
  • サービス関連のサービスを実行するため、または
  • サービスの使用方法を分析するため

このサービスのユーザーにお知らせしたいのは、これらのサードパーティが彼らの個人情報へのアクセス権を持っていることです。その理由は、彼らに私たちの代わりに割り当てられたタスクを実行するためです。ただし、他の目的で情報を開示または使用することは義務付けられていません。

セキュリティ

私はあなたが提供する個人情報に対する信頼を大切にしています。したがって、商業的に受け入れられる手段を使用して保護しようとしています。ただし、インターネットを介した転送方法や電子的な保存方法が100%安全で信頼性があるとは限りません。そのため、その絶対的なセキュリティを保証することはできません。

他のサイトへのリンク

このサービスには他のサイトへのリンクが含まれている可能性があります。サードパーティのリンクをクリックすると、そのサイトにリダイレクトされます。これらの外部サイトは私によって運営されていません。したがって、これらのウェブサイトのコンテンツ、プライバシーポリシー、または実践については確認することを強くお勧めします。私はいかなるサードパーティのサイトまたはサービスの内容、プライバシーポリシー、または実践についても制御せず、責任を負いません。

子供のプライバシー

このサービスは13歳未満の個人を対象としていません。私は故意に13歳未満の子供から個人を識別できる情報を収集しません。13歳未満の子供から個人情報を提供された場合、私はすぐにそれをサーバーから削除します。もし親または保護者であり、お子様が私たちに個人情報を提供したことを知っている場合は、お知らせいただければと思います。

このプライバシーポリシーの変更

私は定期的にこのページを変更するかもしれませんので、定期的に確認することがお勧めです。変更があれば、新しいプライバシーポリシーをこのページに掲載することでお知らせします。

このポリシーは2023-12-05から有効です。

お問い合わせ

プライバシーポリシーに関するご質問や提案があれば、お気軽にcpugamedev@gmail.comまでご連絡ください。

このプライバシーポリシーページはprivacypolicytemplate.netによって作成され、App Privacy Policy Generatorによって変更/生成されました。

Effekseerの描画順の設定・CameraのDepthでの描画順の設定

・はじめに

 UnityではEffekseerの描画順をSortingLayerで設定することが出来ません。Effekseerの描画順を設定する時はCameraのDepthによって分ける方法があります。

 私はCameraのDepthで描画順を設定することに成功しましたので、その方法を紹介します。このブログではEffectを使って解説しますが、Effect以外でも同様のことができるため、CameraのDepthについて詰まっている方は、ぜひ読んでみてください。

では、さっそくやっていきましょう。

 

・準備

 詳しく説明するので、良く理解している方は飛ばして読んでください。

 Effekseer for Unityが追加されていることを前提として話を進めますので、追加していない方は、別のブログを読んでから進めてください。

 

 まず、空のGameObjectを生成して、Effectと名前を付けました。そして、そのGameObjectにAdd Componentから、Effekseer Emitterを追加します。そこにお好みのエフェクトをEffect Assetにドラッグ&ドロップしてください。最後にPlay On Start ,is Loopingにチェックをいれて下さい。

 

 これで、再生ボタンを押したらこのようにEffectが再生されるはずです。Effectが見えなかった場合、EffectのPositionが間違っている・Effectのサイズが小さすぎる・EffectのTextureがインポート出来ていない等が考えられます。

 

 次に、CanvasとImageを生成しました。分かりやすくするために色とサイズを変えましたが、変えなくても大丈夫です。

 この時点で再生ボタンを押すと、Imageが上にでてきて、Effectの一部が見えなくなりました。

 

・実演

 まず、Canvasの設定を変えます。元々CanvasのRender ModeはScreen Space-Overlayとなっていますが、これはImageを上から被せるようなものなので、Effectの下にImageを置きたい場合には使うことが出来ません。Render ModeをScreen Space-Cameraにして、Render CameraをMain Cameraにして下さい。これで通常のGameObjectも(Effectも)Canvasの上に配置することができるようになりました。

 

 次に、Cameraを新しく追加します。名前はCameraEffectにしました。Positionを(0,1,-10)にして、Crear FlagsをDepth Onlyにします。Depth Onlyにすることによって、このカメラよりもDepthが小さなカメラの上に書くことができるようになります。これをしないと、Depthが小さいカメラの映像はSkyboxやSolid Colorに妨げられて、映らなくなります。そして、このCameraのDepthを1にしてください。MainCameraのDepthは0にしてください。これによって、MainCameraの上にこのCameraの映ったものを書くという処理ができるようになりました。

 

 次に、EffectというLayerを追加してください。そして、MainCameraのCulling Maskに上の写真のように、Effect以外にチェックが入っている状態にしてください。Culling Maskにチェックが入っているものしか、このカメラには映らなくなくなります。

 そして、EffectのLayerをEffectに変更して、CameraEffectのCulling MaskをEffectだけにチェックが入っている状態にしてください。この時、一回Nothingにチェックを入れてから、Effectにチェックを入れると簡単にEffectだけにチェックが入るようにできます。

 

 この状態で再生ボタンを押すと、このようにEffectがImageの上に表示することができるようになりました。

 

・おまけ

 もう一つずつCanvas,Image,Cameraを追加して、これまでと同じように設定すると(CameraのDepthは2に、CanvasのRenderCameraは新しく追加したCameraにする)、EffectをImageの間に挟むことができます。

 

・実用例

 白の点の部分がEffectです。背景とカードの間にEffectを挟むことにより、Effectのせいで、カードが見にくくなることがなくなりました。