I’m working on a Tetris/Bejeweled-type puzzle game in Phaser3 and I want to add a background effect.
At the moment I just have clouds scrolling from left to right, see here. This looks nice and it has good performance. But I want to change the background or some elements when the player levels up, so that there is some sense of progression. So about 8 or 10 different backgrounds or themes or colors. Just changing the clouds colors doesn’t really make sense. Also, ideally the effect should not be too CPU intensive so that it also runs smoothly on slower devices and phones .
I really like the looped backgrounds in Tetris The Grand Master but that requires rendering and loading large 3D images or videos. So I was thinking maybe a kaleidoscope effect like this and then change the colors or patterns for every level. This could be done using shaders (examples here and here) but AFAIK that isn’t visible for players if they have WEBGL diabled, is that correct?
When you click ‘Force Canvas’ or edit the shader example to use canvas instead of WebGL, the kaleidoscope shader effect doesn’t show. So it seems WebGL is required.
I’m sure something similar could be made in Phaser3, but you’d have to watch the performance - in some cases exporting and converting the frames to a spritesheet might be faster than actually running the programmed animations in real time. However, running it in real-time would allow it to be interactive, maybe to change speed or colors when certain game events were triggered.
Those geometric effects look really cool, thanks for the link I’ll take a look at the blitter object, because I think they are specifically created for these kinds of effects. Although I don’t see any kaleidoscope effect in the Phaser3 examples page.
I’ll take a look at the