The Art Of The Menu news

Hi! And welcome back to another installment of the Globe Cannon devlog. I’m ChainsawMcD, and if you haven’t already read the first two parts of this series they can be found here and here.

Today I wanted to take a moment to talk about Globe Cannon’s menus, specifically the backgrounds. I think they’re a good example of getting the most out of very little while using the resources at your disposal. So let’s get started!

No one reads a devlog to hear about the menus.

Quiet, cynical-bold-faced-text.

It’s true, though.

To start, let’s look at the starfield. Several prototypes were used over the course of development, ranging from cartoonish to photo-realistic, but each one lacked the pizazz and sparkle of the system I finally landed on.

Using a .png file full of 1 to 4-pixel white squares placed at random over a transparent background, I imported the art into GMS2. Assigning it to an object, I programmed it to rotate slowly.

obj_starfield - STEP EVENT

image_angle -= 0.01;

Magic. A moving star field. Atop this layer, I placed the nebula.

The nebula also went through several variations, but for most of development I was using one that I made after watching this helpful YouTube tutorial. It was almost photo-realistic and I loved the colors.

But after landing on a pixel-art style far far FAR too late into this process, it no longer fit the graphics scheme. I decided to down-rez the nebula, so it would match the other in-game elements and that’s when I discovered this helpful tool: Pixelator.

To quote their website:

I shelled out $35 for the one-time Studio license and I’m glad I did. It came in handy more than once. Here's a picture of the nebula after applying Pixelator. I've placed it over a black background at 100% opacity for visibility.

This technique also resulted in far smaller file sizes for my graphics, especially after passing them through TinyPNG.

Just like the stars, I programmed the nebula to rotate.

obj_nebula - STEP EVENT

image_angle -= 0.008;

An unexpected bonus of using this method was the interplay between the star and nebula layers. Because the two layers are rotating at different speeds the white, square “stars” are passing beneath different areas of the processed nebula image, peeking up at the player through varying opacities. It gives it a tremendous, low-effort twinkling effect - no animataing required.

In addition to rotating, I also programmed the nebula to randomize to a different part of the image every time it starts.

// If there's no nebula, draw one

if !instance_exists(obj_nebula) {

nebx = (random_range(0, 640));

neby = (random_range(0, 960));

instance_create_layer(nebx, neby, "Nebula", obj_nebula);

}

This was done to create more visual variety.

Globe Cannon only has one level. Believe me, that can get boring quickly. I wanted the game to look different, vibrant and alive every time you picked it up. This was one of a handful of solutions I came up with to tackle that issue and I’m really pleased with it.

Wow. So that’s how stars work.

No, it’s definitely not how stars work. But if you’re getting your science education from mobile games you might have bigger problems.

As I’ve said elsewhere, I just don’t have the kind of time it would take to make this all astronomically accurate. If someone has a cool, lo-fi way for me to put these stars where they’re supposed to be, go ahead and hit me up.

That brings us to the planets...

Finally, I set to work creating the highlight of the menus (woo!). There are a lot of ways I could have gone about creating the art for these bad boys, but I’m really happy with the pipeline I used.

It might surprise some to know that images taken by NASA are in the public domain, provided they meet certain requirements. (Nasa.gov) So it was totally kosher of me to download a picture of Jupiter and a picture of Saturn and run them through Pixelator.

Voila! Art!

You’re a regular Leonardo.

But look how sweet they look.

Stay tuned! Next time we’ll jump into coding the enemy A.I.

If you can call it that.

See you then!