7
3

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 5 years have passed since last update.

uGUI で RectTransform の Scale を拡大している場合に Stretch したい

Last updated at Posted at 2019-05-09

Anchor の Strech と Scale の拡大を併用したい

ドット絵でUIを作っていて、素材そのままだと解像度が小さいため素材を2倍の大きさで使いたい場面が多々あります。(つまり、widthやheight を2倍にして要素のサイズを大きくしたいのではなく、 要素に使われているSpriteの素材を大きく表示したい)

これを↓

こうしたい↓(Scale 2倍、要素サイズは上記と同じ)

これを可変させたい

Anchorのプリセットを選ぶことで任意の方向に可変させることができますが、

プリセット

例えばScaleが (1, 1, 1) の場合だと

scale1.png

期待通り引き伸ばされます。
が、Scale が (2, 2, 1) の場合だと、

scale2.png

上記のように引き伸ばしが効き過ぎておかしなことに。

解決方法

Anchorの横方向stretchプリセットの内容は、 Anchors MinX = 0、 MaxX = 1 です。
これはScaleが 1, 1, 1 のときにいい感じに動きます。

これを 先の例のようにscaleが (2, 2, 1) で動くようにするには
MinX = 0.25、 MaxX = 0.75 となります。

また (4, 4, 1) のときは
MinX = 0.375、 MaxX = 0.625 という感じ。

scale4.png

まとめ

横方向に Stretch したい場合、下記の式でいい感じになりました。
(MinY、MaxY も同様)

MinX = 0.5 - 0.5 / (拡大率)
MaxX = 0.5 + 0.5 / (拡大率)

正直Anchorの値はほぼ触らないで開発してきましたがちょっと仲良くなれました。
Anchorっていうとピンとこないけど、 0.5を中心にして伸びる比率 ということかな。
1(or 0) は最大に伸びる、 0.5は伸びない。(ちょっと説明が下手すぎるか。。。

例えばscale4倍で横方向の右側にだけ引き伸ばしたい場合は、pivotも右に固定し、
PivotX = 0, MinX = 0.5、 MaxX = 0.625 でいけます。 (Minは左、Maxは右)

scale4-b.png

7
3
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
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?