Anyone Can Make Beautiful Games

People Don’t Play Ugly Games

There are a thousand reasons to make beautiful games. The most noble reasons could be about creating meaningful experiences, developing atmosphere, or making the world a more beautiful place—but let’s face it: people don’t play ugly games. If art isn’t your thing, aspirations of beauty are the least of your concerns.

Anyone can make beautiful games.

I’m talking to you, programmers. You can pay an artist as much as you want, but if you do not understand beauty your game will be ugly. Fortunately, there’s no magic talent or personality required to make beautiful games—just skills. Anyone can learn them.

Beautiful Banner

Rules of Thumb

I could get into a lengthy discussion about the principles of design here, but I think a cheat sheet of sorts would be more helpful. Most of the following examples will only use simple shapes, gradients, blurs, and strong elements of design. Anyone with a mouse and Inkscape could replicate them. Please do.

Tween EverythingTweening is about the transition between things. Our eyes like movement. This is why low fps is so painful to watch–it’s jarring. When things happen too suddenly in your game, it is disorienting and uncomfortable.  Even things you want to happen immediately benefit from a single frame of transition. If you ever find yourself asking, “Should I tween this?” the answer is YES.

Tweening is not only easy, it's GORGEOUS.

Tweening is not only easy, it’s GORGEOUS.

Saturation – Turn down the saturation on a sizable percentage (but not all) of your game layout. Oversaturated colors are very hard to look at. People will leave your games just because they’re uncomfortable if you don’t attend to this. Your game doesn’t have to be black and white, but take a moment and think, “Does this look like I used a box of washable markers?” If the answer is “yes,” ask yourself, “Did I do this on purpose?”

Please, for the love of all things good--don't use a palette like the one on the right.

Please, for the love of all things good–don’t use a palette like the one on the right.

Contrast – Eyes like contrast. You can contrast many things—shape, hardness, color, value, etc. The easiest way to tell if your game has at least one kind of contrast is to take a screenshot and look at it in black and white. If you are looking at a puddle of grey, perhaps you could brighten your brights and darken your darks.

The two images are exactly the same except for patches of higher white and blacks in the example on the right.

The two images are exactly the same except for patches of higher white and blacks in the example on the right.

Repetition – The repetition of visual concepts ties a composition together. Choose one or two things to repeat over and over. It could be a certain shape, tons of soft edges, outlines, etc. Remember that deviation from this repetition should be on purpose—or it will look like an accident.

Fishin Ruth

In the above image, notice the number of straight lines. This is repeated in many of the visual elements in the game. By repeating the idea “straight,” the whole thing ties itself together.

Variation – Repetition pulls a composition together, but it can be boring if alone. Anything which deviates from the repetition will attract the eye—so use that to your advantage. Players, powerups, dangerous elements, or instructions to the player can be used effectively this way. Notice the fish in Fishin Ruth are round as opposed to straight, and warm instead of cool.

There's a good chance you looked at the most unique thing in the image above. If the majority were spiky and only one was round, you'd be drawn to the round one instead.

There’s a good chance you looked at the most unique thing in the image above. If the majority were spiky and only one was round, you’d be drawn to the round one instead.

Color Temperature – There is a lot of color theory associated with this, but assuming your light is a typical sunlight yellow a wonderfully cheaty way to set yourself apart from other games is to throw some blue in your shadows. Most people just add black if they want to draw shadows. This works, but does not pop like a deep blue. Do this and people might start treating you like an artist.

Black shadows can be OK, but note they indicate the light is pure, florescent white. Take a look at a color wheel. Find what color your light source is supposed to be, and use the opposite color.

Black shadows can be OK, but note they indicate the light is pure, florescent white. Take a look at a color wheel. Find what color your light source is supposed to be, and use the opposite color.

Drawing != Beauty

Can’t draw? That’s ok. Anyone can make beautiful games. The ability to manipulate a pencil provides just as little access to beauty as pocket protectors and glasses provide access to math. Anyone can learn design skills, and they are just as important as programming if you want to make a game people play. Remember, people don’t play ugly games–but you don’t have to make ugly games.

-Ryan

follow

Advertisements

15 thoughts on “Anyone Can Make Beautiful Games

  1. This is a great checklist that really can turn a poor looking game in to something much more impressive, and all for not much extra work.

    The colour temperature part is my favourite, I’m usually guilty of making shadows by just dragging in some black and adjusting it’s opacity. After reading this I’ll definitely spend a bit more time thinking about the colour theory behind it.

    I love the stuff about tweening too, Juice it or lose it is such a great presentation and well worth a watch.

    Great post!

    • Thanks, Barry. I have spent a lot of time learning these things the hard way and wish someone had made a checklist for me. Sometimes the smallest of changes can make a game come to life.

  2. Hi!
    I just wanted to comment and say that I thoroughly enjoy reading your blog. And I like the visuals you use too. I myself want to learn more about game development (specifically in web browsers) and I was wondering if you had any good suggestion for books to read on the topic?
    Thanks,
    -Tim

    • Hey, thanks for your thoughts! I’m glad to hear you’ve been around.

      Books are a tough one in game design. Every time I’m in a book store I go looking for them, but sadly they are few and far between. If you’re looking for a “how to” book, I know there are some html5 books you can find, though I’ve never read through them. You could give Amazon a look over for any of those.

      I’ve also found several tutorial video series on Youtube that look really helpful. And if you don’t know where to start and know nothing of coding, Construct 2 might be a good entry point–it is my program of choice. There are astounding number of tutorials you can go through.

      If you’re looking for something a little more about the topic of this post, I’m currently drooling over Game Feel right now.

      Again, thanks for dropping in!

      Ryan

  3. Hi Ryan!
    I found it to be very tough too (and I didn’t know where to start) and you seem quite knowledgeable on the topic so I thought that I would ask someone that knows a lot more than myself. 🙂 I haven’t check out very much on Youtube yet but I love the idea of Construct 2. It seems like it has similar functionality to Flash game development. I will have to check that out! I also might have to read Game Feel for my next book choice. Thank you again for your imput!
    -Tim

  4. Great list. I shall refer to this every time I plan a new sprite. After re-reading it, I adding a bit of blue to the shadows and it’s amazing the difference in quality the colours express now. It’s definitely seems more crucial to get the colours right rather than gorgeous eye candy.

    Thanks for the post.
    -Marios

  5. My god, these are so simple, yet so meaningful and useful!

    I will be printing this (if you don’t mind) and put it in front of my computer for the graphics revision of my game.

    You sir just created an amazing checklist!

    I am eager to red more of your blog.

    Best regards,
    Borja

    • Thank you very much! Formalizing this list has been helpful for me as well. It’s much easier to be intentional with guidelines written out. On that note, feel free to print it! I hope it does you and your game good.

      -Ryan

  6. Pingback: Developer Diary 10 — Breakout Cove | Creative Ink Games

  7. Pingback: How To Make Beautiful HTML5 Games

  8. Found this looking for equations for different tweens. Nice info, I didn’t know the thing about black shadows. Have to disagree with you on the color palette part though. There’s nothing wrong with using saturated colors, as long as they don’t comprise your whole palette. If you used the left image with the animals from the right, they would pop a lot more.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s