Based purely on the title this may sound like another beta of Phaser v4, but under the hood this is a truly exciting release! Yes, Beta 5 mostly focuses on fixing issues that surfaced in Beta 4, but it also introduces the final piece of the Phaser Beam jigsaw: The brand new Sprite GPU Layer Game Object.
What's so special about this Game Object? How about the fact it can easily handle 1+ million animated sprites fully on the GPU? Fancy seeing it in action? Of course you do, but make sure to come back here to carry on reading!
You can run the Big Forest demo in our Phaser Sandbox. In Big Forest all 1.4 million sprites are animated entirely on the GPU. Watch carefully and you'll see the smooth dusk-cycle kick in, the trees bend in the wind, the pollen blow around and it all smoothly parallax scroll.
The demo, and indeed all demos in this article, are set for 1280x720 resolution, so be sure to click the 'full screen' icon in the bottom-right of the sandbox to see them truly in action.
This new Game Object is purpose designed for ultra-high performance in background layers. Leverage the power of the GPU to render a hundred times faster than conventional sprites. Why do we say 'background' layers? Because these sprites live only on the GPU, so you cannot interact with them in the way you can a regular sprite. For example, you can't click on them, or give them physics. But that doesn't mean they have to be static!
Feel like another demo? How about showing Sprite GPU Layer working together with our new lighting system? Move the mouse around to inspect those creepy crawlies ...
Run the Creepy Crawly Demo in Phaser Sandbox.
The Sprite GPU Layer has built-in features to allow you to use tween-like configs, per sprite, to bring these 'static' layers to life. You can animate them, change their alpha, scale, tint, scroll fator, origin and position, using a variety of built-in ease effects, amplitude, yoyo, delay and durations.
This allows for behaviors like animated characters, crowds of moving people, trees swaying in the wind, fading smoke rising from chimneys, raindrops falling, and many more. Just like our next demo 😀
Run the Animated Sprites Demo in this Phaser Sandbox.
Sprite GPU Layer packs these object definitions onto the GPU, and renders them using a custom vertex shader. This skips all CPU computation and GPU upload operations, resulting in vastly increased performance. For objects that don't need to be updated by input, physics, or other interactive behaviors, this is a great solution. The shader supports a single texture, which can be a texture atlas, and supports sprite animations. These object definitions are similar to Sprite objects, where each property can be constant or set to follow an animation loop similar to tweens.
In testing we've easily managed to blast millions of sprites around on moderate desktop-grade GPUs. Indeed, we hit the fillrate limitation of the GPU far sooner than we hit any other type of limitation. Once you've started filling millions of pixels over and over, there's only so much more you can handle. The issue is no longer quantity of quads, but quantity of pixels. Here's our final demo for now:
Let's all Do the Bunny Hop in this Phaser Sandbox.
As you can see, this is exciting stuff and a very powerful tool to have in your arsenal.
If you'd like to experiment with Phaser v4 Beta 5 you can download it now from npm and GitHub, or use it in our Phaser Sandbox.
npm install phaser@betaPlease be sure to drop by our increasingly active phaser4-beta channel in our Discord, where community members have been showing off some lovely looking filter demos recently - and now we can't wait to see what they do with Sprite GPU Layers! We're still on target for a February release of the final version of Phaser 4. Things are about to get really exciting 🚀