この記事の概要
この記事では、タイルセット自動生成ソフトAutoTileGenの紹介と基本的な使い方の解説をしていきます。
- 2D横スクロールゲーム用のマップを作りたい。
- タイルセット作成を効率化したい。
- AutoTileGenを購入してみたけれど使い方がわからない。
といった方へ向けた情報になるかと思います。
AutoTileGenって？どこで入手できるの？
AutoTileGenは指定した画像から、タイルセットを自動生成してくれるツールで、Steamから980円ほどで入手できます↓。(2022年2月現在)
イメージとしては
これを、
こうして、
こうできるようになるソフトです。
タイルセット作成で坂の造形や各方向ごとのタイルを書いていく作業はコピペを前提としてもかなり大変な作業になりますのでこちらのツールを使用することでかなり作業時間の短縮に繋がりますね。
48枚描かなければいけないタイルを3,4枚にできるというだけでその便利さが伝わるかと思います。
私の場合は「Aseprite → AutoTileGen → GMS2」といったルートで活用させて頂いてます。
起動～基本的な画面の見方
ソフトを起動すると以下のような画面が出るかと思います。(↓画像)
これはAutoTileGenのサンプルプロジェクトが開かれている状態で、ここで色々操作をしてみると様々な機能の確認ができます。
高機能なソフトなだけに要素が多く、所見の方はかなり混乱してしまうかと思いますが、抑えるべきポイントを絞って順番に解説していきますので安心してください。
大まかな画面の構成要素としては以下4つになります。
① INPUT…プロジェクトの作成や各生成元画像の取り込みや編集を行う
② プレビュー…マップ適用例や最終的に生成されるタイルセットを確認する
③ OUTPUT…プロジェクトや生成タイルセットの保存先やフォーマットを指定する
④ TILESET GENERATOR
…生成を行う時の様々な設定やプレビューの表示変更などを行う。(ここがソフトのコア)
ざっくりと画面の構成がわかったところでプロジェクトの作成に取り掛かっていきましょう。
プロジェクトの準備：作成～保存
まずは新規プロジェクトを作成して作業を始める準備を整えましょう。
AutoTileGenはプロジェクトデータの扱いと保存操作に若干クセがありますのでデータの形式や場所に注意しながら解説していきます。
新規プロジェクトの作成
新規プロジェクトの作成は画面左側のINPUTタブにあるファイルのマークをクリックして行います。
クリックすると以下のような画面になるかと思いますので、
・プロジェクト名(=出力タイルセット名になることに注意)
・インプットとして与える画像のサイズ(タイル一枚分のサイズ)
を設定して[Create new project]をクリックします。
以下のような画面になれば、新規プロジェクトの作成は完了です。
プロジェクトの保存、保存場所の指定
続けて、作成したプロジェクトを保存していきます。
保存の操作に入る前に、プロジェクトデータの保存先の指定を行いましょう。
(デフォルトではAppDataディレクトリ内に保存されるため、若干参照性が悪いです)
保存先の指定はOUTPUTタブから以下の手順で行います。
1. Output folder & name:のフォルダマークをクリック
2. 画面中央にエクスプローラーが表示されるため、保存したいフォルダへ移動する
(接続されているドライブが左下に表示されます)
3. 右下にある[Select]をクリックして、保存先の指定は完了
＊保存先はプロジェクトデータと最終的に出力するタイルセットデータ共通です。(変更可能)
保存先を指定したら、プロジェクトデータの保存を行います。
プロジェクトデータの保存はINPUTタブの上部右端のボタンをクリック、中央に[input tiles exported]のメッセージが出たら保存完了です。
＊ポイント：AutoTileGenはプロジェクトデータ＝インプットタイルデータの形式です。
→新規作成の流れで保存した場合、以下のようなインプットタイルデータが作成されているはずです。
プロジェクトデータの保存＝「インプットデータの出力」を行うイメージです。
プロジェクトの読み込み
保存したプロジェクトを読み込むときは、INPUTタブの上部中央のボタンをクリックします。
プロジェクトファイル(=インプットタイルデータ)は「(プロジェクト名)_input.png」の形式で指定したディレクトリに保存されています。
プロジェクト編集作業：最低限の操作でタイルセットを作ってみる
ここまででAutoTileGenでタイルセットを生成するための準備が整いました。
AutoTileGenはかなり高機能で様々な設定が可能なのですが、今回はポイントを絞って以下の3ステップの流れで実際にタイルセットを生成しながら解説していきます。
- 元データの取り込み/編集
- プレビューで生成結果を確認する
- 生成したタイルセットデータをエクスポート(保存)する
以上の流れで触れられる要素は少ないですが、最低限これら３つのステップを理解しておけば、これからAutoTileGenを触っていく中で自然と他の機能についても理解していけるかと思います。
筆者も解説情報の少なさに苦戦しましたが、プレビューがかなり優秀なソフトなので基本がわかっていれば色々とボタンを押しながら直感的に理解していけました。
Step1:元データの取り込み/編集
生成元となる画像の取り込み(インポート)はINPUTタブから行います。
INPUTタブ全体の見方は以下のとおりです。
- プロジェクトの各操作を行います。詳細は前項を参照。
- 地中部分に適用されるタイルです。
- 背景部分に適用されるタイルです。
- 青が地面部分、緑が天井部分の情報をもつタイルです。
- 赤が左、黄が右側の壁に適用される情報を持つタイルです。
- 内側のエッジの処理を設定するためのマスク情報です。
- 外側のエッジの処理を設定するためのマスク情報です。
ここから分かる通り、AutoTileGenで用意すべきタイルは4つだけ(背景が不要な場合３つ)です。
今回は以下のような元画像を用意しました。
各タイルのパネルをクリックするとその編集画面に移動できます。(以下は地面/天井タイルの例)
ペンやスポイトなど基本的なツールが揃っており、ここでタイルを描いていくことも可能です。
ここでは各ツールの説明は割愛してデータの取り込み手順を解説していきます。
今回は以下の画像を取り込んでいきます。(画像の用意が面倒であればこちらを使って下さい)
画面下の[SPRITE EDITOR]から[Load]を選択し、対象の画像をクリックします。
この時、取り込む画像はプロジェクト作成時に設定したサイズです。(例は32×32)
取り込みが完了すると以下のような画面になるかと思います。画面左の「←」ボタンをクリックして前の画面に戻ると、取り込んだ画像が反映されていることが確認できます。
同様に壁のデータの取り込みも行い、地中画像はエディタの塗りつぶしなどで用意してみると、以下のようになります。
Step2:プレビューで生成結果を確認する
ここまででもととなる画像データの用意、反映の確認ができたかと思います。
ここからはAutoTileGenエディタのプレビューを見ながら調整を行っていくことになります。
この”調整”がAutoTileGenの作業で最も重要で面白い部分ではあるのですが、今回は初心者向けということで最低限の見た目の確認方法と、オプションの設定方法を何点か紹介していきます。
ここで紹介するもの以外にもとりあえずボタンを押してみるとプレビューが変化して確認できるため、このタイミングで色々試してみるのもおすすめです。
出力されるタイルセットの確認
AutoTileGenのデフォルトは地形の状態でプレビューが表示されています。
最終的に出力されるタイルセットデータの確認を行うには、画面下の[TILESET GENERATOR]内にある[Preview]をクリックします。
ここで重要になるのは、以降で紹介する背景や坂の有効化は見た目だけでなく、出力される結果に影響があるということです。(詳細は後述)
その内容を確認することができるのが、このタイルセット表示ということになります。
オプション：背景の表示/非表示の切り替え
AutoTileGenはデフォルトで背景が非表示となっています。
背景を表示するには画面下の[TILESET GENERATOR]内にある[Background]をクリックします。
オプションで背景を有効化した状態で出力を行うと、各タイルにも背景情報が含まれた形で出力されることに注意しましょう。
背景OFF：
背景ON：
OFFでもインポートした背景情報は存在するので、個人的には見た目の確認のときのみONにすることが多いです。(OFF画面中央あたりに背景タイルがあります)
オプション：坂の有効/無効切り替え
坂の適用有無を切り変えるには画面下の[TILESET GENERATOR]内にある[Slopes]をクリックします。
こちらもON,OFFで出力されるタイルセットの形が変わるため、注意しましょう。
坂OFF：
坂ON：
Step3:生成したタイルセットデータをエクスポート(保存)する
確認や調整が終わったら、最後にタイルセットを出力しましょう。
出力は、OUTPUTタブ内にある[Save tileset]のフロッピーマークをクリックすることで可能です。
（保存場所はプロジェクトデータと同様の方法で選択できます。）
[Tileset saved!]のメッセージが出たら出力完了です。指定したディレクトリをみると以下のようなタイルセット画像が保存されているはずです。(以下が実際に出力された画像)
*補足：32X32にならない時
エクスポートの設定右端にあるパディング(2px)の設定ボタンを無効化します。
こちらを有効の状態で出力してしまうと角タイルが32×32の場合→36×36となってしまいます。
GMS2で使いたい場合の準備：タイルの並び替え
AutoTileGenで生成したタイルセットをGMS2(GameMakerStudio2)で使用したい場合は、のちの作業を考慮してタイルを並び替えておくと便利です。
GMS2では以下のような形式でオートタイリング機能を利用できます。
また、タイルスプライトを読み込む際に左上の部分は透明色として利用されるため、タイルの左上１マスは空白にしておく必要があります。
したがって、GMS2で取り込むためのタイルは以下のような形で並び替えておくとよりスムーズな作業が実現できます。(右下に地中用のタイルを配置するのがポイント)
並び替えの操作はプレビューをタイル表示にした状態でドラッグアンドドロップすることで可能です。
おわりに
今回の記事では、AutoTileGenについて紹介と解説をしました。
たった4枚のタイルから46枚ものパターンを生成してくれるというかなり強力なツールで私自身愛用しています。
今回は初心者向けということでマスクの設定やシェーダなどの機能には触れずに進めてきましたが、それらについては別の記事でまとめる予定です。
また、AutoTileGenで作成したタイルセットを、ゲームエンジンのGMS2（GameMakerStudio2）でどう使っていくかなどもまとめていきますので、なにか疑問店頭があればお気軽にコメントを残していって下さい。
ありがとうございました。
余談：角張った地形の表現
AutoTileGenは生成の性質上無機物よりは有機物のほうが得意そうな印象ですが、設定などで工夫すれば以下のように角張った地形も表現可能です。
一部自動生成の都合で不自然さ(写真赤枠)は出ますが、タイルセットの扱いのため、ゲームエンジン側で調整可能でした。
こちらも要望があれば記事にまとめようかと思います。
コメント