Help us understand the problem. What is going on with this article?

uGUIのImageを画面にフィットさせる

前提

  • unity 2018.4.0f1で動作確認しました。

「画面にフィットさせる」とは?

画面への合わせ方として、以下の3種類が考えられます。

名称 イメージ 説明
Stretch
伸縮
Stretch.png 縦横比を無視して、画面いっぱいに拡縮する
Fit
内接
Fit.png 縦横比を保ち、画像全体が表示されるように拡縮する
画像と画面端に隙間ができる
Fill
外接
Fill.png 縦横比を保ち、画面に隙間なく表示されるように拡縮する
画像が画面からはみ出す

Stretch / Fit の場合

「Stretch - 伸縮」と「Fit - 内接」は、unityの標準機能だけで容易に実現できますね。
Inspecter.png
RectTransformを、ルートCanvasの外周に沿って拡縮するように設定して、ImageのPreserv Aspectをチェックすると「Fit」、チェックしなければ「Stretch」になります。
また、こうするだけで、スマホの回転時などに生じる画面サイズ変化にも対応できます。

Fill の実現

アセットの入手 (GitHub)

ダウンロード ⇒ FitForScreen.unitypackage
ソースはこちらです。

使い方

  • プロジェクトにアセットをインポートしてください。
  • シーンのオブジェクトに、"FitForScreen"スクリプトをアタッチしてください。
  • インスペクターでImageを設定し、Methodを選んでください。
    • Imageは、ルートCanvasの中央に、中央アンカーで配置されている必要があります。
  • 画面サイズやMethodの変化にも対応しています。
  • サンプル(SampleScene)も参考にしてください。

Inspecter3.png  SS4.png
UNITY-CHAN! © Unity Technologies Japan/UCL

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away