Help with 'hand' ui for deckbuilder

[inamortus]

Godot Version

Godot 4.2.1

Question

I only started Godot very recently, and I’ve been watching a lot of beginner tutorials etc.

Specifically I followed this one most recently as it’s exactly the sort of game I want to make: https://www.youtube.com/playlist?list=PL6SABXRSlpH8CD71L7zye311cp9R4JazJ

My issue is I’ve tried to replace the basic cards shown in the tutorial, which is just a panel, an icon and a cost label, with a proper card, with a card frame, a name, a type, art and card text. So I added the card frame as a TextureRect, changed out the icon for the art, and added labels for the CardName, Type and Description, and made sure to add these to my scripts wherever they were relevant. This is all on a CardUI scene.

The issue comes when the cards are instantiated in the Hand ui element on the battle scene, which is an HBoxContainer at the bottom of the screen. This worked perfectly fine for the simple cards previously, but I had an issue straight away where everything was scaled really strangely, which I fixed by putting the card’s visual nodes into a CanvasLayer in the CardUI scene. However, once I’d this the issue turned into one where it seems to stack all the cards on top of each other on the left side of the hand rather than side by side, and puts the collision boxes for them in the middle of the hand. I’m not entirely sure how to approach this as I’m not sure exactly what about what I’ve done caused this issue.

I assume it’s something fairly straight forward but I just don’t have the experience to figure it out yet, so any help would be great.

[herrspaten]

Can you give some screenshots and or code so its easier to understand the problem?

[inamortus]

Sure, here’s a screenshot of the hand script:

[inamortus]

And this is how the card_ui is set up, with the script:

class_name CardUI extends Control

#Card must be reparented from the Hand HBoxContainer so that it isn’t restricted
#to that area
signal reparent_requested(which_card_ui: CardUI)

const BASE_STYLEBOX := preload(“res://card_art_background.tres”)
const DRAG_STYLEBOX := preload(“res://card_dragging_stylebox.tres”)
const HOVER_STYLEBOX := preload(“res://card_hover_stylebox.tres”)

@export var card: Card : set = _set_card
@export var char_stats: CharacterStats : set = _set_char_stats

#Store the colour and state in an onready variable so that they can be changed
#when the card is interacted with
@onready var panel = $CanvasLayer/Panel
@onready var cost = $CanvasLayer/Cost
@onready var icon = $CanvasLayer/Icon
@onready var card_name = $CanvasLayer/CardName
@onready var card_type = $CanvasLayer/Type
@onready var card_text = $CanvasLayer/Description
@onready var drop_point_detector: Area2D = $DropPointDetector
@onready var card_state_machine: CardStateMachine = $CardStateMachine as CardStateMachine
@onready var targets: Array[Node] =

var original_index := 0
var parent: Control
var tween: Tween
var playable := true : set = _set_playable
var disabled := false

func _ready() → void:
Events.card_aim_started.connect(_on_card_drag_or_aiming_started)
Events.card_drag_started.connect(_on_card_drag_or_aiming_started)
Events.card_drag_ended.connect(_on_card_drag_or_aim_ended)
Events.card_aim_ended.connect(_on_card_drag_or_aim_ended)
card_state_machine.init(self)

func _input(event: InputEvent) → void:
card_state_machine.on_input(event)

func animate_to_position(new_position: Vector2, duration: float) → void:
tween = create_tween().set_trans(Tween.TRANS_CIRC).set_ease(Tween.EASE_OUT)
tween.tween_property(self, “global_position”, new_position, duration)

func play() → void:
if not card:
return

card.play(targets, char_stats)
queue_free()

func _on_gui_input(event: InputEvent) → void:
card_state_machine.on_gui_input(event)

func _on_mouse_entered() → void:
card_state_machine.on_mouse_entered()

func _on_mouse_exited() → void:
card_state_machine.on_mouse_exited()

func _set_card(value: Card) → void:
if not is_node_ready():
await ready
card = value
cost.text = str(card.cost)
icon.texture = card.icon

func _set_playable(value: bool) → void:
playable = value
if not playable:
cost.add_theme_color_override(“font_color”, Color.RED)
icon.modulate = Color(1, 1, 1, 0.5)
else:
cost.remove_theme_color_override(“font_color”)
icon.modulate = Color(1, 1, 1, 1)

func _set_char_stats(value: CharacterStats) → void:
char_stats = value
char_stats.stats_changed.connect(_on_char_stats_changed)

func _on_drop_point_detector_area_entered(area: Area2D):
if not targets.has(area):
targets.append(area)

func _on_drop_point_detector_area_exited(area: Area2D):
targets.erase(area)

func _on_card_drag_or_aiming_started(used_card: CardUI) → void:
if used_card == self:
return

disabled = true

func _on_card_drag_or_aim_ended(_card: CardUI) → void:
disabled = false
self.playable = char_stats.can_play_card(card)

func _on_char_stats_changed() → void:
self.playable = char_stats.can_play_card(card)

[herrspaten]

Okay the code seems fine, can you start the scene and show how it looks, and when you opened the scene, go to your scene tree and click on “remote”, then go through the scene tree until you open up your “Hand” and make a screenshot of that

[inamortus]

Thanks for your help with this, but I went back through the tutorial I used before from scratch and managed to make it work, though I’m not entirely sure what I actually changed to make it work.

I have another issue now though, more of a visual thing. No matter how I change about the font settings and such, the text on the cards always looks blurry and awful, and I can’t figure out what’s going on.

I’ve tried different fonts, changed the scale way down and the font size way up, and I just don’t know what the issue is.

[herrspaten]

But when you change the font it also changes in game or does it always stay the same?

[inamortus]

I have the font set in my main theme resource:

So I just import the font here and it updates all text to the new font.

[herrspaten]

So it gets updated but still looks bad?

[inamortus]

Yes, exactly, no matter the font and no matter how I scale/size the font in the label nodes.

[herrspaten]

Do you scale the label or any of its parents at any point?

[inamortus]

Not at the moment. This is the card ui scene:

And then it’s instantiated as a child of the Hand node in the Battle scene:

[herrspaten]

I can only suggest to find a fitting font or test around more with the font settings(label_settings-resource or other stuff)