AccueilAccueil  FAQFAQ  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  Connexion  
Le Deal du moment : -39%
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
Voir le deal
399 €

 

 [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)

Aller en bas 
+4
mortelkill
chopsuey
Térence
Sekigo Le Magnifique
8 participants
AuteurMessage
Sekigo Le Magnifique
Utilisateur confirmé: Rang *****
Sekigo Le Magnifique


Messages : 1720

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyLun 10 Déc 2012 - 1:39

Traduction de l'article suivant : Better Programmer Art par Joel Davis, paru sur le site Gamedev.net
C'est un texte que j'ai trouvé très intéressant pour nous autres, programmeurs pas forcément très doués pour le dessin ou le pixel art. Il donne des pistes intéressantes à explorer, et c'est un bon point de départ.
Concernant la traduction, je n'ai pas trop utilisé de mot à mot, sinon cela donne souvent des tournures de phrases bizarre et incompréhensible. Je ne suis pas non plus un petit génie en traduction, donc si vous constatez une erreur, n'hésitez pas à me faire signe.Parfois, vous tomberez sur un NdT, cela signifie « Note Du traducteur », un commentaire de ma part.
Et la mise en page originel de ma traduction a sauté au passage vers l'éditeur intégré au CBNA. Je suis donc contraint de me farcir les balises à la mano. J'ai aussi réduit certaines images en taille pour éviter d'avoir une page qui met 10 plombes à charger. Mais ça n'a pas grand importance, je pense, et vous pouvez toujours retrouver les images originelles sur l'article source.




Introduction

J'ai travaillé à construire des outils et des moteurs pour des artistes réalisant des jeux et des effets visuels depuis plus de 10 ans, et j'ai toujours été déconcerté par la distinction que font les gens entre "les graphismes de programmeur" et "les graphismes de jeux réel". J'ai également noté que les seules personnes à vous étiqueter comme mauvais graphiste-programmeur sont les autres programmeurs. Sans même voir à quel point votre jeu est amusant, ou à quel point votre démo technique est impressionnante, les non-programmeurs vous disent généralement ce à quoi ils pensent : Est-ce un jetpack ou une tumeur ?

Souvent, vous pouvez trouver un moyen pour générer de bons graphismes sans avoir à les créer à partir de rien. Mason McCuskey offre quelques excellentes suggestions pour des sources de graphisme de jeu dans son article : "Créer de bon graphismes quand on est pas un artiste".

Mais parfois, il vous faut les créer from-scratch. Des finances limitées, des règles contraignantes dans un concours de création de jeux, ou simplement un temps limité pour monter un prototype, vous impose de laisser tomber les figures géométrique calculé à la règle et de prendre un crayon ou un pinceau.

Mais je ne peux pas dessiner... je te le jure... Regarde ça :
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 1
Si vos graphismes ressemble à ça, cet article est pour vous.

Je pense pouvoir partager un ensemble de conseils permettant de réaliser de meilleurs graphismes. Ces conseils sont destinés à être utile à n'importe qui, sans considérations pour d'éventuels dons ou expériences artistiques. Au contraire de conseils comme "s’entraîner à dessiner tout les jours" ou "visiter des musées d'arts" (pouvant être utile à des aspirants graphistes), ce document est pensé pour les non-artistes. Comment emmener les gens à penser que vous – les hémisphères gauches (NdT: cette partie du cerveau est considéré comme articuler la pensée vers une logique mathématique d'ordre, au contraire de l'hémisphère droit qui symbolise l'anarchie de la pensée et la création artistique), les pisseurs de code, les adorateurs de mathématiques – vous avez en réalité la fibre artistique. En outre, (quasiment) aucun de ces conseils ne requiert de la "pratique", parce que, toujours contrairement aux artistes en herbe à qui la pratique est indispensable pour devenir de vrais artistes, il apparaît que la deadline de votre projet s'achève toujours quand le soleil se couche, alors que vous n'avez besoin que de quelques putains de sprites pour le finir.

La plupart de ces conseils visent des utilisateurs de Photoshop, parce que c'est ce que je connais de mieux, mais les mêmes concepts peuvent s'appliquer à tout autre logiciel de dessins, comme Gimp ou Photofiltre par exemple.

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 2
Ils visent aussi les participants au LudumDare (NdT: un concours de création de jeux, apparemment assez populaire) ou tout autre concours de ce type où vous devez créer un jeu depuis zéro en seulement 48 heures. Mes jeux tendent à être classer dans la catégorie "graphique" (apparemment, programmer un gameplay de tueur m'échappe) malgré le fait que je ne me considère pas vraiment comme un excellent artiste des jeux. Beaucoup de ces exemple proviennent de mes entrées LD (Ndt: Aucune idée de ce quoi il parle... Sûrement une espèce de blog), et toute ces expériences ont été acquises durant mes participations à des concours, où j'ai été contraint de produire des graphismes tout en ayant une deadline complètement démente. De plus, tout ces conseils devraient aussi être valable pour n'importe qui souhaitant produire un contenu graphique en temps limité.



Astuce n°1 : Commencer avec une palette de couleur

C'est l'erreur la plus courante que j'ai vu, et c'est aussi la plus simple à éviter. La palette par défaut de la plupart des logiciels de dessins nous ramène au temps préhistorique du DOS ( pouvez-vous trouver le lien entre les couleurs de cette palette et les nombres binaires à 4bits de 00 à 15 ? Bien entendu, vous le pouvez. Si vous ne le pouviez pas, vous seriez un vrai artiste).

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 3

Par palette, je ne pense pas aux palettes de 16 ou 256 couleurs des temps du VGA. Je pense tout simplement à un ensemble de couleurs harmonieuse pour votre jeu. Si vous commencez par bien choisir une palette de couleur, vos gribouillis paraîtront développer un sens esthétique certain, voir avoir choisi intentionnellement "un design artistique" plutôt que de la "merde de maternelle".

Mais où puis-je trouver cette palette ? Je ne parviens même pas à coordonner mes couleurs en m'habillant le matin !
Et bien, la théorie des couleurs est assez touffue, et si vous pouvez dépensez quinze minutes à googler "théorie des couleurs" (NdT: je saute la partie où il fait le distinguo entre "color theory" et "colour theory", parce que je suis largué sur ce point), vous aurez une bonne avance sur ce texte. Mais si vous n'avez pas le temps ou la volonté de chercher cela, voici quelques petits trucs qui fonctionnent :

Utilisez une photographie. Penser au thème de votre jeu, et trouvez une image qui y correspondent. Si vous faites un jeu à tendance abstraite, essayez quand même de le thématiser, vous arriverez bien à trouver une image que vous appréciez et qui ait un rapport avec votre projet. Ensuite, quand vous réalisez les graphismes de votre jeu, n'utilisez JAMAIS le sélecteur de couleur. À la place, sampler UNIQUEMENT les couleurs depuis votre image-palette avec l'outil pipette. Avec un peu de chance, votre jeu aura capté un peu de "l'essence" de cette photographie.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 4

Utilisez la palette d'un réel artiste. Des sites sont listés un peu plus bas, proposant de magnifiques palettes prête à l'emploi, avec lesquelles commencer. Choisissez-en une, et utilisez ses couleurs dans votre jeu. Avec cette approche, vous aurez besoin de 5 couleurs ou plus dans votre palette.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 5

Résistez à la tentation de vouloir choisir directement les couleurs telles quelles. En lieu et place, réalisez-en de nouvelle en combinant certaines couleurs de votre palette. Par exemple, dessinez au dessus de votre palette à l'aide de pinceaux semi-transparent.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 6

Pour un jeu relativement important, vous pouvez utiliser différentes palettes suivant les niveaux ou les aires géographiques. Si votre interface et votre personnage principal sont de couleurs plutôt neutre, ou si ces palettes partagent un même accent de couleur, vous pouvez les distribuer entre les niveaux ou les régions.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 7

Cet exemple utilise une palette "monochromatique". Toutes ses couleurs sont différentes nuances d'une même couleur. D'autres combinaisons de couleurs apportent plus de variété, mais il est réellement important que toutes les couleurs travaillent ensemble vers plus d'harmonie.

Ressources:
  • Adobe's Kuler Site
  • ColourLovers
  • MultiColr from idee labs
    Ce superbe site est le meilleur du monde : faites une palette et prenez l'ensemble de photos qui vont avec. Prenez quelques couleurs que vous appréciez, et prenez aussi une image qui vous semble belle. Ensuite, tirez-en les couleurs voulu.




Astuce n°2 : cacher votre honte avec un thème astucieux

Je ne peux pas dessiner !
Peut-être êtes vous trop cool pour dessiner. Peut-être aussi que c'est intentionnel. C'est comme ça. Plutôt que de choisir de bons graphismes, choisissez un thème qui nécessite de mauvais graphismes. Ça a plutôt bien marché pour "SketchFighter" et "Crayon Physics".
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 8 [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 9

Ou utilisez ce que vous avez sous la main. Quelques saloperies sur votre bureau ? Vous auriez pu faire un des jeux les plus populaire de tout les temps : Desktop Tower Defense.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 10

Pas mal de gens ont commencé à piger cette astuce, mais il reste encore quelques années de vie à cette idée. Soyez créatif... Peut-être que tous vos personnages peuvent être des gâteaux au gingembre, et vous pouvez littéralement chercher à les cramer. Ou quelques zombis-bacons peuvent attaque votre cuisine. Ou même un mec poilu qui a besoin d'un bon coup d'épilation..



Astuce n°3 : Formes simple et silhouettes

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 11
Cercle, carré, triangle, losange, trapèze, parallélogramme, etc... Vous savez comment calculer leurs aires, mais savez-vous comment mal les dessiner ? Esquissez quelques formes à main libre, et ajoutez leurs des yeux (pour des personnages), ou des roues (pour des véhicules), ou n'importe quoi d'autres. Elles seront probablement grossière et maladroite, et pas précise du tout.

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 12
Selon la quantité de café que vous avez déjà ingurgité, elles pourraient avoir différentes formes. C'est nickel ! En réalité, ce qui est bon sont les imperfections et les variations, qui crée de la "personnalité" et rendent vivante vos formes. N'utilisez pas les outils automatique de forme de votre logiciel de dessin, c'est destructeur pour l'âme des sprites. En donnant des formes distinctes, vous facilitiez la différenciation visuelle entre vos sprites pour le joueur.

"Smiles" de Sykhronics en est un bon exemple. Des formes et couleurs distinctes vous aident à reconnaître immédiatement les formes. Vous pouvez probablement jouer à ce jeu sur un téléphone à écran deux couleurs.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 13

Observez la silhouette de ces formes. Vous pouvez utiliser l'outil "seuil" ou sélectionner l'extérieur, l'inverser et en remplir un nouveau calque pour voir directement les silhouettes. Parvenez-vous à deviner ce qu'elles représentent en regardant uniquement leurs contours ?
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 14

Vous pouvez clairement distinguer les objets (issus du billet TINS "Railroad Merchant") (NdT: sûrement son blog) à partir de leurs contours, et reconnaître chacun d'entre eux. Pour les objets avec une forme similaire, assurez-vous que les contours soit tout de même différent.
C'est encore plus important en 3D. Assignez un matériau noir solide à l'objet, et observez le sur un fond blanc (ou l'inverse). Zoomez de manière à le voir comme attendu sur le rendu à l'écran de votre jeu. Est-il suffisamment lisible ?

Ressources:
C'est expliqué avec bien plus d'éloquence dans ce billet de blog :
Good Design lies in the foundation



Astuce n°4 : Dessinez plus que nécessaire

Pour les prochains trucs, nous allons créer des sprites pour un éventuel jeu de plate-forme. Disons que nous avons besoin d'un ennemi, sur lequel on ne peut sauter sans prendre de dégâts. Mon idée initiale était une sorte de tortue à piques (c'est original, non ?).
La première erreur d'un programmeur sera de penser que son sprite moche s'améliorera en le travaillant continuellement. Non, non et non ! Si ça commence mal, ça restera mauvais. Alors, au lieu de s'acharner sur de pauvres pixels, esquissez plein de sprites et détaillez uniquement ceux que vous aimez le plus.

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 15
J'ai commencé à enchaîner au hasard les esquisses d'ennemis, sans jamais vraiment les détailler ou les travailler sérieusement. Ça se fait assez rapidement, et vous pouvez ainsi abandonner ceux dont ne vous tirerez rien d'intéressant. En définitive, je n'aime pas du tout ma tortue (elle ressemble à une sorte de furet-vampire à qui on aurait mis le feu) (NdT: la drogue, c'est mal). Et j'ai plutôt opté pour le homard, pour ses formes intéressantes et sa silhouette bien distincte, qui le rendent unique.



Astuce n°5 : Travailler à haute résolution

Pour les sprites, je travaille à une résolution 10x supérieur à celle dont j'ai réellement besoin. Ainsi, si je réalise un sprite de 64x64px, je travaille au moins en 640x640. Parfois, un sprite assez laid en haute résolution devient un assez bon sprite en définitive. De même pour les logos, les backgrounds ou d'autres machins de ce genre, j'essaye de travailler en 2 ou 3 fois la résolution visée. Si vous êtes prudent sur les arrêtes quand il s'agit de réchantillonner le sprite à une résolution inférieur (downsampling), vous pouvez ainsi perdre beaucoup de détails sur les arrêtes un peu fouilli.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 16

Pour le homard, j'ai pris l'esquisse originel et ai tracé un contour, de manière à avoir un "plan" du sprite. J'ai ensuite tapé "homard" dans Google Images et cela m'a donné l'idée de le colorer en bleu plutôt qu'en rouge, ainsi que d'autres idées pour divers détails. Ainsi, je l'ai coloré en utilisant plusieurs calques au dessus du "plan", et j'ai pas eu à me préoccuper du risque d’abîmer mon "plan". Une fois ce homard coloré avec des couleurs unies, j'ai bloqué le canal alpha et ajouté les ombres et lumières (shading).

Ne perdez pas de vue qu'il faut l'utiliser à une résolution inférieur. Vous pouvez vous laisser aller à le décorer de toute sorte de petits détails, mais faites attention à la prochaine étape qui réduira tout ces détails en bouillie informe. C'est toujours une bonne idée de dézoomer l'espace de travail pour avoir un bref aperçu du produit fini (ou jeter un œil dans les miniatures de l'explorateur de fichier).

Il est toutefois un peu bâclé et pas bien détaillé, mais la prochaine étape d'échantillonnage permettra de masquer cela. Enfin, la plupart du temps...



Astuce n°6 : surveiller les contours

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 17

Photoshop (et d'autres logiciels de dessins) tente de nous faciliter la vie en mélangeant ensemble les différents composants du sprite, donnant une allure agréable à l'ensemble, douce et anti-alliasé au contour. C'est quelque chose de génial, sauf quand vous devez avoir une bordure nette pour votre canal alpha à 1bits. Photoshop a détruit nombre de billboard d'arbre 3D (NdT: le fait de projeter une image 2D dans un plan 3D) et autres sublimes sprites 2D, à cause de cet effet de bord. Voici donc mon flux de travail pour faire des sprites prêt à être utiliser tels quels en jeu. Je devrais mettre en script ce flux, mais bon, ça reste assez simple quand même :
Étape 1 : Isoler la version haute-résolution avec un arrière-plan transparent
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 18

Étape 2 : Réchantilloner vers la résolution ciblée
Ici, en 64x64px, toujours avec cet arrière-plan transparent.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 19

Étape 3 : Un contour net et visible
Voilà comment rendre les arrêtes de la bonne manière :
  1. Avec la baguette magique (NdT: un outil de sélection), sélectionner les parties transparentes. Important : régler à un taux de tolérance assez bas, et plus important, assurez-vous que "l'anti-alias" est à OFF.
  2. Inversez la sélection (Ctrl+Shift+I). Elle devrait maintenant être un peu plus grande d'un ou plus de pixels que le sujet.
  3. Créez un nouveau calque sous le sujet, et remplissez la sélection avec une couleur sombre unie (ou la couleur du contour du sprite).
  4. Si votre moteur de jeu demande une couleur-clef d'arrière-plan, comme sur cet exemple, ajoutez-la maintenant comme calque à couleur unique tout en dessous des autres. Si vous utilisez la transparence telle quelle, laissez l'arrière-plan comme il est.


Maintenant, vous devriez avoir un sprite bien mixée à l’intérieur des contours, contours eux-mêmes bien nets.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 20

Étape 4 : Nettoyer les pixels
C'est seulement maintenant que vous allez commencer à vous amuser au pixel par pixel. Les arrêtes de votre sprite étant probablement un peu gros, utilisez l'outil crayon pour nettoyer tout ça, et par la même occasion, ajouter des détails aux endroits rendu un peu flou par le downsampling. Ici, j'ai arrangé le visage, la queue et les antennes.
Cette étape point-par-point est la plus dévoreuse de temps. Faites-la le plus tard possible dans le flux de travail.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 21

C'est fini : le sprite final de l'ennemi est fin prêt
Voilà le sprite terminé à sa taille réelle et en zoom 2x. Il n'est pas parfait, et il ne m’emmènera pas tout droit à un job dans l'équipe de Squaresoft, mais pour un sprite de programmeur, il est plutôt sympathique.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 22



Astuce n°7 : créer des déclinaisons

Vous pouvez vouloir une vingtaine de monstres ou de vaisseaux spatiaux pour votre jeu. Génial ! Mais seulement si vous avez assez de temps. Si vous créez un ou deux monstre/vaisseau spatial que vous appréciez, vous pouvez réaliser toute une gamme de déclinaison à partir de celui-ci. Par exemple, changez la couleur. Beaucoup de créatures de "Diablo" sont issus d'une seule et même créature, décliné en divers coloris. Même chose avec Pac-Man. Ou autre exemple, vous pouvez faire varier la taille, ou couper-coller des parties de sprites. Au lieu d'un Viandosaure, un Legumosaure et un Humainosaure, créez un ensemble de Viandosaure aux caractéristiques bien distinctes. Vous pouvez ainsi avoir cinq ou dix variations autour du même sprite, en prenant le temps de création d'un seul.

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 23

Avec l'outil de teinte/saturation (hue/saturation), j'ai réalisé une version rouge sans antenne de mon homard. Ensuite, j'ai ajouté des ailes pour obtenir un ennemi complètement différent. Le bonus additionnel de cette technique est de donner à tout vos ennemis une esthétique similaire, rendant vos niveaux plus consistant et homogène, comme si vous l'aviez prévu dès le départ de votre projet.



Astuce n°8 : Éviter les animations

Le mot "Animation" provient de l'ancien mot sumérien "A'Numaatii" qui désigne un certain type d'esclave affecté à des tâches ingrates et répétitives, comme ramer ou tourner une meuleuse. C'est vraiment difficile de devoir créer non pas une frame qui semble bien dessinée, mais dix ou vingts. Donc, ne le faites pas !
  • Utilisez un thème qui n'en a pas besoin. Les vaisseaux spatiaux n'ont pas besoin d'animation. Les véhicules non plus, et vous pouvez simuler de fausses roues qui tournent. Si vous trouvez un concept qui n'a pas besoin d'animations, vous vous sentirez bien mieux. Et vous économiserez du temps pour le code.
  • Si vraiment, vous ne pouvez pas faire autrement que d'utiliser des animations, trichez. Retournez horizontalement un sprite de personnage, et vous avez une animation en deux temps. Vous pouvez ainsi vous en sortir en créant peu de frames. Observez les rips de vieux jeux GameBoy ou NES, comme les sprites des vieux Final Fantasy.
  • Utilisez des modèles (templates). N'empruntez pas les sprites eux-mêmes, mais les poses d'animation qu'ils utilisent. Pour ce sprite, j'ai utilisé un sprite issu du jeu Megaman, et dessiner un nouveau sprite par dessus tout en utilisant les mêmes poses.
    [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 24
  • La rotoscopie : ce n'est pas seulement pour faire chanter des orcs (NdT: mmmh. La symbolique m'échappe quelque peu). Beaucoup d'appareils photo numérique ont un mode "rafale" (NdT: ou tout simplement la capacité de filmer), où vous pouvez filmer une petite vidéo et en extraire des frames. Filmez-vous vous-même réalisant quelques actions simple, extrayez les frames et commencer le tracing (NdT: le fait de dessiner une animation en suivant des points précis d'une autre animation, bien souvent filmé en réel). Vous reconnaissez ça ? Attention : ça peut être chronophage si vous ne faite pas prudent, donc ne vous embarquez pas à filmer tout et n'importe quoi. Ça doit juste rester un guide.




Astuce n°9 : La skybox

Réaliser un jeu 3D ?
Implémenter une simple skybox n'est pas une chose compliquée à réaliser. Mais en terme de visuel, elle apporte un énorme plus. La skybox fait son important boulot de REMPLIR L'ÉCRAN AVEC QUELQUE CHOSE.
Je dis "skybox" ici, mais ça peut être n'importe quel type de panorama d'arrière-plan, depuis un cube texturée, en passant par une image panoramique sur une sphère ou un hémisphère, ou bien tout simplement une image d'arrière-plan pour un jeu 2D.

Mais où puis-je obtenir de jolies images skybox ?
Attendez le couché du soleil ou une jolie formation de nuage, allez faire un tour (ou restez dans votre jardin) et prenez une photo. Évidemment, ça dépend du temps qu'il fait, vous ne pouvez obtenir un joli couché de soleil tout les jours (à moins de vivre en Floride), mais vous pouvez très bien modifier cela en post-traitement pour faire ressortir toute la magnificence du moment. Pour illustrer ce propos, le lendemain où j'ai écris ces lignes, j'ai été prendre ces photos sur le chemin du supermarché. C'est un peu inhabituel d'avoir de tel couché de soleil là où je vis, mais même un jour normal, vous aurez toujours quelque chose de relativement sympa.

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 25[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 26[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 27
Ps : C'est un peu flou, mais j'ai mis les liens pour les photos en haute-résolution. Donc, si vous voulez les utiliser pour votre projet, pas de problème, c'est sans restriction.

Dessinez-les vous-même ! Voilà un court tutoriel que j'ai rédigé sur les ciels dessinés :
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 28

Observez à tel point Zillagame (mon premier jeu présenté au Ludumdare) est bien plus joli par l'ajout d'une skybox. Sur la gauche, pas de skybox (et un bug sur le tri alpha), et sur la droite, avec une skybox que j'ai créé.
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 29

Si ce n'est pas pour un concours, il y a des tonnes d'images pour skybox, gratuite ou à prix raisonnable.
  • 1000 skies
    [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 30
  • Googler pour "Free HDR Skies". Vous n'avez pas forcément besoin de HDR (NdT: C'est une image avec une dynamique de lumière plus étendu que la normale) pour les jeux, mais ils sont plus simple à trouver. Ou chercher "Sky Pano" ou "Sunset" sur Flickr (mais vérifiez quand même la licence avant d'utiliser une image).


Gardez aussi en mémoire que le ciel est la principale source de lumière du monde extérieur. Ça va en combinaison avec l'astuce des "palettes de couleurs" vu au-dessus. Utilisez les couleurs de la skybox quand vous créez vos niveaux et définissez la lumière.
Et bien entendu, votre jeu ne doit pas prendre place au couché du soleil. À moins que ce soit un jeu de voiture, il doit y avoir des règles qui régissent cela. Un ciel clair de midi, un paysage photoshopé d'un monde extraterrestre ou n'importe quel autre chose, peut être plus approprié pour la création de votre niveau de jeu.



Astuce n°10 : Pré-calculer votre lumière

(NdT: ici, j'ai un doute sur la traduction du terme "baking in lighting". Littéralement, cela se traduit par "cuire la lumière". En cherchant la traduction de cette expression, j'ai cru comprendre que cela signifiait accélérer un processus en le pré-calculant. En tout cas, selon la documentation du logiciel Blender)
(NdT: Ce paragraphe n'est pas forcément bien traduit, car je n'ai pas bien tout saisi. Les termes comme UV, overlapping ou lightmapping me sont inconnus)

Ça fonctionne pour un niveau complet ou un personnage. Ça n'a pas besoin d'être "correct", spécialement quand vous mixez cela avec des lumières en temps réel, mais ça paraîtra visuellement bon quand même. Si vous texturez votre niveau/personnage sans chevauchement (overlapping) où que ce soit, vous pouvez réaliser cette astuce sans écrire aucune ligne de code supplémentaire, et la combiner dans votre carte de texture colorée. Et si vous accordez un peu de temps à gérer différents jeux d'UV, vous pouvez faire le plein de lightmapping pour votre jeu.

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) 31
Dans mon jeu réalisé en 48hr, "Bugzapper", toutes les lumières de la structure sont pré-calculées dans la texture. En réalité, j'ai manqué d'un peu de temps pour dessiner les textures diffuses. La direction de la lumière ne respecte absolument pas la skybox, mais la plupart des personnes n'ont rien remarqué de toute manière.

Voilà les instructions sur comment utiliser le pré-calcul avec Blender. Maya et d'autres logiciels ont des fonctions similaires. Ne vous inquiétez pas de pré-calculer toutes amboccl/normal map si vous ne réalisez pas un vrai jeu complet. Pré-calculer TOUT (alias "full render bake") dans la texture de base, et n'utiliser pas d'éclairage (ou un tout léger et simple) dans votre jeu.
Baking Lighting with Blender
Un autre exemple d'utilisation des pré-calculs sur un terrain, dans Blender, qui rend bien :
Blender terrain baking

Un petit mot d'avertissement. N'essayez pas de comprendre tout cela en plein milieu d'un concours. Essayez d'obtenir un tel rendu tout en étant au calme, vous pouvez perdre un temps monstrueux à acquérir le processus pour réaliser cela en plein concours, mais une fois que vous avez choppé le truc, ça prend 15-20 minutes à réaliser durant un concours. Et cela peut faire une énorme différence.
En outre, attendez d'être à l'étape final de création de votre texture pour votre modèle avant de réaliser tout ça. Vous ne pouvez défaire le pré-calcul, et vous ne voudrez (et pourrez) certainement pas réaliser cela une seconde fois.



Astuce n°11 : acquérir une tablette graphique

Même si vous n'avez pas d'aspiration à devenir un graphiste de jeu vidéo, si vous avez besoin de dessinez la moindre chose sur votre ordinateur, alors vous devez acquérir une tablette graphique. Vous n'avez pas besoin d'en avoir une énorme ou avec un tas de super fonctions, une simple de 4x6 suffit amplement. Vous pouvez trouvez des tablettes d'occaz' à pas cher sur ebay, et les nouvelles "Baboo" de Wacom sont largement abordable. Dessiner avec une souris est comme dessiner avec une brique dans la main.
Beaucoup de personne ayant acheté une tablette graphique pour la première fois ont mis du temps à s'habituer à elle. Voici quelques conseils pour vous aider à tirer le meilleur d'une tablette :
  • Dans le panneau de contrôle, montez la sensibilité de pression. Vous voudrez exercez une réelle pression sur la tablette pour libérer toute la pression du pinceau. Par défaut, la pression est bien trop lâche et vous perdrez l'essentiel du contrôle.
  • Dessiner sur du papier entièrement blanc change totalement le ressenti. Différent type de papiers – papier à copie, papier à magazine, papier à construction, etc... – peuvent changer énormément ce ressenti. Expérimentez.
  • Pratiquez. Je sais bien que j'ai dis plus haut qu'aucune de ces astuces ne requérait une pratique préalable, mais j'ai menti. Essayer ces différents exercices :
    • Dans Photoshop, créez 10 carrés sur une ligne et remplissez-les avec des nuances de gris, de 0% (noir) à 100% (blanc). En dessous d'eux, faites 10 carrés vide. Essayez d'ombrager les carrés vides en suivant les carrés-guides. Essayez la même chose avec différentes brosses, en pratiquant la sensitivité de pression.
    • Essayer d'écrire quelque chose à main levée, comme l'alphabet ou copier le passage d'un texte. Commencez large, en dessinant de grosses lettres, et allez progressivement en dessinant de plus en plus petit les caractères. Cela vous permettra non seulement d’entraîner votre main à l'utilisation d'une tablette, mais en plus à regarder l'écran en même temps que vous dessinez.


De plus, en nos jours d'interface tactile, avoir une tablette peut être un moyen pas cher pour expérimenter un prototype de gameplay exploitant le tactile (bon, sans exploiter le multitouch bien entendu). Ce n'est pas exactement la même chose mais c'est toujours plus proche qu'avec une souris.



Ressource supplémentaire

Revenir en haut Aller en bas
https://2img.net/image.noelshack.com/old/up/gmzonecbna-3cfbc56d25.jpg
Térence
Utilisateur confirmé: Rang *****
Térence


Messages : 2213
Localisation : Oui

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyLun 10 Déc 2012 - 7:00

C'est vraiment sympa de t'être donné la peine de raduire, bravo !
Je le lirai dès que j'aurais un pe de temps devant moi Smile
Revenir en haut Aller en bas
chopsuey
Utilisateur confirmé: Rang ***
chopsuey


Messages : 523
Localisation : saint etienne
Projet Actuel : All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy
...

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyLun 10 Déc 2012 - 11:07

Vraiment cool ! La partie sur les couleurs est très intéressante.

_________________
Spoiler:
Revenir en haut Aller en bas
Sekigo Le Magnifique
Utilisateur confirmé: Rang *****
Sekigo Le Magnifique


Messages : 1720

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyLun 10 Déc 2012 - 19:24

Merci.

La traduction n'a pas été chiante à faire, bien au contraire. Le plus relou, c'est la mise en page, surtout que sur l'article source, elle est particulièrement naze. Et j'ignore pourquoi, mais l'éditeur de forumactif me fout des retours à la ligne tout les 10 mots, tout en conservant la mise en page.
Et en copiant le texte brut, je n'ai pas ces retours à la ligne, mais je n'ai plus la mise en page. Cruel dilemme. J'ai perdu 2hr à tout refaire au propre (et à traduire aussi les images en passant).

Et le ftp de free que j'utilise pour mes images est super lent (en tout cas chez moi.... avec une ligne free...). Faut attendre un peu que les images chargent, y en a 31.
Revenir en haut Aller en bas
https://2img.net/image.noelshack.com/old/up/gmzonecbna-3cfbc56d25.jpg
mortelkill
Utilisateur confirmé: Rang ***
mortelkill


Messages : 780
Localisation : Canada
Projet Actuel : Watchmakers

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyLun 10 Déc 2012 - 19:44

c`ets traduit avec un logiciel et ta utilisé tes talents bilingues pour tout réecrire?
Revenir en haut Aller en bas
issmano
Habitué
issmano


Messages : 83

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyMer 12 Déc 2012 - 13:30

aie mais c'est trop cool !! j'ai aime +1 ^^

_________________
Chicken-coq jeu a 5 choses = Ange-aideur//Course-d'oeuf//Biohazard-zombie(cache mode)//Biohazard-zombie(arme mode)// Counter-chicken
Ange-aideur = 100% Accompli Course-d'oeuf = 100% Accompli Biohazard-zombie(cc) = 100% Accompli Biohazard-zombi(am) = 100% Accompli Counter-chicken = 100% Accompli JEU ACCOMPLI = 95% COOL
Revenir en haut Aller en bas
arthuro
Utilisateur confirmé: Rang ****
arthuro


Messages : 1483
Localisation : Paris
Projet Actuel : Diagon https://arthursonzogni.com/Diagon

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyMer 12 Déc 2012 - 16:24

Merci. J'ai bien aimé ces conseils.

_________________
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Pochette[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Signature.php?gid=588
D'autres jeux :
In The Cube
In the cube 2
Revenir en haut Aller en bas
Falindir974
Bavard
Falindir974


Messages : 96
Localisation : erreur location inconnue
Projet Actuel : être en vacance

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptyVen 29 Mar 2013 - 23:25

Cool.cette traduction sa ma ben aidé le truc des couleur

_________________
Il y a 10 types de personnes sur terre : ceux qui comprennent le binaire et les autres
Revenir en haut Aller en bas
onilink_
Modérateur
onilink_


Messages : 9180
Localisation : Montpellier
Projet Actuel : Planet Centauri
OniDev

[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) EmptySam 30 Mar 2013 - 11:31

Vraiment cool cette trad!
J'adore les conseils du gars, ça rejoins pas mal la prog sur certains niveaux ahah :b
Soyez feignants bande de moules! awesome

_________________
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Runningpotato1[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) TvF6GED [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) MdetltS
Revenir en haut Aller en bas
Contenu sponsorisé





[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty
MessageSujet: Re: [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)   [Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction) Empty

Revenir en haut Aller en bas
 
[Tutoriel] Comment réaliser de meilleurs graphismes ? (traduction)
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Comment réaliser des animations?
» Comment réaliser le comportement d'un projectile?
» [Résolu] - Comment charger des graphismes ?
» tutoriel comment faire un ciel étoilé
» Tutoriel: Comment faire un décor de vaisseau spatial (Paint)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Le CBNA :: Débats et partage :: CBN'ART-
Sauter vers: