Animated Sprite Shape Profile

Unity Engine
,
1

I am developing a 2D platformer that takes heavy inpiration from Rayman Origins, and I had the idea of using a Sprite Shape to create some waterfalls that would flow on some rocks in the background of my levels (so no need for colliders or anything). Of course a waterfall needs to be animated and I was wondering if there is a way to make that happen, I don’t think there’s a way to make a Sprite Shape Profile animated, the only thing I could think of was to change the Sprite Shape Profile assigned to the Sprite Shape controller each 5 frames or so to simulate animation but I’m pretty sure that’s not a viable option due to how heavy it would be on performance.
Is there another way I can’t think of? Maybe having multiple children with a different profile (with a different animation frame basically) and only activate one at a time through the animation timeline? Anyone has a better idea?

2

One option would be to create a scrolling shader. I believe this is similar to what Rayman (and a lot of other games) do to create a flowing water effect.

Something like this: https://m.youtube.com/watch?v=OEFJQ1cB6IQ

1 Like
3

I haven’t thought about it, probably because I don’t usually delve into shaders that much, but this could be very useful for water, lava, all sorts of things.
Thank you!

1 Like
4

Animating Sprite Shapes for Waterfalls in a 2D Platformer

Understanding the Challenge:

  • Performance: Animating Sprite Shape Profiles frame-by-frame can be computationally expensive.
  • Complexity: Managing multiple child Sprite Shapes and their activation can be complex.

Proposed Solution: Texture Animation

A more efficient and effective approach is to use texture animation. This involves creating a single texture that contains multiple frames of the waterfall animation. Then, you can use the UV coordinates of the Sprite Shape to cycle through these frames.

Steps:

  1. Create a Texture Atlas:
  • Design or find a texture that contains multiple frames of your waterfall animation.
  • Ensure that the frames are arranged in a grid-like pattern.
  1. Set Up the Sprite Shape:
  • Create a Sprite Shape in your scene.
  • Assign the texture atlas to the Sprite Shape’s Material.
  1. Animate UV Coordinates:
  • Use a script to dynamically update the UV coordinates of the Sprite Shape’s Material.
  • This will effectively cycle through the frames of the waterfall animation.

Example Script:

`C#using UnityEngine;

public class WaterfallAnimator : MonoBehaviour
{
public Material waterfallMaterial;
public float animationSpeed = 1.0f; // Adjust as needed

private Vector2[] uvCoords;
private int frameIndex = 0;

void Start()
{
    // Assuming a 4x4 grid of frames
    int numFrames = 16;
    uvCoords = new Vector2[4];

    float frameWidth = 1.0f / 4.0f;
    float frameHeight = 1.0f / 4.0f;

    for (int i = 0; i < 4; i++)
    {
        uvCoords[i] = new Vector2(frameWidth * (frameIndex % 4), frameHeight * (frameIndex / 4));
    }

    waterfallMaterial.SetUVs("_MainTex", uvCoords);
}

void Update()
{
    frameIndex += (int)(animationSpeed * Time.deltaTime);
    if (frameIndex >= 16)
    {
        frameIndex = 0;
    }

    uvCoords[0].x = frameWidth * (frameIndex % 4);
    uvCoords[1].x = frameWidth * ((frameIndex + 1) % 4);
    uvCoords[2].x = frameWidth * ((frameIndex + 1) % 4);
    uvCoords[3].x = frameWidth * (frameIndex % 4);

    waterfallMaterial.SetUVs("_MainTex", uvCoords);
}

}`

Use code with caution.

Additional Considerations:

1 Like
5

This also seems like a great solution, but way more complicated than the previous one. It is still valid if one would like to have a more “classic animation” feel to the waterfall.