🤖 TileMapLayerでタイルマップを作る

はじめに

Godot 4.3 から、従来使われてきた TileMap クラスが Deprecated（今後もうアップデートされないってこと）になって、その代わりに TileMapLayer クラスが新たに追加されました。ということで、TileMapLayer で実際にタイルマップを作ってみたいと思います。

記事作成当時の筆者の環境
Godot のバージョン: 4.3
コンピュータのモデル: MacBook Air M1, 2020
OS: macOS 14.6.1

画面の大きさを設定する

今回は 16 x 16 px のタイル画像を使うので、Viewport は小さめにしてタイルがちょうど収まるサイズにしますね。プロジェクトを新規作成したら、プロジェクト設定 > 一般タブ > Window で以下のように設定しました。

• Size:
  • Viewport Width: 256
  • Viewport Height: 160
  • Window Width Override: 1024（4倍
  • Window Height Override: 640（4倍）

あとは設定パネルを下に少しスクロールして、ストレッチモードを viewport にしてゲームの絵がウインドウサイズに合わせて拡大するようにします。アスペクト比はそのままにしておきます。

• Stretch:
  • Mode: viewport
  • Aspect: keep（デフォルト）
  • Scale: 1（デフォルト）
  • Scale Mode: fractional（デフォルト）

タイル用のアセットをインポートする

KENNEY のサイト から 1-Bit Pack をダウンロードさせてもらいました。たくさんの 16 x 16 px タイル画像の詰め合わせですね。ほんとに使いやすくて感謝しかありません。どうもありがとうございます。ダウンロードしたアセットの TileSheet のうち colored-transparent_packed.png を Godot のファイルシステムにぶち込みます。インポートできました。

シーンを作る

とりあえずシーンを新規作成しました。Node2D をルートにして名前を World にしました。ベタな名前がわかりやすくて良いのです。そして、その子ノードに TileMapLayer を追加しました。コレ、今日のメインディッシュでございます。

インスペクタで TileMapLayer の Tile Set プロパティに新しい TileSet リソースを追加します。

TileSet を作る

TileSet エディタでタイルセットを作っていきます。ちなみに、隣の TileMap エディタと見た目がちょっと似ているので、よく間違えますね。アレ？ってなったらそういうことです。あとは Scene ドックで TileMapLayer ノードを選択した状態じゃないとエディタの項目に TileSet も TileMap も出てこないですね。これも Godot にまだ慣れていないころは謎解きに時間がかかるものです（私だけかも）。

さて、TileSet エディタを開いたら、一番左の空っぽのペインにファイルシステムにあるインポートしたタイルの画像をドラッグして追加します。この時、ダイアログが表示されて、自動でアトラスにタイルを作成するか聞かれます。全部のタイルを使うわけではないですが、楽ちんなので Yes を選択してしまいます。

すると、インスペクタで指定しているテクスチャ領域の 16 x 16 px に合わせて、画像がある範囲をすべて 16 x 16 px のタイルにしてくれました。細かな設定はいろいろありますが、ひとまずこれでお絵描きのためのパレットが用意できたというわけです。

TileMapLayer を複製する

Godot 4.3 からせっかくクラス名に “Layer” がついたので、タイルマップを複数のレイヤーに分けて重ねてみたいと思います。じゃないと、これまでの TileMap クラスとの違いがわかりにくい気がするので。。

ということで、Scene ドックで既存の TileMapLayer ノードを2つ複製して、それぞれのノードの名前を以下のようにしました。

• TileMapGround
• TileMapGreen
• TileMapObject

これでお絵描きするキャンバスができたということですね。

タイルマップを作る

TileMapGround

下のレイヤーからやっていきます。まずは TileMapGround ノードです。これに地面を描きます。2Dエディタを上部に表示したまま、その下に TileMap エディタを開きます。アトラスに地面っぽいタイルが4つほどあるので、それらを複数選択しました。

そして、その4つのタイルをランダムで配置させるのにサイコロアイコンをクリックして有効にしておきました。青くなったら有効ってことです。

あと、私の場合は、カーソル周りのグリッドが見えたほうがタイルを配置しやすいのでグリッド表示も有効にしておきました。

画面全体に地面のタイルを塗りますので、四角形ツール（実際、名前なんて言うんだい？）を選んでおきます。もう「塗る」って言っちゃってますね。脳みそがお絵描きモードです。

そして、画面サイズの右下角から左上角 (0, 0) に向かって範囲選択するようにドラッグすると、一気にタイルが配置されます。

地面のタイルマップが完成しました。

さて、この調子で TileMapGreen に草木のタイルを配置して、TileMapObject にお墓でも建てましょう。作業手順はもう説明不要ですね（…ですよね？）

TileMapGreen いきましょう。

TileMapGreen

まず画面の外周をぐるっと木々で囲いたいと思います。いくつかの木のタイルをサイコロ振ってランダムに配置しましょうか。

あと木々の内側に草を生やしたいので、またいくつか草のパネルを選択してサイコロを振りつつ塗りますwww（いやどこで笑うねん）

ちなみに、外周にいろんな木を配置する作業はラインツールが便利でした。細く長くタイルを配置する時に使うと良さそうですね。

草木を生やして、こんな感じになりました。地面のタイルと重なっているのがわかるでしょうか？（ちょっとわかりにくいかも？）

ちなみに、雑草の塗りに失敗して、消しゴムツールで消したときに、下の TileMapGround ノードの地面タイルは消えないのです。これはもうクリスタとかGIMPに慣れている人には非常に良いと思います。

TileMapObject

最後に TileMapObject にはお墓を建てますね。お墓のタイルもいくつかあるので、また複数選択してサイコロ振りながら塗るとしましょう。

ピンポイントでポチポチタイルを配置する場合はペンツールが便利ですよ。絵の描き方でいうと点描するならコレ、って感じです。

立派なお墓が建ちました（立派かどうかしらんが）。

プロジェクトを実行する

シーンをまだ一度も保存していませんでした。。プロジェクトを実行して実際のゲーム画面を確認してみました。問題ないですね。これで完成です。え？どこかでみたことある絵ですって？ははあ、ご冗談を。

おわりに

今回は Godot 4.3 で登場した TileMapLayer クラスを使って基本的なタイルマップの作り方を確認しました。タイルマップの編集方法は、従来の TileMap ノードから大きく使い方が変わるわけではなさそうですね。従来の TileMap クラスだと、タイルマップ固有の情報としてレイヤーを設定できましたが、TileMapLayer を使うと、他のクラスのノードと同じように Scene ドックでノードを管理できて、直感的にとってもわかりやすくなったのではないかと思います。TileMap クラスが Deprecated なので、いずれにせよ、今後は TileMapLayer クラスの扱いに慣れるのが吉という感じがします。以上でございます。

参考

• Godot Docs: TileMapLayer