RectScalerWithViewport.csをアタッチする場所がよく分からなかったのですが、キャンバス内に空のゲームオブジェクトを作成してそこにアタッチすればいいんですか?, はい、RectScalerWithViewport.csはゲーム上でお使いのCanvasを親として ゲームUIなどを表示したあとにImageパネルで上書きするためにFramePanelという階層はゲームUI(RootPanel)よりも下側に配置しています。, こちらの画像を参考に今一度PrefabやCanvasを確認していただけると幸いです。, ありがとうございます! また気になるのは「Canvas直下」という点なのですが、塗りつぶしのImageを一番最後に描画するためにはCanvasの最後に配置する必要があります。, ・RootPanelの下にUIなどを配置 現在、ブロック崩しをandroidアプリとして作っています。 「上下右左の寄せ」設定についてはRectTransformのpivotで寄せる部分に合わせて変更してあげる必要ありますのでご注意ください~, 何度もすみません。 ありがとうございました! この記事でのバージョン Unity 2018.4.1f1 はじめに UnityのCameraはSize(orthographicSize)で表示範囲を設定する事ができます。 しかしスマホのように機種によって画面サイズやアスペクト比が変わってくる場合は、この値をプログラムで調整する必要が出てきます。 という事で、Came… それともCanvas Scaler や Render Mode などの設定も任意のものに変更する必要がありますか?, とても良いスクリプトを提供していただきありがとうございます。自分のゲームでもこの機能を実装してみようと思います。, 質問なのですが、CanvasやCamera側の設定で変更しなければならない箇所はありますでしょうか。Canvas Scaler や Render Modeなどの設定は任意のものに変更しなければなりませんか?, 記事に書けておらず申し訳ないのですが、CanvasScalarは利用しない前提の実装となっています。 見えては行けない部分はUIのImageコンポーネントでその部分を上塗りするような形で配置する必要があります。, 方法としては端末によっては上下左右どちらに余白が来るかわからないため その一つ下の階層にゲームオブジェクト(記事で説明しているPanel)を追加し、そこにRectScalerWithViewportスクリプトをアタッチします。, その追加したゲームオブジェクトはRectTransformと呼ばれるCanvasの子どもになるためのオブジェクトとして作成されますので、そのRectTransformプロパティはCanvasのサイズに連動するように中心を原点とした完全フィット設定にしてください(上下左右のサイズは完全連動、原点を中心にする設定です)。, そしてPanelで追加すると不要なImageコンポーネントが付いてきますのでこれを削除してください。, 最後にこれまでCanvas直下にあったUIなどのゲームオブジェクトをその追加したPanel(改名推奨、例:ScalerPanelなど)に全てドラッグ&ドロップで移動させます。, 少々初歩的な部分などを端折っている点もありますので 解像度選択ダイアログを無効にする. とてもいいスクリプトを提供していただきありがとうございます。自分のゲームでも採用してみたいと思います。, 質問なのですが、キャンバスやパネル側の設定はデフォルトの設定のままでしょうか? 過去の記事では、通常どおりのカメラ空間で2Dゲームの構成を作成しました。その後、「スマートフォン(複雑なアスペクト比)対応とレスポンシブ UI の基本」の記事を書いたとおり、2Dをやるなら Canvas と付き合うようにしたほうが都合よいこともありそうです。, 両者の関係を整理して、画面にどう映るようになるのか確認していきます。画面の端から端まで、ちゃんと制御して表示できるようになろうという記事です。, Canvas の設定値の Render Mode を Screen Space - Camera にすると、カメラと Canvas を指定した距離だけ空けてキャンバスを表示してくれます。よくやる設定だと思いますので次に進みます。, カメラに映る(ウィンドウに見える)Canvas の領域は、Canvas Scaler の設定値 UI Scale Mode が Scale With Screen Size であるとき、Canvas は Reference Resolution の値で制御します。, Canvas Scaler の設定値 Reference Pixels Per Unit の値は影響しません。勘違いしないように!, ここでのサンプルは、画面の縦横比を16:9と仮定することにします。画面にあわせるためには、Reference Resolution の値を 320x180 のようにします。両者の縦横比が異なると、最初は混乱すると思うので、とりあえずあわせておいたほうがよいと思います。, 最適化の観点からだと、Canvas は要素に変更があると Canvas 全体に再解析の処理は走るため 1 最適なドローコールになりません。つまり、ルートが Canvas だとドローコールのコストが大きい可能性があります。対策として、キャンバスをネストする(親 Canvas と子 Canvas の関係を持つ)ことでコンテンツを分離して、独自のジオメトリ、バッチ処理を実行できます。, Canvas のサイズ (Reference Resolution) が 320x180 なら、20x20 のブロックを 16x9 個配置できるはずです。まず、これを確認してみます。, 20x20 のブロックの画像を作成して、横に連続して並べることにします。2色のブロックを用意して、めり込んだりしないように画像の端をわかりやすくしました。, 画像を Unity の Assets にインポートするとき、画面比率に影響する重要なパラメーターが Pixels Per Unit です。デフォルトでは 100 に設定されています。この設定の意味は、この画像は1ユニットの幅に対して 100 pixel 詰め込んでください、というようなことになります。, ユニットというのは、最小単位です。ここでは Canvas の Reference Resolution の単位になります。, Canvas の 320x180 のサイズに、320 個と 180 個ずつドットを詰め込めるようにするには1ユニットの幅に対して 1 pixel とすればよいので、Pixels Per Unit の設定値は1になります。, この状態でスプライトを Canvas に追加して、インスペクターから Trasform の Scale を x, y ともに1で設定して画面に詰め込んでいくと、縦横比がとれているのを確認できます。, 仮に、Assets に追加したスプライトの Pixels Per Unit をデフォルトの 100 のまま Canvas にコンポーネントとして追加してみます。インスペクターから Trasform の Scale を x, y ともに1で設定すると、とても小さなスプライトになってしまうのが確認できます。, 元々の画像サイズは 20x20 でした。それを1ユニットに対して 100 ピクセル詰め込む設定になっています。つまり1ユニットに だけ表示されている状態だと思われます。, さっそく Canvas 上のコンポーネントの Scale を x, y ともに5倍してみます。おそらくこれで、1ユニットのサイズ(1ピクセルサイズ)になったはずです……が、わかりづらいですね。, さらに20倍すると、ちょうど20ユニットのサイズとなり、つまり1ユニット1 pixel としたコンポーネントと同じサイズになりました。(つまり Scale 100倍です), 仮に 128x128 の画像を Assets にインポートして、同じく Pixels Per Unit をデフォルトの 100 のまま Canvas にコンポーネントとして追加してみます。, (1)の説明のとおりだと、Canvas に追加したコンポーネントは、1ユニットに対して 1.28 ユニットの大きさで表示されていることになります。, 画面に対して、Scale が1のとき 1.28 ユニットの大きさなので、Scale が x のとき1ユニットの大きさなので, これにより、Scale が 0.78125 のとき1ユニットだとわかりました。一応確かめるために20倍して表示してみます。, たとえば、Canvas のサイズを 32x18 にしてみるパターンを考えてみます。縦横比はあわせてありますが、かなり小さいサイズにも思います。, 逆にいえば Canvas の1ユニットを大きく見えるように設計していますので、20x20 の画像を読み込む際は1ユニットの Pixel Per Unit は 20 にするとよいでしょう。, シンプルに取り回せるように、1 タイル = 1 ユニットになるようスケールを設定するのがいいでしょう。, この内容は、「Unity Blog - 2D アートアセットの解像度選択」のとおりですね。, ゲームのメイン部分にあわせた設定にするためにこうしたプロパティがあるのだと思いますが、今までの開発で Windows API や DirectX を使って素直にコードを書いていたなら、1unitは1Pixel というのが自然かもしれません。, Unityの教科書 Unity 2019完全対応版 2D&3Dスマートフォンゲーム入門講座, 詳細は長くなるので Unity UI の最適化に関するヒント を参照してみてください。↩, 基本情報技術者 解決できず、コメントさせていただきました。, こちらのゲームは縦画面のものとなりますでしょうか? 情報セキュリティマネジメント Unityで開発する場合、インストール後そのままだと画面サイズが固定されていません。 解像度が異なる端末で動作するアプリを開発する場合、そのままだと困ったことになってしまうため、サイズを指定して余剰な箇所は黒塗りにするのがベターです。 こちらのスクリプトで、画面サイズがしっかりと端末に反映されているのですが、, 左右の両端に、切れ目が有り、切れ目の外側に 「宴」の画面サイズはデフォルトでは800x600となっています。 宴プロジェクト作成時に画面サイズを設定するのが基本ですが、画面サイズは後からでも変更可能です。 宴2以前では、こちらのやり方をしてください ゲームの画面サイズの変更 各カメラからスクリーンサイズの設定ができます。 Microsoft MCP Programming in C# そのイベントではUnity製のゲームをブラウザで動かすシステムなのですが 回答して頂いた画像どうりにすると出来ました。 半分のサイズの960×540も、よく見かけるサイズです。 ・上下2つのパネルも同様にRectTransformで左右のストレッチ(上は上寄せ、下は下寄せ)にしてHeightを1000にしておきます アスペクト比は固定にしたい ブログを報告する, スクロールビュー(uGUI で自作) uGUI で用意された Scroll Vi…, この記事は、Unity で SQLite を利用するために Standalone/And…, Unity Canvas を使った2Dゲーム画面設計と Reference Resolution のプラクティス, Unity キャンバス内に Scroll View を使ったダイアログをポップアップ, Unity ダメージ表示のアニメーションを(Final Fantasy 5, 6)っぽくやる, Unity モンスターを倒したエフェクト(Final Fantasy 5)っぽくやる, Unity Android/Windows 環境における SQLite の使い方の基本, C# System.Text.Json で非数値 (NaN, Infinity) を書込/読込する方法, SendGrid UNIX Time から EXCEL の日付+時間に値を変換する方法, Unity スクリプトコードを Visual Studio でステップ実行・ブレークポイントを使ってデバッグをする. 画面のサイズ を ... 前回バージョン管理の方法をいくつか紹介しておりましたが、Unity側に事前設定する必要がありましたので記事にしておきました。 もし問題が起きていた方はこちらを設定の上、試していただければ幸いです。 こちらも設定して検証してみていただけると幸いです。, このスクリプトに凄く助けられました!unity初心者の者です CanvasのReferenceResolutionも同じ値に設定します。, Copyright © 2006 - 2020 未知の路 | Powered by zBench and WordPress, 【Unity】staticなメソッドをOnClickイベントに設定すると、missingになってしまう, Xcodeでビルドしようとすると “xxx is busy: Preparing debugger support for xxx.” と表示されて先に進まない時の対処, symlinkが含まれるUnitySDKを導入する時にGUIDが更新され続ける場合の対処. Canvas(画面サイズ)の設定 画面サイズの確認 Pixels Per Unit を1にしない例(1) Pixels Per Unit を1にしない例(2) 応用編 参考 過去の記事では、通常どおりのカメラ空間で2Dゲームの構成を作成しました。その後、「スマートフォン(複雑なアスペクト比)対応とレスポンシブ UI の… カメラの描画領域を調整しています。, refCameraに使用するカメラコンポーネント、widthに基本解像度の幅、heightに基本解像度の高さ、pixelPerUnitについてもCanvasなどと統一した値を利用してください。, とても助かります! ・左右2つのパネルはRectTransformで上下のストレッチ(左は左寄せ、右は右寄せ)にし、Widthを1000にしておきます 気になることなどありましたらお気軽にご連絡ください~!, 追伸:ゲーム上でCanvasが複数ある場合、毎回対応入れないといけないのでPrefabしておくと便利です。, コメント失礼します。 Windows10 unity2018.3.0f2 personal. 各オブジェクトに設定していく流れとなります。, カメラに対して、下記のスクリプトをアタッチします。 こちらのスクリプトを使わせていただき、画面が端末毎に反映されるようになりました!ですが、, 上下のサイズは正常なのですが、 途中で全くグラボ(グラフィックボード)が動いていないことに気づきました…!

Phs ƭ史 Ʃ種 4, Mov Mpeg Ť換 Mac 4, Âスマイ超busaiku Ãイコ Ȫ 9, Áつめし ĸ平 Ãニュー 6, Âワガタと ÂブトムÂ Á違い 4, Uim Ãック Hwd14 5,

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.