tetr4lab / FitForScreen

Dynamically fit uGUI Image to the screen. You can select Stretch, Fit, Fill.

Home Page:https://qiita.com/tetr4lab/items/a227f78bcfab9d6ef082

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Dynamically fit uGUI Image to the screen. You can select Stretch, Fit, Fill.
tags: Unity uGUI

前提

  • 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 の実現

使い方

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

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

About

Dynamically fit uGUI Image to the screen. You can select Stretch, Fit, Fill.

https://qiita.com/tetr4lab/items/a227f78bcfab9d6ef082

License:MIT License


Languages

Language:C# 100.0%