1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. Unity
  6. »
  7. 【Unity 2D】画像のアスペクト比を固定して画面全体に表示する方法

【Unity 2D】画像のアスペクト比を固定して画面全体に表示する方法

こんにちは。
私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。

さて、今回はUnity2Dでのゲーム開発において、アスペクト比を固定したまま画面全体に画像を表示する方法です。
アスペクト比というのは、画像などの縦横の長さに比のことをいいます。

ゲーム開発では、画像のアスペクト比を固定したい場合がほとんどだと思います。

それでは、Unityで画像のアスペクト比を固定する方法を見ていきましょう。

※画像は開発中のものです。完成後のゲームとは異なる場合があります。

目次
  1. はじめに
  2. アスペクト比を固定したまま、画像を画面全体に拡大する
  3. まとめ

はじめに

まず、今回使用する画像は2048*1024の横長のものです。
しかし、スマホのサイズはそれぞれ違うので、それごとに表示が異なってきます。

極端な話をすると、縦長(縦向き)と横長(横向き)でも、表示のされ方が異なります。
例え、向きを固定してしまうとしても、縦横両方でしっかりと画像全体が表示されるようにしておくことができれば、一番安心です。

アスペクト比を固定したまま、画像を画面全体に拡大する

では、まずはCanvasの設定をしていきましょう。
ヒエラルキー(Hierarchy)から、「Canvas」を選択します。

インスペクター(Inspector)で、以下のような変更を加えます。

  • レンダーモード(Render Mode):スクリーンスペース – カメラ(Screen Space – Camera)
  • レンダーカメラ(Render Camera):Main Camera(Camera)
  • UI スケールモード(UI Scale Mode):画面サイズに拡大(Scale With Screen Size)
  • 参照解像度(Reference Resolution):表示したい画像のサイズ(今回であれば2048*1024)
  • スクリーンマッチモード(Screen Match Mode):Expand

つづいて、今回はパネル(Panel)を作成して画像を表示しているので、そのパネル(Panel)の設定を行います。
ヒエラルキー(Hierarchy)から、「Panel」を選択します。(今回は分かりやすいように、名前をデフォルトのままのPanelにしています)

インスペクター(Inspector)で、以下のような変更を加えます。

まず、アンカープリセット(Anchor Presets)は、中央からのものにします。

幅(Width)、高さ(Height)はそれぞれ表示したい画像のサイズにし、ソース画像(Sorce Image)で表示したい画像を選択します。

また、色(Color)はAの値を255にしておきます。

さらに画像タイプは「シンプル(Simple)」に設定します。

これで、アスペクト比を固定したまま、画面全体に画像を拡大して表示することができます。

まとめ

ゲーム開発では、画像のアスペクト比は固定して使いたい場合が多いと思います。
しかし、スマホはそれぞれ画面のサイズが違うので、画面全体に拡大しようとすると、どうしても比が変わってしまいます。

そこで、今回のような設定をすることで、余白を残してアスペクト比を固定することができます。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

【Xcode】Storyboardを使ってMacアプリ開発に挑戦。

こんにちは。@It_is_Rでございます。 さて、今回はStoryboardを使ってのmacOS用のアプリ開発の基本として、ウィンドウに文字の表示させてみたいと思います。開発環境はMac OS

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げ

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

HTML5とCanvasを使うべ!

HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、こんかいもはじめていきましょう! これまでの講座《こうざ》では、JavScriptの基本《きほん》について学び、キャラクターの操作《そうさ》ができるよ

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です