Phaser 4.2 is out, and the headline is a new rendering backend for Spine. This was a true joint effort: we built the new rendering APIs inside Phaser 4.2 that made it possible, and the team at Esoteric Software used them to rework their spine-phaser-v4 plugin, so that Spine content is now a first-class citizen inside Phaser. Our thanks to Playson, whose support made this collaboration possible.
How the New Phaser 4 Spine Renderer Works
Earlier versions of spine-phaser-v4 rendered through a separate backend called spine-webgl. Phaser and Spine each managed their own WebGL state, so every time rendering switched between them, Phaser had to finish its current batch, hand control to the Spine renderer, and then restore its state. When Spine and Phaser objects were interleaved in the display list, those handoffs broke batching and added extra draw calls.
The upgraded runtime renders Spine attachments through Phaser's new Mesh2D API by default. Compatible Spine and Phaser objects go through the same rendering system and batch together, removing the old renderer boundary and cutting draw calls. Skeletons now behave much more like native Phaser content.
The previous spine-webgl backend is still available for projects that need it. Just pass renderer: "spine-webgl" when creating the Spine object.
New Spine Features for Phaser 4: Slot Objects, Clipping and More
Rendering through Mesh2D brought several long-requested features:
- Slot objects. Attach any Phaser game object to a Spine slot. It follows the slot's bone transform and sits at the correct point in the skeleton's draw order, so you can drop Phaser text, sprites or a container straight into an animation.
- Clipping attachments. Thanks to Phaser 4.2's new stencil APIs, Spine clipping attachments now clip attached Phaser game objects too.
- Full Spine feature support, including mesh and weighted-mesh attachments, clipping, blend modes, premultiplied- and straight-alpha textures, and tint black.
The new backend ships in spine-phaser-v4 version 4.3.11 and requires Phaser 4.2.1 or newer. Full installation and API details are in the spine-phaser documentation.
What Else Is New in Phaser 4.2
The Spine work sits on top of a sizeable 4.2 release. Other highlights include:
- Mesh2D: a new game object that renders textured triangles and batches with regular sprites.
- Stencil APIs: the new Stencil and StencilReference game objects, which are universal, persistent, and can use anything that draws pixels as a stencil source.
- A second tint colour: TintModes.MULTIPLY_TWO and setTint2() for effects like fire or inversion.
- Cone lights: dynamic lights restricted to a directional cone, useful for flashlights, vision cones and headlights. Thanks to @FSDevelop for contributing this.
- New render config options for alpha strategy and stencil handling.
The 4.2.1 patch that followed fixed a handful of issues, including stencil invert behaviour, framebuffer stencil clearing, a couple of ESM build breakages, ScaleManager resizing and tween start delays. Thanks to everyone who contributed fixes and reports across both releases.
Download Phaser 4.2 and Try the New Spine Renderer
Available now on GitHub and npm.