Split Audio Waveform sprite that it width is out of range in a Scroll Rect

Unity Engine
1

Hi! I’m new to Unity 3D and trying to split a texture2D sprite that contains an audio waveform in a Scroll Rect. The waveform comes from an audio source imported by the user and added to a scroll rect horizontally like a timeline. The script that creates the waveform works but the variable of the width (that came from another script, but this is not the problem) exceeds the limits of a Texture2D, only if I put manually a width less than 16000 the waveform appear but not to the maximum of the scroll rect. Usually, a song with 3-4min has a width of 55000-60000 width, and this can’t be rendered. I need to split that waveform texture2D sprite horizontally into multiple parts (or Childs) together and render them only when appearing on the screen. How can I do that? Thank you in advance.

This creates the Waveform Sprite, and should split the sprite into multiple sprites and put together horizontally, render them only when appear on the screen):

public void LoadWaveform(AudioClip clip)
    {
        Texture2D texwav = waveformSprite.GetWaveform(clip);
        Rect rect = new Rect(Vector2.zero, new Vector2(Realwidth, 180));

        waveformImage.sprite = Sprite.Create(texwav, rect, Vector2.zero);
        waveformImage.SetNativeSize();
    }

This creates the waveform from an audio clip (getting from the internet and modifying for my project) :

public class WaveformSprite : MonoBehaviour
{
    private int width = 16000; // This should be a variable that came from another script
    private int height = 180;
    public Color background = Color.black;
    public Color foreground = Color.yellow;

    private int samplesize;
    private float[] samples = null;
    private float[] waveform = null;
    private float arrowoffsetx;

    public Texture2D GetWaveform(AudioClip clip)
    {
        int halfheight = height / 2;
        float heightscale = (float)height * 0.75f;

        // get the sound data
        Texture2D tex = new Texture2D(width, height, TextureFormat.RGBA32, false);
        waveform = new float[width];

        var clipSamples = clip.samples;

        samplesize = clipSamples * clip.channels;
        samples = new float[samplesize];
        clip.GetData(samples, 0);

        int packsize = (samplesize / width);
        for (int w = 0; w < width; w++)
        {
            waveform[w] = Mathf.Abs(samples[w * packsize]);
        }

        // map the sound data to texture
        // 1 - clear
        for (int x = 0; x < width; x++)
        {
            for (int y = 0; y < height; y++)
            {
                tex.SetPixel(x, y, background);
            }
        }

        // 2 - plot
        for (int x = 0; x < width; x++)
        {
            for (int y = 0; y < waveform[x] * heightscale; y++)
            {
                tex.SetPixel(x, halfheight + y, foreground);
                tex.SetPixel(x, halfheight - y, foreground);
            }
        }

        tex.Apply();

        return tex;
    }
}
2

You just have to “chunk it” and change your API so it returns a series of sprites.

Depending on the overall final size, which affects how much memory will be required, you might need to also limit the total number of created textures and begin discarding ones that are offscreen.

The latter would imply some sort of paging API, and an awareness of which chunks are offscreen and can be discarded.

3

I have the same idea of how to proceed but I don’t know how to code it. Any code example to chunk the sprite and return a series of sprites? Thank you

4

No code lying around… every pager / chunker I’ve written is tightly bound into whatever game it is involved in, and as such it is covered with warts and minutiae.

If you make each chunk a fixed square size you can simplify a lot of the math: it’s just a series of squares placed adjacently.

I imagine a simple paging API to have things like;

  • query number of chunks
  • give me chunk X
  • release chunk X (This lets the chunker manage resources)

That’s where I would start… write the API and mock it out, then plug it into your scrollview. For squares outside of the visible rect, just have a blank tiny 32x32 sprite that you use repeatedly, because the user will never know.

5

Okey, I will try to find a way to split the sprite and continue with the rest things.