Introduction

In this tutorial I will explain my method for creating art for 2D video games, what is known as "2D assets" or "sprites" in English and in the video game developer community in general, for use in Unity or similar.

Especially I will focus on art for side view video games or "sidescrollers" such as "Ori and the Blind Forest", "Hollow Knight" or "Monster Boy", especially I mention these because I will not use pixel art, I will simply use normal digital art.

I will go step by step explaining how to create from platforms, decorations and backgrounds, and that they all fit together to create different levels or scenarios in a cohesive, natural way and that they are ready to import into Unity or a game similar engine.

Clip Studio Paint, has very comfortable tools, such as the [Symmetric Rule] that help me to perform this type of work quickly.

 

Before starting

Before starting to draw / paint, we must think about the resolution of our assets.

Although there is no specific rule of how large the resolution of our assets should be, we can take into account some parameters:

• If we are going to create assets for PC, the most common resolutions today are “full-HD” (1920 × 1080 px) or 1280 × 720. Although there are also 4K monitors and other variants.

• For mobile phones the resolution varies greatly, some phones use 720p and others can even reach 4k.

• My advice is to investigate for which platform you will create your assets and based on that choose a resolution.

In this tutorial we will focus on the most common resolution, 1080p.

Think the idea

If you are using this tutorial to practice your art for video games, it would be a good idea to think about what you would like to create. In my case, I will create a forest full of vegetation, an ancient forest in which to get lost, with rocks and strange plants:

 

Let's create some sketches before starting to visualize the idea.

1- The ground / Platforms

The first thing is to start creating the ground and the platforms on which the character will walk or lean. First, we will create a green grass floor, with leaves of different colors, it would be an “asset” that in the future we can modify and edit to create more similar “assets” that combine with each other.

 

1- We draw a small sketch of our grass idea, very simple, nothing

complicated.

2- On a lower layer we paint a green base.

3- Remove the sketch layer and paint several subtle shades of green.

4- We start adding details with sheets of different colors.

5- Finally we add a small silhouette of black leaves.

Rapid horizontal soil test:

Take the test to see if your herb combines with each other. The black sheets will help us so that the assets can be mixed together.

 

1- Select your piece of grass and duplicate it.

2- Join them in a way that more or less combine.

3- Continue adding pieces of grass until you get a uniform horizontal soil, and

finally fill the bottom with black.

As you can see it looks pretty good, with enough style and personality!

Now let's see how we can make it not so repetitive.

Variety in the soil:

Although our land asset works quite well, we can always add some variety quickly.

Technique 1:

We can vary the color by pressing [control + U] and modifying the [Tone] slider.

As you can see, black remains black, but the other colors change. This can help us create different variations of assets and settings very easily, without the need to create new assets from scratch.

Technique 2:

We can vary using the initial herb asset, modify it and create larger assets, which occupy more area and are less repetitive.

 

1- Take your piece of grass and duplicate it.

2- Join them in a way that more or less combine.

3- Now we will try to add more leaves in the middle and other colors to add more variety.

As you can see this technique takes a little more time, although the final result is quite professional, now we have our original asset, the colored assets and this new double asset. Now our soil will be much less repetitive, and it will look much better!

2- Walls, floating, horizontal and vertical platforms

Once we have our floor, we can start thinking about the walls, and vertical platforms. For the herb, my method is very simple.

 

We duplicate the asset, and with the [Free Transformation] Control + Shift + T tool, we modify the asset as it suits us.

 

We can use flipping horizontally to flip it, change the angle to 90º to make it vertical, or even diagonal if you want.

Here are my examples.

 

Once we have the variations, you will see how easy it is to create different levels of terrain. For example, let's make a floating square.

 

Simply, place your new modified assets in a square and fill in black the empty part in the middle.

As you can see it is super simple and the result is quite good. This square could be a floating platform on which your character can hold.

Not only can we make squares, these assets can be modified as you wish. For example, and made two rectangles following the same techniques explained above, mixing the small asset and the double asset.

Now we have 3 different platforms!

We will collect the assets we have created so far.

A little trick that I do is the following:

We copy our assets, and press [control + U] and, by modifying the [Lightness] slider, we convert all the pieces to black. These pieces will serve us to place ahead of those that have color and thus be able to cover errors or create elements in the foreground.

Now with all these assets we can start testing small levels. Using the pieces that we have built in the previous steps I have been able to create this small tunnel.

3- Decorations

Now we are going to create different decorations so that our stage / level is more varied and unique.

 

Plants:

 

Let's start creating some plants.

 

1- Draw simple plants.

2- Add color below the sketch line.

3- With a darker tone emphasizes and adds shade to give volume.

4- Finally add details.

Here are some examples of how to use the plants. If we use the same trick to convert them to black, we can place them in a top layer to create more detail and depth. It is a very simple technique, but it gives very colorful results.

Rocks:

 

Let's create some rocks.

 

1- Draw simple rocks.

2- Add color below the sketch line. In my case I used gray.

3- Little by little we are giving details and adding different tones. You can use colors

that you already used in plants to combine better.

4- Add darker tones to create volume in the rock.

5- We duplicate them and do [Vertical flipping]. Press [control + U] and by modifying the [Brightness] slider, we convert all the pieces to black.

 

6- We bring them together and with the help of a mixing brush we unify the two parts. This process may take a little longer, make sure it is the best possible.

Here are some examples of how to use plants and rocks at the same time.

Rocks with grass / mounds:

 

We are going to create some rocks with grass to add more variety.

 

1- Draw a mound of grass.

2- Add color below the sketch line. In my case I used green tones.

3- Little by little we are giving details and adding different tones. You can use colors that you already used on plants to match better. This process is a bit complicated since it requires some time. You can use the [Symmetric Rule] tool to help you create this asset faster.

4- Once finished, we add variations to break with the symmetry of the rule and so that it is not so repetitive.

Now from this rock we can create larger variations to decorate open spaces.

We gather three mounds and gradually we unify them until we get a new asset similar to the previous one.

Here is an example of how to use these grass mounds.

Columns:

 

We can also create columns that can block the passage of the character or position itself behind it, to hold floating platforms or simply to use as decoration.

 

1- Draw a column with vegetation.

2- Add color below the sketch line. In my case I used the same colors as those of the ground, green tones.

3- Little by little we are giving details and adding different tones. You can use colors that you already used on plants to match better.

4- Add a black silhouette to have more variety to help combine with other assets in black. (Below is an example.)

We duplicate the asset, and with the [Free Transformation] Control + Shift + T tool, we modify the asset as it suits us.

We can use [Flip Horizontal] to flip it, stretch it or flatten it to create different variations quickly.

Here is an example of how to use columns with other assets. As you can see the black of the columns is perfect with the roof.

Collection of assets created so far:

Let's gather all the assets and see if we need to create something else.

4- Extras

Since my main idea was to create a forest I will add some more decorations, perhaps with different colors to stand out from the rest, we can also add some kind of obstacle that hurts the player like spikes.

 

1- Draw different plants from the previous ones. I also drew a skewer.

2- Add color below the sketch line. In my case I used some blue and yellow tones.

3- Little by little we are giving details and adding different tones. You can use colors that you already used in the plants so that they combine better, just like in the previous assets.

4- We continue refining the new decorations until we are happy with the final result.

From these we can make new variations very quickly.

 

By duplicating the sheet several times, we can reposition it to create a completely new plant. The tool [Free Transformation] Control + Shift + T will be very useful for this type of quick modification.

With the fern we can vary the color by pressing [control + U] and modifying the [Tone] slider. We can also modify it with [Free Transformation] Control + Shift + T.

By duplicating the leaf many times and changing the tone and brightness we can create different plants similar to each other and that combine with each other.

We can also do the same with skewers to create rows and walls.

Here is an example using some of our assets and these new decorations.

Remember to play with black elements to create depth and contrast.

5- Black border and final examples

This is all that I have created so far.

We can still use some more tricks. For example, I like to add a black border that surrounds all our assets. It is a fairly simple technique that gives a touch a little more cartoon.

 

1- Click [control + click] on the layer thumbnail. You will see that a selection is added around our assets.

2- Press [Control + T] to enter the Scale / Rotate mode. You will see that a small menu appears with different buttons and icons. Click on the icon that I highlight in yellow and we will access [Expand selected area], with two pixels it would be enough.

3- We click on the [Fill] icon with black color.

 

4- The final result would be our asset with a black border.

We do the same with all our assets at the same time, and the final result would be as follows.

These are some of the scenarios that I have managed to design with these assets for my video game. As you can see, you can play with different shades to create depth.

 

• Using lighter colors we can create distance.

• Using darker colors we create closeness.

In this I have changed the tones, so that they are more blue, with a simple click we can totally change the sensation and appearance of our assets.

Beware of that chasm abyss!

Final tips

 

• Learning to design art for video games requires a lot of time, creativity and dedication, do not be discouraged if at first things do not go well.

• As you have seen in this tutorial Clip Studio Paint, it has many tools that facilitate the creation of these. Become a teacher of the program to get the most out of your time.

• Play video games and observe their art and how the creators design the scenarios, get inspired by your favorite games, try to think how they have created them, and then apply what is observed in your own creations.

 

I hope you liked the tutorial, any question you can leave a message below.

Thank you!

Maaot