タイルセットとタイルマップ
タイルセットとタイルマップは、ゲームマップ、地面パーツ、アイソメトリックシーン、六角形マップ、同じ小さなタイルを繰り返し使う作品に向いています。まず再利用できるタイルを用意し、タイルマップレイヤー上でマップを組み立てるように描いていきます。
タイルセットとタイルマップ機能は DA 1.32.0、iOS R59 以降で利用できます。
タイルモードは、絵を繰り返したときの見え方を確認するためのプレビュー機能です。シームレステクスチャやループ背景の確認に向いています。タイルマップレイヤーは、タイルを配置して実際のマップを作るためのレイヤーです。名前は似ていますが、用途は異なります。
使いやすい場面
タイルマップは、繰り返し要素が多く、あとから配置を調整したい作品に向いています。たとえば次のような用途です。
- ゲームの床、壁、道、水辺、足場
- アイソメトリックな室内、街並み、建物パーツ
- 六角形マップ、ボード、ストラテジーゲームのシーン
- 同じ素材を組み合わせて作る背景やレベルラフ
- Tiled やゲーム開発ツールチェーンと受け渡しするマップ素材
画像がシームレスに繰り返せるか確認したいだけなら、タイルモードプレビューを使ってください。小さなタイルで構成されたマップ全体を編集する場合は、タイルマップレイヤーを使います。
基本の流れ
一般的なタイルマップ制作の流れは次のとおりです。
- 画像、タイルセットパッケージ、または現在のレイヤーからタイルセットを用意します。
- タイルマップレイヤーを作成し、矩形、等角、六角形のいずれかのグリッドを選びます。
- Tilesets パネルでタイルを選び、キャンバス上に描きます。
- 選択範囲、塗りつぶし、消しゴム、スポイトでマップを調整します。
- Terrain ルールを使うと、つながる地形を効率よく描き、端や接続部分を揃えやすくなります。
- 必要に応じて画像として書き出すか、Tiled マップとして書き出します。
タイルセットを用意する
タイルセットは、マップ内で繰り返し使う小さなタイルの集まりです。ドキュメントを開いたあと、Tilemap ▸ Add Tileset、または Tilesets パネルの追加メニューから読み込みや作成を行えます。
主な作成元は次のとおりです。
- From Image：PNG などの画像からタイルセットを作成します。
- From Tileset Package：Resprite の
.restileタイルセットパッケージを読み込みます。 - From Tiled TSX：Tiled の
.tsxタイルセットファイルを読み込みます。 - Link Current Layer：現在の通常レイヤーをリンクタイルセットの元画像として使います。
- From Tileset Library：ローカルのタイルセットライブラリから読み込みます。
画像からタイルセットを作成する場合は、タイル幅、高さ、余白、間隔、列数などを確認します。通常の地面タイルは画像の分割サイズに合わせれば十分です。木の葉、壁、アイソメトリックなオブジェクトのようにマスからはみ出す素材では、ベースサイズやオフセットを調整すると、マップ上で自然に配置できます。
タイルマップレイヤーを作成する
タイムラインのレイヤーメニューから New Tilemap Layer を選ぶと、タイルマップレイヤーを作成できます。
主な項目は次のとおりです。
- Name：レイヤー名。
- Grid Type：矩形、等角ダイヤ形、六角形から選びます。
- Default Tileset：このレイヤーで既定に使うタイルセット。
- Slot Width / Slot Height：マップの 1 マスの幅と高さ。
- Stagger Axis / Stagger Index / Hex Side Length：六角形タイルマップで使う配置設定。
六角形関連の項目は、通常は六角形マップを作るときだけ調整します。迷った場合は既定値のままでかまいません。
確定すると Resprite が新しいタイルマップレイヤーを作成し、Tilesets パネルを開きます。そのままタイルを選んで描き始められます。
マップを描く・修正する
タイルマップレイヤーを選択すると、Tilesets パネルが現在のブラシ素材の選択元になります。単一のタイルを選ぶことも、複数タイルを範囲選択して大きなパターンとして描くこともできます。
主なツールの動作は次のとおりです。
- Pencil：現在のタイル、タイルパターン、または Terrain を配置します。
- Eraser：マス内のタイルを消します。
- Fill Tool：タイルマップのマス単位で領域を塗りつぶします。
- Eyedropper：キャンバス上の既存タイルや Terrain を拾います。
- Rectangular Selection：マップ領域を選択し、コピー、切り取り、削除、移動、反転、回転を行います。
タイルマップレイヤーで描くときは、各マスにどのタイルを使うかを変更しています。タイルセット画像そのものは直接変更されません。タイルの絵を修正したい場合は、元画像を編集するか、後述のリンクタイルセットワークフローを使います。
上の画像のタイルセット素材には、Kenney 制作の 16 × 16 ピクセル素材パック Monochrome Pirates を使用しています。この素材パックは、Creative Commons CC0 1.0 Universal のパブリックドメイン提供のもとで公開されています。
選択、移動、変形
タイルマップレイヤーの選択範囲はマス単位で扱われます。マップの一部を選択して別の場所へコピーしたり、ドラッグして配置を調整したりできます。
主な操作は次のとおりです。
- マップ領域を選択する
- 選択範囲内のタイルを削除する
- 選択範囲をコピー、切り取り、貼り付けする
- 選択範囲をドラッグして別の位置へ移動する
- 選択範囲を反転または回転し、左右対称や回転した構造を素早く作る
Terrain ルールを使う
Terrain ルールは、水辺、草地の境界、道、壁の接続など、端や接続部分を揃えたい素材に向いています。ルールを設定しておくと、大まかな範囲を描くだけで、周囲のマスに合わせて適切な端、角、接続タイルが選ばれます。
基本の流れは次のとおりです。
- Tilesets パネルで対象のタイルセットを選びます。
- Tilemap ▸ Terrain Rules を開きます。
- Terrain set を作成し、Corner、Edge、Mixed のいずれかを選びます。
- Terrain を作成し、名前、色、任意の代表タイルを設定します。
- タイルセット内のタイルに対応するルール位置を指定します。
- Tilesets パネルの Terrain タブに戻り、Terrain を選んでタイルマップレイヤーに描きます。
Terrain ルールは矩形と等角タイルマップレイヤーで使えます。六角形タイルマップレイヤーでは Terrain ルールは使えません。
Terrain Rules ウィンドウでタイル同士のつながりを整理したら、Tilesets パネルに戻って Terrain を選びます。通常のブラシのように大まかな範囲を描くだけで、Resprite が適切な端、角、接続タイルを選びます。
上記の Terrain ルール例で使用している Grassland タイルセットは、Shackhal の Multi Platformer Tileset を改変したものです。原素材は Creative Commons CC0 1.0 Universal のもとで公開されています。この例では、タイルセット上部を道路タイルに変更しています。
タイルセットを編集する
Tilesets パネルは、現在のタイルを選ぶだけでなく、現在のドキュメント内のタイルセットを管理する場所でもあります。
主な操作は次のとおりです。
- Tileset Properties：タイルセット名、タイルサイズ、ベースサイズなどを変更します。
- Tile Properties：単一タイルの表示範囲、オフセット、出現確率、アニメーションを調整します。
- Copy / Cut / Paste / Delete Tiles：タイルセット内でタイルをコピー、移動、削除します。
- Move Tiles to Tileset：選択したタイルを別の互換タイルセットへ移動します。
- Rearrange Tileset：列数やタイル順を並べ替えます。
- Merge into Another Tileset：タイルセットを別のタイルセットへ統合します。
- Save to Tileset Library：ローカルのタイルセットライブラリに保存し、他のドキュメントで再利用します。
マップで使用中のタイルを削除、移動、統合する場合、Resprite が確認を求めることがあります。そのタイルがマップ内でまだ必要か確認してから操作してください。
リンクタイルセットワークフロー
リンクタイルセットは、同じドキュメント内でタイル画像を編集し、マップ上での見え方をすぐ確認したいときに便利です。
レイヤーから新しいタイルセットを作る
新しいタイル素材を作成中の場合は、まず通常レイヤーまたはレイヤーグループに描き、そのレイヤーからリンクタイルセットを作成できます。
- タイル素材を描く通常レイヤーまたはレイヤーグループを用意します。
- そのレイヤーまたはレイヤーグループを選択します。
- Tilemap ▸ Add Tileset ▸ Link Current Layer でリンクタイルセットを作成します。
- タイルマップレイヤーを作成し、そのタイルセットでマップを描きます。
- 元レイヤーを編集したら Refresh from Linked Layer を使うか、Auto Refresh Linked Tileset を有効にします。
既存タイルセットの画像を編集する
既存のタイルセットにもリンクレイヤーを作成できます。
- Tilesets パネルで対象のタイルセットを選択します。
- Create Linked Layer を使います。
- 新しく作成された通常レイヤーまたはレイヤーグループでタイル画像を編集します。
- 編集後、Refresh from Linked Layer でタイルセットを更新します。
このワークフローは、素材を何度も調整する段階に向いています。先にマップ構造を配置し、その後リンクレイヤーへ戻ってタイルの絵を磨けます。
タイルアニメーション
タイルアニメーションは、水面、炎、仕掛け、点滅するライトなど、マップ内で繰り返し出てくる動きに向いています。
Tile Properties でタイルにアニメーションフレームを設定できます。そのタイルを使っているマスはすべて同じアニメーションとして表示されるため、マスごとに個別に処理する必要はありません。
通常レイヤーとの組み合わせ
タイルマップレイヤーは、通常レイヤーやレイヤーグループと一緒に使えます。よくある組み合わせは次のとおりです。
- 下側のタイルマップレイヤーで地面を敷く
- 上側の通常レイヤーでキャラクター、小物、特殊な遮蔽を描く
- 地面、壁、装飾、インタラクション用の参考を複数のタイルマップレイヤーに分ける
- 通常画像を書き出すときに、タイルマップレイヤーも一緒に最終画像へレンダリングする
複雑な遮蔽は、すべてを 1 つのタイルマップレイヤーに詰め込むより、複数レイヤーで整理するのがおすすめです。
保存とバージョン互換性
タイルマップレイヤーを含む .resprite ファイルを開くには、DA 1.32.0、iOS R59 以降が必要です。古い Resprite ではタイルマップ内容を完全には読み取れません。
Tiled やゲーム開発ツールチェーンへマップを渡す場合は、Tiled マップ互換性も参照してください。
大きなプロジェクトのヒント
マップ内容が増えてきたら、地面、壁、装飾、遮蔽、インタラクション用の参考を複数のタイルマップレイヤーに分けると管理しやすくなります。種類ごとに編集しやすくなり、画像や Tiled マップとして書き出すときのレイヤー管理もしやすくなります。
Tiled やゲーム開発ツールチェーンで使う予定がある場合は、一緒に書き出すタイルマップレイヤーのグリッド種類とタイルサイズをできるだけ揃えてください。書き出したマップ構造が読みやすくなり、後工程にも組み込みやすくなります。