controlについての覚書です。
コントロールはユーザーインターフェースに使われます。
UI
シーンへの追加
UIのシーンを作成して、基準のシーンへ追加します。
基準のシーンとしてL012のEnemyA1を使用しています。
UIの追加
- 1UIシーンの作成
UIにあたるシーンを作成します。 - 2追加したい基準のシーンへ追加
シーンの追加 追加コード
#UIの設定 var UI = preload("res://UI/hud.tscn") ---------------------------------------------------- var addUI = UI.instantiate() add_child(addUI)
追加したシーンの操作
add_childで追加したHUDのシーン内にあるLabelのテキストをstageにします。
追加されたHUDシーンの子であるLabelを$$HUD/VBox/Labelで指定します。
プロパティであるtextを"stage"に書き換えます。
$HUD/VBox/Label.text = "stage"github
GitHub - WOCae/L012 at r5-1
Contribute to WOCae/L012 development by creating an account on GitHub.
github.com
Label
テキストを表示します。
RichTextLabel
BBCodeを用いて様々な表現が行えます。
RichTextLabelのBBCode
はじめに: Label nodes are great for displaying basic text, but they have limitations. If you want to change the color of the...
docs.godotengine.org
Godotのデモ rich_text_bbcode よりリッチテキストの例を確認します。
文字をゆらしたりできます。（Text effects）
bbcode_enabledにすると反映されます。
[pulse]Pulse[/pulse]
[wave]Wave[/wave]
[tornado]Tornado[/tornado]
[shake]Shake[/shake]
[fade start=75 length=7]Fade[/fade]
[rainbow]Rainbow[/rainbow]パラメーター付き
[pulse freq=1.0 color=#ffffff40 ease=-2.0]{text}[/pulse]
[wave amp=50.0 freq=5.0 connected=1]{text}[/wave]
[tornado radius=10.0 freq=1.0 connected=1]{text}[/tornado]
[shake rate=20.0 level=5 connected=1]{text}[/shake]
[fade start=4 length=14]{text}[/fade]
[rainbow freq=1.0 sat=0.8 val=0.8]{text}[/rainbow]tree
ツリー状のリストを作成します。
Godotのデモ「ControlGallery」を参照します。
@tool
extends Tree
# Called when the node enters the scene tree for the first time.
func _ready():
var root: TreeItem = create_item()
root.set_text(0, "Tree - Root")
var child1: TreeItem = create_item(root)
child1.set_text(0, "Tree - Child 1")
var child2: TreeItem = create_item(root)
child2.set_text(0, "Tree - Child 2")
var subchild1: TreeItem = create_item(child1)
subchild1.set_text(0, "Tree - Subchild 1")TextureProgressBar
ゲージを表示します。
画像をゲージに設定します。
barはunderとProgressに設定します。
枠のような形状はOverに設定します。
画像 bar
画像 bar w
（画像はPixeloramaで作成しました。）
作業
下記のスクリプトとmainにセットします。時間経過でゲージが減少するようにしています。
extends Node2D
var hp:float = 100
var maxhp:float = 100 # 最大HP
func _ready():
$"sample".max_value =maxhp
$"sample/Label".text = "Hp:" + str(hp)
func _process(delta):
#時間経過でhpを減らす
if hp >= 0:
hp -= delta
# HPバー更新
var hpbar:TextureProgressBar = $"sample"
var hpPer = _hpPer()
hpbar.value = maxhp * hpPer
# HPバー更新
hpbar.tint_progress = lerp(Color.YELLOW, Color.YELLOW, hpPer)
hpbar.tint_under = lerp(Color.RED, Color.RED, hpPer)
#hpbar.tint_over = lerp(Color.WHITE, Color.WHITE, hpPer)
$"sample/Label".text = "Hp:" +"%4.0f" % hp
if hp <= 0:
$"sample/Label".text = "Hp:0"
func _hpPer():
return 1.0 * hp / maxhp;
Godot 4 の lerp() 関数について
Lerp() 関数は、2 つの値の間を線形補間する関数です。つまり、2 つの値と補間率 (0 から 1 の範囲) を指定すると、その補間率に応じて 2 つの値の間の値を返します。
Godot 4 では、lerp() 関数は以下の 2 種類が用意されています。
- lerp(): 2 つの数値間の補間を行います。
- Vector2.lerp(): 2 つの Vector2 型の値間の補間を行います。
- Vector3.lerp(): 2 つの Vector3 型の値間の補間を行います。
lerp() 関数の使い方
lerp() 関数の使い方は以下の通りです。
GDScript
var value = lerp(start_value, end_value, amount)
value: 補間された値
start_value: 開始値end_value: 終了値amount: 補間率
github
GitHub - WOCae/L003
Contribute to WOCae/L003 development by creating an account on GitHub.
github.com
コメント