Hello,
as the title explains, I would like to use the godot engine (v4.3) play animation of a car staying still and when the next scene is selected, the animation would smoothly transition into it of the car driving in the spot.
Is there a way to firstly play the animation full screen and also have a smooth transition between the 2.
Apologies, I am still new to godot and have spent some time learning the basics of the engine. any advice guiding me would be brilliant.
I have seen the spine godot tutorial and that I will need the spine node, importing in the explained format.
Play and Smooth transition between 2 animations in godot
To achieve smooth transitions between animations in Godot using Spine, you can follow these steps:
Set Up Spine in Godot:
- Ensure you have the Spine Professional license to export your animations.
- Import your Spine animations into Godot using the Spine-Godot runtime. You can follow the Spine-Godot tutorial for detailed steps.
Play Animations:
- Use the
Spinenode in Godot to load and play your animations. You can set the initial animation (e.g., car staying still) using theset_animationmethod.
- Use the
Smooth Transition Between Animations:
- To transition smoothly between animations, you can use the
AnimationStateto crossfade between them. This involves setting the mix duration between the two animations. - Here is an example of how you can set up the transition in GDScript:
- To transition smoothly between animations, you can use the
extends Node2D
onready var spine_car = $SpineCar
func _ready():
# Set the initial animation
spine_car.animation_state.set_animation(0, "car_still", true)
func _on_next_scene_selected():
# Set the mix duration for smooth transition
spine_car.animation_state.data.set_mix("car_still", "car_driving", 0.5)
# Play the driving animation
spine_car.animation_state.set_animation(0, "car_driving", true)- Full-Screen Animation:
- To display the animation full screen, you can adjust the position and scale of the
Spinenode to fit the screen dimensions. You can use the following code to achieve this:
- To display the animation full screen, you can adjust the position and scale of the
func _ready():
# Set the initial animation
spine_car.animation_state.set_animation(0, "car_still", true)
# Adjust the position and scale to fit the screen
var screen_size = get_viewport().size
spine_car.position = screen_size / 2
spine_car.scale = Vector2(screen_size.x / spine_car.get_width(), screen_size.y / spine_car.get_height())By following these steps, you can play and smoothly transition between animations in Godot using Spine. Make sure to adjust the mix duration and animation names according to your specific animations.
Isekai_lover As Spinebot explained, when you set a new animation to an AnimationState, it will be mixed with the previous animation according to the set mix duration, allowing for a smooth transition.
If you have an animation for the size of a car in the Spine editor, you can smoothly make the car smaller by simply setting two animations: one that scales the bones to make the car appear larger, and one that scales the bones to make the car appear smaller.
Here's what it looks like when you simulate it in the Spine's Preview view:
However, if you want to change the size of the SpineSprite in Godot rather than the size of the skeleton in Spine, it would be better to look at how to change the scale of Node2D in Godot. (SpineSprite inherits from Node2D). The code that Spinebot presented is just a method for changing the scale, but if you write a method that gradually changes the scale value of the car's SpineSprite using a for loop or a while loop, and then call it at specific times, I think you should be able to achieve what you want.
Misaki
Hello again,
Sounds good to me, thank you for assisting me.