【タイルセット作成】Tilesetterの使い方とGameMaker連携

GameMaker

この記事では、タイルセット(またはマップチップ)作成ツール「Tilesetter」の基本的な使い方とGameMakerとの連携(インポート/エクスポート)についてまとめていきます。

エディタの見方と役割

Tilesetterのエディタは以下5つのビューから構成されています。
特に重要なのは①、②で、主にここでタイルセットを生成・編集していきます。(詳細は後述)

基本的なワークフロー

Tilesetterでの作業は以下のような流れで進みます。

Step1. 新規プロジェクトを準備

まずはTilesetterプロジェクトの基本的な準備をします。

新規プロジェクトを作成:
・セットビュー左上にあるアイコン[NewProject]から、以下選択
 - Orthographic(正射影):平面表示。プラットフォーマー系など。
 - Isometric(等角投影):斜めの角度から見た表示。RPGなど。
タイルサイズの設定:
・セットビュー左上[Tile Size:]から設定
・読み込む画像はこの数値を基準に自動分割される
 (→画像インポートの前に設定しておく必要があります)

Step2. 画像のインポートと同期設定

画像のインポート:
・セットビューで右クリック→ [Import]で取り込む画像を選択
 (ショートカット:Ctrl+I)
*画像エディタからのコピペも可能ですが、同期をする場合、
 画像ファイルからのロードが必要です
インポート画像の同期設定:
・インポートした画像の範囲を選択して右クリック
 →[Create Sync Region]→ 参照元画像を選択
・ここで同期した画像が編集されると、自動的にTilesetter側も更新

Step3. タイルセットの生成と編集

タイル境界の生成:
・ベースとなるタイルを選択し、[Build Borders]を選択
 - Blob:プラットフォーマー向けタイル
 - Wang:トップダウン向けタイル

・境界線のプレースホルダー(点線)が生成されるので、タイルプロパティビューからそれぞれ対応するソースを選択することでタイルを構成していきます。
  


タイルのソース割当:
・割当を行うタイルを選択し、タイルプロパティビューから[Source]
 →対応させたい画像ソースを選択

・下部に続く項目から、描画方法を設定可能です。
 -Rotation:回転角度
 -FlipX/Y:水平垂直反転
 -Up Cutoff:ベースタイルの上部から描画しないピクセル数

・反転や回転を前提とすることで、元タイル画像の作成量を削減できます
角に専用画像を適用する(オプション):
・角タイルを選択→[Composite]のチェックを外してソースを選択する
・通常、Tilesetterは合成で自動的に角を作成してくれるが、専用の画像を適用したい場合はこちらの操作をする

タイル割当について、一連の流れを画像でまとめておきます。

Step4. タイルセットの出力とGameMakerでのインポート

タイルセットのエクスポート:
・セットビューのタイルを選択し、右クリック
 →[Export]から出力形式を選択

*今回はGameMakerを選択:
 (指定アセットを含む.yypファイルが出力されます)
GameMakerでのインポート
・タイルセットを読み込みたいプロジェクトを開き、アセットブラウザで右クリック>Add Existing(既存のものから追加)を選択

・出力したタイルセット(またはルーム)ディレクトリ内のの.yyファイルを選択して完了
(スプライトなど、アセットに必要な要素も同時に追加されます)
一言コメント
一言コメント

補足:.yyファイルの場所
.yyファイルは、
「出力されたGameMakerプロジェクト(.yyp)ディレクトリ → tilesets → (tilesetterプロジェクト名)→(tilesetterプロジェクト名).yy 」
といったパスに存在します。

参考情報

この記事は以下の公式ドキュメントの内容に沿って内容をまとめたものです。
より詳細な内容や最新情報には以下からアクセスしてください

Tilesetter Docs — Tilesetter documentation

コメント

タイトルとURLをコピーしました