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)」に設定します。

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

まとめ

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio のダウ

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

画像を動かすよ!

JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今回も、プログラミングの勉強《べんきょう》をはじめていきましょう! 前回、「JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門」では、JavaSc

Python(Tkinter)でウィンドウを表示するための基本

ゲームなどのアプリを作成したいとき、まず、ウィンドウを表示する必要があります。そこで今回は、Python(Tkinter)を使って、ウィンドウを表示する方法と、その設定を変える方法を紹介します。

Chrome拡張機能の作り方。誰でもかんたんに開発できる!

Webサイトを見るとき、ブラウザはなにを使っていますか? Edge、Safari、Opera、firefox、色々ありますが、やはりChromeを使っている、という方はとても多いと思います。ほ

MacにPythonをインストールしてみよう!小学生からのPython入門

さて、今回《こんかい》もプログラミングを学んでいきましょう! 前回はWindows《ウィンドウズ》にPython《パイソン》をインストールする方法《ほうほう》を紹介《しょうかい》しました。今回

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。そんなときは、gulpfile.jsを分割して管理すると

【絶対できる!】Unityでの2Dノベルゲームの作り方を詳しく解説

人魚との触れ合いを描いた小説、「ELENA 人魚と過ごした時間」のゲーム化を目指し、日々コツコツと開発を進めているのですが、もう少し時間がかかりそうです。 さて、そんなわけで、今回はUnity

画像を表示するよ

JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。 前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScrip

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。