Designing Retro-Looking Games for Windows 8

When people talk about “retro” games, they usually refer to most games made for the 1^st to 4^th generation of gaming consoles. The hallmark of these games are their pixelated visuals and approachable yet challenging game mechanics. I was a huge fan of these games growing up, so most of the ones I make today emulate the visual style and gameplay from this era in gaming history. I wanted to highlight some features of these games and talk about how to recreate them when making your own HTML5 games for Windows 8. Since canvas is perfect for rendering 2D graphics, making a retro-looking game is easy to accomplish and works well on almost any hardware. First, we need to talk about picking an art style.

Picking an Art Style

When you start thinking about your game’s art style, you have several options to choose from, such as 8-bit, 16-bit, and even some really cool 2/4-bit style games. Here are some examples from Mega Man over the years, showing off each style as the game evolved over time.

8-bit B&W Example (Mega Man Game Boy)

8-bit Example (Mega Man 2 Nintendo)

16-bit Example (Mega Man X Super Nintendo)

These three art styles give us a lot of room to play with. Since most computers, tablets, and mobile devices are not constrained to the color limitations that defined the hardware these early games ran on, you are going to have to work hard at enforcing the color palettes selection yourself One of the best ways to do this is to use a pixel editor or drawing app that is designed specifically for generating pixel art.

Pixel Art Editors

Over the years, I have gone back and forth between different drawing apps, from Photoshop to Fireworks, but lately I have moved over to specialized apps to do my pixel art. The one I highly suggest checking out is Aseprite. Not only is it free, it is open source and cross-platform. Aseprite not only allows you to create amazing pixel art, but it also handles generating sprite sheets and managing color palettes, which are critical to matching that authentic retro look. I figured I would highlight some of the great features in Aseprite and what I use it for.

First off, I am constantly working on building and testing out animations. Aseprite has a feature that allows you to import separate images and combine them into a single animation if the file names are consecutive, such as sprite_1, sprite_2, etc.

The following sprites were created by Iñaki Diaz for my Super Resident Raver game.

Once an image or animation is loaded, you can zoom in to work on the main canvas and also see the image in the mini-editor. The mini-editor keeps a 1:1 ratio that is incredibly helpful so you can see what the actual sprite looks like all the time. It can also be hidden if you don’t want to see it while you work.

When you are ready to set up the animations, you can preview the entire set of frames in the animation window as well as change the time delay between each frame.

Once you have everything ready, you can export a sprite sheet directly from Aseprite. You have three options to choose from: horizontal, vertical, and matrix, which creates a grid based on values you can customize.

And here is one of the final sprite sheets I created for my game with all of the animations and some extra space on either side in case I needed to add more sprites down the line.

Aseprite will also import from a sprite sheet and turn it back into single frame animations for you. A few other features I didn’t show off are the amazing drawing tools as well as the ability to see the color palette and change it on the fly to quickly swap out one color for another. You can also create layers, and there are some great selection tools to help you manipulate the image. As you can see, Aseprite is a fully featured low resolution image editor and has quickly become my go-to tool for pixel art creation and sprite generation.

So, now that I talked a little bit about the tools I use to work on my pixel art, let’s go over sprite and tile sizes.

Sprite/Tile Sizes

When it comes to making sprites or tiles for maps, I generally tend to make them fit within an 8×8 or 16×16 pixel graphic. Sometimes I use 20×20 zap tiles, since I can easily center an 8×8 or 16×16 sprite within it and get a little extra detail into the map. Part of the reason I keep to these sizes is that, when it comes time to display the artwork in the game, I always upscale them.

Upscaling allows you to show a smaller graphic at a much larger resolution. Since I work with pixel art, the effect tends to accentuate the pixels more, giving it the retro look most people are familiar with. There is no exact science behind how much to scale up, but I tend to do it in multiples of two. So, if I have a 16×16 pixel sprite, I can display it at 24×24 pixels by increasing the scale factor by two.

Here is an example of how this works:

1x (Actual Size 16×16)

 2x (New Size 24×24)

4x (New Size 48×48)

As you can see, the higher the scale factor the more pixelated the artwork looks. This is incredibly effective when you have smaller sized art like 8×8 sprites and map tiles.

The one thing you want to make sure of when it comes to upscaling your artwork is that you don’t set the canvas scale but instead
resample the artwork on the fly or pre-export everything at the right scale size from the image editor. Impact, which is an incredible JS game framework and the one I use for my Windows 8 games, has an option in its constructor to set the game’s scale. It looks something like this:

    ig.main('#canvas', MyGame, 60, 240, 160, 4);

As you can see, the last parameter is the scale, which in this case, is set to "4." Impact actually resamples all the images by drawing them to an off-screen canvas and referencing that instead of the actual images. This doubles the memory and slows down the load time of your games. If you don’t anticipate changing the scale size of your game based on different resolutions, then it may make more sense to just output everything at the correct scale factor ahead of time. This is especially important on slower devices. When it comes to getting high performance out of Windows 8 games, you have to build towards the lowest common denominator. Make sure your games are tablet ready and are as optimized as possible, especially when it comes to generating upscaled artwork on the fly.

Screen Resolutions

Now that we have talked about upscaling our artwork, we need to make sure that we have the correct screen size for our games. Windows 8 apps run at three minimum resolutions:

• Full Screen – This is the default resolution when the game is running in full-screen mode. This can be anywhere from 1366×768 and up.
• Snapped – This happens when your game is docked on the side of the screen and another application is running next to it. The minimum width of this resolution is 320.
• Filled – This would be the full-screen resolution minus 320 for the snap view. This resolution happens when you have another app docked on the side of your game in snapped view.

You can easily detect resolution changes by adding an event listener to the window like so:

    window.addEventListener("resize", onViewStateChanged);

And, here is an example handler for the resize event:

function onViewStateChanged(eventArgs) {
    var viewStates = Windows.UI.ViewManagement.ApplicationViewState;

    var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
        if (newViewState === viewStates.snapped) {
            // is snapped
        }else if (newViewState === viewStates.filled) {
            // is filled
        } else if (newViewState === viewStates.fullScreenLandscape) {
            // is full screen
        } else if (newViewState === viewStates.fullScreenPortrait) {
            //is portrait
        }
    }
}

Notice how we can also detect screen rotation? You can disable that for your game, but in order to be approved by the store, you need to handle the other three view states properly. When it comes to figuring out the actual resolution, remember to divide the resolution by the scale factor of your pixel art. So, if I am using a scale factor of four, then I only have 80 pixels wide to work with in snapped view. For full-screen view, I would be working with a resolution of around 341×192. Remember that this resolution is wide screen, so you may need to think about having black bars on the sides or top/bottom of your game depending on how your graphics fit into this resolution viewport.

To see how this would work in an actual game, check out David Isbitski’s Win8GameKit on GitHub and go through the default.js file in order to get a sense of how to handle resolution changes and other important aspects of building an HTML5 game for Windows 8. It’s also important to note that not all games are playable in the snapped view, so think about if you need to pause the screen and show a message telling your players to unsnap the game in order to continue.

Sound Effects Generators

The last thing I wanted to talk about briefly is making sound effects to match your retro-style game. One of the tools I use is Bfxr, which you can use online here or download as an AIR app to use offline. Here is what the app looks like:

You may be overwhelmed at first, but here are a few tips on how to use the application. On the upper left you will see different sound “templates” for effects that you would need in your game. Simply clicking on one of them will generate a sound on the bottom left. As you add more sounds to the list, you can click on them to preview and modify them. When a sound is selected, you can use the center window to manipulate the sound effects. On the bottom right, you can save the effects out one by one, or save out a .bfx file, which can be loaded up later to see all the sounds you were working on.

While this app won’t help you with creating music for you games, it will give you a head start on all of the sound effects that you would need to make your game more enjoyable and polished.

Wrapping Up

I covered a lot in this article, but there is so much more to go over. I hope to do a few more posts like this that show the techniques I use when creating retro looking Windows 8 games. Before I end this post, I wanted to highlight a few retro games that I love, and hope will come to Win8, to help inspire you:

Moustache King Adventure

http://jajitsu.com/games-html/mka

Door Man

http://quiteoddgames.blogspot.com.au/2011/12/for-braingale.html

Santa’s Deadly Descent

http://sdd.urustar.net/

MiniFlake

http://indiegames.com/2012/09/indie_royale_profile_miniflake.html