How to display a child image on hover

4.2

Hi there!
I’m a beginner dev making a 2D board game. I’ve been following a tutorial but want to do soemthing different and can’t find an example anywhere on YT. I have a main scene with a board, and a child scene called ‘card’ with a sprite2D child node called ‘cardimage’.

I would like to setup a feature where on hover, the cardimage gets displayed to the right of the board (scaled up 3x) so the player can read the effect on the card.

I already have written code for manipulating the card on hover using raycasting. How can I ‘pick up’ the cardimage node and repeat it in a fixed position by the board?

Thank you so much! :heart:



And here’s the code for my card manager:

extends Node2D

const COLLISION_MASK_CARD = 1

var screen_size
var card_being_dragged
var is_hovering_on_card

func _ready() -> void:
	screen_size = get_viewport_rect().size

func _process(delta: float) -> void:
	if card_being_dragged:
		var mouse_pos = get_global_mouse_position()
		card_being_dragged.position = Vector2(clamp(mouse_pos.x, 70, 980), 
			clamp(mouse_pos.y, 105, 1383))

func _input(event):
	if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_LEFT:
		if event.pressed:
			var card = raycast_check_for_card()
			if card:
				start_drag(card)
		else:
			finish_drag()

func start_drag(card):
	card.get_parent().move_child(card, -1)
	card_being_dragged = card 
	card.scale = Vector2(1,1)


func finish_drag():
	card_being_dragged.scale = Vector2(1.05,1.05)
	card_being_dragged = null
	

func connect_card_signals(card):
	card.connect("hovered", on_hovered_over_card)
	card.connect("hovered_off", on_hovered_off_card)
	
func on_hovered_over_card(card):
	if !card_being_dragged:
		highlight_card(card, true)
		var new_card_hovered = raycast_check_for_card()
		if new_card_hovered:
			highlight_card(new_card_hovered, true)
		else:
			is_hovering_on_card=false

func on_hovered_off_card(card):
	is_hovering_on_card=false
	highlight_card(card, false)

func highlight_card(card, hovered):
	if hovered:
		card.scale = Vector2(1.05,1.05)
		card.z_index = 2
	else:
		card.scale = Vector2(1,1)
		card.z_index = 1


func raycast_check_for_card():
	var space_state = get_world_2d().direct_space_state
	var parameters = PhysicsPointQueryParameters2D.new()
	parameters.position = get_global_mouse_position()
	parameters.collide_with_areas = true
	parameters.collision_mask = COLLISION_MASK_CARD
	var result = space_state.intersect_point(parameters)
	if result.size() > 0:
		return get_card_with_highest_z_index(result)
	return null

func get_card_with_highest_z_index(cards):
		var highest_z_card = cards[0].collider.get_parent()
		var highest_z_index = highest_z_card.z_index
		
		for i in range(1, cards.size()):
			var current_card = cards[i].collider.get_parent()
			if current_card.z_index > highest_z_index:
				highest_z_card = current_card
				highest_z_index = current_card.z_index
		return highest_z_card

If you don’t need anything other than the image to display, then what I would do is add a new Sprite2D node in your main scene called “CardInfo” (or something like that) that is located on the right side of the board. Leave CardInfo’s texture as <empty> - you can adjust the scale of this node to suit your needs if you want it enlarged. Now you can add code to your card script:

func highlight_card(card, hovered):
	var card_info: Sprite2D = get_node("/root/Main/CardInfo")
	var card_texture: Texture2D = card.get_node("cardimage").texture
	if hovered:
		card.scale = Vector2(1.05,1.05)
		card.z_index = 2
		card_info.texture = card_texture
	else:
		card.scale = Vector2(1,1)
		card.z_index = 1
		if (card_info.texture == card_texture):
			card_info.texture = null

This will set the CardInfo’s texture to the same as the hovered card. The conditional check for card_info.texture == $cardimage.texture is likely necessary so you don’t have a situation that hide’s the texture when you hover onto another card before the previous card hovers off.

Withersail, I salute you ser, thankyou for your time and help! I will try this when I get home.

Appreciate you! :heart:

Worked a charm. So simple. Thankyou!