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

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

まとめ

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

Windows10にPythonをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はWindows10にPythonをインストールする方法を紹介します。 Pythonのインストーラをダウンロード では、Python

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。今回は

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい Gr

文字を一文字ずつ表示してみよう!

【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それをも

【初心者向け】dotfilesの作り方。開発環境を一瞬で構築しよう!

Macを買い換えたとき、データを全削除した後などは、もういちど自分の開発環境を整える必要があります。しかし、その環境設定は、ちょっと大変な作業だったりします。 そんなとき、dotfilesとい

Unityのダウンロードとインストールの方法【Mac】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

文字を表示するクラスを作ろう!

【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重要なキ

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、WEB開発で、JavaScriptは必須といっても過言ではありません

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

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




オリジナルゲーム.com