【JSON UI】UIにテクスチャを表示する

投稿者は初心者です。間違えることがあります。

前提知識

・JSON UIの基礎がなんとなくわかる。(分からない場合は → JSON UI の備忘録【統合版】)
・何かしらの方法でUIを表示できる。（分からない場合は → 【JSON UI】自作UIをフォームで表示させる)

UIにテクスチャを表示する

今回はUIにテクスチャを表示する方法を解説します。
またフォームの枠や背景のような、引き延ばされるテクスチャの作り方も説明します。

普通のテクスチャを表示する

テクスチャを表示するには image要素 を使うことでできます。
さっそくUIを定義していきます。

今回はimage要素を直接置くのではなく、panel要素の子要素として置きます。
背景として使う場合だと、このように子要素のimageに100%として設定することが多いです。

  "image_panel": {
    "type": "panel",
    "size": [200, 200],
    "controls": [
      {
        "image": {
          "type": "image", // image要素
          "size": ["100%", "100%"], // 親サイズの100% (=[200, 200])
          "texture": "textures/ui/rating_screen" // バニラのテクスチャ
        }
      }
    ]
  }

テクスチャを表示することができました。
ただし、ひとつ注意が必要です。image要素は「200×200」になるはずが、表示された画像は正方形になっていません。
これは、元の画像と縦横比が合わないため、長い辺に合わせて余白が入るためです。

普通のテクスチャ表示であれば、これで問題ありません。
しかし、背景として使用する場合だと、毎回画像の縦横比を調整する必要があります。そこで次は、サイズに応じて自動的に引き延ばされるテクスチャの作り方を説明します。

引き延ばされるテクスチャ(9スライステクスチャ)を表示する

引き延ばされるテクスチャは、「９スライステクスチャ」と呼ばれます。
これは「９スライススケーリング」と呼ばれる方式で、画像を９つの領域に分割して拡大・縮します。

四隅の部分(1,3,7,9)は元の形を保ち、残りの５つの領域は引き延ばしてスケーリングされます。

9スライステクスチャを作るには、画像ファイルに加えて、同じフォルダに同名のjsonファイルが必要になります。
例えば、custom_bg.png を使うなら、custom_bg.json も必要になります。

今回は実際に custom_bg を作ってみます。
まずはお絵描きツールで、custom_bg.pngを作ります。今回は３×３です。

custom_bg.png (画像ファイル)

次に9スライスを設定するjsonファイルを作ります。

custom_bg.json

{
  // 中央までの距離
  "nineslice_size": [
    1, // 左端から中央への距離
    1, // 上端から中央への距離
    1, // 右端から中央への距離
    1  // 下端から中央への距離
  ],
  // サイズ
  "base_size": [
    3, // 横
    3  // 縦
  ]
}

nineslice_size は中央(上画像の5)の位置を決めるためのものです。

左上右下の順で、端から中央までの距離を指定します。
それによって決められた中央の位置を元に、画像が９つに分割されます。

それでは実際に９スライステクスチャを表示してみます。
UIの書き方は通常のテクスチャと同じですが、custom_bg.json をテクスチャと同じフォルダに配置しておいてください。

  "background_panel": {
    "type": "panel",
    "size": [200, 100], // 横長の長方形
    "controls": [
      {
        "background": {
          "type": "image", // image要素
          "size": ["100%", "100%"], // 親サイズの100% (=[200, 100])
          "texture": "textures/ui/custom_bg" // カスタムのテクスチャ
        }
      }
    ]
  }

４つの角は元の形を保ったままで、上下左右・中央がサイズに合わせて引き延ばされています。
やや小さくて見づらいかもしれませんが、角の形状は変わっていません。

９スライステクスチャの詳しい説明は、こちらの動画がとても分かりやすいのでおすすめです。

完成品RP → https://drive.google.com/drive/folders/1_pC1DrE8d2FMiesvLhU-cRMp8kAWofWU?usp=sharing

応用編

９スライステクスチャを応用すれば、次のようなものも作れます。

{
  "nineslice_size": [
    8,  // 左
    22, // 上
    8,  // 右
    8   // 下
  ],
  "base_size": [
    18, // 横
    32  // 縦
  ]
}

最後に

いかがでしたか？
今回はUIでテクスチャを表示する方法を解説しました。

やる気があれば、次回はボタンの生成を解説します。