5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-05-27

前提

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

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

画面への合わせ方として、以下の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を選んでください。
  • 画面サイズやMethodの変化にも対応しています。
  • サンプル(SampleScene)も参考にしてください。

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

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?