Phaser Mesh2D in spine-phaser-v4

July 14th, 2026

/img/blog/spine-phaser-v4/spine-phaser-v4.png

We're excited to announce a major upgrade to spine-phaser-v4!

Spine game objects are now first-class citizens in Phaser, boosting rendering performance and unlocking highly requested features like slot objects. Phaser game objects can now be attached to Spine slots and clipped by Spine clipping attachments.

This upgrade builds on Phaser 4.2, which introduced the Mesh2D API, new stencil APIs, and support for a second tint color. We collaborated with Richard Davey and Benjamin Richards from the Phaser team, who helped us navigate the new APIs and validate the runtime integration.

The new spine-phaser rendering backend

Earlier versions of spine-phaser-v4 rendered through the separate renderer provided by spine-webgl. Phaser and Spine each managed their own WebGL rendering state. Whenever rendering switched between Phaser content and Spine content, Phaser had to finish its current batch, hand control to the Spine renderer, and then restore its state before continuing.

Those repeated handoffs interrupted batching and introduced extra state changes and rendering work, especially when Spine and Phaser game objects were interleaved in the display list.

The upgraded runtime instead renders Spine attachments through Phaser's Mesh2D API by default. Compatible Spine and Phaser game objects can now be submitted through the same rendering system and batched together. This avoids the old renderer boundary and makes Spine skeletons behave more like native Phaser content.

Add or remove interleaved Phaser and Spine pairs to see how each backend affects the number of draw calls:

"phaser" backend
–draw calls
"spine-webgl" backend
–draw calls
1 pair

The previous spine-webgl backend remains available for projects that need it:

javascript
const spineObject = this.add.spine(400, 500, "skeleton-data", "skeleton-atlas", {
renderer: "spine-webgl"
});

Phaser game objects in Spine slots

The default Phaser backend also brings slot objects to spine-phaser-v4, similar to the feature available in spine-pixi.

Phaser game objects can be attached to a Spine slot:

javascript
const label = this.add.text(0, 0, "Ready!");
spineObject.addSlotObject("label-slot", label);

The attached object follows the slot's bone transform and appears at the correct place in the skeleton's draw order. It can be rendered before or after the slot attachment, follow attachment timelines, and be positioned locally with a Phaser container.

Thanks to Phaser 4.2's stencil APIs, Spine clipping attachments also clip attached Phaser game objects. This makes it easy to combine Spine animation with Phaser text, sprites, and other game objects.

The example below plays Spineboy's portal animation in slow motion. The Phaser logo is attached to the rear-foot slot and clipped by the portal's clipping attachment, whose boundary is shown in green.

The default Phaser backend supports all Spine features, including:

  • Mesh attachments and weighted meshes
  • Clipping attachments
  • Blend modes
  • Premultiplied-alpha and straight-alpha textures
  • Tint black

This upgrade is available in spine-phaser-v4 version 4.3.11 and requires Phaser 4.2.1 or newer. See the spine-phaser documentation for installation and API details, and explore the spine-phaser-v4 examples to see the renderer backends, slot objects, clipping, batching, and other features in action.

As always, if you need help, please post on the Spine forum. If you find a bug or would like to contribute, open an issue or pull request on the spine-runtimes GitHub repository.

Older