mieki256's diary

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



res://resources/ 以下に画像を置いた。



bg02a.pngを選択した状態でインポートタブをクリック。Filter のチェックを外して無効にして「再インポート」。2Dゲームを作る時は、Filter のチェックを外しておいたほうが良い。


あ。しまった。このスクリーンショット、「再インポート」に丸をつけるのを忘れてるなあ…。「再インポート」をクリックしないと反映されないので注意。

Mainノードの下に Spriteノードを追加。このSpriteノードにBG画像の表示を担当してもらう。



分かりやすくするために、「Bg」にリネーム。



Playerノードの上にドラッグアンドドロップして移動する。これでプレイヤーの後ろに表示される状態になる。

Bgノード(Sprite)のテクスチャを指定。Textureプロパティの「空」の部分をクリック。「読込み」を選択。



res://resources/ の中にある bg02a.png を選択して「開く」。



BG画像が表示された。

BG画像の表示位置がずれてるので調整する。「Offset」の「Centered」のチェックを外すと、基準点が左上になってBG画像がゲーム画面を覆うような位置に表示される。


Centered にチェックを入れると基準点が画像の中央になる模様。チェックを外すと左上になる。基準点の位置をずらしたい時は Offset x,y の値を調整する。

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


背景画像(BG画像)が表示された。

これはこれでいいのだけど、せっかくの2Dゲームだから、タイルマップを使ってBG表示してみたい。次回は TileMap を使って同じことをしてみる。

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キーを押して動作確認。


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

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

ゲームを実行するとスタートボタンが表示されるけど、一々マウスクリックして先に進むのが面倒臭い。キーボード操作で押せるようにしたい。

HUDシーン(Hud.tscn)を開いて、StartButtonノードを選択。



Shortcutプロパティの右の「空」をクリック。「新規ShortCut」を選択。



「ShortCut」をクリックして、その下の「Shortcut」の「空」をクリック。「新規InputEventAction」を選択。



「InputEventAction」をクリックして、その下の「Action」に「ui_accept」と入力。


「ui_accept」には、プロジェクト設定でいくつかのキーが ―― デフォルトではEnterキーやSpaceキーが割り当てられてる。

これで、ゲーム実行直後、スタートボタンが表示されている状態で、EnterキーやSpaceキーを叩けば先に進むことができるようになった。

現状では、ゲームウインドウの最大化ボタンをクリックすると以下のような妙な表示になってしまう。


最大化した時はそれらしく表示してほしい。プロジェクト設定の Stretch設定を変更すれば対応できる。

プロジェクト設定を開く。上のほうのメニューから、プロジェクト → プロジェクト設定。Dispaly → Window → Stretch と辿り、Mode に viewport、Aspect に keep を指定して「閉じる」。



これで、最大化時に表示が追随してくれる状態になった。



次回は、林檎を取った時に「+10」みたいなエフェクト？を表示させてみたい。