Manuals
Manuals




This translation is community contributed and may not be up to date. We only maintain the English version of the documentation. Read this manual in English

タイルソース

タイルソース(tile source) は、タイルマップコンポーネント(tilemap component)でグリッド領域にタイルを描くために使用できるほか、スプライト(sprite)やパーティクルエフェクトコンポーネント(particle effect component)のグラフィックスのソースとして使用できます。また、タイルソースの コリジョン形状(collision shape) をタイルマップで使用して、衝突判定や物理シミュレーションを行うこともできます(例)。

タイルソースの作成

すべてのタイルを含む画像が必要です。各タイルの寸法は完全に同じである必要があり、グリッド状に配置する必要があります。Defold は、タイル間の 間隔 と各タイルの周囲の 余白 をサポートしています。

タイル画像

ソース画像を作成したら、タイルソースを作成できます。

  • Assets ブラウザー内のプロジェクトの場所に画像をドラッグして、プロジェクトにインポートします。
  • 新しいタイルソースファイルを作成します(Assets ブラウザー内の場所を右クリックし、New... ▸ Tile Source を選択します)。
  • 新しいファイルに名前を付けます。
  • ファイルがタイルソースエディターで開きます。
  • Image プロパティの横にある参照ボタンをクリックし、画像を選択します。エディターに画像が表示されます。
  • ソース画像に合わせて Properties を調整します。すべての設定が正しければ、タイルがぴったりと揃います。

タイルソースの作成

Size
ソース画像のサイズです。
Tile Width
各タイルの幅です。
Tile Height
各タイルの高さです。
Tile Margin
各タイルの周囲にあるピクセル数です(上の画像のオレンジ色の部分)。
Tile Spacing
各タイル間のピクセル数です(上の画像の青色の部分)。
Inner Padding
ゲームの実行時に使用される生成後のテクスチャで、タイルの周囲に自動で追加する空のピクセル数を指定します。
Extrude Border
ゲームの実行時に使用される生成後のテクスチャで、タイルの周囲に端のピクセルを自動で複製する回数を指定します。
Collision
タイルのコリジョン形状を自動生成するために使用する画像を指定します。

タイルソースのフリップブックアニメーション

タイルソースにアニメーションを定義するには、アニメーションの Frames プロパティで再生するタイルを選択します。繰り返しを含む任意の順序で指定できるため、ソース画像を並べ替える必要はありません。新しいタイルソースには、”anim” というデフォルトのアニメーションがあります。Outline でタイルソースのルートを右クリックし、Add ▸ Animation を選ぶと、新しいアニメーションを追加できます。

アニメーションを選択すると、そのアニメーションの Properties が表示されます。

Id
アニメーションの識別子です。タイルソース内で一意である必要があります。
Frames
再生順に並べた、カンマ区切りのタイル番号です。番号は左上の 1 から始まり、各行を右へ進み、右下に向かって順に付けられます。番号の繰り返しや、両端を含む昇順・降順の範囲を使えます。
Frames 展開された順序
1, 3, 6, 3 1, 3, 6, 3
1-4, 8 1, 2, 3, 4, 8
4-2 4, 3, 2

エディターは、3フレーム以上連続する並びを範囲として表示します。たとえば 1, 2, 3 は 1-3 となり、1, 2 は2つの番号のままです。フレームの順序と繰り返しは保持します。リストには少なくとも1フレームが必要で、すべてのタイル番号がソース画像内に存在する必要があります。

Frames は Start Tile と End Tile を置き換えます。エディターは、古いタイルソースファイル内の有効な範囲をフレームリストに変換します。エディタースクリプトでは、start_tile と end_tile の代わりに整数配列の frames を使います。タイルソースの編集を参照してください。

Playback
Frames リストをどのように再生するかを指定します。
  • None はまったく再生せず、最初の画像を表示します。
  • Once Forward は最初の画像から最後の画像までアニメーションを1回再生します。
  • Once Backward は最後の画像から最初の画像までアニメーションを1回再生します。
  • Once Ping Pong は、最初の画像から最後の画像まで進み、2番目の画像まで戻るアニメーションを1回再生します。
  • Loop Forward は最初の画像から最後の画像までアニメーションを繰り返し再生します。
  • Loop Backward は最後の画像から最初の画像までアニメーションを繰り返し再生します。
  • Loop Ping Pong は最初の画像から最後の画像まで進み、その後最初の画像に戻るアニメーションを繰り返し再生します。
Fps
アニメーションの再生速度です。1秒あたりのフレーム数(FPS)で表します。
Flip horizontal
アニメーションを左右に反転します。
Flip vertical
アニメーションを上下に反転します。

タイルソースのコリジョン形状

Defold は Collision プロパティで指定された画像を使用して、各タイルの 凸 形状を生成します。この形状は、タイルの色の情報を持つ部分、つまり100%透明ではない部分の輪郭を囲みます。

多くの場合、実際のグラフィックスを含む画像と同じ画像を衝突判定にも使用するのが適切ですが、見た目とは異なるコリジョン形状が必要な場合は、別の画像を自由に指定できます。衝突判定用の画像を指定するとプレビューが更新され、生成されたコリジョン形状を示す輪郭が各タイルに表示されます。

タイルソースの Outline には、そのタイルソースに追加したコリジョングループ(collision group)が一覧表示されます。新しいタイルソースファイルには、「default」というコリジョングループが1つ追加されます。Outline 内のタイルソースのルートを右クリックし、Add ▸ Collision Group を選択すると、新しいグループを追加できます。

特定のグループに所属させるタイルの形状を選択するには、Outline でグループを選択し、そのグループに割り当てたい各タイルをクリックします。タイルと形状の輪郭はグループの色で表示されます。色はエディターがグループに自動で割り当てます。

コリジョン形状

タイルをコリジョングループから外すには、Outline でタイルソースのルート要素を選択し、そのタイルをクリックします。