Table of Contents

Using Easing Functions: Animating Position and Material Color

Easing functions are used in animations to create smooth transitions between values over a specified time. In this tutorial, we'll explore how to use easing functions not only to move a 3D object but also to interpolate its material color. This will allow us to create animations that blend both movement and visual effects.

What You'll Learn

  • How to create a 3D primitive (cube).
  • How to implement easing functions for smooth transitions in animations.
  • How to animate the movement of a 3D object using easing functions.
  • How to interpolate and change the material color of a 3D object dynamically.

Code Walkthrough

using Stride.CommunityToolkit.Bullet;
using Stride.CommunityToolkit.Engine;
using Stride.CommunityToolkit.Mathematics;
using Stride.CommunityToolkit.Rendering.ProceduralModels;
using Stride.Core.Mathematics;
using Stride.Engine;
using Stride.Games;
using Stride.Input;
using Stride.Rendering.Materials;

// Time elapsed since the start of the animation
var elapsed = TimeSpan.Zero;

// Duration of the animation (2 seconds)
var duration = TimeSpan.FromSeconds(2);

// Target position (where the object will ease to)
var bottom = new Vector3(0, 2, 0);

// Starting position of the object
var startPosition = new Vector3(0, 8, 0);

// 3D entity to be animated
var entity = new Entity();

// Color to interpolate to, initilized to white
Color color = Color.White;

// Initialize a new game instance
using var game = new Game();

// Run the game, specifying both the Start and Update methods
game.Run(start: Start, update: Update);

// Setup and initialize the scene
void Start(Scene scene)
{
    // Set up a base 3D scene with default lighting and camera
    game.SetupBase3DScene();

    // Create a 3D sphere primitive and assign the material to it
    entity = game.Create3DPrimitive(PrimitiveModelType.Sphere, new()
    {
        Material = game.CreateMaterial(Color.White)
    });

    // Add the sphere entity to the root scene
    entity.Scene = scene;

    var random = new Random();

    // Generate a random color to interpolate to
    color = random.NextColor();
}

// Update the scene every frame (for animations and input handling)
void Update(Scene scene, GameTime time)
{
    // Calculate the progress of the animation as a ratio between 0 and 1
    var progress = (float)(elapsed.TotalSeconds / duration.TotalSeconds);

    if (progress > 1.0f)
    {
        progress = 1.0f;
    }

    // Interpolate the position of the object using a quintic easing function
    var position = MathUtilEx.Interpolate(startPosition, bottom, progress, EasingFunction.QuinticEaseOut);

    Console.WriteLine(position);

    // Apply the new position to the entity
    entity.Transform.Position = position;

    // Interpolate the color using a linear easing function
    var diffuse = MathUtilEx.Interpolate(Color.White, color, progress, EasingFunction.Linear);

    // Apply the interpolated color to the material
    entity.Get<ModelComponent>().SetMaterialParameter(MaterialKeys.DiffuseValue, diffuse);

    // Update the elapsed time with the time since the last frame
    elapsed += time.Elapsed;

    // Reset the animation when the spacebar is pressed
    if (game.Input.IsKeyPressed(Keys.Space))
    {
        elapsed = TimeSpan.Zero;
    }
}

Code Breakdown

  • Position Animation: The MathUtilEx.Interpolate method is used with a quintic easing function to smoothly transition the sphere's position from its start to its end position.
  • Material Color Animation: The same interpolation approach is applied to change the color of the sphere’s material. A linear easing function is used to gradually change the color from white to a randomly generated color.
  • Resetting the Animation: The animation is reset each time the spacebar is pressed, allowing the movement and color transition to start over.

Running the Code

When you run the code, you'll see a 3D sphere smoothly moving from the starting position (8 units above the ground) to the bottom (2 units above the ground) over a duration of 2 seconds. At the same time, the sphere’s material color will gradually change from white to a randomly generated color. You can press the spacebar to reset the animation and see the sphere rise back to the top while its color returns to white.

Summary

In this tutorial, you learned how to animate both the position and material color of a 3D object using easing functions. This technique allows you to create smooth and visually appealing transitions, which are essential for creating polished game experiences.

Edit this page