タイルアトラスを使用する¶
タイルアトラスは、複数の小さな画像を含む画像です。
タイルアトラスを使用して、実行時にアプリケーションが行わなければならないテクスチャスイッチの数を減らすことで、アプリケーションのフレームレートを向上させます。
チュートリアル: クラスターインジケーターを作成する を完了することで、タイルアトラスの使用方法を学ぶことができます。
タイルアトラスを使用するには：
サードパーティアプリケーションでタイルアトラスを作成します。タイルアトラスを作成する際には、次の点に注意してください。
タイルアトラスは小さいほど良いです。
画像をタイルアトラスにできるだけ密接に配置してください。
タイルアトラスには、さまざまなサイズの画像を含めることができます。
Assets の Kanzi Studio で Import Assets をクリックし、タイルアトラスをインポートします。
例えば、このタイルアトラスを保存してインポートします。
タイルアトラスのどの部分を描画したいかを設定できるマテリアルをインポートして設定します。
TileAtlas マテリアルタイプをダウンロードしてください。
Kanzi Studio の Library で Materials and Textures を右クリックし、Load Material Type From Disk を選択して、TileAtlas マテリアルタイプをインポートします。
Library > Materials and Textures > Materials で TileAtlasMaterial マテリアルを選択し、Properties で Blend Mode プロパティを Alpha: Premultiplied に設定します。
このマテリアルタイプのフラグメントシェーダーは、ソースフラグメントをデスティネーションフレームバッファとブレンドできるように、プレマルチプライドアルファを期待しています。
Library Alt を押しながら右クリック Materials and Textures で、Material Brush を選択し、Properties で Material プロパティを TileAtlasMaterial マテリアルに設定します。
このブラシを使用して、タイルアトラスから画像を描画します。
Node Tree で、タイルアトラスから画像を表示するために使用したいノードを作成または選択し、Properties で Foreground Brush プロパティを追加し、作成した Material Brush に設定します。
たとえば、Empty Node 2D ノードを作成します。
Library > Materials and Textures > Materials で TileAtlasMaterial マテリアルを選択し、Properties から作成したノードにこれらのプロパティをドラッグします。
Texture
OffsetInTileAtlas
PrimaryColor
SecondaryColor
TileAtlasSize
UseSecondaryColor
Node Tree で作成したノードを選択し、次のプロパティを設定します。
タイルアトラスから使用したい画像の幅に Layout Width、高さに Layout Height を設定します。
各画像のサイズを画像編集ツールで測定します。TileAtlasMaterial マテリアルのシェーダーは、これらのプロパティから画像のサイズを取得します。
たとえば、
を描画するには、次のように設定します。Layout Width から 26 まで
Layout Height から 30 まで
イメージ (Image)
Layout Width
Layout Height
41
31
32
33
38
33
41
31
26
30
30
30
使用したいタイルアトラスに Texture を設定します。
例えば、プロパティを TelltalesTileAtlas テクスチャに設定します。
OffsetInTileAtlas プロパティ X と Y プロパティフィールドを、このノードで表示したいタイルアトラスの画像の左上隅からの距離（ピクセル単位）に設定します。
たとえば、
を描画するには、次のように設定します。X から 43 まで
Y から 33 まで
イメージ (Image)
X
Y
0
0
42
0
74
0
0
31
43
33
77
33
TileAtlasSize プロパティ X プロパティフィールドを使用したいタイルアトラスの幅に、Y プロパティフィールドを高さに設定します。
例えば、TelltalesTileAtlas テクスチャを使用している場合、設定します:
X を112に
Y から 64 まで
画像を描画するために使用したいプライマリカラーに PrimaryColor します。
たとえば、色を白に設定します。
画像を描画するために使用したいセカンダリカラーに （オプション） SecondaryColor します。
セカンダリカラーを使用するには、UseSecondaryColor プロパティを有効に設定します。これらのプロパティは、その画像のセカンドステートに異なる色を使用したい場合に使用します。
例えば、SecondaryColor プロパティで設定した色を適用するには、State Manager を使用して UseSecondaryColor プロパティの値を設定できます。
ヒント
タイルアトラスを使用して、テイルテイルの異なる状態に異なる画像を表示することができます。State Manager を作成し、各状態で OffsetInTileAtlas や PrimaryColor など、状態間で変化するプロパティを設定します。チュートリアル: クラスターインジケーターを作成する を参照してください。
