この記事では、GMS2(GameMakerStudio2)でタイルセットを使用したマップ作成について解説していきます。
・GMS2でタイルセットを使用してマップを作成したい
・GMS2とAutoTileGenの連携(データ利用方法)を知りたい
・GMS2のAutoTiling機能を学びたい
といった方向けの情報になります。
タイルセットでルーム編集を行うまでの大まかな流れは以下の手順です。
- タイルセットデータの用意(事前準備)
- タイルセットデータをスプライトとしてインポート
- インポートしたスプライトを参照先とするタイルセットデータを作成
- (任意) AutoTilingの設定
- ルームでタイル用レイヤーを作成
- タイルの描画、配置
それでは、順に進めてみましょう。
タイルセットデータの用意
まずは以下のようなタイルセットデータを用意します。
タイルセットの作成方法は様々ですが、一例として自動生成ツールを使用して用意することもできます。(↓こちらの記事で解説しています。)
今回は上記記事で作成したタイルセットデータ(↓)を使ってみます。
タイルはGMS2用に並び替え処理をしている点に注意してください。
スプタイルセットデータをスプライトとしてインポート
まずはGMS2上のスプライトの形でタイルセットの画像データを取り込みます。
スプライトデータは、GMS2エディタ右側のディレクトリツリーから[Sprite]を選択し、
Create → Sprite から作成します。
Spriteデータが作成されると、編集ウインドウが展開します。
スプライトの編集ウィンドウから、[Import]をクリックしてタイルで使用したい画像データを選択します。
ここまででタイルセット画像データの取り込みが完了しました。
タイルセット(Tile Sets)の作成
次に、作成したスプライトを参照先とするタイルセットデータを作成していきます。
タイルセットの作成は、画面右側のAssetsタブの「TileSets」フォルダにて行います。
タイルセットデータを作成すると、以下のような編集ウィンドウが表示されます。
ウィンドウ左側の[Sprite]から先ほど作成したタイルセット用のスプライトを取り込みます。
表示が小さい場合はプレビューの右上にある[Center Fit]アイコンをクリックすると、表示枠に合わせて拡大表示してくれます。
スプライトの参照設定が確認できたら、タイルのサイズを設定していきます。ボーダーラインがタイルの目と合うように設定しましょう。(ウィンドウ右側の[Tile Properties]から設定)
ここまでで最低限のタイルセットデータの用意としては完了です。
＊後述のオートタイリングを利用しない場合は次項は読み飛ばしていただいて問題ありません
(任意) Auto Tiling の設定
ここで、AutoTilingの機能を紹介します。これは、以下のgifのようにマウスでなぞるだけで地形に適したタイルを配置してくれる機能です。
タイルの利用に必須ではなく、用意するデータの形式を規格に合わせる必要がありますが、とても便利な機能なのでぜひ利用していきましょう。
AutoTilingを利用するには、タイルセットの変種ウィンドウ下部にある[Auto Tiling]をクリックし、AutoTilingの設定ウィンドウを展開します。(Ctrl+Aのショートカットで呼び出しも可能です)
AutoTilingの設定ウィンドウが開いたら、用意したタイルセットのタイル数と同じオートタイルテンプレートを作成します。
今回の場合は47枚のタイルのため、47の隣りにある「＋」アイコンをクリックすると新規テンプレートが作成されます。
AutoTilingを利用したい場合はタイルセット画像を作成する段階でテンプレート形状を考慮しておくと作業がスムーズです。(AutoTileGenの場合は並び替えで対応可能)
オートタイリング用のタイルは、対応する形状のタイルをクリックしていくことで設定可能です。
すべてのテンプレート対応を設定したら、オートタイルの利用準備は完了です。
ルームでタイル用レイヤーを作成
タイルセットの用意ができたら、ルームでタイルを配置するためのレイヤー(タイルレイヤー)を作成します。
タイルを利用したいルームエディタを開き、左側にあるアイコンをクリックして新規タイルレイヤーを追加します。
タイルレイヤーを作成したら、先ほど作成したタイルセットデータを対応付けていきます。
タイルレイヤーの編集タブ(エディタ左下)から[No Tile Set]となっている箇所をクリックして参照したいタイルセットを選択します。
画面右側で、選択したタイルセットが適用されていることを確認できます。
これでタイルレイヤーの準備は完了です。
＊タイルを配置していく前に、見やすいように背景色を変更しておきます。
→Backgroundレイヤーの[Colour]から編集できます。
タイルの配置
タイルの配置は右側のタイルから配置したいタイルを選択し、ルーム内でクリック/ドラッグすることで配置していくことができます。
オートタイリングを使用した配置
オートタイリングを使用する場合は、右側のタイルレイヤーのタブから、[Libraries]を選択します。
先ほど作成したオートタイルが確認できますので、こちらを選択します。
オートタイルを選択した状態でルーム上でドラッグ操作を行うと、自動的に地形を判別して配置が行われます。(以下Gif参照)
複雑な地形でも、ドラッグしながらなぞっていくだけで生成していくことができます。
おわりに
お疲れさまでした。
今回はGMS2のタイルセットを利用したマップ作成方法について、AutoTileGenとの連携方法と併せて実践してみました。
AutoTiling機能は便利な分元データの46枚分のタイル用意が大変だったのですが、AutoTileGenなどの自動生成ツールを活用することで大きく作成時間を短縮できるようになりました。
AutoTileGenの簡単な利用方法についても以下の記事で解説していますので参考になれば幸いです。
コメント