menu button

Principles

This Kind Of Art

Before we go any further I think it is appropriate to make a reminder.

Everything we do here is about a particular type of game art.
About which we have a pragmatic approach, targeting people like me.
People born without talent for graphic arts.

This is NOT intended to be a complete study.

The Point Of View

This is the most fundamental definition of the game art.
What is the relationship between your eyes and the things you are looking at?

Imagine that you are sitting on a chair at a table, playing chess or having dinner.
Then you look at a chess piece on the center of the board or to a matchbox on the center of the table.

This is the point of view that we are going to use.

You are not seeing a creature from above.
You are not seeing a creature at its level.

This style is called 2.5D because it is between 2D and 3D games.

Game Art And Game Mechanics

Another fundamental definition is about the basic mechanics of the game.
The basic mechanics of the game and the chosen point of view must match.

In a classic (2D) video game, you move your hero up, down, left and right.
The correct point of view is "placing" the beholder at same level of the hero.

While in a 2.5D game, you move your hero forward, backward, left, and right.
There is depth! You can't use the same point of view.

2.5D games internally divide the ground in regular squares (or hexagons).
Generally each monster occupies just one square (or a set of 2x2 squares).

The main purpose of the game graphics is not to look attractive.
The main purpose is to clearly inform the player about the game mechanics.
Like which path is blocked and which is not.

The Graphic View

Graphic view and point of view are not the same thing.
Tibia, Ultima 8 and Lost In Maze share the same point of view.
But each has its own graphic view and mechanics.

Ultima 8 uses the isometric view widely used in 2.5D games.
Where creature and trees are drawn vertically.
And walls and streets are drawn diagonally.
The natural move of the hero is diagonal to screen.
(Diagonallly here does not mean exactly 45 degrees.)

Tibia uses a strange graphic view: everything is drawn diagonally (45 degrees).
That allows the hero to move orthogonally to screen, better to the gameplay.

In Lost In Maze all sprites are drawn orthogonally to screen.
Which is good for the gameplay but makes harder to draw walls.

Note:
The 3 styles express depth with the same carachteristic:
No element changes size as it approaches or moves away from the beholder.
Which greatly simplifies the game art and mechanics.

The Imaginary Cylinder

Open Arms



Above is the schematic of a monster with open arms in the graphic view we chose.

Clearly the monster blocks the square where he is stepping.
He also blocks with his arms, one square on the left and one on the right.

What if this monster spins to the right?
How would you be this sprite?

Remember that:
- the top of the head must remain at the same level(*)
- the feet must remain at the same level(*)
- the monster must remain looking big(*)
- the upper and lower squares need to look blocked

(*) The mere fact that the monster spins should not cause a shrinking or moving effect.

I don't think such a sprite can exist.

That is the main reason why we never see a monster with open arms.

So every creature is designed to fit an imaginary cilynder.
No problem to spin because it will always use the same square (or set of 2x2 squares).

Note:
Even the easy sprite in the example is bad to express the game mechanics:
the squares to the left and right are blocked, but they look clean!

The Light Source

Every painting course teaches that there are three basic elements:
- the object to be painted
- the position of the observer
- the position of the light source

We are going to use diffused light.
So we keep things simple (game logic and art).

There will be no strong, localized light source, creating bold shadows.

We stay with the diffused light, which produces no shadows.
But we will accept a small light source from the upper left corner.
This helps to perceive the volume.
This also makes the sprite looks nicer.

Note:
During gameplay, the game engine will cast shadows on the game picture as needed.

The Size

Tibia uses 32 pixels side squares for most of its creatures.
As they have a diagonal drawing, their height is more than 32 pixels.

Considering that
- it is hard to paint a creature in diagonal drawing
- it is hard to draw in such small space
- these sprites will be upsized when drawn on screen

I chose to use rectangles around 60 X 80 pixels for creatures.

Proportion

Spaceman Proportion (Lost In Maze)



Traditionally the main proportion in drawings is the relationship between head and whole body.

For adult humans this ratio is on average 1 to 7.5.
For human babies this ratio is on average 1 to 3.5.
When you define a creature,
the bigger the head relative to the body,
the less realistic and more like a doll it will look.

This is not necessarily bad or wrong.
On the contrary, it may be exactly the impression you want to make.

The Palette

Our sprites will have hundreds of colors.
But our palette will have few and distinct colors.

It will contain the main colors plus their light and dark variations.
We will only paint with colors from palette.

Shading And Volume

Shading is what gives volume to a flat image and makes it look nicer.

We will shade our sprites following a few simple and easy rules:
- about the light source (already described)
- salient parts are lighter
- deeper parts are darker

Few Resources, Few Sprites

It ain't easy for us, nerds, produce decent artwork.
We focus on produce something nice using few colors, few operations.

Any accepatable sprite made by us is considered ok.
Maybe we can improve it later. Maybe not.

We must use fast and easy techniques.
Or else we will not be able to finish all the sprites a creature demand.

We plan our games to use as little as possible number of sprites.
This means animation with very few frames.

We also try to reuse and compose (parts of) our sprites.

The Whole Picture

I once spent a lot of time creating a nice sprite of a tree.
But the nice tree was not compatible with the nice grass it was placed on.

So, think about produce a nice picture for your game.

Even though the individual sprites are not so nice,
minor flaws go unnoticed when the set is fine.

What matters in the end is the whole picture.

Beauty X Correctness

Do you want to make beautiful sprites? The first thing you must do is forget beauty!

Focus on correctness and the beauty will surge spontaneously (most of the time).

By 'correctness' I mean respect to the basic rules: graphic view, proportion, colors, volume, light...