読者です 読者をやめる 読者になる 読者になる

hyoromoのブログ

iOS/AndroidもしくはCocos2dxネタを書いています

Tiled Map Editorを使った自動マップ生成方法2 〜続・規則通り配置する編〜

f:id:hyoromo:20150222131744j:plain
前回書いた内容の応用「その場所に特定タイルが無い時のパターン」設定について書きます。

はじめる前に

環境
  • Tiled Map Editor v0.11.0
事前知識

どのように自動マッピングされるか?

f:id:hyoromo:20150222122715j:plain
前回のと比べ、道の両端が分かりやすく表示されているかと思います。本エントリーでは道の端である事を判断し、自動的に道端用のタイルを設定する手法を解説します。

タイルのファイル構成

ファイル構成自体に変更はありませんが、map.pngの画像内容だけ変更あります。

  • main.tmx
    ゲーム画面上へ表示するタイルファイル
  • rules.txt
    自動マッピングの元となるtmxを記入するテキスト
  • rules.png
    ruleタイルマップ限定で利用するタイルマップ画像。左からregions_input/regions_output
    f:id:hyoromo:20150220133217j:plain
  • base.png
    骨組みタイルマップ画像。左から道/地面/壁/雲パターン1/雲パターン2
    f:id:hyoromo:20150220134643j:plain
  • map.png
    ゲーム画面に表示するタイルマップ画像。左上から道/地面/道の右端(背景地面)/道の右端(背景透過)/道の両端、左下から道の上の草/草の両端
    f:id:hyoromo:20150222123633j:plain
  • rule.tmx
    自動マッピングのルール。以降、ルールの数分だけ作成

mapに道の端っこパターン用の画像を複数種類追加しています。(背景地面)と(背景透過)の違いは画像右上1dot分の色差分です。

main.tmx

f:id:hyoromo:20150222124213j:plain
前回と同じように配置していきます。ただ今回は両端パターンも試したいのでその点だけ変えています。

道の右端のルール作成(rule.tmx)の書き方

前回同様タイルセットにはrules.png/base.pngmap.pngを追加しておいてください。

  1. regions_inputタイル・レイヤーを追加し、rules.pngからregions_inputタイルを配置。今回2タイル分配置する意図は、道の端かを判定するのに使うからです
    f:id:hyoromo:20150222124824j:plain
  2. input_objectsタイル・レイヤーを追加し、base.pngから道タイルを配置。今回は道の右端であるか判定する為、道タイルは左に配置します
    f:id:hyoromo:20150222124948j:plain
  3. inputnot_set_objectsタイル・レイヤーを追加し、base.pngから道タイルを空いていた右スペースへ配置。今回の肝であるinputnotレイヤとなり、「このレイヤに配置したタイルが存在しない場合」が自動処理される条件の1つに追加されます
    f:id:hyoromo:20150222125107j:plain
  4. regions_outputタイル・レイヤーを追加し、rulss.pngからregions_outputタイルを配置。前回同様に道の上の草用に2タイル分配置しています
    f:id:hyoromo:20150222125754j:plain
  5. output_roadタイル・レイヤーを追加し、map.pngから道タイルを配置
    f:id:hyoromo:20150222125501j:plain
  6. output_backgroundタイル・レイヤーを追加し、map.pngから草タイルを配置
    f:id:hyoromo:20150222125522j:plain

これで道の右端が完成です。
一度自動マップされるか試してみてください。本エントリートップ絵の左側のようになっていれば成功です。

補足

rule.tmxは左上にあるルールから順次実行されるようなので「左上に汎用パターン」「右下へ配置するものをイレギュラーパターン」とする事で、汎用パターンをイレギュラーパターンで上書きしていけてルール作成が楽できます。

道の左端

道の左端は、右端を作成した時の逆に配置するだけで完成します。タイル画像を逆にするには、タイル選択中にxキー押下で水平反転しますので活用して作成ください
f:id:hyoromo:20150222130121j:plain

道の両端

inputnotレイヤに道を挟んだ両サイドに道を配置するだけで対応出来ます
f:id:hyoromo:20150222130320j:plain

道の右端(背景別種類)

「道の右端」の右が空なのか地面なのかでタイル画像種類を変えたい場合があります。そんな時はinputnotを更に1つ追加する事で対応可能です。

  1. 「道の右端のルール作成(rule.tmx)の書き方」の3までと同じようにinputnot_set_objectsタイル・レイヤーを設定
    f:id:hyoromo:20150222131116j:plain
  2. さらにinputnot_set_objectsタイル・レイヤー*1を追加し、右へ地面タイルを配置。これで道の右隣が「道は無い」且つ「地面でも無い」という条件になります
    f:id:hyoromo:20150222131239j:plain
  3. 中略。最終的にはこのようになります
    f:id:hyoromo:20150222131428j:plain

まとめ

inputnotパターンは結構使える手法なので覚えておけば自動化が捗ります。今回は道だけの例でしたが、川や池、壁などの同じパターンが続き、パターンが途切れた所で別種類画像を設定したいシーンは沢山あると思います。

Tiled Map Editor エントリーシリーズ

*1:レイヤ名は同一にする