タイルセットとタイルマップ
タイルセットとタイルマップは、ゲームマップ、地面パーツ、アイソメトリックシーン、六角形マップ、同じ小さなタイルを繰り返し使う作品に向いています。まず再利用できるタイルを用意し、タイルマップレイヤー上でマップを組み立てるように描いていきます。
タイルセットとタイルマップ機能は DA 1.32.0、iOS R59 以降で利用できます。
タイルセットとタイルマップのワークフローをすぐに試したい場合は、サンプルファイルページから公式のTileset / Tilemapサンプルファイルを入手できます。
タイルモードは、絵を繰り返したときの見え方を確認するためのプレビュー機能です。シームレステクスチャやループ背景の確認に向いています。タイルマップレイヤーは、タイルを配置して実際のマップを作るためのレイヤーです。名前は似ていますが、用途は異なります。
使いやすい場面
タイルマップは、繰り返し要素が多く、あとから配置を調整したい作品に向いています。たとえば次のような用途です。
- ゲームの床、壁、道、水辺、足場
- アイソメトリックな室内、街並み、建物パーツ
- 六角形マップ、ボード、ストラテジーゲームのシーン
- 同じ素材を組み合わせて作る背景やレベルラフ
- Tiled やゲーム開発ツールチェーンと受け渡しするマップ素材
画像がシームレスに繰り返せるか確認したいだけなら、タイルモードプレビューを使ってください。小さなタイルで構成されたマップ全体を編集する場合は、タイルマップレイヤーを使います。
基本の流れ
一般的なタイルマップ制作の流れは次のとおりです。
- 画像、タイルセットパッケージ、または現在のレイヤーからタイルセットを用意します。
- タイルマップレイヤーを作成し、矩形、等角、六角形のいずれかのグリッドを選びます。
- Tilesets パネルでタイルを選び、キャンバス上に描きます。
- 選択範囲、塗りつぶし、消しゴム、スポイトでマップを調整します。
- Terrain ルールを使うと、つながる地形を効率よく描き、端や接続部分を揃えやすくなります。
- 必要に応じて画像として書き出すか、Tiled マップとして書き出します。
タイルセットを用意する
タイルセットは、マップ内で繰り返し使う小さなタイルの集まりです。ドキュメントを開いたあと、タイルセット ▸ タイルセットを追加、または タイルセット パネルの追加メニューから読み込みや作成を行えます。
主な作成元は次のとおりです。
- 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 パネルで対象のタイルセットを選びます。
- タイルセット ▸ 地形ルールを編集 を選びます。タイルセット パネルの「テレイン」セクションで「編集」を選ぶこともできます。
- Terrain set を作成し、Corner、Edge、Mixed のいずれかを選びます。
- Terrain を作成し、名前、色、任意の代表タイルを設定します。
- タイルセット内のタイルに対応するルール位置を指定します。
- Tilesets パネルの Terrain タブに戻り、Terrain を選んでタイルマップレイヤーに描きます。
ルールの設定方法と描画手順について詳しくは、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 が確認を求めることがあります。そのタイルがマップ内でまだ必要か確認してから操作してください。
リンクタイルセットワークフロー
リンクタイルセットは、同じドキュメント内でタイル画像を編集し、マップ上での見え方をすぐ確認したいときに便利です。
レイヤーから新しいタイルセットを作る
新しいタイル素材を作成中の場合は、まず通常レイヤーまたはレイヤーグループに描き、そのレイヤーからリンクタイルセットを作成できます。
- タイル素材を描く通常レイヤーまたはレイヤーグループを用意します。
- そのレイヤーまたはレイヤーグループを選択します。
- タイルセット ▸ タイルセットを追加 ▸ 現在のレイヤーをリンク でリンクタイルセットを作成します。タイムラインのレイヤーメニューから タイルセットとしてリンク を選ぶこともできます。
- タイルマップレイヤーを作成し、そのタイルセットでマップを描きます。
- 元レイヤーを編集したら Refresh from Linked Layer を使うか、Auto Refresh Linked Tileset を有効にします。
既存タイルセットの画像を編集する
既存のタイルセットにもリンクレイヤーを作成できます。
- Tilesets パネルで対象のタイルセットを選択します。
- Create Linked Layer を開き、Link as Layer または Link as Group を選びます。このコマンドは Tilesets パネルのツールバーと、選択したタイルセットのメニューから開けます。
- 新しく作成された通常レイヤーまたはレイヤーグループでタイル画像を編集します。
- 編集後、Refresh from Linked Layer でタイルセットを更新します。
このワークフローは、素材を何度も調整する段階に向いています。先にマップ構造を配置し、その後リンクレイヤーへ戻ってタイルの絵を磨けます。
リンクされたタイルセットガイドを使用する
リンクタイルセットのソースレイヤーを選択し、View ▸ Linked Tileset Guides を有効にします。Resprite はキャンバス上にタイルセットのソース画像の分割境界とベース輪郭を表示し、各タイルを正確に配置しやすくします。
選択ツールの使用中に Double-Click Select Grid Cell を有効にすると、分割セルをダブルクリックして、対応するタイル画像領域をすばやく選択できます。
アイソメトリックタイルを編集するときや、壁、樹木など、ベース範囲からはみ出すオブジェクトを描くときに特に便利です。
リンクグループで複雑なタイルセットを描く
タイルセットの構成が複雑な場合は、Link as Group を選びます。Resprite はグループ内の表示中のラスターレイヤーを合成し、タイルセット画像として使用します。
ベースカラー、輪郭、影、テクスチャ、装飾を別々のレイヤーに分けられます。各レイヤーの順序、表示、不透明度、描画モードを個別に調整できます。元のレイヤーを統合しなくても、タイル画像の一部だけをいつでも修正できます。
リンクタイルセットを更新するか自動更新を有効にすると、変更がタイルセットに反映され、そのタイルを使っているマップ上の位置にも表示されます。単一レイヤーをリンクする方法と比べて、リンクグループは、レイヤー構造を保ちながら調整を続ける複雑なタイルセットに適しています。
リンクグループにはラスターレイヤーが 1 つ以上必要です。タイルマップレイヤーは含められません。タイルセットには元レイヤーの最初のフレームだけが使用されます。
タイルアニメーション
タイルアニメーションは、水面、炎、仕掛け、点滅するライトなど、マップ内で繰り返し出てくる動きに向いています。
Tile Properties でタイルにアニメーションフレームを設定できます。そのタイルを使っているマスはすべて同じアニメーションとして表示されるため、マスごとに個別に処理する必要はありません。
通常レイヤーとの組み合わせ
タイルマップレイヤーは、通常レイヤーやレイヤーグループと一緒に使えます。よくある組み合わせは次のとおりです。
- 下側のタイルマップレイヤーで地面を敷く
- 上側の通常レイヤーでキャラクター、小物、特殊な遮蔽を描く
- 地面、壁、装飾、インタラクション用の参考を複数のタイルマップレイヤーに分ける
- 通常画像を書き出すときに、タイルマップレイヤーも一緒に最終画像へレンダリングする
複雑な遮蔽は、すべてを 1 つのタイルマップレイヤーに詰め込むより、複数レイヤーで整理するのがおすすめです。
保存とバージョン互換性
タイルマップレイヤーを含む .resprite ファイルを開くには、DA 1.32.0、iOS R59 以降が必要です。古い Resprite ではタイルマップ内容を完全には読み取れません。
Tiled やゲーム開発ツールチェーンへマップを渡す場合は、Tiled マップ互換性も参照してください。
大きなプロジェクトのヒント
マップ内容が増えてきたら、地面、壁、装飾、遮蔽、インタラクション用の参考を複数のタイルマップレイヤーに分けると管理しやすくなります。種類ごとに編集しやすくなり、画像や Tiled マップとして書き出すときのレイヤー管理もしやすくなります。
Tiled やゲーム開発ツールチェーンで使う予定がある場合は、一緒に書き出すタイルマップレイヤーのグリッド種類とタイルサイズをできるだけ揃えてください。書き出したマップ構造が読みやすくなり、後工程にも組み込みやすくなります。