[Pixel-art] Ce à quoi je passe mes journées

[Lothindil]

Bah ouais, parce que vouloir être indépendant dans le jeu vidéo, c'est parfois faire du dessins, beaucoup de dessins, et surtout des dessins à la chaîne. Là pour l'instant, je bosse sur du contenu entre deux fonctions, étant une équipe à moi toute seule...

Pour l'instant, je fais des objets, des ressources, des équipements, des consommables et des armes... Et voilà ce que ça donne :





200 objets au total.

Dites-moi ce que vous en pensez, lâchez-vous sur les commentaires (positifs ou négatifs).

[Fantomas]

C'est sympa, y'a l'air d'y avoir pas mal de boulot, après certains éléments font un peu amateur, manque d'anti-aliasing, de dithering.

[Lothindil]

J'ai oublié de préciser que volontairement, mes dessins sont avec une coloration par zone et que les contours sont en simple contour noir sans anti-aliasing ^^

En fait, il n'y a ni dithering, ni anti-aliasing, sur aucun objet ^^ (et les palettes sont extrêmement restreintes à 3 couleurs, parfois à 5.).

[Lyonsbanner]

C'est vraiment pas mal. Il y en a qui sont bien détaillés. On reconnait tout les objets représentés (Sauf ceux de la deuxième image, troisième ligne, les objets de 4 à 9).
Mais d'une manière général, l'ensemble me paraît... "plat". Peut-être que ça manque justement d'AA et de dithering comme vous le disiez.
J'ai ici quelques images exemple d'un excellent vieux jeu avec des items en pixel-art :
image 1
image 2
image 3

[Lothindil]

Oui, mais le jeu est avec une très forte qualité graphique... En fait avec un niveau graphique que j'ai pas et que j'aurais jamais... (ni jamais le temps d'ailleurs).

En fait mon objectif était de rapprocher les objets de l'ambiance du jeu. Ambiance graphique qui donne ça :
Page d'accueil :

Spoiler:

Page de carte :

Spoiler:

Page de combat :

Spoiler:

Page de quêtes :

Spoiler:

Bref, une ambiance volontairement simple, avec un style en cell-shading, à la limite du manga (j'ai du mal à comprendre pourquoi le cell-shading ne gène personnes en grande taille et est considéré comme "moyen" à "mauvais" en pixel-art). Et quand je vois les icônes que je trouve couramment bah je suis dans une lignée classique voire de bonne qualité, il me semble ^^ (exemple type : 420 -Pixel Art- Icons for RPG par Ails ou encore Project Survive Items 1 par supahbuttahtoast )

[Fantomas]

En fait quand c'est détaillé que y'a plusieurs couleurs qui s'entremêlent c'est très joli mais quand t'as un objet avec une grosse surface et une seule couleur c'est pas terrible.
Le pire étant celui ci :

Et puis globalement ça manque de reflets aussi.
En plus j'ai l'impression que t'essaies de faire pleins de trucs ronds ou avec des formes bizarres ce qui devient d'autant plus difficile sans AA.
Parfois c'est juste une histoire d'un ou deux pixels :

( la forme bombée au niveau du bouchon donne un effet biscornu sans AA, autant l'éviter )

La troisième branche faisait excroissance et les pointes étaient pas assez pointues.

M'enfin ce n'est que mon avis et je suis loin d'être un expert du PA (en fait j'en ai jamais fait).

[Lothindil]

Pour la bouteille d'huile, à la limite il manque un reflet (mais ça donnait vraiment moche), mais je vais pas m'amuser à inventer des couleurs où y en a pas ^^'







Et pour ta fiole, non je suis désolée... La mienne fait peut-être bizarre (et encore, je trouve pas, mais bon)... Mais la tienne est fausse et me gène encore plus à vrai dire... Le haut de ton bouchon est plat, ce qui donne l'impression d'un profil parfait, confirmé par le fait qu'on voit le bouchon à travers le tube. A part que le dessus du liquide autant que le dessus du bouchon donne une vue de trois quart. Tu te retrouves donc avec une incohérence de perspective qui m'agace ^^


Pour le 3ème objet, bah l'excroissance, c'est bien son bien son rôle, sinon je l'aurais pas mise. C'est un esprit de glace instable mon objet... Le but c'était de faire plasmatique et instable. Là où deux branches donnent une impression de stabilité.
Et pour les pointes, elles sont même trop pointues à mon idée d'origine, mais ça faisait trop moche avec des bouts arrondis.

[Lyonsbanner]

[...] je vais pas m'amuser à inventer des couleurs où y en a pas ^^'

Effectivement, on pourrait penser qu'il n'y a qu'une seule couleur d'huile. Mais en fait, il y en a plusieurs si tu regardes bien.
Sur la deuxième photo, je peux voir 4 couleurs d'huile différentes : Jaune, jaune clair, jaune foncé et du gris (sur les bords).
Parfois, dans le pixel-art, afin de bien rendre un objet, il est nécessaire de tricher et d'ajouter une couleur qui peut ne pas être dans la palette de couleur de la bouteille d'huile, mais en général, cette couleur ne se voit pas.


Pour la fiole, j'ai modifié vite fait deux trois trucs à ma sauce, et voilà ce que ça donne :


Pour l'esprit de glace instable, en fait, je voyais les branches comme une flamme de bougie qui oscille. Comme Fantomas, la petite branche sur le côté me dérange un peu à moi aussi. Car concrètement, chaque branche de plasma part du centre mais ne se divise pas. Comme sur cette photo.
Et pour vraiment donner un effet instable, on a cette image où on voit les branches de plasma qui oscillent comme des dingues.

[Lothindil]

Donc si je veux garder mes 3 branches, il aurait fallu qu'elle parte de plus bas, de la sphère elle-même ? :p

Mon idée est plus proche de la tienne, mais pour des raison de lisibilité, je suis obligée de faire le contour en noir (ça m'a été reproché par plusieurs joueur sur des tests antérieurs que sans le contour noir, les objets ne sont pas forcément visibles, surtout pour des joueurs daltoniens ou ayant des problèmes de vue (mon homme en fait ^^).

Par contre, en effet, il manque quand même de reflets, que ça soit sur la fiole de sang ou sur celle d'huile. Je referais ça quand j'aurais du temps... (mon job de producteur m'incitant vachement à bosser sur mes fonctionnalités pour l'instant -j'en ai aucune de vraiment utilisable et le jeu doit sortir dans un mois )

[trotter]

C'est super.
J'ai l'impression que c'est une question de style, t'as plutôt un style cartoon avec des aplats, pas d'anti-aliasing, pas beaucoup de couleurs, etc. Le style est pas tout à fait unifié, tu as des objets beaucoup plus détaillés que d'autre, le plus flagrant ce sont les différentes peaux d'animaux en bas de la première image.
Donc par exemple la fiole de Lyonsbanner est plus réaliste en ajoutant des dégradés et ayant une couleur plus réaliste mais perd justement la bordure noire et le côté cartoon.

T'as essayé dans le site d'utiliser une police plus pixélisée ? Sur la page d'accueil tout est antialiasé sauf les monstres.
In game ça le fait le trouve, on repère bien les objets importants :


Sauf les carottes, on dirait qu'on peut toutes les ramasser du coup.

[Lothindil]

Bah pour la police... J'ai passé 6 ou 7 heures à chercher une police qui soit :
- libre de droit pour utilisation commerciale
- avec accents classiques (´ ` ^ et ¨ )
- avec accents et caractères espagnols (¡ ¿ ñ )

Et qui fasse relativement cartoon sans être complètement difforme.

Et c'est la seule que j'ai pu trouver... (par contre, si quelqu'un me dit qu'il existe un programme gratuit pour éditer une police, je saute de joie et je la pixelise ^^)



Sur la page d'accueil... bah en fait, tout serait à refaire, c'est quasiment la première partie du site que j'ai fait et je la mettrais à l'accord de l'intérieur du site quand j'aurais le temps


Pour les carottes, faudrait en effet que j'enlève l'assombrissement sur le bord des feuilles, mais ça demanderait trop de travail.

[Fantomas]

Si t'es en Html5 tu dessines le texte avec un zoom / 2 puis tu l'affiches avec un zoom x 2, ça sera pixelisé.

Le haut de ton bouchon est plat, ce qui donne l'impression d'un profil parfait, confirmé par le fait qu'on voit le bouchon à travers le tube. A part que le dessus du liquide autant que le dessus du bouchon donne une vue de trois quart. Tu te retrouves donc avec une incohérence de perspective qui m'agace ^^

T'as qu'à t'imaginer que le liquide était en mouvement au moment de la photo. :D
T'as pas la résolution pour dessiner un objet légèrement en biais et qu'on comprenne qu'il est en biais, ça donne l'impression d'une vue de côté ratée, autant faire une vue de côté réussie.
C'est une question d'esthétique, si tu dessines une épée à 44° ça sera plus moche que si tu la dessinais à 45°.

[trotter]

Et c'est la seule que j'ai pu trouver... (par contre, si quelqu'un me dit qu'il existe un programme gratuit pour éditer une police, je saute de joie et je la pixelise ^^)

Ya ça open source gratos etc mais c'est ultra galère : http://fontforge.org/
Si t'as envie de t'amuser un jour...

[Lothindil]

Ah bah oui, forcément, faut que ça soit en vectoriel...

Donc non, la pixellisation, on va oublier...


Et je suis en html 5, et ta solution, en plus d'être coûteuse en ressources (le jeu et le css par la même, doit être le plus léger possible, il doit pouvoir tourner en 3G sur téléphone sans griller tous le téléchargements) est louche (sans compter que je prévois aussi qu'il existe des gens sans navigateur récent et donc tournant encore en html 4)... Je pense plutôt que je vais garder ma police telle qu'elle est ^^

[Lothindil]

Du nouveau pixel art (enfin les puristes refuseront cette appellation, la palette n'est pas fait main, loin de là ^^)

Au menu : les auras (2ème type de skill).

Aura de chance :

Aura de précision :

Aura de puissance :

Aura de résistance :

[MOM]

Garder un contour noir et des aplats de couleurs ne t'empêchent pas d'utiliser de l'anti aliasing tu sais. C'est le fondement du pixel art. Sans lui tu perd totalement en lisibilité. Je n'ai pas su comprendre ce que représentaient la plupart de tes objets.

Et tu viens de briser ta charte graphique avec tes dernières icônes qui ne sont pas des pa. De même pour ton battlebackground.

[Lothindil]

Et en quoi mes icônes ne sont pas des pixel-art ? Ils ont été dessiné patiemment pixel par pixel (en utilisant juste la capacité "produit" et "division" des calques...)

Et pour mes battleback, je sais, mais j'ai vraiment pas le temps de les faire en pixel art Je mets déjà près de 1 heure pour en faire un normal, j'ose même pas imaginer faire un pixel art de cette taille-là.

Pour la lisibilité, sur 40 personnes qui ont vu mes icônes t'es le premier à me dire que les objets sont incompréhensibles...

[Lothindil]

Au passage, je reviens sur l'affirmation comme quoi "anti aliasing tu sais. C'est le fondement du pixel art. Sans lui tu perd totalement en lisibilité."

J'ai envie de répondre "ah, et depuis quand ?"... L'anti-aliasing n'a absolument rien d'obligatoire et même très récent dans le pixel art... Et à vrai dire, certains puristes considèrent même que c'est une dérive du pixel art ^^

Je trouve pour ma part que l'anti-aliasing nuit à la lisibilité et à la clarté du pixel art en le floutant (parce que ça revient bien à ça). Ce que j'aime surtout dans le pixel-art, c'est la clarté, la séparation de chaque couleur de pixel qui rend chaque pixel intéressant et capital pour la couleur.

Et on trouve d'excellents exemples sans le moindre anti-alias :