Unityで可変サイズオブジェクトの実装

2017.06.27

「あるごん(iOS / Android)」の実装時に意外と困ったのが可変幅の画面やオブジェクトの実装です。
Webであれば簡単にできるのに、uGUIでやろうとするとなかなかうまくいかないことがありました。

可変サイズの吹き出しの実装

吹き出し型のuGUIの実装です。
中に配置するテキストの量によってサイズが可変になるように設定します。
画像ではなくデバイステキストでテキストを表示する場合、閲覧環境によっては文字の大きさが微妙に異なることがあるため、デバイステキストを使用する箇所は可変にしておいた方が安全です。

1. 吹き出しの背景画像を9Sliceのスプライトにする

画像を可変に対応させるため、9Sliceの設定をします。

  • Assetsに画像を読み込み、「Texture Type」を「Sprite(2D and UI)」にする
    cap1
  • 「Sprite Editor」で引き延ばす箇所を調整
    今回は画像の右側を伸ばしたいため下記のような設定をします。
    cap2
    ちなみにこの9Sliceの設定の仕方も、最初は使い勝手が分からず戸惑った箇所です。キャプチャに赤い線と文字で追記しましたが、四方からドラッグすると緑の線が登場するので、その線をそれぞれ伸ばしたい箇所を囲うような位置に配置します。
    完了したら「Apply」をクリックします。

2. 吹き出しを配置する

吹き出しをタップしたら閉じる仕様にするためuGUIのボタンで吹き出しを実装します。

  • uGUIのButtonを配置する
    cap3
  • 「Image」の「Source Image」に先ほどの吹き出し用スプライトを設定する
  • Buttonの子要素の「Text」に吹き出しで表示するテキストを入力
    cap4

3. 可変にするための設定を行う

  • Textの「Add Component」を押して「Content Size Fitter」を追加する
  • 「Horizonal Fit」と「Vertival Fit」をそれぞれ「Preferred Size」に設定する
    cap5
  • Buttonの「Add Component」を押して「Content Size Fitter」を追加する
    こちらにも「Content Size Fitter」を設定します。
    Buttonと、その子要素のTextの両方に設定しておかないとうまくいきません。
  • 「Horizonal Fit」と「Vertival Fit」をそれぞれ「Preferred Size」に設定する
  • Buttonの「Add Component」を押して「Vertical Layout Group」を追加する
  • 「Vertical Layout Group」の設定を適宜調整する
    cap6

これで可変の吹き出しが実装できました。
縦も横も文字量に合わせて吹き出しサイズが変わります。

cap7
吹き出しのスタート部分が左下なのでAnchorの位置は左下にしています。

子要素がグリッド状の可変要素の実装

「あるごん」のページの一つに「ちょぞうこ」というページがあります。プレイヤーが所持しているアイテムを並べる棚が表示されるページです。
cap8
アイテムのデータを動的に表示しているため、可変である必要がありました。
アイテムの数が1段に収まる場合は、棚の段数は1段、1段よりも多いときは2段…といったような、規則性のあるグリッド要素を可変サイズで並べる実装方法です。

1. 棚の背景画像をスプライトにする

引き延ばすわけではないので9Sliceの設定はしません。
板の下に、配置するアイテムの高さ分の空白を確保した画像にします。
cap9

  • Assetsに画像を読み込み、「Texture Type」を「Sprite(2D and UI)」にする
  • 「Pivot」を「Top」にする

2. 棚を配置する

  • uGUIのPanelを配置する
    cap10
  • 「Image」の「Source Image」に先ほどの棚スプライトを設定する
  • Image Typeは「Tiled」にする
    cap15

3. 可変にするための設定を行う

  • Panelの「Add Component」を押して「Grid Layout Group」を追加する
    子要素をグリッド上に並べてくれるコンポーネントです。
  • 「Grid Layout Group」の設定を適宜調整する
    cap11
    「Cell Size」は棚に配置するアイテムのサイズと同じにします。
  • Panelの「Add Component」を押して「Content Size Fitter」を追加する
  • 「Vertival Fit」を「Preferred Size」に設定する
    cap12
  • Panelの「Add Component」を押して「Layout Element」を追加する
  • 「Min Height」を適宜指定する
    cap13
    アイテム数が0個の時でも表示がおかしくならないような数値を設定します。

これで子要素がグリッド状の可変要素の実装ができました。
cap14

まとめ

uGUIは、サイズが固定で決まっている時は直感的に配置することができるのですが、可変となると意外と面倒でした。
応用して使うためにもっと慣れたいと思います。