7
6

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.

Unity ContentSizeFitterコンポーネントの使い方例

Last updated at Posted at 2015-03-18

今回の概要

UnityのContentSizeFitterコンポーネントを使用し、テキストの長さに応じて背景の大きさを変更する方法〜

TextとImageの配置

① Hierarchy上に Create > UI > Text を行いテキストを追加する。
② テキストの子要素として Create > UI > Image を行いイメージを追加する。

スクリーンショット 2015-03-18 11.22.57.png

Textの後ろにImageの配置

Canvasコンポーネントを子要素のImageに追加し、SortOrderを**-1**に変更する。
image02.png

スクリーンショット 2015-03-18 11.23.56.png
ここで、HierarchyのImageの表示名をBGに変更!

BGのアンカー設定

アンカープリセットを表示し、shiftキーoptionキーを押しながら右下の上下にStretchを選択します。
スクリーンショット 2015-03-18 11.25.08.png

RectTransformコンポーネント内のLeft・Top・Right・Bottomの値にそれぞれ**-5**と入れる。
image03.png

TextにContentSizeFitterコンポーネントを追加

ContentSizeFitterコンポーネントを追加し、Horizontal/Vertical Fitの値をPreferred Sizeに変更する。
コンポーネントの説明は以下の表に記載する。

選択肢 内容
Unconstrained  サイズを変更しない
Min Size サイズを[Min Width/Height]の値に自動的に合わせる
Preferred Size サイズを[Preferred Width/Height]の値に合わせる

スクリーンショット 2015-03-18 11.25.58.png

以上の工程で、文字数に応じて背景の大きさが変更されるようになりました!

参考資料

↓今回は資料のp113を参考にしています↓
UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?