mieki256's diary

以下のようなノード構成にしてみた。本来なら綺麗なパワーゲージ画像を作成して配置するべきだけど、今回は仮表示ということで…。

• CanvasLayer 以下がバー表示用のノード。この手のUI用ノードは CanvasLayer の子ノードとして配置すれば扱いやすくなるらしい。
• ReferenceRect は、境界線だけを持ってる四角(矩形)。
• ColorRect は、色で塗り潰す四角(矩形)。
• 上記の構成では、枠の影、枠、バー、を配置している。

ReferenceRect については少し注意が必要。以下のような感じで指定したけど、Editor Only のチェックを外して無効にしておかないとゲーム画面に枠線/境界線が表示されない。逆に、Godotエディタ上でのみ表示したいならチェックを入れて有効化する。

• Border Color で境界線の色を指定。
• Border Width で境界線の線幅を指定。
• 大きさや位置は、Layout → Transform → Size / Position で指定。

以下のような見た目にした。

ルートノードにスクリプトをアタッチして、以下の内容を記述した。

_main.gd

extends Node3D

@export var powerbar: ColorRect
var powerbar_def_size: Vector2
var powerbar_def_pos: Vector2
var power_value: float = 0.0
var power_value_d: float = 0.0
var powerbar_mode: int = 0
var powerbar_timer: float = 0

# Called when the node enters the scene tree for the first time.
func _ready():
    powerbar_def_size = powerbar.size
    powerbar_def_pos = powerbar.position
    power_value = 0.0
    powerbar_mode = 0
    powerbar.hide()


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    
    match powerbar_mode:
        0:
            if Input.is_action_just_pressed("ui_accept"):
                # Push Space key
                power_value = 0.0
                power_value_d = 1
                powerbar_mode = 1
                powerbar.color = Color(1, 0.5, 0, 1)
                powerbar.show()
        1:
            power_value += (delta * power_value_d)
            if power_value >= 1.0:
                power_value = 1.0
                power_value_d = -1.0
            elif power_value <= 0.0:
                power_value = 0.0
                power_value_d = 1.0
                
            if Input.is_action_just_pressed("ui_accept"):
                # Push Space key
                powerbar_mode = 2
                powerbar_timer = 2.0  # set wait seconds
                powerbar.color = Color(1, 0.25, 0, 1)
        2:
            # wait
            powerbar_timer -= delta
            if powerbar_timer <= 0.0:
                powerbar.hide()
                powerbar_mode = 0
                
    powerbar.size.x = power_value * powerbar_def_size.x

スペースキーを1回押すと、パワー入力バーが伸び縮みを始めて、2回目を押すとパワーが決定される処理にしてみた。

• powerbar には、パワー入力バーとして使いたい ColorRect を指定しておく。
• _process(delta) の delta には、前回フレームからの経過時間が入ってくる。単位は秒。
• .hide() は非表示に、.show() は表示にする。

結果は以下。




それっぽくなったかな…。

以降は思考メモ。

有名なゴルフゲーム「みんなのゴルフ」では、基本的にはボタンを3回押すことでショットが打てるらしい。開発スタッフさん曰く「チャーシューメン」と称する操作方法/操作仕様だそうで…。

_【インタビュー】「CLAP HANZ GOLF」開発者インタビュー - GAME Watch

• 1回目のボタン押しで、バーが伸び始める。
• 2回目のボタン押しで、パワーが決定される。
• 3回目のボタン押しで、インパクト(?)とやらが決まる。インパクトは、ミスショットになるか否かのパラメータらしい。

ただ、「みんなのゴルフ」には、必ずインパクトを成功させるゴルフクラブが存在するそうで…。その場合、2回目のボタン押しでショットが打てる。

そこでふと閃いた。もしかして、インパクトを決める3回目のボタン押しは無くてもいいのかもしれないなと…。簡単操作にしたいなら、ミスショットは全然出ないほうがいいのでは…。まあ、「みんなのゴルフ」の場合、上達してくるとインパクトなんて当たり前のように成功させられるようになるから、わざわざ今更入力させる必要は無いだろう → 特殊なゴルフクラブをゲットして使うことでスキップできる仕様に変更できる、ということかもしれない。

加えて、パワーを決めるための最初のボタン押しも要らないような気もしてきた。ずっとパワーゲージが動き続けていてもいいんじゃないか。

昔のゲームはリアルタイム性を盛り込むことで、不確定要素を取得して、思い通りにいかない展開にしていったのだろうけど。今はもうそういう時代じゃないよな…。リアルタイム性は極力排除することで不確定要素を減らして、簡単にサクサクとプレイできるのが良い、とされているような気もする。もちろんジャンルによるとは思うけど。

となると、パワーゲージが常に画面の中で動き続けていて、そろそろ打つかと思ったら、適当なタイミングでボタンを押せばパワーだけが決定されてボールが飛んでいく、という仕様でも ―― ボタンを1回押すだけでショットが打てる感じでも良さそうだなと…。単にパワーだけをプレイヤーに決めてもらえばいいのではないか…？

できれば、そのパワー決定すらリアルタイム性を排除したい気もする…。ただ、素早く指定する方法がちょっと思いつかない。マウス等のポインティングデバイスを使っても良いならできそうだけど…。

「みんなのゴルフ」では、バーは右から左に向かって伸びる。何故だろう？

おそらく、プレイヤーキャラがゴルフクラブを振る際、右から左に向かって振り上げるので、その向きに合わせてあるのではないかなと。

あるいは、縦方向にバーが配置されるバージョンもある。プレイヤーキャラがゴルフクラブを振る時は、上に向かって振り上げてから下に向かって振り下ろすので、向きとしては縦方向のほうが合ってるのかもしれない。あるいは、力の大きさを伝える時に、横方向より縦方向で量を示したほうが分かりやすい可能性もあるなと…。

今回はプログラム的に簡単になるように、左から右に向かってバーが伸びるようにしてしまったけれど、分かりやすさというか、感覚的にしっくりくるかどうかを考えたら、別の向きで動かすのもアリだろうなと…。

でもまあ、どんな向き/形が適しているかの検討は、今後の宿題ということで…。