8bit-ish | The Fair, Not the Renaissance

“With retro game art, players want a renaissance fair, not the actual Renaissance” – Mark Ferrari, #GDC16

Jump Strait to Resource Links

First, a Little Backstory

After 10 years of graphics and code, I’ve finally found a “professional hero”. Mark Ferrari is a veteran of the digital arts. He started at Lucas Arts where one of his larger contributions was “inventing” the concept of dithering in digital imagery. That’s right, there was a time when dithering wasn’t actually a thing. Mark is the guy who’s stroke of genius brought so much more life and perceived quality to the limited color pallets of early games. At the 2016 Game Developer’s Conference (#GDC16) I attended the session “8 Bit & ‘8 Bitish’ Graphics-Outside the Box”. Pixel art is something that I’ve never really tried, and so I am not very good at it; however, it is a style I’ve been wanting to experiment with for a while. Additionally, many of my students like this style. I chose this session in the hope that I would gain insight and tips to bring back to my class.

When I entered the session, I didn’t pay attention to who the speaker was. I was expecting a hot-shot young indie, and what I got instead was an industry veteran who helped pioneer quality game art in an era where “pixel art” wasn’t a style, but a technical limitation. In his talk, Mark details the process used “back in the day”, and his process for creating retro pixel art now. There is a lot of value in understanding how and why art was created in the fashion it was. That knowledge helps to understand what we’re trying to emulate, and what is worth emulating for modern pixel art. In this post I’ll highlight a couple interesting points on the history of game art, then I’ll move on to a couple of modern techniques/programs that Mark demonstrated the use of. The tidbits I gathered from this talk already have me creating better pixel art than any previous attempt I’ve made. I hope you’ll find some use for this information as well.

At the bottom of this article, I have compiled a list of links that should help to branch out and find more information on the topic.

EGA Graphics, EA Deluxe Paint, Palette Swapping | a.k.a “The Good ‘ol Days”

Enhanced Graphics Adapter (EGA)

EGA graphics in all of it's glory!
EGA graphics in all of it’s glory!

EGA was once the standard for color display on computer monitors. It offered 16 beautiful hardly palatable colors for display. Why were a particular 16 colors chosen for EGA? It turns out that the reason is because it was the job of programmers to select colors. At that time, colors had to be referenced by a numerical value. Programmers tend to like keeping things as simple as possible. The colors were chosen because they could be represented by integers, as appose to floats or doubles (decimal values).

The limited and “fuggly” color pallet is part of what helped Mark get started in game art design. Mr. Ferrari said that when Lucas Arts first approached him he felt he wasn’t right for the job, because he didn’t know much about computers. Lucas Arts said that was okay, because it’s much easier to teach an artist to work with a computer, than to teach a programmer to become an artist. Hiring Mark was a long term investment in improving the quality of visuals within the current technical limitations.

Deluxe Paint

One of Mark's old projects in Deluxe Paint, loaded inside of DosBox
One of Mark’s old projects in Deluxe Paint, loaded inside of DosBox

Once upon a time, Adobe was not the industry standard for digital imaging. In the prime days of DOS (early 90’s) it was Electronic Arts that offered the best tools for game art creation. The software they published was Deluxe Paint and Deluxe Paint Animation. In many ways the features of Deluxe Paint would still be better for creating low color/pixel graphics than Photoshop. Deluxe Paint paint is of course long dead. There are a number of reasons why DP isn’t a good choice for modern workflows, but there are specialized alternatives to Photoshop available. More on that later.

During Mark’s talk he used DosBox to run a copy of Deluxe Paint. Some of his original work that he used for illustration was only available in DP.

Palette Swapping

In addition to low color pallets, another technical limitation that once existed was the lack of transparency. There were no alpha channels. Graphics were all some form of a bitmap. In the time of EGA, Mark brought about higher quality visuals by introducing dithering to simulate the look of shadow, and depth-of-field. Eventually EGA graphics gave way to VGA, and there was now 256 colors to work with. This is where the dithering technique really began to shine, and it’s where Mark once again stretched the technical limitations with a technique to fake transparency called palette swapping.

Palette swapping is one of the most brilliant technical tricks I’ve seen an artist pull off. Here is how it works. When the color limitation increased from 16 to 256, certain amounts of color could be divided out for different uses. I don’t remember Mark’s exact numbers, so I’m just making them up for the purpose of illustration. An artist could choose work an image within less than 256 colors, such as 128, or 196, or whatever. The remaining color allotment is reserved for creating very subtle color changes in the image. These changes are so subtle that at a casual glance they won’t be noticed; however, when the color pallet in use with the image is swapped out for another, the new pallet has one or more of the subtle values changed to something much stronger. This is best seen to be understood.

Mark’s image that best shows this effect is his snow falling in the woods scene.trails If you look very closely at the image, you will notice vertical trails. The pixels in these trails are a slightly different color, but when the pallet shifts, they become white. When the pallet shift is in action, it looks like snow is falling, and one would believe there is transparency here, but it’s an illusion.

Some of Mark’s best palette shifting work has been preserved online by a developer who wrote an HTML5/JavaScript solution to perform the pallet swap. I highly recommend checking it out. There are amazing images where pallet shifting is used to simulate everything from waterfalls, to smoke and rain.

Flash Forward… How Do We Flash Backward?

Mark Ferrari has been contracted to create the artwork for the upcoming game “Thimbleweed Park”. The aesthetic goal of this game is to feel like an old school Lucas Arts point and click adventure. The key point here is that it should “feel” like the old games, not actually be an old game. That is an important distinction. The team believes that their players want to relive the feeling of those games; however, if one were to actually load one in something like DosBox, most individuals would be disgusted. What people love is the memory, or nostalgia of the old games, but when faced with the actual product, it’s typically a visual turn-off. This is especially true on modern high definition screens. When these old games were made the average computer monitor was a CRT Tube technology with 640 x 480 (VGA) resolution. Not only are the pixels big, but they bleed together. In that time, artists actually used the lower quality of displays to help convey visual effects in their artwork, and obscure necessary defects.

Mark eloquently put it like this, when people go to a renaissance fair they’re looking to have an enjoyable time. They want the costumes, the events, and the food. No one actually wants be in the Renaissance where crap flowed through the streets, death and disease were all around, the smell would have been unbearable to modern man. Folks just want to experience what they perceive to be enjoyable about the time period. It’s the same with modern retro games. People want a renaissance fair, not the actual Renaissance.

Here are some of the ideas Mr. Ferrari presented from his current workflow that help to inspire nostalgia, without the reality of old graphics.

Dithering

Dither and banding example one
Dither and banding example one

Let’s quickly define dithering, just in case we’re unfamiliar. Dither is the blending of colors through the application of noise between 2 or more colors. In a smooth transition, an image displays any number of colors creating a gradient. With dither, the colored pixels of two or more colors become intermingled. This intermingling of pixels is done through the application of noise patterns.

It is recommend to find or create ones own dithering patterns. This can be done in a number of ways, but the most precise is to create it oneself, pixel by pixel. It’s a lot of work up front, but once you’ve established your library of dithering patterns, future workflows will be fast and smooth.

You can visit this link to find out more about dithering patterns.

Color Banding

Dithering and banding example 2.
Dithering and banding example 2.

Color banding occurs one 2 colors have a hard transition, or no transition. A good example is a skyline. The sky may be light blue near the ground, and a deep blue higher up. if one only has 3 shades of blue to work with, the sky will have three bands going from light to dark. Dithering is used to intermingle the pixels along the edge, softening the transition. In older games that had limited color pallets, there was typically some amount of banding that could be noticed. While dithering eases the banding, too much dithering can result in a speckled mess of pixels.

Getting the best quality graphics in old games came down to balancing out color banding and dithering. Knowing that both would be noticeable, it wasn’t so much about eliminating them, as it was finding the balance that looked most ascetically appealing. This is where the eye of an artist was most needed.

Template Gradients

Create reusable dithering gradient patterns that can be applied quickly. As an example, Photoshop allows selections to be saved as fill patterns; so, create low index color gradients that will be used often, such as tree trunks (gradient going from the lit to the unlit side), and save as a pattern by selecting the low color gradient and choosing “edit > define pattern”, then use the pattern to fill areas that will become trees.

Understand Light in the Real World

Objects are not only lit by direct light sources, they are also lit by indirect sources. As an example, A tree is lit by the sun on one side; however, the opposite shadow casting side isn’t lit by the sun, nor is it black. It is illuminated by other objects that bounce light back. In this scenario, that would most commonly be the sky. When shading non directly lit portions of imagery, sample color values from other elements that would bounce light back. The background, or sky is typically a good source.

To assist in understanding where the indirect light is coming from, it is best to create backgrounds first. In doing this, one will have a better understanding of what colors to sample when highlighting and blending with foreground objects. This is the same concept as used in any painting art form. A few years ago I took some oil painting lessons. This was the first time I was introduced to the idea of blending foreground colors with the background. In traditional painting,  subjects one paints on top of the background will take on color properties of the background. This all assists in making an image look natural and appealing.

Limited (but not really) Color Pallets

At one time artists could only use 16 colors. Then they could only use 256. When creating retro art, enjoy the freedom of using how ever many colors are necessary to create something that is visually appealing; however, if creating something that is suppose feel nostalgic remember that a limited color pallet, or a at least the illusion of limitation is a needed component. In Mark’s session he mentioned that he wasn’t exactly sure how many colors were being used in each of the new “Thimbleweed Park” images,. One was around 60 and another was over 500.

My take away here is that a retro pixel artist can enjoy the freedom of using as many colors as necessary, with a mindset towards less. If one feels more colors are needed that is fine, but perhaps one should think about using more pronounced color banding and dithering to create the feel that there are less.

Decide for yourself what the limitation should be, and use that as your guide, not so much a hard and fast rule. Whether it’s modern or retro video game art, at the end of the day the goal is to create something that the players will want to look at. Again, make a renaissance fair, not the actual Renaissance .

Software Used by Mark in This Session

Photoshop – Adobe is the current standard, but there are some particular things that need to be given attention. Photoshop’s default setup is for modern high quality art. In order to create retro pixel art, keep in mind the following:

  • In preferences, make sure resizing is set to “nearest neighbor”.
  • Turn off all options for anti aliasing (depending on the tool in use, this is often found as a checkbox in the current tools settings)
  • Do your own anti aliasing to soften jagged edges where appropriate.

Following these guidelines should prevent Photoshop from trying to do it’s own re-sizing, and re-sampling of pixels (which looks nasty when size skew or enlarge).

Pro Motion by Cosmigo – Pro Motion is a dedicated pixel art tool. It contains many options geared towards animation, shading, and reuse/tiling of indexed and low pixel art. It is probably the best solution currently available, and the evolution of what EA’s Deluxe Paint would have become. Pro Motion, while not widely known in digital art, is used by some professional studios. Mark used it to create art for games such as Spyro : Eternal Night for GBA. More recently it has been used to create art for games such as Shovel Knight.

I’m not personally skilled in it; so I’ll link to some tutorials I found. I purchased a license after this session, and I’ll be getting to know it in the near(ish) future.

Conclusion

What I gathered from the session largely boils down to this; leave out the old limitations, and create your own. If one’s goal is to create something that feels retro, then use limited color pallets. Strategically place color banding and noticeable dithering to create a retro vibe, but don’t try to make an EGA game. Decide what you want, design limitations that will keep you focused on your visual goal, and hold loosely to those artificial limitations.

There was a lot to digest in this session. I’ve spent some time using the techniques Mark demonstrated, and I’m much happier with my results. I’ll post some of my new images as I finish them. Right now my pixel art is more of an experiment to study. The majority of my development time is going in to finishing the game I’m currently working on; however, you can bet some of this experience will make its way into my final art. There was more information given in this session. I’m hoping it will be in the GDC archive soon, I’d like to revisit it a couple of times.

Thanks for reading, and as promised here is that handy list of resources.

My #GDC16 | Mentally Hit by a Bus

Have you ever felt like you’ve been blindsided by a bus, but that’s a good thing? In addition to some great sessions, this year’s GDC brought about a number of personal realizations about my life as a game developer. I’ll start this post with a brief recap of the best sessions I attended. If you’d like to read the personal info, read on past the summary.


My Augmented Reality, “Tactical Twitch” Prototype (in case you haven’t seen it)


Sessions Overview

The sessions I attended ranged between useful, and inspiring. This is just a brief summary. I took detailed notes, and over the next few days I will have a full write-up on each. This year my chosen topics delve into deeper technical waters, and I want to be sure I understand the material before I pass it along.

IMG_0302From a One Person Shop to Indie Dev to AAA: What it Really Takes to Grow (Presented by Amazon)

Mike Hines  |  Developer Evangelist, Amazon
Peter Heinrich  |  Developer Evangelist, Amazon

GDC Description: We’ve entered a golden age of creativity and experimentation. Today, anyone with an idea can build a game and publish it to a global audience. How does the gifted amateur become a pro game developer, and from there, a games industry success story? Hint: it requires more than just programming or artistic talent. In this session, we’ll show you how to approach game development as a business – even if business isn’t your “thing.” We’ll look at the single most-important skill you can develop, and show by example what happens if you neglect it. We’ll also offer practical insights on choosing a game genre, development environment, and target hardware as well as how to monetize your game.

IMG_0342The Power of Fanbase: Growing Your Audience with Twitch (Presented by Amazon)

Garnett Lee  |  Senior Business Development Manager, Amazon

GDC Description: In the future, the top games will have fully realized fan bases that will drive their user acquisition and engagement engines. Without it, high customer acquisition costs and low customer life-time value can sink any game. How can you turn your players into fans? Broadcasters need interesting content to show on their channels, and game developers need to get their games in front of players. Leveraging Twitch in your game development process helps build an audience and keep them interested. Come hear experienced broadcasters and developers discuss new content opportunities you can use to expand your broadcast and better engage viewers with Twitch.

IMG_0371The Design of Everyday Games

Christina Wodtke  |  Associate Professor, CCA

GDC Description: In 2013, Don Norman updated The Design Of Everyday Things. In 2015, references to “affodances” and “feedback” were everywhere at GDC. As games reacher broader audiences, it’s critical that game designers make games accessible to players who are more familiar with Amazon than Fallout 4. A positive user experience can create the next Monument Valley or Clash of Clans. Norman pointed out that a positive user experience begins with usability, but it doesn’t end there. Great user experiences anticipate the user’s needs and then go beyond that to delight. User experience designers have evolved a variety of approaches and tools to assure that the a product is “a joy to own, a joy to use.” In this talk, Christina will explore the core principles of user experience design, and how it can create games that are elegant and complete experiences that both serve and delight their players.

IMG_0385AAA Virtual Orchestration on an Indie Budget

Wilbert Roget  |  Composer, Music Supervisor, RogetMusic

GDC Description: While quality standards for orchestral music in games continue to rise, budgets for games at the indie and “AA” level do not. This session will use examples from my DICE-Award Nominated score to “Lara Croft and the Temple of Osiris” to show how we achieved the best possible orchestral sound quality with less than a shoestring budget. This will cover effective use of samples, hall simulation and reverb, instrumental solos and overdubs, and final mastering.

IMG_04208 Bit & ‘8 Bitish’ Graphics-Outside the Box

Mark Ferrari  |  Commercial Digital Illustrator, Terrible Toybox

GDC Description: Mark Ferrari will discuss and demonstrate some of his techniques for drawing 8 bit game graphics, including his celebrated methods for use of color cycling and pallet shifting to create complex and realistic background animation effects without frame-animation. He will also discuss his current work for Ron Gilbert’s retro adventure Game, Thimbleweed Park, and demonstrate techniques for using Photoshop to create what he calls ‘8 bitish’ graphics for retro games today.

IMG_0427Angry Birds 2 – Next Gen Audio in Only 10 Megabytes

Jonatan Crafoord  |  Co-founder, The Brain
Elvira Björkman  |  Music Composer, Two Feathers

GDC Description: Rovio’s new flagship game Angry Birds 2 had to stand out from its predecessor and still be downloadable by *everyone*. But how do you fit the expectation of console quality audio on a mobile platform, with only 10 megabytes of space? The audio team at Rovio looked at compression and trends in headphone usage to make the most of the platform limitations, and created the music and sound design to be varied and grand but with a bird-sized memory footprint. Jonatan Crafoord, Audio Director, will talk about best practices for sound design and file formats to save space without compromising quality. Elvira Björkman, Music Composer, will show how the music was composed and implemented to feel as refreshing as possible while staying within memory limits.


Now for the Personal Bit

I didn’t start learning about 3D Design and animation until I was about 23 years old, and I wouldn’t call myself good at it until I was about 27. I didn’t start learning to program until I was around 26 years old, and I wasn’t proficient enough to be employable until I was 29. Why did I start so late? The answer is because I wanted to make games. I don’t mean that the pursuit of making games put off learning, I’m saying that making games is the only reason I thought to try.

I never thought I had the ability to do any of the tasks required. I felt it was all permanently over my head; however, since I was a kid I’d been contemplating my own game ideas, writing short stories, and terrible comics. In the second grade I sketched out my ideas on binder paper, and mailed them to the corporate address for Nintendo that was listed on the back of the NES system packaging. Later in in life, after my first few attempts at education and career didn’t work out, I finally gave in to “the calling”.

The pursuit of making games has helped me develop skills across a wide range of technical fields, and whether I’m making motion graphics or building websites, I’ve never gone without a paycheck. At this point, all of the time and skills I’ve acquired have brought me into an awesome job where I teach game design at a high school. I can’t complain. The decision to professionally pursue the art of making games has had a net effect of improving my quality of life.

 Getting to the Point

Here’s where things start getting heavy. At the expo this year I’ve been impressed with a number of indie projects both at the IGF, and the Indie Megabooth. As I talked with, and listened to other developers, I’m starting to realize the age gap. The indie developers are talking about all of the time, years even, that went in to creating a game they’re willing to show, and/or release. If one does the math, it’s not hard to realize that they all started learning this stuff when they were in high school, or shortly after. I’ve never been one to view the age gap as a big deal, but I’m starting to see how life can turn it into one.

The change that began setting in is that I am now past 30, I have a great wife of over 10 years, and beautiful little girl. I need to provide stability for them, and possibly more important, I need to actually be around to spend time with them. Having to make this change isn’t so much the surprising part of growing up. The surprise to myself is that I’m okay with giving up other pursuits in order to meet all of the needs of my family.

I don’t want to leave the world of game development, but it falls behind my desire to actively be in the lives of the people I love. This is the big realization for me, and it breaks down into a few parts:

  1. At this time, it seems that the only way I get to have a long term involvement with the video game industry, is if it becomes my full time career.
  2. Embracing game development as a full time career is financially/emotionally risky.
  3. Due to life events (which I love) I’m out of time in my life for taking financial/emotional risks.

This is the metaphorical bus that ran me over at this year’s conference. It may sound like I’m building up toward a sad conclusion, but the emotional pounding provides an immense burst of passion, ambition, and inspiration towards one goal; to finish “Tactical Twitch”, and make it the best experience that I have the ability to create. After that, I can move on.

Move On to What?

Best case scenario, “Tactical Twitch” is a runaway hit that demands leaving my “day job” to pursue games as business. That would be a lot like winning the jackpot. Here is what I expect to happen. I cease to exist in mental anguish over releasing a product, and the pursuit of game design becomes something I “play” with. I’d love to keep experimenting with augmented reality, and gamification of that technology. I may even release something again. The difference is, I won’t torment myself if I don’t.

I’ll still poke my head in at the conference. There are always great sessions. Another thought I have is to embrace board game design. The technical skills required in that are almost entirely artistic, making it easier to do as a relaxing side project. It’s specifically the all consuming task of creating a complete, quality video game that I’ll likely have to leave behind; however, I just can’t do that until I’ve taken it as far as I can go, and I’m not quite there yet.

Follow Along this Summer as the Dream Comes to… Something

This Summer you’ll be able to follow my development in a number of ways such as, YouTube dev blogs, Twitch streaming, and play testing the game yourself. I’ll have more complete information on the game in the coming months. Those I’ve explained it to in person seem to think the idea works. The best thing I can say about the game so far, is that I know I will have fun playing it. It’s a game not just for second grade Hodge who wrote all of those letters to Nintendo, it’s for me right now. I can’t wait to share it with everyone. Development will resume as soon as my current class of students are out (late May).

Tactial Twitch AR Prototype Website is Go!

* Maintenance Update: The Argon browser is currently at ver 4, and ver 3 is likely not on the app store anymore. This demo is not yet compatible with ver4. I will update it soon. Thanks for looking!

Just in time for the 2016 Game Developer Conference, the “Tactical Twitch” AR website is up for you to check out. The image target is my new business card. If you don’t have one, the image is on the instruction page, so you can print your own. At this time the AR browser is only on iOS, but is soon coming to Android. For all of the details, check out the video below, or head over to the new “hello” page.