Dev Blog #6 – Pixel Art, Screen Resolution, and Zooming

One of the joys of a good construction/management game is being able to zoom in and out to marvel at your creation at varying levels of detail and activity.

One of the joys of good Pixel Art is the crisp, pixel-perfect lines and details.

These two things do not go well together.

To understand why, you have to understand one of the fundamental constraints of working with Pixel Art in games:

You can’t ever, EVER, cram more than one pixel of art into a single pixel of screen.

If you try, you’ll see odd visual effects as the game engine tries to decide which one of the two (or more) possible pixels to display in the single screen pixel available. It’s especially noticeable with sprites that feature grid-type patterns.

Above, the solar panel on the left is using the correct pixel density for the screen. The panel on the right is only out by 2.5%, but the difference is obvious.

So how can you overcome this problem? Especially when you don’t know the resolution of the screen your players will be using?

With MATHS, of course!

Luckily for us there’s a handy, tried and tested formula for figuring out the orthographic size (kind of like the zoom-factor for a 2D camera) that your game camera should use. It looks a little something like this:

Orthographic Size = ( (Height of screen in pixels) / ( (Zoom Factor) * (Pixels-per-unit) ) ) / 2

Most game engines will allow you to get the screen height fairly easily. In Unity it’s as simple as “Screen.height“. Pixels-per-unit refers to the number of pixels being rendered for each game-unit. Think of game-units as a measure of distance, so one game-unit could be equal to one metre in your game. A pixels-per-unit setting of 32 would therefore mean you’re fitting 32 pixels of sprite into every one metre of distance. This number will vary based on how you’re handling size/distance scaling in your game.

The Zoom Factor can be used for zooming in (making the sprites bigger), but not for zooming out (making the sprites smaller). A Zoom Factor of 1 gives you a one-to-one mapping of art-pixels to screen-pixels. You can increase the Zoom Factor, but only by powers of two CORRECTION: the Zoom Factor can in fact be any integer (whole number). I got this mixed up with the below section about shrinking sprites. Thanks to Reddit user /u/logibutt for pointing out my mistake! A Zoom Factor of 2 will double each art-pixel onto a 2*2 grid of screen-pixels. A Zoom Factor of 4 will quadruple each art-pixel onto a 4*4 grid of screen-pixels, and so on.

Pixels can easily be doubled without loss of information.
Pixels can easily be doubled without loss of information.
But shrinking images with single-pixel details will result in losses.
But shrinking images with single-pixel details will result in losses.

This means that when working with Pixel Art, there is an inescapable Minimum Zoom Level that corresponds directly to the resolution of your sprites. The more pixels contained within your sprites, the less you can allow your player to zoom out. The only way to get around this is to create half-resolution versions of all your sprites, and swap them in when the player zooms to half the true size of your sprites. A half-resolution sprite will allow you to use a Zoom Factor of 0.5, quarter-resolution 0.25, and so on. This works well but involves a lot of extra artwork, so if you’re going to go this route make sure the extra zoom level is really important enough to justify the effort/expense.

So if you’re going to have zooming in your game, make sure to design your Pixel Art with these limits in mind. Higher resolution sprites may allow you to include more detail, but they’re going to take more screen space.

And that’s the other joy of working with Pixel Art:

Less is very often more

Dev Blog #5 – New Year, New Modules

Happy New Year!

We begin 2018 having some brand new Station Module variants to share.

Here they are in action:

A super fast time-lapse of Space Station construction.
A super fast time-lapse of Space Station construction.

Those lines you see streaking across the upper atmosphere are the Command Modules launching and re-entering.

Progression in Space Station Continuum is separated into Eras. Each Era has its own technologies, challenges, and design styles. All of the new Modules featured here are inspired by real space station hardware of the past (and present). Each Module has a unique interior and matching Corner Module for 90-degree attachments.

Let’s begin with the first Module you’ll start with in the game. Its design is inspired by Skylab. Skylab was NASA’s first space station, launched in 1973 and de-orbited in 1979. You’ll need to look after yours to make it a bit more permanent!

Here’s Skylab as it looked in 1973:

Skylab in 1973. Image by NASA

And here’s how Skylab Era Modules will look in the game:

A Skylab Era Module
A Skylab Era Module

And here’s a bonus image with a Skylab Era Solar Array:

Skylab Era Module with deployed Solar Array
Skylab Era Module with deployed Solar Array

Next up, the Soviet Era. Mir, launched by the Soviet Union in 1986, was the first modular space station to be assembled in orbit. Pictures of Mir in the 80’s are hard to come by, but here’s how it looked in 1998:

Mir in 1998, taken during STS-89. Image by NASA.
Mir in 1998, taken during STS-89. Image by NASA

Here’s how your Soviet Era modules will look in-game:

A Soviet Era Module
A Soviet Era Module

As you can see, we’ve taken a bit of artistic license here to Russian-it-up a bit. Hopefully it will be clear why after seeing the next Era:

The Shuttle Era. Despite its many issues, the Space Shuttle was undoubtedly a revolution in the capabilities of space station construction. So much became possible that simply couldn’t be done before, and this was a very exciting time in spaceflight history. We’ll cover what that means in-game in future updates, but for now let’s take a look at the Shuttle Era Modules you’ll be launching.

These Modules have been heavily inspired by Zarya – the first module of the International Space Station.

Zarya as seen in 1998. Image by NASA.
Zarya as seen in 1998. Image by NASA

You may notice that Zarya bears a striking resemblance to many of Mir’s modules, hence the artistic Russian-ifying of those Modules in-game. Here’s the Zarya-inspired Shuttle Era Modules:

A Shuttle Era Module
A Shuttle Era Module

And finally (for now), the International Era.

The International Space Station stands (or flies) as a monument to the previously unseen level of international scientific collaboration that created it, and continues to support it. Modules, robot arms, experiments, and resupply vehicles from all over the world have contributed to building the single most expensive object ever created by humans.

The International Era will bring lots of exciting new equipment and activities to Space Station Continuum, and the Modules you’ll be launching are inspired by some of the later modules that make up the ISS. Specifically, the Destiny Laboratory Module.

Destiny seen during installation in 2001
Destiny seen during installation in 2001. Image by NASA

Here’s how the International Era Modules look in-game:

An International Era Module
An International Era Module

I’m incredibly happy with how all of these have turned out, but personally this one is my favorite! What do you think? What pieces of space history would you like to see featured in Space Station Continuum?

See you in the next update for more exciting developments!