Exploding sprites with Phaser and Shatter.js

Article by Richard Davey. Posted on 29th Mar 2015.   @photonstorm

image

From the AddLime blog: "I’ve been working on increasing Crash Landing‘s juiciness and one of my first tasks was to make the ground beneath the player explode into pieces. It’s been a great opportunity to get some use out of Shatter.js.

It wasn’t completely straightforward to figure out how to access the raw image data in order to feed it to Shatter.js, and how to best provide the shattered image back to Phaser. Since I’m loading the sprites from a sprite atlas I need to extract the individual sprite I want to shatter to it’s own image. I could also just load the images individually, but I really wanted to keep the sprite atlas and not load duplicate images."

Read the full tutorial