Standard Phaser rendering is fast. But when you need hundreds of thousands of animated sprites on screen at once, there's a better way. Phaser 4 introduces SpriteGPULayer, and it changes what's possible.
Every frame, standard Phaser 4 rendering computes each sprite's position, rotation, scale, and alpha on the CPU, then uploads the results to the GPU. For a few hundred sprites, that's fine. For tens of thousands, it starts to hurt. For hundreds of thousands, it simply won't work.
SpriteGPULayer bypasses this bottleneck entirely. Instead of uploading data every frame, it stores all rendering data in a static GPU buffer and renders everything in a single draw call. The GPU handles the animation. The CPU barely notices. If you want to understand how the new renderer works under the hood, check out Phaser 4 Renderer: Faster, Cleaner, and Built for Modern Games.
Why Standard Sprite Rendering Has a Performance Ceiling
The per-frame CPU upload is the main performance bottleneck in standard WebGL sprite rendering. Every sprite needs its transform computed on the CPU and pushed to the GPU each frame. This scales linearly: double the sprites, double the CPU work. At some point, no matter how powerful the device, you hit a wall.
SpriteGPULayer skips this entirely by keeping a static buffer on the GPU. Because it only updates the GPU buffer when data actually changes, it can handle a million or more sprites with the same performance cost as a few hundred. The trade-off is reduced runtime flexibility and 168 bytes of memory per member on both CPU and GPU. Coming from Phaser 3? See Migrating from Phaser 3 to Phaser 4: What You Need to Know for everything you need to update.
SpriteGPULayer Features: GPU-Driven Animation, Tinting and Parallax
Each member in a SpriteGPULayer supports a surprisingly rich feature set, all driven by the GPU without CPU involvement per frame:
Position, rotation, scale, and alpha, each individually animatable with a comprehensive set of GPU-computed easing functions including Linear, Gravity, Quad, Cubic, Sine, Bounce, and more, each with easeIn, easeOut, and easeInOut variants. Frame animation cycles through texture frames automatically. Per-vertex tinting with all Phaser 4 tint modes. Per-member scroll factor for parallax backgrounds. Per-member origin for pivot control. Non-looping animations for one-off effects.
The Gravity easing mode provides physics-style acceleration with configurable velocity and gravity factor. Particle-like effects without a particle system.
When to Use SpriteGPULayer
SpriteGPULayer is the right choice when you need to render a very large number of objects that follow relatively simple, predictable animation patterns. Complex animated backgrounds, particle-like effects, starfields, crowds, procedural environments, rain, snow, debris fields. Any scenario where you need far more sprites than standard rendering allows.
It is not the right choice for individual game characters that change behavior at runtime, objects that need complex per-frame logic, or scenes where you only have a few dozen sprites. The standard rendering path handles those perfectly well and is much more flexible.
SpriteGPULayer uses a single texture image, not a multi-atlas. For pixel art, use a power-of-two texture to avoid seaming. Modifying members is expensive. If you need to "remove" one, set its scaleX, scaleY, and alpha to 0 instead of removing it from the buffer.
TilemapGPULayer: The Same Principle for Tilemaps
Phaser 4 applies the same GPU-first thinking to tilemaps with TilemapGPULayer. It renders an entire tilemap layer as a single quad via a specialized shader, with a fixed rendering cost per pixel on screen regardless of how many tiles are visible. Zoom out to see 16 million tiles and it renders just as fast as when you're looking at 100. A major win for open-world games and large maps, especially on mobile.
Add the gpu flag to a Tilemap.createLayer() call and you get a TilemapGPULayer instead of a standard TilemapLayer. Maximum size: 4096 x 4096 tiles. Orthographic maps only.
Push the Limits of What Runs in a Browser
SpriteGPULayer and TilemapGPULayer are available now in Phaser 4. Check the docs for the full API, or explore everything else that's new in the latest release.