mieki256's diary

Godot Enigneのエディタ画面に、エクスプローラ等から bgchip.png をドラッグアンドドロップしてインポート。



res://resources/ 以下に bgchip.png を移動した。



bgchip.pngを選択した状態でインポートタブをクリック。Filterのチェックを外して「再インポート」。

シーンを新規作成。シーン → 新規シーン。



「その他のノード」を選択。



「tile」と打ち込んで絞り込み検索。TileMapノードを選択して「作成」。



TileMapノードが追加された。

タイルマップ(TileMap)を使うには、タイルセット(TileSet)が必要になる。Tile Setプロパティの横の「空」をクリック。「新規 TileSet」を選択。



更に、TileSet と表示されている部分をクリック。



タイルセットを設定していくためのウインドウが、Godot Engine エディタ画面の下のほうに表示された。

タイルセットの設定をしていく。bgchip.png をドラッグアンドドロップして、タイルセットの画像リスト(?)の中に入れる。



タイルセットが使う画像として、bgchip.png を登録できた。今回使う画像は各タイルがビッシリと詰まっているので、右上のほうにある「新しいアトラス」をクリック。



どのタイルからどのタイルまでを使うのかを指定するけれど、グリッドにスナップさせながら作業したほうが楽なので、「スナップとグリッドの表示を有効にする」ボタンをクリック。有効になると青色で表示される。



左上から右下までドラッグして、使う範囲を指定する。



もし、タイルサイズが合わない時は、インスペクタウインドウ内の Step x,y を設定するといいかもしれない。今回は最初から (32, 32) が入ってた。

TileMapノードをクリックして選択すると、キャンバス上でタイルを並べていくモードになる。右のほうに使えるタイルの一覧が表示されているので、使いたいタイルをクリックしてからキャンバス上で並べていく。もしかすると、Cell → Size x,y を調整しないといけないかもしれない。今回は1タイルが 32 x 32ドットなので、Size x,y も (32, 32) にした。



上のほうに、鉛筆、バケツツール(塗り潰し)、セルを取得、選択範囲作成、のツールが並んでいるので、その都度切り替えつつタイルを並べていく。


ちなみに、鉛筆ツールは左クリックでタイル配置、右クリックでタイル消去になっている。また、Shift+左クリックで線を引いたり、Ctrl + Shift + 左クリックで長方形塗り潰しもできる。

それらしく配置した。

TileMapノードを BgTileMap にリネーム。



シーン → 名前を付けてシーンを保存。res://assets/ 以下に BgTileMap.tscn として保存する。

メインシーンに組み込む。Main.tscn を開いて、BgTileMap.tscn を子ノードにして Playerノードの上に位置するように配置。

F6キーを押して動作確認。


それらしい表示になった。

次回は…。スタートボタンをキーボード操作で押せるようにしたり、ゲームウインドウを最大化した際に表示も追随するように設定する予定。