Generating Phaser Game assets: Planet spritesheet generator

Why is that hard to find?

When I first started to google procedural planet generators that would export into spritesheets I thought a few clicks would get me exactly to where I wanted to be. However, to my surprise I noticed that HTML5 game developers seem to have an awkward romantic relationship with assets. Pixelart packs are sold on various platforms and tools that help one map & generate an atlas or spritesheet - while primitive - are not even free. Well, I wasn't going to spend money only to end up doing a lot of manual work, so I decided to finally play with the an algorithm I stumbled upon in a completely different application: Perlin Noise

When it comes to graphics, this can generate the patterns I can use for my surface. The next step was to come up with a plan:

What is a spritesheet?

The most logical way for me to generate a spritesheet was to calculate the rotation steps for one spin and then draw these frames to a canvas that is later going to be my spritesheet. So my strategy was clear:

• Draw the generated planet on a canvas.
• Export the frame to a second canvas accounting for the position based on the current frame
• Rotate the planet and repeat.
• Once done, generate an image based on the second canvas and offer it for download.

And while I added a few tweaks and options along the way, this worked just fine.

Now, as always, of course you can say that generating three planets in 5 hours of coding surely takes longer than opening up a graphics tool and generate three planets for the game. And as you know, you'd be right. However, the source-code is clear, has no dependencies and no build process and - most importantly - can be easily adapted to whatever you need to generate.