Ewilan - tests esthetiques - Version imprimable

Ewilan - tests esthetiques - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Les réalisations de la communauté (https://jeuweb.org/forumdisplay.php?fid=39)
+--- Forum : Nos autres projets (https://jeuweb.org/forumdisplay.php?fid=54)
+--- Sujet : Ewilan - tests esthetiques (/showthread.php?tid=5246)

Pages : 1 2 3 4 5

RE: Ewilan - tests esthetiques - Jojodu42 - 20-02-2011

Personnelement Alchi, je trouve que les ombrages et autres jeux de lumières sont assez dur à mettre en place pour du Pixel-Art.
Mais le principal est toujours de bien choisir sa palette de couleurs !

RE: Ewilan - tests esthetiques - Nosrehl - 20-02-2011

Bin le pixel-art par définition est un art, et j'ai vu des trucs en pixel-art proche de l'oeuvre d'art (des trucs de malade y a qu'à aller voir sur deviantart).

Bref gg continue, ça fait plaisir de voir un graphiste doué sur ce forum =)

Il en faudrait beaucoup plus (des graphistes qui s'intéressent aux jeux-web) mais bon, les rémunérations sont ce qu'elles sont hein on sait ^^...

RE: Ewilan - tests esthetiques - Argorate - 20-02-2011

J'adore le pixel art!
Franchement c'est sympa, par contre je serais curieux de savoir ta technique de pixelisation, comment tu passe de la silhouette du rat uni en marron, à un truc avec plein de pixel de couleur différent partout?

RE: Ewilan - tests esthetiques - Alchimèriste - 20-02-2011

@ Jojo: les ombres sont en effet complexes à mettre en place mais ce ne sont pas tant les ombres ni ombres colorées (ambiant light) qui sont le plus difficile à réaliser en fait mais plutôt la façon dont celles-ci devront "interpréter" les volumes.. ça c'est compliqué et si c'est relativement facile pour des volumes simples ça devient l'enfer pour, par exemple, des corps humains ou d'animaux car il faut évaluer le profondeurs des creux ou au contraire le degré de relief des membres, muscles et plis de vêtements pour ne citer que ça.
Du reste la gestion des lumières n'est pas compliquée si on gère les volumes, il suffi de savoir d'oú elles viennent, à quelle puissance ou hauteur elles se trouvent, de quelle couleur elles sont et leur niveau d'absorption des couleurs ou de diffusion (interaction entre le support et l'éclairage). Ceci c'est la pratique de modding de Morrowind (jeu PC permettant de créer de nouveaux monde/modifier le monde existant) qui m'a un peu mis le pied à l'étrier et aussi la pratique basique de la 3D..mais de façon général la pratique de l'artisanat/artisanat d'art (Vitraux).
..mais je suis loin de maitriser tout ça en pratique bien que je pense bien cerner l'aspect théorique.

@ Nosrehl: Je dois avouer que c'est un Art en effet puisque l'on se dote d'une palette et que l'on mélange ensuite les couleurs et c'est pour cette raison que c'est difficile et parfois impressionnant et que malheureusement je ne suis pas un graphiste ni un artiste Smile

sinon ça se saurait et j'aurais mon blog d'artiste avec des projets d'artiste :p Mais j'improvise comme je peux, le principal étant d'aimer afin de vouloir avancer..j'aime donc j'avance..
Ensuite je pense que plein de gens doués s'intéressent aux jeux vidéos (dev) mais ce forum est assez orienté codage comme le disait Nihaoo donc c'est un peu normal de ne pas voir plus de personnes intéressées sur ces pratiques ici. Je ne pense pas que ce soit un problème de rémunération mais l'orientation de ce forum (ce n'est pas une critique) qui rend timide les graphistes ou pseudo-graphistes (peut être fréquentent-ils d'autres recoins du web je sais pas).

@ Argorate: comment je passe de la silhouette unie du rat au pâté de rat mélangé? Bonne question. Je sais pas vraiment te dire, c'est un peu au pif mais pas non plus trop au pif..je t'explique, en gros faut évaluer + ou moins les volumes avant tout et se limiter à un groupe de couleurs (la palette). Comme je disais à Jojo c'est une question d'interprétation surtout, les pros recherchent le réalisme, les amateurs comme moi cherchons l'illusion.

L'illusion de volume consiste donc à dessiner sur un fond uni les limites des formes (par exemple pour le rat c'est sa jambe/genou) mais pour un être humain ça peut être les pectoraux, les biceps, le nez etc.. une fois ces limites dessinées sur le fond il suffit d'appliquer de part et d'autres les couleurs en commençant (du moins moi je fais comme ça) par les plus foncés vers le plus clair. Je pense que l'on peut faire l'inverse aussi en fait.

Plutôt que d'expliquer un truc inexplicable car c'est inexplicable (vu que c'est à la main donc c'est pas tout à fait le cerveau conscient qui agis mais l'instinct) je te montre un exemple assez grossièred'une expérimentation que je faisais hier dans la journée après le rat.

/!\ Attention pavé : DiSCLAiMER /!\
Ceci n'est pas un tuto ni un exemple réussi mais un test et avant tout une démarche (personnelle) donc c'est pas forcément ça qu'il faut faire quand on fait du Pixel Art d'ailleurs ce n'est pas vraiment au niveau du Pixel Art que l'on peut voir par exemple pour de vrais jeux mais bon. Le processus décrit ci-dessous permet de répondre en partie à la question suivante: "comment on mélange les couleurs?".

1. But de l'exercice & Ressource de Travail

Je voulais faire un personnage..car souvent c'est ça qu'il manque dans les jeux en terme de ressource: des personnages, des animaux etc. Ne voulant pas partir de rien et afin d'avoir de bonnes proportions j'ai utilisé pour cette expérimentation un modèle assez académique et connu de tous: OSCAR ^^

OSCAR c'est le type au fond de la classe avait qui on discutait quand on était môme pendant le cour de 'Science de la Vie & de la Terre' quand c'était bien relou :hahahaha: il a pas vraiment la forme c'est vrai, un peu austère comme mec et il manque de conversation mais il sera pratique pour avoir un aperçu de ce que peut être un être humain..

De là je prépare ce cadavre pour en faire ma base de travail à la taille voulue après une réduction "à la sauvage":

Note que le but ici est de n'avoir que la silhouette, on se fiche de l'aspect intérieur de cette base de travail car de toutes les façon on va recouvrir ce tas d'os. On pourrait faire la même chose avec un squelette de dinosaure pour faire un dragon ou encore avec Paris Hilton un soir de beuvrie pour faire un sprite de vielle sorcière. ^^

Bref, le principal est donc d'obtenir une base de travail cohérente (c'est la technique pour ceux qui ne veulent/ne peuvent pas partir de rien comme pour le rat vu précédemment).

2. Produire sa base de travail

Dans cet exemple je n'utilise que PhotoFiltre (pas PhotoShop, trop cher mon fils), le logiciel gratuit que tout le monde connait. On pourrait utiliser MS Paint ou n'importe quoi en fait.

Une fois le squelette un peu dégrossis et nettoyé, faut tout de même un peu limer l'affaire car la réduction à la sauvage laisse des traces et des bouts d'os partout ^^ bref je fourre le tout sur un fond noir hop collé et vendu. Noir car ça met en valeur les tons alors que le blanc va les absorber et gêner mon œil. Tout ça c'est personnel.

J'en profite pour aller fixer sur cette image (en haut à gauche) quelques couleurs dégradées qui me serviront ensuite. Les coller sur l'image m'évite de devoir aller chercher mes tons à la main chaque fois dans PhotoFiltre (qui ne dispose pas de palette comme je voudrais) et pour aussi avoir le dégradé sous les yeux à chaque instant. Notons que si vous sauvegardez et que vous reprenez le fichier au mois la palette sera sauvegardée avec le fichier de cette façon donc jamais perdue. Ceci est ma palette donc. Tout est prêt.

Pour mon test je me limiterais à 6 couleurs si on compte aussi le blanc (ce n'est pas tout à fait une couleur mais nous allons débattre une autre fois ^^), bref ce sont des tons prévus pour faire de la chaire car on va lui donner une peau à OSCAR.

Remarquons que pour un Jeu de Rôle ou un Wargame OSCAR n'est pas le meilleur prétendant qui soit, il fait un peu efféminé et maniéré sur ce coup mais on s'en fiche on est ouvert à tout ne soyons pas fermés dans des clichés idiots et puis comme je disais c'est un modèle Académique (genre il aime défiler dans les écoles de Médecine ou aux Beaux Arts en se tenant ainsi). :p

3. Commencer la Coloration

Et c'est ça le centre de la problématique concernant l'application et le mélange des couleurs (pour répondre à la question posée je devais expliquer le processus en amont). Alors je suis pas un pro et hier j'ai fait ce test à l'arrache sans prévoir de le poster ici donc c'est très approximatif mais on peut tout de même voir le cheminement et la démarche.

Dans cet exemple je me suis mis à recouvrir ma base de travail couche par couche en commençant par la plus foncée. Je commence donc à droite par le côté que j'ai décidé de définir comme étant "à l'ombre" et je terminerait à gauche par le côté que je défini comme étant "éclairé". Ce choix est bête car la lumière devrait plutôt venir d'en haut ou plutôt de d'en haut ET de gauche mais on s'en fiche ici on simplifie.

Le principe dans un premier temps est donc de ne s'occuper que d'une couche de couleur avant de passer à l'autre et ainsi de suite. De cette façon il ne faut pas laver le pinceau à chaque changement de peinture. ^^

La Première Couche n'est pas vraiment ici une couche mis plutôt un trait d'ombre qui va définir l'orientation de mon ombre donc inversement l'orientation de la lumière. Ici la lumière viens par la gauche sans être ni en dessous ni au dessus de mon personnage donc l'ombre est à droite sur toute la hauteur d'OSCAR et sur tout ce qui serait proéminent.

(taille réelle à gauche, Zoom 400%à droite) [Image: oscar_11.png]

Je travaille avec un zoom maximum pour pas rater les pixels que je dois peindre, normal..
Ce premier trait de couleur, l'ombre la plus foncée, est important vraiment. D'autres personnes doivent la faire en dernier mais moi je travaille comme ça pour le moment car ce n'est pas seulement un trait d'ombre : ce trait me permet également de recorriger en live la silhouette mais aussi de définir des formes comme les pectoraux ou encore la jointure d'un bras, une bosse dans le caleçon, les plaques de chocolat ou la forme grossière du visage bref..si c'est une femme vous comprendrez aisément à quoi servirait ce trait d'ombre avant même de colorier le reste. Smile

Ceci fait on peut passer aux autres couleurs en partant des plus foncées vers les plus clairs et de droite à gauche. Je ne vais pas détailler comment je fais ça mais j'ai mis une capture taille réelle et zoom pour bien comprendre:

(Cliquer pour agrandir l'image Zoom 400% en plein écran 1500px)

- A noter que tout au long du processus je recorrige, si besoin est, la forme générale du corps que je tente de réaliser.

- A noter encore que j'ai oublié de sexualiser? sexuer? ce corps :ninga: ceci fera l'objet d'un tutoriel spécifique ultérieur concernant la masse et les volumes mdr..

- A noter enfin qu'il existe selon moi une règle simple pour coloriser tout ça: plus le ton est ombré, donc plus la couleur est foncée, mois elle doit être présente. Ainsi sur la version Zoom 400% ci-dessus
(Clic pour la version agrandie) on peut voir que chaque nouvelle couche de couleur sera étalée avec un peu plus de largeur sauf quand on arrive vers le blanc car comme la première couche la dernière aussi ne sera qu'un trait.

iMPORTANT:
Il faut garder à l'esprit que vous aurez deux types de tons: ceux directement liés aux effets de lumière ambiante (le jour, une bougie etc) et ceux propres au modèle/support (ici la peau).

- Les couleurs liées à la luminosité ambiante sont celle tout à fait à gauche (éclairée, le blanc) ainsi que celles tout à fait à droite (ombrée, le brun foncé). Celles-ci sont forcément toujours des traits de 1px de large en général. Ce sont des reflets ou des ombres franches. Le matériaux reflétant une lumière peuvent cependant modifier cette règle (un métal reflètera par exemple un trait blanc plus fin qu'un matériaux poreux et/ou mat).
Éventuellement, à l'intérieur même du modèle, des reliefs plus ou moins prononcés peuvent également récupérer certains tons liés à la luminosité (le blanc ou le brun foncé) comme par exemple la poitrine d'une femme, une boucle de ceinture voir un nez prononcé si vous représentez Pinoccio ou Cyarno de Bergerac : leur nez va forcément nécessiter un trait clair de lumière pour en souligner le relief important.

- Les tons qui ne sont pas liés à la luminosité, enfin pas directement car ils le sont tout de même dans le sens oú ils sont modelés par la lumières, sont tous les autres tons entre ces deux extrêmes vu ci-dessus. Ces tons sont relatifs au support/modèle à savoir dans notre exemple à la peau constituée d'un camaïeux de bruns-chaires.

4. Terminer la Coloration & Finitions

OSCAR est moche, avouons-le et en plus je ne me suis pas occupé du visage car c'était pas le but. Les pectoraux, le ventre tout est moche et mal fait j'en ai conscience mais ce n'est pas un produit destiné à un projet ni à rien d'ailleurs d'autre qu^à servir de sujet d'étude. Je précise car moi je trouve ça moche mais OSCAR le sait très bien, il a l'habitude de servir d'objet d'étude. Smile

Bref on termine tout de même les arrangements de couleur ici ou là, on plisse les yeux pour voir floue, on zoom et dé-zoom aussi et on corrige une dernière fois la silhouette pour le rendre plus grosse, plus charnue si besoin est ou plus maigre. Enfin ici c'est plutôt plus gros car Oscar il fait un peu squelettique mdrrr

(rendu réel à gauche, zoom 400% à droite) [Image: oscar_13.png]

Voila faut toujours se poser la question de comment la lumière vient se poser sur les formes (par exemple le petit bidou d'oscar, on voit grâce au trait blanc qu'il a bu un peu trop de bière dans sa vie mais ça reste pas non plus trop prononcé donc il pourra encore en boire).

Ceci fait on peut enfin s'amuser à la Barbie et lui mettre les habits....car c'est le but non? Jouer à la dinette avec nos sprites et leur mettre des vêtements !

Pourquoi l'avoir fait nu plutôt qu'habillé dès le début?

Parce que je suis un peux vicieux.
Non c'est pas vrai en plus il est moche et c'est mon genre ^^ je préfère Paris Hilton, enfin quand elle parle pas mais on s'éloigne du sujet ..
Oui alors l'avantage de faire des nus est double :

1) c'est une ressource de jeu bien pratique pour "coller" par-dessus (grâce à du code html/php-machin-truc) des vêtements custom/personnalisés selon le jeu. Un jeu de rôle par exemple.

2) c'est plus facile de colorier des vêtements sur un corps déjà modelé par les ombres et lumières que de le faire dès le départ sans aucune base d'autant que l'on peut faire très vite de cette manière une multitude de vêtements différents avec le même procédé une fois que le corps est fait. Vive les déclinaisons (bien utiles pour des jeux de rôles, un peu moins pour un Wargame).

Bref voici une version taille réelle, transparente et habillée (bien que pas à la mode du tout mais on pardonnera le mauvais goût d'OSCAR) :

Voilà fini pour cette explication qui je l'espère aura répondu en partie à la question concernant le mélange des couleurs. Comme je le disais chacun à sa technique et on ne reste jamais sur une même technique. Mais c'est un bon point de départ pour tenter l'aventure alors tentez ça si vous avez besoin au lieu de chiper les ressources de Zelda :p Mieux vaut un peu bancale mais personnel que parfait mais pillé. ^^

{
EDIT: ***** c'est moche XD ce n'est pas du grand art mais je n'ai employé que très très peu de couleurs. En utilisant le double de tons intermédiaires on aurait eu un rendu plus fin et subtile mais ici le but n'était pas de produire une ressource exploitable, juste un brouillon expérimental je tiens à le préciser pour pas trop me taper la honte mdr
EDITv2: correction de quelques fautes..
}

RE: Ewilan - tests esthetiques - Jojodu42 - 20-02-2011

C'est très beau, et ça me rappelle moi-même quand j'essayais de comprendre comment faire du Pixel-Art.
En tous les cas, j'aime bien une de tes techniques, que je n'utilise pas, et c'est celle qui a pour but d'utiliser une base au départ.
Si je peux te conseiller un logiciel de retouche d'image, oriente toi plutôt vers The Gimp Wink

.
Merci pour ta contribution.

RE: Ewilan - tests esthetiques - Nodark - 20-02-2011

Le tutoriel est agréable à lire et va en aider certainement pas mal sur la communauté Smile

RE: Ewilan - tests esthetiques - Alchimèriste - 20-02-2011

Cool alors, bon c'est bourré de fautes d'orthographe par contre je m'excuse (je vais corriger un peu c'était un peu fait sur le vif ce matin tout ça) et c'était un peu le but de partager ça car j'imagine que certains développeurs vont tenter pour leur jeu de ne pas rester ainsi bloqués sur l'aspect sprites juste parce qu'ils croient ne pas "savoir dessiner" et qu'ils ne trouvent pas de graphiste. Au moins ils peuvent au pire produire des trucs temporaires, au mieux produire eux même un tas de choses.
Le principe de contrôler le pixel au détail c'est justement d'évacuer ce que l'on appel le coup de crayon propre aux dessinateurs et à la place de plutôt "remplir des cases, une grille".

[Image: marche10.png]

RE: Ewilan - tests esthetiques - Argorate - 21-02-2011

C'est vraiment sympa d'avoir expliquer, en fait, je pensais qu'il existait une méthode "magique" (oui je suis un peu naïf sur ce coup), et non que tu devais te taper tout a la main, car là ca va bien que c'est des petites images mais sur un truc 1000*1000 faudra m'expliquer... ou alors tu passe 3 mois a le faire^^

Le principe de volume ce faisant sur la luminosité, ton explication sur les teintes décroissante (ou croissante peut importe) semble logique. Faut avoir la patience de faire ça par contre et surtout le temps... Smile

RE: Ewilan - tests esthetiques - Dexyne - 21-02-2011

C'est plutôt pas mal ce que tu fais Smile

. Si tu ne connais pas je te conseil http://www.lesforges.org/ qui est un bon site sur le pixel art (il(s) explique(nt) aussi quelques techniques de dessins ou autre).

Pour un rendu 1000*1000 Argorate je suppose que soit tu y passes 3 mois en faisant tout à la main (ou au pixel :p) soit tu récupères les éléments déjà terminés et tu les copie-colle en les modifiant si nécessaire (pour les jeux d'ombres et de lumières par exemple).

Alchimèriste tu devrais proposer des (mini)-tutos sur le sujet pour le wiki, je pense que ça aidera grand nombre de personnes ^^.

RE: Ewilan - tests esthetiques - NicoMSEvent - 21-02-2011

Félicitation pour m'avoir démasqué (copie frauduleuse et détérioration de modèle par rapetissement), ce rat était a la base un "monstre de test", et n'était pas censé rester. Mais vu que tu l'a remis a ta sauce, je pense bien le garder maintenant Wink

Et comme c'est un autre univers que le notre, rien n'empêche d'avoir des rats aussi gros que des chats!

Ta technique, ton adaptation, et ta rapidité d'apprentissage m'étonneront toujours Smile

Tu ne l'a pas (encore?) donné l'adresse du forum que tu as créé. Tu m'as juste dit que tu en as créé un Wink

Dès que tes modèles seront fin prêts, je les intègrerai illico au nouveau design (comme prévenu par MP, pour des raisons personnelles, il se peut que je mette plusieurs jours a répondre, et que je sois un peu moins disponible les prochaines semaines)