Scale UI Elements

Help UI
,
1

Godot Version 4.4.1.stable

Im new to godot and im creating a card game using containers, for now im trying to make a list of cards (like aa inventory) and i want to scale down the cards so that when the user hovers over the card it scale up, but when i programmatically scale down the cards it doesnt work, i am doing something wrong?

Also, is there a way to make the increased scale not affect the grid distribution ?

Hierarchy:

image
image274×421 9.57 KB

Editor:

image
image1915×742 16.2 KB

Card properties:

image
image345×883 34.5 KB

Code:

@tool
extends Control
class_name CardsList

# Controls References
@onready var _scrollContainer: ScrollContainer = $ScrollContainer
@onready var _marginContainer: MarginContainer = $ScrollContainer/MarginContainer
@onready var _gridContainer: GridContainer = $ScrollContainer/MarginContainer/GridContainer

# Grid Properties
@export var grid_h_separation = 20
@export var grid_v_separation = 15
@export var columns_size = 3

# Margin Properties
@export var h_margin = 10
@export var v_margin = 10

@export_range(0, 1) var card_min_scale: float = 0.3

func _process(_delta) -> void:
	_gridContainer.columns = columns_size
	_gridContainer.add_theme_constant_override("h_separation", grid_h_separation)
	_gridContainer.add_theme_constant_override("v_separation", grid_v_separation)

	_marginContainer.add_theme_constant_override("margin_bottom", v_margin)
	_marginContainer.add_theme_constant_override("margin_bottom", v_margin)
	_marginContainer.add_theme_constant_override("margin_left", h_margin)
	_marginContainer.add_theme_constant_override("margin_right", h_margin)

	for selection in _gridContainer.get_children():
		selection.scale = Vector2(card_min_scale,card_min_scale)
2

you can’t scale the children of any type of containers, not even in a script, for making the animation when the mouse is over I think you can create a copy of the card outside the container and set it in the global position of the card and then you are able to scale it, use a tween to make the scale animation more smooth

1 Like