Pixel Art Backgrounds

Loading...

From the course by Michigan State University

Pixel Art for Video Games

33 ratings

Michigan State University

Pixel Art for Video Games

33 ratings

This course is aimed to give you the tools and knowledge you need to start creating simple art for video games made in the Unity game engine. Through the aesthetic of pixel art we will explore artistic principals like shape language, color theory, and composition as well as show you a step by step workflow for creating assets that you can use to make your own games. The course is broken into 4 main modules, props, environments, characters, and animation. Each of these courses will have a series of video lessons alternating between artistic and technical skills culminating in a peer-reviewed project based assignment. The last module will challenge you to take the knowledge learned in the previous 4 and use it to create your own pixel art asset pack. This course is aimed at art novices who are interested in creating art for their own games or contributing to game projects. If you are a game designer or programmer, you will find this course helps give you a glimpse into the world of game art. You will be able to better work with artists, or create your own prototype or final artwork. If you are an artist or visual designer who is interested in bringing your style to the world of video game development, this course will give you the workflow to properly interface with a game engine and help contextualize how your artistic sensibilities can enable gameplay. If you have ever wanted to start making art for video games but have no idea how to start, this course is the perfect for giving you a solid foundation while teaching you usable practical skills. Our goal is to give you a sense of the whole pipeline from creation to setting up in a game engine.

From the lesson

Week 2: Pixel Art Environments

Basic Composition5:44

Environment Design9:17

Creating a Modular Pixel Art Tile2:57

Making a Pixel Art Tiling Set3:33

Pixel Art Backgrounds4:22

Importing Tiles into Unity3:21

Meet the Instructors

Andrew Dennis
Professor of Practice
Media and Information
Ricardo Guimaraes
Professor of Practice
Media and Information

In this video, you will learn how to apply tiling techniques from

the last video to create a series of background tiles.

Hi, there. Andrew, here.

Last time we covered the process of taking

a tiling dirt texture and turning it into a series of modular tiles.

Today, we're going to take those same principles and techniques,

and put them to work making background panels.

Based on the way we are scaling pixels in Unity,

our screen will be 320 pixels tall.

So I'm creating a new Photoshop document that is 160 pixels tall,

or half the height of the scene.

This way, I can create separate tiles for the cloud and ground levels.

I've made the width 128 pixels wide to give us

plenty of room to work with while keeping everything in powers of two.

You can see from my color palette that I'm using fewer colors with less contrast.

We don't want the background to distract from the foreground character or enemies.

This helps keep the focus on the key parts of the game while also approximating how

objects in the distance lose contrast and saturation in their colors as they lose detail.

First, I paint the background with our sky color.

Then like the dirt,

I start with the darkest blue color.

I'm using a larger pixel brush,

which I can get by increasing the size of my brush with the bracket keys.

I keep the bottom relatively flat,

and try to combine circles together to create the silhouette of the clouds.

Then, I take the next lightest color and

add highlights to the upper left side of the clouds.

I'm switching between the darkest two cloud colors to add and remove highlights,

and create the illusion of light wrapping around the upper left-hand corner of the cloud.

When I'm satisfied with the result,

I hit the highlights with my brightest highlight color.

Just a little bit here will do.

I use offset by 64 pixels so I can make the clouds tile in the X-axis.

I don't need them to tile on the Y-axis at all.

When I get the panel tiling properly,

I want to create an approximation of

our game scene to create and test more background panels.

568 by 320 is a good approximation of

a Super Nintendo style game on a modern widescreen aspect ratio.

So that's what I'm using here.

Like with the dirt tiles before,

copy and paste the single cloud panel into the new document,

and then copy it twice.

Placing the copies on the left and right side of the original tile.

Now, you can create panels that represent

our cloud formation ending on the left and right side.

You can continue to add as many panels as you

wish this way to break up monotony in the background.

Now, we're going to create a ground panel the same way we created a cloud panel.

We can create a new 128 pixel by 160 pixel document,

or just reuse the one from before.

This time, I've chosen to paint in the lighter mountain color followed by darker shadow.

Apply a small cloud like formation of trees at the base of the mountains.

Add highlights, and create variation in the shadows.

Then, I apply the lighter of

the two beach colors to define the beach before drawing on the shadows,

the trees cast onto the beach.

A little variation in the beach and

its corresponding shadows will add a sense of depth to our scene.

I'm adding a line of

the darker mountain color to give our beach more contrast from the water below.

Reusing the cloud colors from before,

I add strips of color depicting waves or maybe reflections of the clouds in the water.

The essential here thing isn't so much what this is depicting exactly,

as much as we're creating variations on

a surface that would otherwise be a pure flat blue.

Like with the clouds before,

I bring the mountain paneling and create as many variants as I like.

In the next video, I'll show you how to take

your finish background tiles and all the tiles we've made up so far,

bring them into Unity and turn them into levels.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play