Godot 4.3 中的卡片扇动问题

问题描述 投票:0回答:1

所以我目前正在关注这个视频教程https://www.youtube.com/watch?v=waVOR2ehpuU&t=739s关于如何使卡片扇动,但结果似乎并不像视频中那样正确。我首先创建一个名为 Hand 的 colorect 节点作为主场景的子节点。在这里,我预加载卡片场景,然后使用绘制函数将其实例垃圾邮件到主场景中。这些卡片显然只是保持在彼此之上,但我想将它们展开并像扇子一样弯曲它们。这就是我想要的结果:

enter image description here

我尝试使用以下函数来实现此目的,我在下面添加了注释来解释每行的作用:

func _update_cards() -> void:
 # Get the total number of cards
 var cards := get_child_count()

 # Calculate the total width needed for all cards with gaps
 var all_cards_size := Card.SIZE.x * cards + x_sep * (cards - 1)
 var final_x_sep = x_sep

 # If the total width exceeds the container then adjust the separation
 if all_cards_size > size.x:
    final_x_sep = (size.x - Card.SIZE.x * cards) / (cards - 1)
    all_cards_size = size.x

 # Calculate the offset to center the cards horizontally
 var offset := (size.x - all_cards_size) / 2

 # Iterate through each card
 for i in cards:
    var card := get_child(i)
    
    # Calculate vertical position and rotation multipliers using curves
    var y_multiplier := hand_curve.sample(1.0 / (cards-1) * i)
    var rot_multiplier := rotation_curve.sample(1.0 / (cards-1) * i)
    
    # If there is only one card then center it without rotation
    if cards == 1:
        y_multiplier = 0
        rot_multiplier = 0
    
    # Calculate the final X position for the card
    var final_x: float = offset + Card.SIZE.x * i + final_x_sep * i
    
    # Calculate the final Y position for the card
    var final_y: float = y_min + y_max * y_multiplier
    
    # Set the card position
    card.position = Vector2(final_x, final_y)
    
    # Set the card rotation
    card.rotation_degrees = max_rotation_degrees * rot_multiplier

Card.SIZE 在 Card 场景中确定:

    const SIZE := Vector2(323 * 0.5, 475 * 0.5)
    #I set it as Vector2(323 * 0.5, 475 * 0.5) because that's the size of the card, then 
    scaled to 0.5

我确定曲线并在代码外部设置旋转。我首先导出hand_curve和旋转曲线:

    @export var hand_curve: Curve
    @export var rotation_curve: Curve 

然后设置如下数字所示的点:

    #rotation_curve.tres
    [resource]
    min_value = -1.0
    _data = [Vector2(0, -1), 0.0, 2.19231, 0, 0, Vector2(0.5, 0), 0.0, 0.0, 0, 0, Vector2(1, 
    1), 2.41154, 0.0, 0, 0]
    point_count = 3

    #hand_curve.tres
    [resource]
    bake_resolution = 101
    _data = [Vector2(0, 0), 0.0, 2.43699, 0, 0, Vector2(0.2, 0.5), 2.70134, 2.70134, 0, 0, 
    Vector2(0.5, 1), 0.0, 0.0, 0, 0, Vector2(0.8, 0.5), -3.0, -3.26374, 0, 0, Vector2(1, 0), 
    -2.36703, 0.0, 0, 0]
    point_count = 5

enter image description here

手部曲线

enter image description here enter image description here

旋转曲线

enter image description here

我确实按照视频做的,但并不知道自己做错了什么,但结果却不是我所期望的。深红色的盒子是手的颜色,卡片应该放置在其中并且不能超出其最大宽度,但它不起作用:

enter image description here

出于调试原因,我还添加了绘制直线曲线的功能,因为我认为我的曲线不正确:

func _draw() -> void:
 if get_child_count() == 0:
    return

 var points: PackedVector2Array = PackedVector2Array()
 for card in get_children():
    points.append(card.position)

 if points.size() > 1:
    draw_polyline(points, Color.WHITE, 2.0, true)

这是我最大的问题。我的其他问题是不相关的,但是当我将卡的实例添加到主场景中时,当鼠标悬停在卡上时,我无法放大卡。在卡牌场景中效果很好。在卡片场景中,我使用以下代码制作鼠标悬停在其上方时放大的动画:

var default_scale = Vector2(0.5, 0.5)
var hover_scale = Vector2(0.6, 0.6)

signal card_hovered(card)
signal card_unhovered(card)

func _on_mouse_entered():
   print("Mouse entered")
   emit_signal("card_hovered", self)
   #This is connected to Area2D child of the card scene to determine when user hover the card
   _tween_scale(hover_scale)

func _on_mouse_exited():
   emit_signal("card_unhovered", self)
   _tween_scale(default_scale)
   #This is also connected to Area2D child

func _tween_scale(target_scale: Vector2):
    var tween = create_tween()
    tween.tween_property(self, "scale", target_scale, 0.1)  # 0.1 seconds for the transition

我知道这并不是因为任何过滤器重叠而阻止了鼠标,因为有时卡片仍然可以放大,但大多数时候它们不会,这非常令人沮丧。

我尝试提供尽可能多的信息。如果有不清楚或缺乏信息,请随时回复我。我会尽力尽快回复。

2d godot4
1个回答
0
投票

已修复。我在这个问题中列出的所有内容都与我的实际问题无关,所以我想没有必要给出答案。

© www.soinside.com 2019 - 2024. All rights reserved.