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
タイルのコリジョン形状を自動生成するために使用する画像を指定します。

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

タイルソースに、連続した画像を切り替えるフリップブックアニメーション(flip-book animation)を定義するには、アニメーションの各フレームに使うタイルが、左から右へ順番に隣り合っている必要があります。この並びは、行の末尾から次の行へ折り返すことができます。新しく作成したタイルソースにはすべて、「anim」という名前の既定のアニメーションがあります。Outline 内のタイルソースのルートを右クリックし、Add ▸ Animation を選択すると、新しいアニメーションを追加できます。

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

タイルソースのアニメーション

Id
アニメーションの識別子です。タイルソース内で一意である必要があります。
Start Tile
アニメーションの最初のタイルです。番号は左上隅の1から始まり、各行を右へ進みながら、右下隅まで順に付けられます。
End Tile
アニメーションの最後のタイルです。
Playback
アニメーションの再生方法を指定します。
  • None はまったく再生せず、最初の画像を表示します。
  • Once Forward は最初の画像から最後の画像までアニメーションを1回再生します。
  • Once Backward は最後の画像から最初の画像までアニメーションを1回再生します。
  • Once Ping Pong は最初の画像から最後の画像まで進み、その後最初の画像に戻るアニメーションを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 でタイルソースのルート要素を選択し、そのタイルをクリックします。