ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
2023/4/4リリースのGodot_v4.0.2-stable_win64を使用しています。
目的
ゲーム中の情報を２Dで表示する画面を追加していきます。
ベースプロジェクト
下記の記事を通して作成したプロジェクトをベースにしています。
github(Godotのプロジェクトマネージャーからインポートして利用できます）
目的
エネルギーバーを追加します。
ゲーム中の情報の表示について
ゲーム中の情報の表示はスコア、何かしらの量を表示するためのバーなどありますが、２Ｄで表示したいものがあると思います。
２Ｄで表示したい情報については、CanvasItemを継承したノード(Node2DやControlの派生クラスがたくさんあります）を追加して、そのノードに描画を行います。
描画位置/サイズはピクセル位置で指定します。
描画サイズはプロジェクト設定の表示/ウインドウのビューポートの幅と高さになります。
ビューポートの幅がX軸方向で、高さがY軸方向です。
左上がx=0,y=0で、右がXプラス、下がyプラスになります。
表示するゲームパラメータを実装する
エネルギーバーに表示するゲームパラメータを追加します。
画面タッチしっぱなしにするとBulletを発射しますが、Bulletを発射するたびにエネルギーがたまる変数を追加します。
複数のシーンのスクリプト(Player.gdとこれから追加するHUD.gd)からアクセスしたいので、シングルトン(自動読み込み）スクリプトを生成して変数を定義します。
グローバル変数を定義するスクリプトを作成します。
ファイルシステムのresを右クリックして新規＞スクリプトを実行します。
global_variable.gdという名前で保存します。
res://global_variable.gdが作成されました。
エネルギー量を管理するためのスクリプトを実装する
res://global_variable.gdを開いて下記のように修正します。
extends Node
# パラメータ
@export var m_d_energy_max : float = 100.0
@export var m_d_energy_min : float = 0.0
@export var m_d_energy_add : float = 5.0 # Bullet発射間隔が1秒の場合、20秒で100になる計算
# グローバル変数
var m_d_energy : float = 0.0
func increase_energy():
m_d_energy = clampf(
m_d_energy + m_d_energy_add,
m_d_energy_min,
m_d_energy_max
)
m_d_energyが現在のエネルギー量を表すグローバル変数です。
最大/最小値を定義します。０～１００までにしました。また1回に追加する量をm_d_energy_addとして定義します。
@exportしてインスペクタから変更できるようにしています。
最後にエネルギを蓄積するAPIをincrease_energy()という名前で追加しました。
エネルギーを増加した後の値をclampf()関数で０以下の場合は０に、100以上の場合は100になるようにクランプします（リミットする、制限するなどと同じ意味です）。
シングルトン（自動読み込み）スクリプトして登録する
次に実装したスクリプトをシングルトン（自動読み込み）スクリプトとして登録します。
プロジェクトメニューのプロジェクト設定を開いて、「Autoload」タブを選択します。
パスに先ほど作成したres://global_variable.gdを設定します。ノード名が自動で入力されるので確認後「追加」ボタンを押下します。
追加されました。「グローバル変数」にチェックがついていることを確認してください。
チェックがついていると、名前「GlobalVariable」でどのスクリプトからもアクセスできるようになります。
PlayerからBulletが発射されるとエネルギーをためるようにします。
res://Characters/Player.gdを開きます。
_on_timer_fire_timeout()がBullet発射処理なので、最後にエネルギーをためるメソッドを実行します。
func _on_timer_fire_timeout():
# スマホタッチ中の場合、発射する
if m_f_is_screen_touch:
var scn_bullet = m_scn_bullet.instantiate()
scn_bullet.transform.origin = $Marker3D.global_transform.origin
add_sibling(scn_bullet)
# エネルギーをためる
GlobalVariable.increase_energy()
エネルギーバーを描画する位置を決める
エネルギーバーを描画する位置は直接ピクセルで指定してもよいのですが、エディター上で位置とサイズを確認したいので、Controlを配置して位置を指定しました。
HUD描画領域全体を定義します。
res://game_system.tscnを開きます。
ルートノードのGameSystemを右クリックして、子ノードを追加からControlを追加します。
「HUD」（Head Up Display）に名称を変更します。
HUDを画面全体（プロジェクト設定の表示＞ウインドウのビューポートの幅と高さ）と同じサイズにします。
HUDを選択した状態でインスペクタのControl/Layoutを開いて、さらのTransformを開いて、Sizeをx=500px、y=900pxにします。
中央の２Ｄ表示エリアの画面サイズを表す青い長方形と同じ大きさのＨＵＤの長方形が描画されます。
エネルギーバー描画領域用Controlを配置します
HUDを右クリックして、子ノードを追加からControlを追加します。
名称をEnergyBarに変更します。
EnergyBarを選択した状態でインスペクタのControl/Layoutを開いて、さらのTransformを開いて、Sizeをx=450px、y=20pxにします。Positionのx=25px、y=870pxにします。
HUDとEnergyBarをControlにしたのは、同時に選択すると２Dビュー上で位置・サイズ関係を確認することができるためです。描画はHUDのCanvasItemに対して実行しているので、EnergyBarは位置・サイズを取得するためだけに使用しています。あとでLabelを追加する時にはControlの機能を利用しています。
EnergyBarを描画します
エネルギー割合取得用のAPIを追加
res://global_variable.gdを開いて、エネルギー割合取得用のAPIを追加します。
エネルギーのたまり具合を％（0.0が0%、1.0が100%)で取得するようにしました。「->float」でリターン値がfloat型であることを指定しています。
func get_energy_percent() ->float:
return m_d_energy / m_d_energy_max
HUDにスクリプトを生成する
HUDを右クリックしてスクリプトをアタッチします。そのままHUD.gdと名前で保存します。
下記のように修正します。
extends Control
func _process(delta):
# Godotエンジンに描画更新を依頼する(_drawメソッド起動を依頼する）
queue_redraw()
func _draw():
# EnergyBarのサイズ（と使わないけど左上位置）を取得する
var r : Rect2 = $EnergyBar.get_global_rect()
# エネルギーバーの背景を黒で描画する
draw_rect(r, Color.BLACK, true, -1)
# エネルギーバーの描画領域は1ピクセルずつ小さくする
var er = r;
er.size -= Vector2(2, 2) # サイズは上下左右一回り小さくする
er.position += Vector2(1, 1) # 1ピクセルずつ右下に移動する
# エネルギーの蓄積割合に従い長さを決めて黄色のバーで描画する。
er.size.x *= GlobalVariable.get_energy_percent() # 0.0～1.0の間
draw_rect(er, Color.YELLOW, true, -1)
_drawメソッドは1回しか起動されないため、更新したい場合queue_redraw()でGodotエンジンに描画を依頼する必要があります。
今回は毎周期更新依頼をするようにしました。
「var r : Rect2 = \$EnergyBar.get_global_rect()」で先ほど２Dビューの中で配置したEnergyBarの位置とサイズをRect2型で取得しています。「var r : Rect2」のように型を指定すると、エディターのコード補完ができるので便利ですね。（var r = $EnergyBar.get_global_rect()でも動作上は問題ありません）
draw_rect(er, Color.YELLOW, true, -1)で長方形を描画します。第3引数をtrueにすると長方形の中を塗りつぶします。ちなみにfalseにすると枠のみ描画になって、第4引数で枠の太さを指定できるみたいですね。
実行します。画面の下の方にエネルギーバーが表示されます。発射するたびに黄色のバーが伸びて、20回発射すると一番右まで黄色のバーが伸びます。
エネルギーのたまり具合を数値で表示する
エネルギーのたまり具合を文字で表示しましょう。位置はエネルギーバーの中央にしたいと思うので、Controlノードのアンカーを使います。
labelを追加する
res://game_system.tscnを開きます
EnergyBarを右クリックして、子ノードを追加からLabelを追加します。
「EnergyPercent」に名称変更します。
Controlのアンカーを使ってLabelの位置をエネルギーバーの中央にする
画面上部の「2D」をクリックします。
EnergyPercentを選択した状態で、ビューの右にある丸の中に十字があるアイコンをクリックして、中央を選択します。
下図のようにEnergyPercentがエネルギーバーの中央に移動しました。
Controlのアンカー(Anchors)機能を使用すると、親Controlに対する子ノードの位置を中央とか右、左など設定できます。ざっくり位置を決めたいときは便利ですね。
文字色を変更する
黄色背景の白文字では見にくいので、文字色をグレーに変更します。
EnergyPercentを選択した状態で、インスペクタのLabel/Label Settingsの右の＜空＞をクリックして、「新規LabelSettings」を選択します。
追加されたLabelSettingsをクリックして詳細を開き、さらにFontを開きます。
Colorの右の白い長方形をクリックするとカラーピッカーが表示されるので、グレーに変更します。
(R,G,B)=(80,80,80)にしました。
Labelの文字列を更新する
res://HUD.gdを開いて、_draw()の最後に、エネルギーのたまり具体を文字列として設定する処置を追加します。
extends Control
func _process(delta):
# Godotエンジンに描画更新を依頼する(_drawメソッド起動を依頼する）
queue_redraw()
func _draw():
# EnergyBarのサイズ（と使わないけど左上位置）を取得する
var r : Rect2 = $EnergyBar.get_global_rect()
# エネルギーバーの背景を黒で描画する
draw_rect(r, Color.BLACK, true, -1)
# エネルギーバーの描画領域は1ピクセルずつ小さくする
var er = r;
er.size -= Vector2(2, 2) # サイズは上下左右一回り小さくする
er.position += Vector2(1, 1) # 1ピクセルずつ右下に移動する
# エネルギーの蓄積割合に従い長さを決めて黄色のバーで描画する。
er.size.x *= GlobalVariable.get_energy_percent() # 0.0～1.0の間
draw_rect(er, Color.YELLOW, true, -1)
# エネルギーのたまり具体を％（0.0%～100.0%で表示する）
$EnergyBar/EnergyPercent.text = "%.1f%%" % ( GlobalVariable.get_energy_percent() * 100.0 )
GlobalVariable.get_energy_percent()の0.0～1.0が0%～100%に対応するため100倍します。
フォーマット文字列ではfloatの値を表示するので%fで受けます。小数点第1位まで表示するので「%.1f」としています。
最後に「％」を文字として表示したいのですが、GDScript format stringsの中で「%」はプレイスホルダーとしての特別な機能を持つため、文字として表示するために%%と2回繰り返します。
GDScript format strings
https://docs.godotengine.org/en/latest/tutorials/scripting/gdscript/gdscript_format_string.html#doc-gdscript-printf
実行します。
以上