Implement a live, scrolling waveform?

Phaser 3
1

Hi

I need to implement a waveform that scrolls away from a point that moves vertically up and down at one side. So possibly:

  • draw a point on a texture at the side where the “needle” is
  • on next frame, do the equivalent of a memcpy to shift the texture over one unit, discarding the last column
  • repeat

The problem is I don’t know how to do this, or a better solution, wth a texture in Phaser3. :slight_smile: Could somebody give me a nudge in the right direction?

Thanks in advance!

2

That sounds like a good baseline solution. It should be easy to implement with a canvas texture. You can use getImageData/putImageData of the canvas API to manipulate the pixels every frame.

As for better solutions… If you can easily restore the past data from the waveform (e.g. if you’re only drawing straight lines), it might be cheaper to recreate the entire texture than to copy pixels. This is probably the best alternative if copying pixels is too expensive for some reason.

An extreme solution would be to use a canvas texture on a scrolling tile sprite, then update the column of pixels that’s about to come on-screen, much like a retro console would handle scrolling. It’s quite overengineered, but it could work if you can’t think of anything else.

1 Like
3

Thanks, that’s exactly the info I was looking for. Some alternatives there to try as well, cheers!

1 Like