※この連載の全ての記事は、タグ「ビッグカツ」の検索一覧から探すことができます。
※この連載で作ったゲームは「BigBreakOut（ゲームの作り方の記事付き） | フリーゲーム投稿サイト GodotPlayer」でプレイできます。
昔から人気の駄菓子「ビッグカツ」のフリー素材画像が公開されたので、無料・軽快な 2D / 3D 用のゲームエンジン Godot Engine 4 を使って、ビッグカツ画像を使ったブロック崩しを作成します。
「ビッグカツブロック崩し」作成の第１０回では、ゲーム画面の背景の色を設定するために、単色の長方形を表示する ColorRect クラスのノードを作成して設定する手順を紹介します。
複数のノードがある場合に手前に表示されるノード、奥に表示されるノードの設定についても紹介します。
※ GodotEngine 4.3 を使用しています。.NET 版ではありません。
※スクリプトは自己責任でご使用ください。
前回の記事
前回は、ボールがぶつかったら消去されるブロックのシーンを作成して、それをステージに複数配置して、テストしました。
ColorRect とは
ColorRect クラスは単色の長方形を表示します。
単色でよい場合は、画像を表示する Sprite2D よりも簡単に、画像ファイルを設定しないで利用できます。
Displays a rectangle filled with a solid color. If you need to display the border alone, consider using a Panel instead.
単色で塗りつぶされた長方形を表示します。境界線を単独で表示する必要がある場合は、代わりにパネルの使用を検討してください。ColorRect — Godot Engine (4.x)の日本語のドキュメント と Google 翻訳
ColorRect ノードの追加と描画順序の調整
前回まで作ってきたブロック崩しのステージに背景色をつけるために、単色の長方形を表示できる ColorRect ノードを追加します。
※ stage タブを選択して、シーンドックの Stage ルートノードを右クリックすると表示されるメニュー「子ノードを追加」を選択します。
表示されたダイアログで ColorRect クラスを選択して「作成」ボタンを押します。
※検索ボックスを使うと探しやすいです。
作られた ColorRect ノードは、最初、シーンドックのツリーの一番下に追加されます。
このノードの順番は上側の方が奥の方に、下側の方が手前に表示されます。
この状態では、画面が単色の長方形に覆われて、壁・パドル・ボール・ブロックなどが隠れてしまいます。
そのため、追加された ColorRect ノードを Stage ルートノードの下側にドラッグ＆ドロップします。
ルートノードの下に青色の水平線が表示されたタイミングでドロップすると、Stage ルートノードの下に移動します。
2D ワークスペースで、ColorRect ノードのサイズを、周囲のオレンジ色の丸いハンドルをマウスドラッグして調整して、画面サイズと同じかそれより少し大きめの長方形になるように配置します。
インスペクタードックで Color プロパティの右側の枠をクリックすると、色を選択するダイアログが表示されるので、色を選択します。
カラーコードを使用する場合は、下側の Hex 項目に１６進数のカラーコードの値を入力すると便利です。
※例では green の #008000 を設定しました。
以上で、画面の背景色を設定できました。
まとめ
「ビッグカツブロック崩し」作成の第１０回では、ゲーム画面の背景の色を設定するために、単色の長方形を表示する ColorRect クラスのノードを作成して設定する手順を紹介しました。
複数のノードがある場合に手前に表示されるノード、奥に表示されるノードの設定についても紹介しました。
参照サイト Thank You!
- Godot Engine – Free and open source 2D and 3D game engine
- Xユーザーのビッグカツといか姿フライのすぐる【公式】さん: 「使いどころは思いつきませんが、フリー素材としてどうぞご自由にお使いくださいませ！ https://t.co/8F9q3hS02b」 / X
- しょかきうたげ【フリーフォント版あり】 – ぼんのう堂 – BOOTH
- ColorRect — Godot Engine (4.x)の日本語のドキュメント
- Sprite2D — Godot Engine (4.x)の日本語のドキュメント
- WEB色見本 原色大辞典 – HTMLカラーコード
記事一覧 → Compota-Soft-Press
コメント