長年開発が進んでいる海外製の汎用ゲームマップエディター『Tiled Map Editor』で、ウディタやRPGツクール規格のオートタイル画像を使用する方法をご紹介します。
Tiled には、ウディタやRPGツクールのマップ作成でいうオートタイルと同等の機能が３種類備わっています。
- 「地形ブラシ」 一番お手軽。
- 「ワンブラシ」 ３種類以上の地形が混ざりあったもので使う？よくわからないもの。
- 「自動マッピング」 タイルの組み合わせを予め個別のマップファイルで定義しておき、その組み合わせを本来作成したいマップ編集時に読み込んで使用します。手間はかかりますが、すごく高機能！
「ワンブラシ」はTiledのマニュアル見ても、色々検索してみてもよくわからなかったので、スルーします。Wikipediaまで行ってしまいました。ワンさんっていう数学者が考えたものだそうです。ワンのタイル – Wikipedia
「自動マッピング」が、ウディタやツクールのオートタイル機能と挙動なども同じため先に説明しますが、なかなかややこしいので、お手軽にオートタイルを使いたいという方は「地形ブラシ」の方を参考にしてください。
目次
自動マッピングへの変換
自動マッピングをもう一度説明すると、タイルの組み合わせを予め個別のマップファイルで定義し、その組み合わせを本来作成したいマップ編集時に読み込んで、タイルを配置する際に組み合わせのルールを判定してタイルが自動変換されるという機能です。
こちらの動画がわかりやすいです。
ウディタやツクールのオートタイルのように基本的な地形だけでなく、色々なものを自動マッピングとして適用することができます。動画のように家の壁を３つ横に繋げたら、予め別マップファイルで定義していた完成した家が瞬時に作成されるというようなショートカットを行うことができるので、非常に汎用性の高い機能です。
ただし、うまく機能させるには設定の手間がかかり、自動マッピングの機能自体もなかなかわかりにくく、機能を把握した上でのマップの構築をしないといけないところがあるので、習得するのはたいへんです。
さて、難しそうという雰囲気になったと思いますが、ウディタやツクールのオートタイル画像を変換するのには、実は変換ツールが存在していてTiledの組み合わせルールのマップファイルまで簡単に作ってくれます。
下記のTiledのフォーラムでTiledの開発者も紹介していますが、『Remex』というツールを使用します。
Autotile not working with RPG Maker TileSet – Question – Tiled Forum
Remexのダウンロード
まずはRemexをダウンロードしてみましょう。
こちらのリンクからRemexのページにアクセスできます。
Source | Remex | Assembla
英語のページなのでわかりにくいかもしれませんが、ダウンロードできそうなボタンがありますが、ここで押してしまうとソースファイル一式もダウンロードされてしまうので、ここでは押さずにディレクトリの階層に入り、必要なファイルだけダウンロードします。
tags ＞ Version 0.2 ＞ build ＞ RemexWindows0.2.zip とクリックしていきます。下記の画像のような表示まできたところで、ダウンロードボタンを押すと、「RemexWindows0.2.zip」というファイルがダウンロードされます。
zipファイルを展開して、フォルダを見るとファイルがいっぱいありますが、「gui.exe」が使用するものになります。多数のファイルを処理したい場合に、コマンドラインで操作も可能なようですが、今回はわかりやすいGUIで操作できるものを使用します。
オートタイル画像の用意
RemexはRPGツクール規格のオートタイル画像をTiledの自動マッピング機能で使用できるようにするツールのため、ウディタ規格のオートタイル画像はRPGツクール規格に変換する必要があります。変換ツールと変換方法は下記の記事で紹介していますので、ご確認ください。
また、RPGツクール規格のものもオートタイル１種類のみの画像ファイルにしておく必要があります。もし複数のオートタイルが連結している画像ファイルの場合は、下記の記事を参考に分割処理してください。あと、Tiledのマップ編集ではアニメーションタイルの機能がまだ整っていないため、アニメーションするオートタイルについては取り扱いません。もし使いたい場合はアニメーションするコマ部分を分割して、アニメーションしないオートタイルとして使用することになります。
Tiledでアニメーションタイルを作成する場合は、１マス１マスごとに設定が必要で少し面倒になるため、アニメーションするオートタイルについては記事中で軽く触れる程度にさせていただきます。
今回は下記の２つのオートタイル画像をサンプルとして使用します。
ウディタ規格のものをRPGツクール規格に変換したものです。
Remexでの変換
gui.exeをダブルクリックすると、右のようなRemexのウィンドウが起動します。
３つのボタンが並んでいますが、変換手順としては上から順にすべて実行していきます。
まずは、一番上の「Expand an autotile」から、ボタンを押して処理していきます。
操作ごとにウィンドウが次々表示されます。
「Open」で用意してあるRPGツクール規格のオートタイル画像を選択します。
「Expand an autotile」を押します。
オートタイルの組み合わせが展開された画像が生成されます。
「Save as」でファイル名を付けて保存します。
保存ができたら、「Expand another autotile」で別の画像も処理するか、「Back to main menu」で最初の画面に戻るかします。
次はTiledのタイルセットファイルを生成する処理を行います。
「Generate a tileset for Tiled editor」を押します。
「Open」で先程保存した画像を選択します。
「Make a tileset!」を押します。
「Save as」でファイル名を付けて保存します。
保存ができたら、「Make another tileset」で別の画像も処理するか、「Back to main menu」で最初の画面に戻るかします。
最後はTileのオートマッピング機能用の組み合わせルールを定義したマップファイルを生成します。
「Make an automapping rule for Tiled editor」を押します。
「Open」で先程保存したTiledのタイルセットファイルを選択します。
「Tile Layer 1」部分はマップ編集時に自動マッピング機能で組み合わせのルールが適用され、実際にチップが配置されるレイヤー名を指定しています。Tiled上での変更もできるので、今回はこのまま処理します。
「Make an automapping rule!」を押します。
「Save as」でファイル名を付けて保存します。
保存ができたら、「Make another automapping rule」で別のタイルセットファイルも処理するか、「Back to main menu」で最初の画面に戻るかします。
以上でRemexでの変換処理は完了です。
最終的に下記のファイルが作成されました。右の赤い画像も必要ですので、削除しないように注意してください。
ちなみに生成された組み合わせルールを定義したマップファイル(.tmx)をTiledで開いてみるとこんな状態になっています。タイルの並びもレイヤー数もすごいことになっていて、これを手動で行うのはかなり大変な作業です。
ひとつ問題としてはRemexは透過PNGを処理できないようで、透過PNG画像で最初の処理を行うと、左の画像のように透明分が黒色になってしまいます。
処理後に画像編集ソフトなどで、黒色部分を透明に戻す必要があります。
Tiledでの自動マッピング
それでは、Tiledで新しいマップを作成し、自動マッピング機能を試してみたいと思います。
まずは自動マッピング機能用のマップファイルがどれであるかを記述した「rules.txt」というテキストファイルを作成する必要があります。
記述内容は単純にマップファイル名を羅列するだけです。ファイル名の前に「//」を記述するとそのマップファイルの自動マッピングのルールが適用されなくなります。編集するマップや状況によって使い分けることができます。
それでは、Tiledを起動し「新しいマップ」を作成します。
今回はこのような設定で作成してみます。
Remexで生成したタイルセットファイル(.tsx)を読み込みます。
レイヤー名を「Tile Layer 1」に変更します。
Remexでの最後の処理中に行った自動マッピングが適用されるレイヤー名の指定どおりにします。
なにもないタイル上だと自動マッピングが機能しないので、ベースとなるタイル画像を読み込んで、地面を塗りつぶしておきます。
タイルセットのタブに並んだ名前が「Tileset」となっていましたので、タイルセットの編集でわかりやすい名前に変更しておきます。
最後にタイル描画中に自動マッピングが行われるように、「マップ＞描画中の自動マップ」をチェック状態にしておきます。
ようやく準備ができましたので、マップを編集していきましょう。
動画のとおり、タイルセットの右下のタイルを使って描画していくのですが、ツクールやウディタと同じ様に自動マッピングが機能していますね。マップの境界部分はうまくいかないようなので、手動で調整しました。
さて、水のタイルも塗っていこうとしたのですが、これは上のレイヤーに重ねて使用するものでしたので、画像の様になってしまいました。レイヤーを１つ追加してそこに描いていくことにします。
レイヤー名を「Water Layer」としましたが、このままここに水のタイルを描いていっても、自動マッピングは適用されません。自動マッピングが適用されるようにするにはRemexの最後の処理で指定したレイヤー名を変更する必要があります。もう一度Remexで処理してもいいのですが、別の方法でも変更することができます。
水タイルの組み合わせルールが設定されているマップファイルを開いて、レイヤー名を見ると、「output_Tile Layer 1」「input_Tile Layer 1」という名前が並んでいます。
ここに記載されているのが自動マッピングが適用されるレイヤー名の指定になっていて、「input_Tile Layer 1」はレイヤー「Tile Layer 1」にこう入力されたらという意味でタイルの配置条件が設定されており、「output_Tile Layer 1」はレイヤー「Tile Layer 1」にこう配置しなさいという内容が設定されているわけです。「input」するレイヤーと「output」するレイヤーは別々に設定することもできます。
というわけで、ここの「Tile Layer 1」を「Water Layer」に変更していけばいいわけです。「output」の部分だけ変えるだけでもいいのですが、その場合は「Tile Layer 1」上で描画する必要があり、他のタイルに干渉してしまうので、「input」の方も「Water Layer」に変更したいと思います。
ただ、Tiledのレイヤー機能にはテキストエディタ等のようにレイヤー名の一括置換できるものはありません。
さて、困ったところなのですが、実はTiledのマップファイル(.tmx)やタイルセットファイル(.tsx)はテキストエディタなどで開いて編集することができます。
今回のようなレイヤー名などの情報もテキスト状態で記載されていて、書き換えることができますので、テキストエディタで開いて文字を一括置換してやればいいわけです。
一旦Tiledを終了させて、マップファイル(.tmx)をテキストエディタで開き、「Tile Layer 1」を「Water Layer」に一括置換して、ファイルを保存します。
こういった作業に慣れていないようでしたら、やはりRemexで出力し直すのが良いですね。
Tiledを起動し、「Water Layer」に水のタイルを描いていくわけですが、最初に砂漠を描いた時と同じ様に自動マッピングが機能するには、レイヤーがなにか他のタイルで塗りつぶされている必要があります。
水の部分は透明にしたいので、ベースのタイル画像を画像編集ソフトで右上の隅に透明の１マスを作り保存します。この透明のタイルで「Water Layer」を塗りつぶしておきます。
それでは水タイルを描いていきます。
想像通りにうまく行きました！
さてさて、ここまで長々と書いておいてですが、自動マッピングは気を使うことが多くて大変です。あと自動マッピングを行うものが増えていくと処理が重くなっていくので、地面のオートタイルのように何種類も使いたい場合にはPCスペックとの兼ね合いも出てくると思います。
ただ、挙動はウディタやRPGツクールと同等なんですけどねぇ。
もっとTiledへの理解が進めば軽くて効率的な使い方をご紹介できるかもしれませんが、正直なところおすすめできません。
地形ブラシへの変換
自動マッピングはだいぶややこしいものでしたが、地形ブラシは割と簡単に変換して使うことができます。ただ、ウディタやRPGツクールでのマップ編集時のオートタイルの挙動とは若干違うため、慣れが必要になります。
オートタイル画像の用意
まずは、下記のようなウディタ、ツクール規格のオートタイル画像を用意します。
これをTiledの地形ブラシ用の並びに変換します。
例によって、変換ツールと変換方法は下記の記事で紹介していますので、ご確認ください。「ウディタ→Tiled地形ブラシ.xml」「ツクール→Tiled地形ブラシ.xml」の項目になります。
変換したものがこちらになります。
上のリンク先の記事でも説明していますが、Tiledの地形ブラシに変換することで縦横半マスずれてしまうため、空白が発生します。外側に別の地形(サンプル画像の場合は草原部分、水には外側の地形はありません)がある場合は、別途外側の地形のタイル画像を合成する必要があります。
その際、見た目を気にするなら合成する外側の地形のタイル画像も縦横半マスずらさなければいけません。
今回の草原と砂のタイル画像も空白が気になるので、草原部分を背景に合成しようと思います。
草原部分１マスのタイルを用意して、上のリンク先にある記事に記載している「Tiled地形ブラシベースチップ1.xml」「Tiled地形ブラシベースチップ4×3.xml」で変換していきます。
左が元画像、真ん中が「Tiled地形ブラシベースチップ1.xml」で変換した画像、右が「Tiled地形ブラシベースチップ4×3.xml」で変換した画像です。
よーく見ると少し違うのかな？というかんじですが、まあこれで、合成した際に正確な並びにはなっています。
こちらの２枚を合成していきます。
今回は１点だけなので、画像編集ソフトで合成してしまってもいいのですが、複数の画像を一括で処理する際には、先程のリンク記事でも紹介している画像加工ツールを使うと便利ですので、こちらでも紹介させてもらいます。
Ralpha Image Resizerを使用して、２つの画像を合成します。
空白ができた草原と砂漠のタイル画像ファイルをウィンドウにドラッグ＆ドロップし、右側の処理リストから、「画像合成」だけをチェックし、「画像合成」のギアアイコンを押し画像合成の設定を行います。
「背景画像」を押し、背景にするすべて草原の画像ファイルを読み込みます。
合成画像のプレビューが確認できます。
「変換＞実行」か「矢印アイコン」「F５キー」を押して、処理を実行すればご合成画像が出力されます。
このように合成画像が完成しました。
ついでに、こちらの画像と水のタイルの画像を１枚の画像として連結しておきます。今回は２枚だけですが、地形ブラシ用のタイル画像はまとめておいた方が効率よく使えますので、使いやすい程度にまとめておくことをおすすめします。
PL_ImageConstructorを使って画像を連結します。
「連結」タブを選んで、ファイルをドラッグ＆ドロップ、右側の設定はお好みで、「連結画像の作成開始」ボタンを押します。
連結画像はこちらです。わかりにくいですが、１枚の画像に繋がっています。
Tiledでの地形ブラシの設定
Tiledを起動して、新しいマップを作成します。
用意した地形ブラシ要の画像ファイルをドラッグ＆ドロップしてタイルセットファイルを作成します。
地形ブラシを定義していきます。
タイルセットの下に並んだアイコンから「Edit Tileset」でタイルセットの編集画面に切り替わります。
「タイルセット ＞ 地形」で地形パレットを表示します。
砂漠の部分でみ右クリックしてメニューから「地形の種類を追加」を選択します。この時選択したタイルがマップエディタ上で地形ブラシを選択する際のアイコンになりますが、違うタイル上で右クリックして「地形の画像を設定」で変更することもできます。
地形パレットに新しい地形ブラシが登録されるので、名前を付けておきます。
タイル画像が地形ブラシとして機能するように、タイル上で左クリック・ヒダリドラッグしてこちらのように境界を塗っていきます。間違えたら、Ctrl+Zキーで。
もし、アニメーションするタイルを作成したい場合には、ここの画面でアニメーションさせたらい１マスを選択した状態で「タイルセット ＞ タイル・アニメーションエディター」か「カメラのアイコン」を押し、アニメーションエディター画面を開いて編集します。これをアニメーションするタイル１マス毎に行っていきます。
水部分も同じようにして、こちらで２つの地形ブラシが完成しました！
タイルセットを保存して、マップに戻ります。
「表示 ＞ ビューとツールバー ＞ 地形」でマップエディタ上の地形ブラシのパレットを表示します。
こちらの動画のようにすらすらと描画することができます。
Ctrlキーを押しながらだと、タイルが細くすることができます。
RPGツクールやウディタのオートタイルとの挙動の違いとしては、RPGツクール・ウディタでは、オートタイルの最小マスは１マスですが、Tiledの地形ブラシでは左上の部分のように４マス専有してしまいます。細い道を作った場合もマスとマスの境界部分に置かれてしまうので、キャラクターなどを１マス単位で動かす場合には注意が必要です。
あとは、専有範囲が広くなる分、細かく調整できずに地形の描画がしにくく感じられます。これは慣れかもしれませんが。
というわけで、Tiledでオートタイルを使用する方法でしたが、先にも書きましたが地形ブラシが一番使いやすいですね。RPGツクールやウディタとは少し挙動が違うので、慣れが必要なところもありますが、ウディタやRPGツクールの資産を容易に流用できるようになったのは大きいと思います。
そもそも前々からあった機能で特に変わっていなかったのですが、色々なマップエディターの仕様をきちっと覚えようと、今回ようやく仕様を把握することができ変換フォーマットや今回の記事を書くことができました。
Tiledはレイヤーもいっぱい使えるし、画像をそのまま読み込んだり、オブジェクトとして画像パーツを自由に配置できたり、編集マップを画像として出力できたりと、マップお絵かきソフトとしても使えるな。と思っています。そういうジャンルもはやったら楽しそうですね。
あと、色々マップエディターを触ってみてということで、そのうち記事にもしたいと思っていますが、ゲーム制作ソフトの『Godot(ゴドー)』のマップエディタが今の所一番使いやすかったです。他にマップエディターとして触ったわけではないですが、海外のRPG制作ソフトの『RPG Peper Maker』の3Dと2Dの融合したビジュアルのマップはなかなかおもしろくて、これもなにか作品を作るなり、紹介したいと思っています。
GodotもRPG Peper Makerも無料のソフトなので、興味がありましたらさわってみてください。
ではでは、楽しいゲーム制作ライフを！
匿名
Remexの「Make an automapping rule!」で何故かtsxファイルが毎回読み込みエラー起こして上手く行きませんでした。相性が悪いのかな・・・(´・ω・｀)
ぴぽ 投稿者
ご報告ありがとうございます。
Remexはこの記事作成時に、触ったきりのためなんとも言えないのですが、おそらくファイルが作成できない状態なのかと思います。
海外系のソフトでよくあることですが、ファイル名やフォルダ名に日本語などの2バイト文字が含まれているとファイルの読み込みができないことがあります。もしそういった場合は、ファイル名やフォルダ名を半角英数にして試してみてください。