How do I use this spritesheet in Phaser 3?

[Jokgee]

I just started working with Phaser, and I'm trying to use https://opengameart.org/content/breakout-graphics-no-shadow this spritesheet for a simple breakout clone. How can I load the image and split it up automatically in-code?

[AndreasLoew]

The problem is that the sprite sheet does not have a regular layout. Some sprites are bigger, some smaller,... 

Use Photoshop or Gimp and extract the single images as png files. Use TexturePacker to build a sprite sheet. This will also save you memory because it can be much smaller.

A tutorial how to use sprite sheets can be found here: https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3

 

[rich]

You could also use Shoebox and its "Extract Sprites" feature, which will scan the png and rip out all of the images it can find. Might save you some time: https://renderhjs.net/shoebox/

[Jokgee]

Thank you both, that helped.