Generating Phaser Game assets: Planet spritesheet generator

Ever needed to automate a process and all of a sudden you built a tool?

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.

Repo Deployed
generator https://sroehrl.github.io/planet-generator/
game https://neoan.us/game/

neoan @neoan

107 readers
Keywords
gamedev javascript
On topic

Do you even write?

Using the blua.blue webhook in order to track your writing.

Cyber wars: Defending your server

Maintaining your own server can be a thrill. High security standards can protect you from data leakage, injection attacks and DDoS attempts. But what about adaptive brute force?

6 Technologies to look at in 2021

2020 wasn't the best year humans can look back to. but what does 2021 bring for coders?

dev.to plugin for headless CMS blua.blue (part 2)

A solution to supplying plugins to blua.blue

CSS Grid or CSS framework - are they really exclusive?

Grid-based or framework - there are many articles about this choice. But why is that even a thing?