πŸ“œ ⬆️ ⬇️

The course of pixel art 3

This is a translation of the publication "Les Forges Pixel Art Course" .

Part 1: The Right Tools
Part 2: Lines and curves
Part 3: Perspectives
Part 4: Shadow and light
Part 5: Color Palettes
Part 6: Smoothing
Part 7: Textures and Blur
Part 8: The World of Tiles

Part 3: Perspectives


The problem of perspective in 2D games is a question that arises often, and this is probably why so many amateur games have a lot of inconsistencies in this area. In particular, this part addresses typical RPG perspectives, so if you are looking for information on a side or first-person view, you should look elsewhere. It is important to remember that the perspective is β€œthe art of presenting three-dimensional objects on a flat surface (in this case, this is your screen) as an observer would see them.”

First of all, I would like to thank Lunna, without whom this section would not be the same as now; This is actually a revised version of the conversation that we had on this topic.
')
1. Prospects - and why the plural?

Because there are several different types! If you read books on drawing or took lessons, you probably know that there are one, two and three-point perspectives. This is not what we are talking about here, so you can forget about it.

In 2D video games, the simplest perspective used is called "axonometric." What is this beast? In the axonometric representation of space, an object is represented by three coordinates (X, Y and Z), each of which is constantly growing in a certain direction. In particular, this means that the two parallel lines in reality will be parallel in the axonometric perspective, and the size of the object does not change, regardless of their distance from the observer. Finally, there are an infinite number of axonometric perspectives, since the artist is absolutely free to place the three directional axes of his choice. We consider the three most commonly used axonometric projections (see picture).

image

This is called an isometric perspective: the Y axis should be tilted 30 degrees to match the definition of an isometric view, but since this is not possible with simple pixel art, it is represented through a 1: 2 line (see the previous section) and the angle is only 26.5651 degrees (I will spare you from the calculations leading to this conclusion). This type is particularly suitable for tactical RPGs, because it can provide convincing depth and height. But not suitable for maps in traditional RPG creation programs (for example, RPG Maker) due to the shape of the tiles.

image

This is called a planimetric perspective. This time, the Y axis is inclined 45 degrees from the horizontal, and is 1: 1 straight. Very few games use this (the most famous of them is Boktai), but it can still be interesting and rich in volume. This perspective could be more common, and it is up to you to use it.

image
Finally, the last (and less attractive) is the famous 3/4 perspective: the Y axis is tilted to the left, connecting with the Z axis. This is the view that most RPGs use, and we will discuss it in more detail.

2. All about the form of 3/4

image

Theoretically, I could have stayed here, but I assume that you are not so smart, and I will show you some examples with comments.

Let me start with a simple example: a barrel (this is an element of any set of city / abandoned mine / house /, etc.). What is interesting in it? ROUND COVER. Not an ellipse, as often seen. This is so for two reasons:

- This is a circle in a real game (round cap)
- It is parallel to the ground, and thus visible from above.

There is no slope. You must accept this in all horizontal planes that are visible from above if you want to do 3/4 in series.

image

We will continue with a more complete example, generously provided by Odie. First of all, notice that the top of the tower is round. Also look at the door, walls and windows. They, they ... I will give you a second ... they? (No, they are not terrible). They are 1 to 1. Again, the magic of our three axes in action: the vertical planes are presented as they are seen from the front, the same with the horizontal ones.

image

But then what happens when we want to represent a vertical plane and horizontal planes? Nothing special. Their interaction is not a particular problem. Look at the stone walls of Odie, or the steps (or the cabinet, or the walls) and the excellent Bahamut Lagoon screenshot on the left to be sure. In short: horizontal planes are visible from above, vertical planes are visible from the front.

3. Extension possible vanishing points underground

image

Well, I hope you still understand everything, because it will be a little more difficult here. I told you at the beginning of the piece, not to take into account the perspective point. Now we will do a little bit of this. One small reminder (see left) may be enough for you to understand the idea of ​​a one-point perspective. As you can see, somewhere there is a point (not in the picture) where all horizontal lines point (since the picture was taken on a plain, from the ground) - this is called a vanishing point. You do not need to know more to understand this article, but if the topic interests you, I advise you to read a course on drawing perspectives .

Let us return to our course - how do we use these vanishing points? To improve our prospects! Unlike the picture depicting the Palace of Versailles (know?), Vanishing points will attract vertical lines. Ideally, we would like to fix the points and draw them on top of our map, but this is incompatible with the system used in tile-based RPGs. The solution is to assign an individual vanishing point to each object in our tile set. It's a little less elegant, but the result is good! Here are two screenshots of Golden Sun and Golden Sun 2, these are the only games using this technique that I know. Sheen graciously identified some vanishing points of these images.

imageimage

Notice that all vanishing points are located under the objects (since the camera is directed from top to bottom) and everything is almost of the same depth (so that everything looks uniform). The last short comment: the lower your vanishing point, the closer you are to the standard 3/4 run, so by placing your vanishing points at infinity, you get a result close to pure 3/4 (magic, huh?).

Now you know a little about perspective, and there is no forgiveness for mistakes, it is all the more difficult to fix, and you can draw lines (and vanishing points if you try the Golden Sun method) to help you.

Source: https://habr.com/ru/post/242023/


All Articles