TiledMapEditor/Automapping の変更点
[[TiledMapEditor]]
* 概要 [#k0bb7300]
このページではTiledMapEditorの自動マッピングの使い方を紹介します。
----
#contents
----
* 自動マッピングとは [#d0315bff]
自動マッピングとは、配置したマップのタイルを入力として、特定のルールを元に、タイルレイヤーを自動生成する方法です。これにより以下のメリットが得られます
- ''作業の効率化'': 少ない時間で定型的な作業を完了できます。これにより作業時間を減らし、作業速度をアップすることができます
- ''入力ミスの削減'': 自動化により入力ミスを減らします。適切にルール設定ができていればエラーは発生しません
** 自動マッピングの仕組み [#dcf7ab42]
#ref(01.png);
+ 元となるデータを「main.tmx」とします。ここにObjectsレイヤーを作成します
+ 次にrules.txtを作成します。ここにはルールファイルを定義します
++ 例では、「rule1.tmx」「rule2.tmx」を参照する設定をしています
+ rule1.tmx、rule2.tmxにルールの定義を設定します
++ このときレイヤー名に気をつけます
++ 入力情報となるレイヤーには「input_もとのレイヤー名」
++ 出力情報には「output_出力レイヤー名」とします
+ rules.txt / rule1.tmx / rule2.tmx が適切に設定されていれば、「main.tmx」のメインメニューから「マップ > 自動マップ」を選ぶと、「Collision」レイヤーが自動生成されます
* 基本 [#za62bfb4]
※バージョン 0.13.1 にて動作確認※
まずは基本的な自動マッピングの使い方です。
配置したタイルをもとに、コリジョンを自動配置する手順を解説します。
** 素材のダウンロード [#g61c698e]
まずは素材として、こちらの map.png をダウンロードします。
#ref(map.png);
** main.tmxの作成 [#w46923b5]
元となるマップデータを作成します。TiledMapEditorを起動して、新規作成します。
#ref(02.png);
マップの大きさは「8x8」、タイルの大きさは「32px」とします。
続けて、タイルレイヤーを追加します。
#ref(03.png);
「Background」「Objects」の2つのタイルレイヤーを作成します。Backgroundには通行可能なタイル、Objectsには通行できないタイルを配置します。
タイルセットにはダウンロードした「map.png」を設定します(マップ > 新しいタイルセット)。
#ref(04.png);
そうしたら、Backgroundレイヤーに草原を配置します。
#ref(05.png);
次に、Objectsレイヤーに木を配置します。
#ref(06.png);
これで元となるマップデータの作成は完了です。ファイル名を「main.tmx」として任意の場所に保存します。
** 自動マッピングテキスト(rules.txt)の作成 [#sdd0bdfe]
テキストエディタを開いて、以下のように記述します。
#geshi(Actionscript){{
rule1.tmx
}}
記述できたら、main.tmxを保存したフォルダと同一のところに、ファイル名を「rules.txt」として保存します。
** 自動マッピングルール(rule1.tmx)の作成 [#c7f88a56]
TiledMapEditorの新規作成を選んで、ルールを作成します。
マップサイズはいくつでも構いませんが、わかりやすくするために「1x1」にしておきます。
#ref(08.png);
そして、ルール用のレイヤーを作成します。
#ref(07.png);
- input_Objects: 入力レイヤー
- output_Collision: 出力するコリジョンのレイヤー
タイルセットにはダウンロードした「map.png」を設定します(マップ > 新しいタイルセット)。
#ref(04.png);
では、ルールを作成します。
「input_Objects」レイヤーを選択して、木を配置します。
#ref(09.png);
これにより、Objectsレイヤーに「木が配置されていたら〜」という条件を指定できます。
次に、「output_Collision」レイヤーに、バッテンマークのコリジョンを配置します。
#ref(10.png);
これにより、「Collisionレイヤーにはバッテンマークを配置する」という出力を指定できます。
では、ファイル名を「rule1.tmx」として、main.tmx / rules.txt と同一のフォルダに保存します。
** 自動マッピングの実行 [#h122b53a]
main.tmxを開いて、メインメニューから「マップ > 自動マップ」を選びます。
#ref(11.png);
しかし、エラーメッセージが表示されてしまいます。
#ref(12.png);
これはrule1.tmxに、入力/出力とする領域(region)が設定されていないためです。
** Regionの設定 [#ga147adc]
領域(region)とは、有効な入力となる範囲や出力を行う範囲の設定です。
では、再び、rule1.tmxを開きます。そして、Region用のタイルセットを追加します。
タイルセットはこちらの「rules.png」をダウンロードして使います。
#ref(rules.png);
「RI」とは、「regions_input」の頭文字を取ったものです。「RO」は「regions_output」です。
#ref(13.png);
メインメニューから「マップ > 新しいタイルセット...」を選び、画像の「パス」に「rules.png」を指定します。
タイルセットを追加できたら、レイヤーを追加します。
#ref(14.png);
「regions_input」「regions_output」を追加しました。
次に、「regions_input」レイヤーを選んで、「RI」タイルを配置します。
#ref(15.png);
続けて、「regions_output」レイヤーに「RO」タイルを配置します。
#ref(16.png);
そうしたらrule1.tmxを保存します。
** 再び自動マッピングを実行 [#l0568b33]
main.tmxを開いて、メインメニューから「マップ > 自動マップ」を選びます。すると、自動マッピングが実行され、Collisionレイヤーが追加されます。
#ref(17.png);
** 完成データ [#k361a401]
今回の自動マッピングの完成データ一式はこちらにあります。うまく行かない場合は、こちらの設定と比較しながら違いを確かめていきます。
#ref(automapping.zip);
----
** Regionの仕組みを理解する [#u2f397cd]
Regionの仕組みを理解するために、rule1.tmx を修正してみます。
rule1.tmx を開いて、「マップ > マップサイズを変更...」を選びマップサイズを変更します。
#ref(20.png);
マップサイズを「3x3」に変更します。
#ref(21.png);
変更したら、まずは「input_Objects」レイヤーだけを可視化して、中央にだけ木を配置します。
#ref(22.png);
次に、「output_Collision」レイヤーに、コリジョン(バッテン)をすべての場所に配置します。
#ref(23.png);
木の周りにもコリジョンを配置するようにしました。
続けて、「regions_input」レイヤーを選び、「RI」タイルを中央に配置します。
#ref(24.png);
最後に、「regions_output」レイヤーを選び、「RO」タイルをすべての場所に配置します。
#ref(25.png);
では保存して、main.tmx を開き、自動マッピングを実行してみます。
#ref(26.png);
木の周りにもコリジョンが自動配置されました。このようにRegionの範囲を広げると、そのぶんだけ対象を広くすることができます。
……ただ右上だけはうまく配置されていませんね。原因は不明ですが、木の位置を下にずらすとうまく配置されるので、配置を工夫しなければならないのかもしれません。
* オートタイル [#qb419aec]
RPGツクール や WOLF RPGエディターで採用されている、オートタイルを実現する方法を説明します。
ここでは、足場の右側に何もなかったら、そのタイルは右端用のタイルとする、という自動マッピングを行います。
#ref(40.png);
このように配置したタイルを……、
#ref(41.png);
自動でこうなるようにします。
** 素材のダウンロード [#k34204f2]
オートタイルを作成するために、素材画像をダウンロードします。
#ref(tiles.zip);
素材の内容は、以下の3つの画像です。
#ref(base.png);
base.png: オートタイルの元となる画像
#ref(tileset.png);
tileset.png: オートタイルで出力する画像
#ref(rules.png);
rules.png: Region定義用の画像
** main.tmxの作成 [#zf83a4d9]
Tiledを起動して、8x8のサイズで新規作成します。
#ref(30.png);
+ レイヤー名を Base に変更します
+ タイルセットとして、base.png / tileset.png を読み込みます
+ baseタイルセットから以下のようにタイルを配置します
#ref(31.png);
ファイル名を main.tmx として保存しておきます。
** rules.txtの作成 [#ue561492]
テキストエディタから以下のように記述して、rules.txtというファイル名で保存します。
rule1.tmx
rules.txt は、main.tmxと同一のフォルダに配置します。
** rule1.tmxの作成 [#f7802dd5]
ルールを作成します。
Tiledを起動して、5x5のサイズで新規作成します。
#ref(32.png);
作成できたら、rules.png / base.png / tileset.png のタイルセットを作成します
#ref(33.png);
*** regisons_inputレイヤーの作成 [#q1ba2883]
regions_input レイヤーを作成します。「タイル・レイヤー1」が自動で作成されているので、それをリネームします。
そして rules タイルを以下のように配置します。
#ref(34.png);
*** input_Baseレイヤーの作成 [#id6532cd]
次に input_Base レイヤーを作成します。このレイヤーは main.tmx の Baseレイヤーで指定したタイルを入力とするものです。
#ref(35.png);
タイルはこのように配置しました。
*** inputnot_Baseレイヤーの作成 [#af642382]
続けて、inputnot_Base レイヤーを作成します。
#ref(36.png);
タイルは左から4番目に配置しました。
この「inputnot_Base」レイヤーがオートタイルのルール作る上で重要な部分です。inputnot_*という名前を指定することで、入力レイヤーに指定のタイルが「存在しなかったら」という条件を定義できます。
*** regions_outputレイヤーの作成 [#u5c06a4b]
出力用のRegionレイヤーを指定します。regions_output レイヤーを作成して、baseタイルのROタイルを配置します。
#ref(37.png);
*** output_Backgroundレイヤーの作成 [#w9e31916]
出力するタイルレイヤーを指定します。output_Background レイヤーを作成して、tilesetタイルを以下のように配置します。
#ref(38.png);
*** rule1.tmxとして保存 [#se25fb8a]
これでルールの作成は完了です。ファイル名を rule1.tmx で保存します。
** main.tmx を開く [#q78a39c9]
main.tmx を開いて、メインメニューから「マップ > 自動マップ」を選びます。
すると、Backgroundレイヤーに tilesetタイルが自動でタイリングされました。
#ref(39.png);
なお、ここでは右側だけをオートタイルする方法を紹介しましたが、左側のルールも定義すれば、両端が自動でタイリングされるようになります。なお、自動マッピングのルールは左上から順に行われるので、優先順位の高いルールは後になるように定義します。
** 完成データ [#m9c2c8d2]
今回作成したデータは以下のリンクからダウンロードできます。
#ref(autotile.zip);
うまく設定できない場合は、このデータと比較してみてください。
** オートタイルをプログラムで実装する [#z70bacb0]
上記の手順で「inputnot_*」レイヤーを使ってオートタイルを実装できます。
ただ、HaxeFlixelであればFlxTilemapを使うことで、TiledMapEditorの自動マッピングを使わなくてもオートタイルすることができます。
-[[ActionScript入門Wiki - オートタイルを配置する>http://www40.atwiki.jp/spellbound/pages/1166.html]]
また、ツクールのオートタイル素材を使う場合には、プログラムで自作する必要があります。
-[[ActionScript入門Wiki - ツクール仕様のオートタイルを配置する>http://www40.atwiki.jp/spellbound/pages/1586.html]]
* 参考 [#n36ccde4]
- [[Tiled Automapping Tutorial: The Basics - YouTube>https://www.youtube.com/watch?v=UUi0lD1pxyQ]]
自動マッピングの基本的な使い方を紹介している動画です(英語)
- [[Tiled Map Editorを使った自動マップ生成方法1 〜規則通り配置する編〜>http://hyoromo.hatenablog.com/entry/2015/02/20/150703]]
Regionsを使った自動マッピングのやり方を説明しています
- [[Automapping>https://github.com/bjorn/tiled/wiki/Automapping]]
自動マッピングの公式ドキュメントです(英語)