The Basics of Guntastic

In a previous post we went over some of the design decisions that need to be tackled when first starting out a pixel art platformer. In particular, we went over the importance of defining a reference grid, and what are the gameplay implications of choosing a certain native resolution. In this post we’re going to take a look at how we approached these decisions in our upcoming game, Guntastic.

What’s Guntastic About Anyway?

While brainstorming the game we knew we wanted to create an over-the-top, one-shot one-kill multiplayer shooter that could be played on a single screen, shared between all the players to support ruthless living room competitions.

A Guntastic level inside the game editor
Every level tries to pack a lot of different gameplay possibilities in a very small space [view fullscreen].

We wanted the game to feature levels loaded with weapons and powerups, as well as dynamic elements (such as jump-pads, lifts, traps and so on) that created spectacular ways to frag opponents. We also wanted it to be simple enough for newcomers to immediately get some fun out-of-it, yet elaborate enough to entertain seasoned players.

Gameplay First

That doesn’t sound like a complex idea, does it? Still, it’s already enough to set multiple requirements that need to be carefully taken into consideration:

  1. Since the game revolves around multiplayer shoot-outs, players need to always be aware of what’s going around them: where adversaries are, which weapons are available, etc. This means the whole level should be visible, all the time.
  2. Yet, everything should fit on a single screen, where there should be enough room for four players that need to move, shoot, jump and so on.
  3. Levels should also be somewhat elaborate in order to accommodate multiple pickups, dynamic elements and fancy gameplay. Big, empty, boring rooms are out of question.
  4. Visual clarity should be king: the game should feel clear and predictable. This is not only important to make it more approachable for new players, but it’s also required in order to support advanced gameplay dynamics for expert players.

Choosing a Native Resolution

As we’ve seen in a previous post, the size of the playable area in a pixel art game is limited by its native resolution. Since we needed as much room as we could afford for our levels, we immediately went for a 16∶9 aspect ratio: this gave us some extra pixels to work with, and is also what players seem to expect nowadays anyway.

Modern pixel art games that use a 16∶9 aspect ratio tend to be drawn on a 640×360 canvas, so we went with that too. We’ll talk about why this is considered to be one of the best native resolutions in a future post, so for the moment just trust me on this one.

Defining The Grid

Finding out the correct tile size required some more time and experimentation. Beyond gameplay considerations, we also needed to deal with the fact that none-of-us had any previous experience with pixel art whatsoever, and none-of-us could afford to work on art full-time. Being only two people means you’re forced to wear a lot of different hats to make things work.

16×16: Too Small

A mockup of a level using a 16x16 grid
Definitely not the droids tiles we're looking for. But please enjoy our first character ever, a robot zombie.
  • Visible area: 40×22.5 tiles.
  • Pros: a lot of horizontal and vertical space. Low-res graphics is easier to draw. Allows for characters that are taller than wider (the default in most games).
  • Cons: everything is so small that it’s difficult to know what’s what, seriously impacting visual clarity. Graphics is too low-res for what we had in mind.

32×32: Too Large

A mockup of a level using a 32x32 grid
Not these, either.
  • Visible area: 20×11.5 tiles.
  • Pros: higher resolution graphics.
  • Cons: too few tiles create insufficient horizontal and vertical space. Art resolution is too high.

24×24: We Have a Winner!

The first mockup of a Guntastic level
Now this might work!
  • Visible area: 26.666…×15 tiles.
  • Pros: medium-res graphics, solidly within our grasp. Enough horizontal and vertical space for slightly complex levels provided that…
  • Cons: …we keep characters a tile wide and height, not more. This means to enforce additional constraints on the design of the characters.

While not so common as people tend to prefer power-of-two grids, this was a tradeoff that worked well for us. It was simple enough to draw, yet allowed for additional details over 16×16 tiles, but more importantly gave us some more space to work with over a 32×32 grid. 24×24 tiles also proved to work well when dealing with multiple screen resolutions as they allowed for a safe zone at the margins of the screen. We’re going to talk about this in detail in a future post.

A Guntastic level inside the game editor
Although we've taken steps to make it less apparent, everything is tightly aligned to our 24×24 reference grid [view fullscreen].

The Bottom Line

There’s no right native resolution and grid size when it comes to pixel art games: experimentation around gameplay and art constraints is the only way to find out what works best.

Baby Steps in Pixel Art

Guntastic is our first indie game, our first platformer and our first pixel art game: a lot of firsts! When we started production on the game we had therefore a lot of things to figure out.

This post wants to be a short introduction to some of the principles at the core of a pixel art platformer. An upcoming post is instead going to focus on how we tried to apply these principles to our game.

Grids Are Awesome

Let’s begin by talking about grids. A grid is a simple structure that can be used to organize some kind of data, and comes-in handy in multiple disciplines including design, programming and art. Thanks to their flexibility, grids have been used in games since forever.

From a design perspective, having a fixed reference grid helps to enforce the concept of modularity throughout the game. This improves the player perception of the world by providing easily identifiable patterns and a sense of scale, which help him navigate the world and take decisions in an intuitive way. In a well-designed platformer, a player won’t ever need to think about whether he can make the jump to next platform or fit in a passage, he will just know it at a subconscious level.

A screenshot of Bomberman (NES)
The entire gameplay in Bomberman is built on the concept of grid.

Grids are also dead-simple to work with during development: a grid tile is the basic unit that’s used to partition the game world, and everything is sized according to that, starting with the characters.

For example, if a character takes up 1×2 grid tiles, the platforms in the game will need to be at least one tile wide, passages two tiles tall, an so on. From there, we’re able to define how fast the character can move, how high he can jump (and coincidentally how far two platforms can be) and so forth, all based on the size of a tile.

While grids are used in all kind of games, platformers tend to exploit them more than other genres because their gameplay largely depends on the player ability to perform complex series of movements. These are only possible in a meticulously organized game world. Of course this is only half of the problem, the other half being the game controls, which are going to be the topic of a future post.

Grids and Art: Choosing a Pixel Density

Grids also work well for art, as they provide artists with a system that makes creating reusable, modular assets easy. This is especially true for pixel art since pixels already happen to be naturally laid-out on a grid.

A screenshot of Castlevania 3 (NES)
Pixel art games, like Castlevania 3 above, have been using grids to organize art since forever.

How many pixels compose a single tile of the grid define the pixel density (or resolution) of the pixel art itself. The more pixels we put into a single tile, the more dense our tiles will be and the more high-res the final art will look.

Tile Size Available Pixels
8×8 64 pixels
16×16 256 pixels
24×24 576 pixels
32×32 1024 pixels
How many pixels are available in a single tile at some common tile sizes.

It’s important to keep in mind that the amount of pixels to deal with scales quadratically with the size of a tile – and so do the time and skill needed to produce and polish the art. Tiles of 16×16 or 24×24 pixels are usually enough for most games as they allow for both fast iteration times and interesting visuals, while anything over 32×32 pixels steers more and more away from a pixelated look.

Several articles have been written on what defines pixel art and what is the threshold where pixel art stops being pixel and becomes something else – as well as about the effect different approaches have on the final public. Here’s the ones we found most interesting:

Okay, But How Many Tiles On One Screen?

Choosing how many pixels make up a grid tile, however, not only depends on artistic taste and skill, it’s also a matter of how many tiles need to be visible on the screen for the game to play well.

Pixel art is reminiscent of an era where graphic hardware was fairly limited in the resolution it could work with, and both gameplay and art needed to account for that. For example, the SNES console worked at a base resolution of only 256×224 pixels: for a grid tile of 16×16 pixels this would mean that only 16 tiles could be displayed horizontally at the same time.

A screenshot of Super Mario World
Super Mario World on the SNES was designed to play well at the console 256×224 resolution.

Although modern graphic hardware support crazy high resolutions – 8K displays, for example, support resolutions up to a whopping 7680×4320 pixels – pixel art is still drawn using the same constraints of the past. This helps maintaining the old school look and feeling (which is the whole point of using pixel art, after all), but imposes some limits on gameplay since only a minimal part of the game world can be visible at a time.

Gameplay can change drastically based on the native aspect-ratio and resolution
The original Sonic the Hedgehog game would be far easier to play at a 16∶9 aspect-ratio [source].

To work around this, modern pixel art games tend to use a larger canvas than the classics in order to accommodate more complex gameplay. Native resolutions of either 320×240 or 640×360 pixels, depending on whether they want to stay true to the classic 4∶3 aspect ratio or they want to make full use of modern 16∶9 displays, are the standard nowadays.

A screenshot of TowerFall Ascension A screenshot of The Siege and the Sandfox
Modern games such as TowerFall Ascension and The Siege and the Sandfox not only use very different tile sizes, but also different aspect ratios.

The fact that pixel art is drawn at very low resolutions, but still needs to be outputted on high-resolution displays creates some interesting technical challenges, which we’ll tackle in a future post.

TL;DR

  • Grids are a time-tested, easy to work with way of designing a pixel art game. Defining a reference grid (and sticking to it) not only helps delivering a polished gameplay experience, but also helps organizing and producing art.
  • Pixel density is defined by how many pixels make up a single grid tile. Higher densities requires more work and additional skill to pull out.
  • Both gameplay and graphics are affected by the native resolution of the game. Special care should be taken to make sure the game plays well and looks good at the same time.

Head over to the next post where we take a look at how we approached these issues for Guntastic.

So, What's This?

Welcome to the Ludicrous Games development blog! 🛸

In the upcoming months we’re going to try and provide some insights into the development process behind our upcoming game, Guntastic.

Since the game has been under development for over a year, but we only got around to start this blog, the plan is to begin by talking about what already went into the game. This is going to be an honest retrospective about what did work and what didn’t, the design decisions we took to get here, as well as the technical, artistical and organizational challenges we’ve faced along the way.

This is the first game we develop, at least in an indie kind-of way, so we’re also going to talk about the expectations we had by going indie, and how much they’ve proven true now that we’re several months into development.

Once this first series of posts is over, we’re instead going to focus on what we’re working on right now, the issues we’re dealing with and our plans for the future.

Make sure to follow us on social media or by subscribing to the blog feed, and please feel free to share your feedback: we’d love to hear back from you.

Welcome aboard.