II.Pixel-art basics

Pixel-art literally means that art is made thanks to pixels … such a bit global word since 3D and other things are also made with pixels … Actually pixel-art is used for pictures made with drawing/picture editing softwares (as MSpaint, photofiltre, paint.net, photoshop, the gimp, and so on and so on …). Unlike some people's thoughts, we aren't going to paint pixel by pixel … (fortunately !), only when there are very small parts of the pictures to make. Hopefully mankind advanced its technology and thanks to homo-sapiens-computerus, many usefull tools as photofiltre - which we'll use - which can make lines, gradients, and many cool stuff.

So pixel-art needs some patience and time to spend, of course, the result's quality depends on the time spent to work on. But as it's said : when you love it does not ! Plus : with pixel-art we can easily as good results as in 3D, when you know the way to do good things. Seeing many 3D creations which are really not nice, I can say that in pixel-art we can easily to better than 3D.

Stop saying craps, let's starting the tutorial. Each part of this tutorial has exercices which are important to do, links to the photofiltre introduction's page each time it's necessary.

A last thing to know : for Simutrans graphics are in isometric viewpoint, so we'll have three perpandicular axes : length, width, height which are in Simutrans North-South, East-West, height. Let's see that :

In pixel-art, pictures are almost made side by side, but to exist, a side needs edges limited by lines. Let's see this :

Look this source picture (it's a simple station extension).

Two axes are easily noticed : North-South axis with top left and bottom right edges and East-West axis on the other sides. These lines are completely visible, but you know that your screen is made of pixels, so to draw diagonal lines we have to cheat with pixels … see :

We can see by zooming in that edges are crenel shaped. We can also see that there's two pixels width for one pixel height, and it composes the line. Maths'addicts say that there are lines what their equation are y=0.5x and y=-0.5x.

So this is what you have to see :

Two pixels width and one height, it's a base of Simutrans'graphics, you have to know it and it must be the first thing that comes to your mind when you draw. You draw in a rhombus with a great diagonal of 128 pixels (or other according to the paksets) and you have to see with this angle.

Lines'drawing is important, it's the structure of what you build. However you can see in the exercise above that there's a pixel in excess at the bottom right of the first line and the top right of the second line. It's a photofiltre's problem, this pixel shoudn't be here … you can remove it. Even you know how to draw lines with the line tool, this tool isn't practical to use on small parts, you have to know how to draw lines pixel by pixel to gain some time (one pixel above, two pixels on the right, one pixel above, two pixels on the right, …).

To make this knowledge of lines perfect, let's see how it is on the corners of a tile.

Notice here the combination of the both lines. On the left, to make bottom and top corners, lines are put beside each other, so we have a four pixels corner composed of the extremities of each line. On the right these extremities are merged as you can see with twice colored pixels. Practice by reproducing the corners with the paintbrush tool and the max zooming in.

The paintbrush tool in Photofiltre

To end lines : a small exercise :

Of course we can't see lines of objects in Simutrans, they're virtual. However we can guess them watching sides of objects, indeed lines determine sides that compose the object. This is what I mean :

Here we can't see lines on the right graphic. In fact, even it's possible, lines of an object are never drawn before sides, sides are directly drawn. Maybe it looks a bit difficult for a beginner bu finally it's much simpler. Let's start with a simple cube … We are going to make a 64 pixels sided cube. We have three sides to draw, the top side will be exactrly like a simple tile : a 64 pixels sided square which appears like a rhombus on the screen. Draw it (in light grey or with a color, as you wish).

Then the South side is drawn, in a lighter grey or in another color by this way : draw two vertical lines of 32 pixels at each extremity and draw at their bottom a 64*32 px line. See :

Finally we have to fill this shape, make the other side repeating this or copying, pasting, horizontal symmetry, place the selection to have the Eastern side and unselect. In this case you have to sides same colored, make the selection appear with show selection icon, fill the light grey side with dark grey.

Selections in Photofiltre

This is the result : a cube !

So cubes are nice and very simple but it's not all the pixel-art, how to create more complicated shapes ? For polyhedrons (with flat sides) we are going to see it, for cylinders, spheres, and other such rounded things we'll see it later because it's necessary to learn other things.

Think you have to make a section of the cube as defined by the red lines :

To make sections, if you have well defined it (copy the picture and zoom in to see the details), it's very simple. Draw along red lines, other lines which are colored with the color of the future side. Here a lighter grey is used. Draw lines along the section (if you drew red lines before you can use “replace color”).

Replace color in Photofiltre

This is the result, then as indicated on the picture, remove pieces in excess and fill the other ones :

I think you understood however let's see how to draw sides one by one.

For top faces it's already explained above. For a lateral vertical side, you just have to draw an horizontal line (horizontal according to space, not on the screen) and extend its extremities with vertical lines, close the shape and fill it. See some schemas :

Here I used a usual direction fot the base line but you can use any direction, as long as lateral side are vertical you'll have a vertical side. Of course we can maje non rectangular sides, see here :

Non rectangular sides can be intuitive when you are used to them but you can be helped by a structure, like here in grey, which you remove at the end of course. Thanks to this structure, you can create some strange shaped sides …

Don't worry, such shapes aren't usually directly made, they're mostly created by the intersection or the merging of simpler shapes …

It's the same way for inclined sides : you can make them intuitively like the pixel-art master with his eagle eye and his perfect spatialization or you can make a tridimensional grey structure which is removed at the end like a newbie reading a tutorial :

So, with this we can make everything except rounded sides, we can make the shape we want ! Then, you're going to make the shape I want !

As you saw in some shapes above, sides are defined mostly with their lighting. Indeed as in real, Simutrans has a Sun, which is stationary. It shines on the South and its rays come to the ground with a 60° angle as shown on this picture :

We can define the lighting by maths but don't worry I'm not going to do this for this time.

Before seeing complicated things, see how it just works. On these screenshots of the game, you can easily see that the most lighted sides are Southern ones :

Notice that, since the angle between the Sun's rays and the ground is 60°, the top sides of objects will be more lighted than lateral Southern sides.

Here is a cube to explain this :

The top side is the most lighted, then the Southern side is well lighted and the Eastern one is the less lighted.

currently, knowing that the Sun lights with an angle of 60° with the ground, we could do some trigonometry but we aren't going to do such an horror.

With buildings, when sides are too big, a simple color can give a void impression … So textures are used.

Of course we have to adjust the orientation of the texture we have. There are two ways to do it.

Firstly choose a texture to apply to the side. Copy this picture in photofiltre :

As you can see the sides we have to texture aren't as orientated as the texture. We have to adjust it. Copy it in the same picture and go in free transformation. Incline vertical axis by -50%.

We must have this. Let it here.

We are going to see the second way. Cut the original (keep it in the clipboard or somewhere else). This texture was 86*63 pixels. Draw a parallelogram 63 pixels height and which bases are 86*43 px. This is the result :

Paste the original texture, its right side must be on the right side of the parallelogram. Then right click\distort, place the left corners on the parallelogram's ones. This is the result :

Here textures aren't placed normaly according to the sides we are coing to texture. It's a mistake, do a vertical symmetry on the textures.

Now let's prepare the shape we are going to texture. Make an horizontal selection around and color the background of the selection with a showy color (red for example).

The following process consists in applying the lighting the the sides to the texture. If they're just pasted on with transparency, the texture is going to lose colors. So we are going to make its colors brighter. Select it, filter\color\colored layer and do a inverted layer with 127/127/127 grey with 50% transparency. So the color we are going to remove with our sides'grey is added.

See the result :

Now copy and paste the sides on the texture with a 50% transprency, check that grey sides are well placed on the texture's sides. This is the result :

Now we have to remove the borders which are useless. Paste the same selection with no transparency and the grey transparent. Place it at the right place. Then clean the result by removing the red and the texture's pieces in excess : so these are bricks walls :

Nous allons parler d'une notion très importante pour faire gagner énormément en qualité à vos graphismes. Voyons déjà le résultat : observez les deux parties de cette image, à gauche c'est “avant” et à droite c'est “après”, je vous laisse tirer des conclusions…

Les contours sont nettement adoucis et ont l'air bien plus réels. Voila le fonctionnement : lorsque vous tracez une droite oblique, comme on l'a vu au début de ce tuto, on a des sortes de créneaux, seulement sur le résultat final des créneaux ça se voit … et c'est même très laid ! Le but est donc de faire disparaitre ces créneaux en adoucissant les lignes obliques. Le résultat parle de lui-même : on y voit que du feu ! Des méthodes plus ou moins poussées d'anti-crénelage se retrouvent sur tous les graphismes du pak128, ceux qui ne sont pas anti-crénelés ne sont généralement pas inclus dans le pak, ce qui explique qu'on ne trouve pas dans le pak128 de base des graphismes un peu brouillon.

Entrons dans le vif du sujet ! Nous allons commencer avec du simple de chez simple et qui me permettra de vous décrire les deux façons d'anti-créneler.

Commençons par le plus simple : on applique un anti-crénelage d'un seul côté de la ligne :

Voila pour commencer le résultat qu'on aura. Observez la structure des pixels … On a à gauche la configuration de base. A droite j'ai entouré en rouge les pixels qui vont être anti-crénelés.

Vous voyez que les pixels anti-crénelés sont ceux qui sont à l'intérieur des créneaux. Mais en fait comment va-t-on anti-créneler ces pixels ? Comment va-t-on rendre le tout plus “doux” ? Et bien c'est simple : il y a un effet de créneaux parce que la différence de couleur est maximale, la limite est brute, et vu que les pixels sont carrés ont le voit très facilement. Le but va donc être de réduire le contraste entre les deux couleurs. Les pixels qui sont au coeur du créneau vont être mélangé. Dans notre cas ce sera 50% de chaque couleur, et voila le résultat :

Basiquement comment va-t-on s'y prendre ? Ici on fait un mélange de couleur, le plus pratique à faire est de zoomer à fond et d'utiliser l'outil ligne sur un seul pixel avec une des deux couleurs et 50% de transparence sur l'autre couleur.

On remarque que l'outil ligne a une option “lisser”, elle peut être utilisé mais que sur certains cas rares car le lissage des lignes n'est pas vraiment adapter à cet usage.

Voyons maintenant une deuxième méthode : un peu plus complexe. En reprenant le même exemple, voici le résultat par cette seconde méthode :

Si vous regardez bien vous verrez que le bord est encore plus adouci qu'au-dessus. Voila pourquoi : on modifie cette fois-ci les pixels de chaque côté de la limite :

Seulement cette fois-ci on ne met pas 50% d'opacité en utilisant l'outil ligne, car on se retrouverait avec une ligne centrale ou tous les pixels entourés en rouge auraient la même couleur. Or le but est de faire une sorte de dégradé entre les pixels rouges. On va donc mettre sur les pixels de la couleur 1 33% de la couleur 2 et sur les pixels de la couleur 2 33% de la couleur 1. Voici le résultat :

Maintenant que vous savez tout, anti-crénelez vous-même la partie gauche de l'image du début de cette partie. Vérifiez ensuite avec la partie droite.Les lignes dans photofiltre

Anti-crénelez également le bâtiment que nous avons fait tout à l'heure :

Un problème apparait : toutes les lignes ne sont pas de 1*2 ou 1*1 pixels, comment anti-crénelez les lignes ayant une pente différente ??

Il y a deux méthodes possibles. Soit faire comme avec les autres lignes et jouer avec la transparence :

Soit utiliser l'outil ligne avec le lissage activé sur une petite portion :

Ici on utilise la couleur des pixels qui sont ici coloriés en rouge : c'est-à-dire le gris foncé. Et ensuite on reproduit le tout. On peut tracer toute la ligne d'un coup mais gare aux surprises avec l'outil ligne de photofiltre …

Voici le résultat final :

C'est déjà plus propre non ? L'anti-crénelage est réellement important pour le graphisme, il FAUT le faire.

Il y a dans Simutrans des couleurs spéciales qui permettent de faire pas mal de choses mais dont il faut également se méfier. Les voici :

Alors oui je sais c'est pas très digeste vu comme ça … On va détailler ça :

Déjà voyez que pour chaque couleur vous avez le code hexadécimal, ce qui peut être utile pour les utiliser dans photofiltre sans charger une image contenant ces couleurs.

• Les six premières couleurs sont les “non darkening grey”, ceux sont des gris qui ne seront pas assombris lors du passage en mode nuit.
• Vous avez ensuite les “light”, disponibles en bleu clair, jaune, rouge, vert, violet et bleu. Ces couleurs ne sont pas assombries la nuit, tout comme les gris vus au-dessus. Elles servent à faire des lumières permanentes comme les phares des trains et des camions ou la lumières des feux de signalisation.
• Mélangés aux lights, on a les “windows”, qui comme leur nom l'indique servent à faire des fenêtre. Ces couleurs sont foncées ou clair le jour (on les utilise selon l'orientation) et éclairées la nuit. Le jour on mettra donc des fenêtre claires sur les faces Sud et des foncées sur les faces Est mais la nuit elles auront le même jaune. Attention toutefois, l'une d'elle a un jaune différent des autres. On s'en sert pour faire les fenêtre des trains et autrex véhicules mais aussi pour les bâtiments ou l'éclairage des stations, etc …
• Les player colors sont les couleurs qui changeront dans le jeu selon la couleur du joueur. Il y en a deux qui varient la luminosité, la player color 1 aura la couleur que vous avez choisi dans le jeu, la deuxième aura l'autre couleur que vous avez choisi dans le jeu. Les variations de luminosité de ces couleurs sont très utiles mais si trop peu nombreuses. Par exemple, les deux sont utilisées dans l'image qui est en pied de page de ce site à gauche : le z22500 (train qui passe sous le pont) a des bandes bleues et jaunes (dans la réalité c'est bleu et rouge), les bandes bleues sont des player color 1 et les bandes jaunes sont des player color 2.
• Et enfin la couleur de fond transparent, c'est celle que vous devrez mettre en fond sur toutes vos images source avant de même de dessiner dessus ! cette couleur n'apparaitre pas dans le jeu et ne fera donc apparaitre que votre dessin (ce qui est quand même mieux … voir un train en forme de gros carrés blancs ça ne réjouit pas l'oeuil).

Voici tout de même une forme plus compacte des special color que je vais vous présenter :

Non il n'y a pas exactement deux paquets de couleurs, j'expliquerais ce double après. Celui du haut contient en première ligne la player color 1 puis en deuxième ligne la player color 2. Les deux autres lignes sont divisées en 3 rectangles. Le premier contient les lights, ensuite les fenêtres (la fenêtre qui ne s'éclaire pas de la même façon que les autres est indiquée par un point rouge) et le troisième contient les non darkening grey ainsi que la couleur de fond (en bas à gauche du rectangle).

Seulement parfois en dessinant on fait apparaitre involontairement des couleurs spéciales, pour les supprimer il suffit de faire varier la couleur d'une unité RVB, les couleurs du dessous sont donc les fausses couleurs spéciales dont vous pouvez vous servir pour enlever les couleurs spéciales involontaires. On se sert de l'outil remplacer couleur pour ça.

Finissons cette partie avec quelques exemples d'utilisation de special color sur ce morceau de source du z22500.

Pour donner des effets d'arrondis on se sert des dégradés de couleur. On fait un dégradé de la couleur la plus claires à la plus foncée, si on texture ensuite on le fait en niveau de gris grâce au dégradé.

Facile à faire grâce au dégradé, il servira également d'exemple … Voici le cylindre qu'on veut éclairer :

La partie bleue doit donc être éclairée, sachant que le Soleil éclaire par le Sud. On va beaucoup constraster nos couleurs de façon à pouvoir le texturer ensuite si besoin. Il faut repérer les couleurs suivantes : les couleurs des extrémités et la couleur la plus claire :Ensuite on mesure les longueurs entre chaque trait avec les traits compris et on fait les dégradés sur une autre image entre ces couleurs :Pour finir on colle le cylindre bleu sur ces dégradés avec le bleu en couleur de transparence :

Les autres arrondis fonctionnent sur le même système mais on ne peut pas faire directement un dégradé pour les représenter. La méthode la plus simple est de représenter les différentes luminosités par des couleurs vives et facilement repérables, ensuite on fait un dégradé entre la couleur la plus foncée et la plus claire et on remplace les couleurs vives par les couleurs du dégradé :

Le but est de donner un effet réaliste de mirroir comme les surfaces vitrée d'un gratte-ciel (bien sûr on peut le faire avec d'autres matières et sur d'autres objets …).

Voici l'horreur que nous allons légèrement embellir :L'effet sera bien entendu sur la partie bleue. Voici le ciel que nous allons mettre :Comme pour texturer différentes parties d'un objet, on va faire un second bâtiment à partir du premier mais en remplaçant la surface vitrée par une surface rouge et nette, on peut le faire en se servant des sélections de photofiltre :

Pour appliquer ce morceau de ciel au bâtiment, on le fait avec transparence, entre 30 et 70% selon l'effet voulu, ici on utilisera une transparence de 50% pour coller la première image sur le ciel. voila le résultat :Bien sûr on ne veut garder que la partie vitrée du bâtiment, on va coller par-dessus cette image la seconde image en mettant le rouge en couleur transparente :

Pas vraiment de démonstrations pour cette technique … il s'agit d'ajouter une touche de réalisme aux objets en rendant extremement lumineuses les surfaces éclairer verticalement par le Soleil ou presque. On n'hésite pas à utiliser du blanc pour ces surfaces mais en fait il s'agit généralement de quelques pixels. Voyons des exemples :

rvg_tigress : On distingue le trait très clair sur la bande orange tournée vers le Soleil.

SNCF_z5300 :Ici l'effet a été poussé à l'extrême car le z5300, familièrement nommé “petit gris”, est métalisé. L'effet de reflet réaliste peut donc donner une information visuelle sur la nature de l'objet. Voyons d'autres exemples pour terminer :

Afin de reprendre presque toutes les techniques vues sur ce tuto, nous allons faire ce bâtiment :Il n'est pas spécialement beau mais il permet de reprendre pas mal de techniques. Attention je ne détaillerais pas plus que ça les étapes vu que chaque technique a déjà été vue plus tôt !

On va commencer par construire chaque partie du bâtiment, n'hésitez tout le long de l'exercice à copier une image pour zoomer et bien voir ce qu'on fait.

Voila pour la construction de base. Ensuite il s'agit d'anti-créneler le tout. Faites des anti-crénelage sur deux cases pour les lignes gris-gris et gris-bleu foncé, et des anti-crénelage sur une case pour les autres (zoom sur cette image pour plus d'infos) :On a donc ici une vision de ce que deviendra le bâtiment. Mettons des fenêtres plus réalistes et une petite allée entre la porte et le trottoir :La manipulation qui suit est un peu complexes : en texturant le bâtiment on aura besoin de mélanger les textures au niveau des anti-crénelage. Avec un peu d'organisation voici ce qu'on fait : faites trois copies de l'image et grâce à l'outil baguette magique faites très facilement trois images avec des pixels rouges pour les pixels d'anti-crénelage 67%, 33% et 50%. Voir image poir plus de compréhension :Voila les images qu'on obtient en supprimant sur chaque copie tout ce qui n'est pas rouge (en jouant sur les sélection et grâce à l'outil baguette magique) :

On va ensuite commencer par texturer les fenêtres puis le sol : sur deux nouvelles copies de l'image isolez chaque fenêtre et le bleu du sol, l'anti-crénelage lié à chacun sera compris dans l'image en étant recolorié comme si c'était pas un anti-crénelage (voir image …..) :

Texturez les respectivement avec les images suivantes :

en suivant la méthode d'effet vitre pour les fenêtre : coller avec 50% de transparence et coller le contour par-dessus; et tout simplement avec le bleu transparent pour la troisième image, mettez le tout dans une même image, voici le résultat :

Texturez l'image principale sur la texture suivante avec 50% de transparence (collez avec la transparence puir coller les contours que vous aurez sélectionné avec l'outil baguette magique), il faut mettre tous les anti-crénelage en gris pour cette opération (voir image pour plus d'info).

C'est ensuite qu'interviennent les images en points rouges faites tout à l'heure. Il nous reste les images en point rouge, les deux images ci-dessus. Faites trois copies de l'image avec les vitres et le sol texturés et collez sur chacun d'elle les images en pointillés avec le rouge en transparence. Vous obtenez des pointillés comme sur cet exemple :Collez également les trois images de pointillés rouges successivement avec le fond en transparence sur l'image avec vitres et sol texturés, et supprimez les pixels en rouge. Ensuite c'est la fin : collez les pointillés sur l'image avec le bâtiment texturé avec les transparences adéquates (33%, 50% et 67%) avec fond totalement transparent et collez l'image avec vitre et sol texturés avec fond transparent. Voici le résultat :Pour terminer, utilisez ces fenêtres comme vous voulez pour agrémenter le bâtiment (pour les mettres sur les surfaces en pente, utilisez la distorsion ou l'inclinaison). Voici un résultat possible :

L'idéal pour ce bâtiment aurait été d'incliner la texture de béton selon les faces du bâtiment, mais en comprenant les anti-crénelages cela aurait été beaucoup trop fastidieux. Bien entendu c'est le cas uniquement lorsqu'on utilise des textures, pour des objets plus petit on n'utilise très rarement des textures ce qui raccourcit énormément le travail.