Création de tileset – les techniques et les astuces de Shamu' =x

Bon, finalement, j'ai galéré plus que prévu (comme un peu prévu d'ailleurs, ne jamais promettre quoi que ce soit, c'est piégeur… quoique qu'intéressant parfois). En plus, avec Mist' qui me met par deux fois la pression é_è. Mais bon... V'là le petit monstre comme promis  

Autant vous le dire tout de suite, néanmoins, ça va être un peu la traversé du désert =x, c'est compliqué ! Mais serrez les dents, ou les fesses à votre bon plaisir, et on devrait y arriver !
Enfilez donc votre armure, Dégainez votre épée, Levez votre bouclier car je vais envoyer du paté !! ...
….Pavé ?… Parquet ?…
……..
Hum, hum... Bref    
Courage donc, fiers (futurs) soldats du pixel art !
Surtout que je commence par des trucs démotivants =x
J'aime pas le français sinon, bon courage aux fières (futures) soldates aussi ! Entre les parenthèses et les genres é_è ... Pour les non grammars nazis, zapper cette phrase ! Et surtout la suite ! D'ailleurs, un « s » ou non à « non » ? =P
Bon OK, j'arrête, on passe à la suite….

Introduction

1er chose que j'ai à dire, en fait,… C'est mort pour faire votre tileset à la fin de ce tuto =/. Vous pourrez le faire un jour mais pas tout de suite après. Je sais que ce n'est pas la meilleur manière de présenter les choses mais autant être franc dès le début. C'est compliqué, très compliqué. Et cela pour plusieurs raisons :

1) Votre technique de pixel artiste si vous débutez le pixel art. Il y a une infinité de choses à peaufiner avant de développer une véritable compétence qui puisse vous permettre de faire ce que vous voulez. Et même si vous êtes plus ou moins avancé(e) dans votre maîtrise du pixel (excepté si vous un êtes un(e) pixel artiste bien confirmé(e) ou expert(e) et même ça, d'ailleurs =/), il y a plein de détails assez enquiquinants qui vont entravés la création de votre tileset. En somme, ce n'est pas parce que vous avez réussi à créer un tile que vous pourrez faire un tileset. Ça si vous ne l'avez pas déjà compris, vous allez pas tarder à le comprendre de toute façon =/.

2) Un tileset est construit autour d'un thème et d'une utilisation (ainsi qu'un certain nombre de contraintes). Et ça, ben ça demande pas mal de réflexion. Et même beaucoup, beaucoup, beaucoup de réflexion.

Si la 1ère raison est plus ou moins facile à comprendre, la deuxième nécessite peut-être quelques explications.

Rapport entre les éléments graphiques et le gameplay

Déjà, donc, il y a tout les aspects relatifs au gameplay et au level design que je vais pas vraiment aborder parce 1) je suis pas encore suffisamment bon pour en parler et 2) faudrait déjà savoir faire un tileset purement au niveau graphique x). Mais pour esquisser rapidement ce point, quand même, prenons l'exemple du coffre dans les RPG. Selon votre gameplay et vos choix de level design, le design du coffre va changer. Par exemple, si vous voulez faire un jeu simple et un gameplay simple (enfin simple x), ça dépend du point de vue^^), vous allez créer un coffre visible et repérable du premier coup comme dans les zelda par exemple. Le challenge de ces jeux est que les coffres soit facilement repérable mais difficilement accessible. À l'inverse, vous pourriez aussi faire des coffres boites-en-bois comme dans RM qui se fonde un peu plus dans l'environnement et qui se repère plus difficilement (pas de beaucoup oui mais en vision périphérique, on a quand même plus de mal^^). Dans les deux cas, cela dépendra du gameplay que vous souhaitez avoir et du level design global. Et à l'intérieur, ce design d'éléments interactifs comme les coffres dépendra de quoi ? Ben de votre tileset. Du coup, ça peut être un élément à prendre en compte dans la réalisation de votre tileset. Le old school n'étant pas le plus approprié pour le deuxième cas par exemple. Mais PAS TOUT DE SUITE. Commencez déjà par réaliser des tilesets sans ces problématiques et puis, on verra x). Et je vous promet que déjà là, il y a pas mal de boulot et de réflexions.

Exemples:

Aspects théoriques et esthétiques de la construction des tilesets

Quel thème ? Multi-fonctions comme les RTP ?

Spoiler:

Ou un thème spécifique (extérieur ville, extérieur forêt, extérieur côte, extérieur montagne, etc.) ? Un petit exemple avec l'un de mes tileset RTP-like en construction (que je voulais publier une fois fini mais bon, osef). L'idée est d'en faire un tileset spécialisé pour les map pleine nature/bucolisme en Été avec possiblement des falaises.

Spoiler:

Plus vous ferez des tilesets spécialisés, plus vous aurez de la place pour ajouter de nouveaux éléments et plus vous pourrez faire de magnifiques maps. Mais attention ! La complexité va croître en même temps et ça peut devenir très, très compliqué à gérer tout ça =/.

Et puis ensuite quel élément ?
Je peut pas vraiment vous faire liste mais ça demande des recherches, c'est pensé tout ça !!
En général, les level designer font des recherches assez exhaustives sur ce qu'ils veulent représenter en étudiant des domaines et les connaissances qu'ils contiennent (architecture, écologie, etc.) pour que ça soit « réaliste ».
Honnêtement, je saurais pas vous expliquer correctement (il y a trop de choses à dire aussi) mais j'ai une petite anecdote qui pourrait pt vous parler. À un moment, j'avais fait une remarque sur une map de Gel' (pour ceux qui veulent voir, c'est dans la section screenshoot). J'avais dit en fait que le PQ était relativement trop loin des WC et que ça pouvait être un peu problématique xD. Et plus récemment, par un « heureux » hasard, je suis tombé sur un article intitulé « Level design : Do you research – Where's is the toilet ? » (en français : « Level design : Vous posez-vous la question – Où sont les toilettes ? » ; le lien [Vous devez être inscrit et connecté pour voir ce lien] pour ceux que ça intéresse)
C'est tout con mais c'est un véritable article fait par un level designer^^.
Pourquoi je vous raconte ça ? Parce qu'en fait, si ne vous ne faîtes pas ça, vous risquez de vous retrouver dans le même cas de Gel' (ce qui peut casser l'immersion dans certains cas, pt forcément à cause d'une problématique de PQ mais bon xD). En vous imprégnant au maximum de ce que vous chercher à représenter, vous limiterez ce type d'incohérence. Ça ne veut pas dire faire des recherches « théoriques » forcément (même si c'est fortement conseillé) mais tout au moins, prendre le temps d'aller regarde une image d'un paysage par exemple. Inconsciemment, ça va rester en partie. Et plus encore si vous faîtes des recherches… euh, j'aime pas le mot « théorique » mais bon voilà, vous avez compris. Plus poussée, on pourrais dire^^.

Mais ne vous inquiétez pas trop non plus, c'est compliqué et difficile pour tout le monde. Preuve en est qu'un level designer pro semble aussi avoir des difficultés avec de simples toilettes tout comme Gel' xD. (Where's the toilet ? That is THE question… or not :3)

En plus, rien ne vous empêche de vous inspirer de la structure des tilesets existants . Mais va falloir quand même les étudier par contre  

Et pour ceux qui vont venir me sortir le traditionnel argument du « oui mais on s'en fout, c'est un monde imaginaire... », ALLEZ VOUS accoupler avec des bonobos, ils vous rendront plus aimables. 7 à 10 fois par jours, n'oubliez pas.
Mais plus sérieusement, même l'imaginaire a ses règles et l'homme ne se libère jamais totalement du réel malencontreusement… ou pas. Question suivante.

Allez vous privilégiez la diversité ou bien les combinaisons ?
Là, c'est tout con (mais compliqué quand même), allez vous choisir ça…

Combinaison:

ou ça ?

Diversité:

Les combinaisons, c'est cool pour donner un effet « overlay » mais en même temps… la diversité aussi ! À vous de réfléchir sur ce point ET en sachant qu'il n'existe pas de solution exacte à problème =/

Avez vous pensez à la superposition?

Pas d'exemple là dessus… OU la flemme d'y réfléchir possiblement… Aussi… Je suis une sacré feignasse en fait -_-… MAIS sinon, en raccourci, qu'est-ce qui va allez dans les tilesets A et dans les tilesets B,C,D , E (sous sous VX, VX Ace et MV) ? Qu'est-ce va dessus et dessous ? Pour résumer… Du reste, cette question m'entrechoque tellement les bijoux de familles que je n'ai pas envie d'en parler xD. Débrouillez-vous x). (Mais sinon, il n'est pas nécessaire d'y réfléchir de manière approfondie en général… Ou pas suivant les cas donc =p)

NB: Sous XP, la question peut passablement se compliquer x). Mais je suis pas sur qu'il soit nécessaire le préciser, les utilisateurs de XP doivent déjà bien en avoir conscience.

La passabilité ?

Si vous restez en mode classique, ça devrait facilement passé MAIS... dès que vous passerez par des scripts de pixel mouvements, par exemple, vous risquerez de galérer légèrement plus =/. Pareil que la précédente en fait, elle me les brise tellement celle-là qu'elle m'en bouge une sans bouger l'autre actuellement (pour paraphraser un certain homme politique). Je sais pas bordel xD ! Donnez moi la réponse quand vous l'aurez x) !


Et puis j'ai même encore pas parlé du style graphique en plus x). Parce ça aussi, il faut choisir. (La classification qui suit est sommaire et arbitraire, je ne l'assume donc pas é-è)

Old school ?:

RTP-Like ?:

Semi-Réaliste ?:

Réaliste ?:

Ultra-Réaliste ?:

Fantastique/abstrait ? (à la Asha' par exemple :3, j'aime bien le style  d'Asha <3, voir  [Vous devez être inscrit et connecté pour voir ce lien])
Cartoonesque et caricaturale ? (Comme Mamashi':3 go voir son projet [Vous devez être inscrit et connecté pour voir ce lien])

Euh... Différent x)? Mais cool quand même :3 :

Peinture-Like ?!:

Et pis plein d'autres x), zavez compris à ce stade. Allez regarder la [Vous devez être inscrit et connecté pour voir ce lien] pour plus d'exemple :3

Et enfin, aspect non moins important mais très chiant : l'utilisation…
Parce que oui, c'est bien de faire des tilesets mais encore faut-il qu'ils soient facilement utilisable. Faut pas que vous passiez 2h à chercher un élément à chaque fois parce que vous allez ramer sinon. Du coup, point important : comment l'organiser ? Deux axes que j'utilise : le type d'éléments et l'ordre de mappage.
Pour le type d'éléments, ben les arbres avec les arbres, les herbes avec les herbes, etc... C'est tout con x). Mais pas toujours néanmoins :3
Pour l'ordre de mappage, bah, ça dépend de vous et de votre technique. En général, pour un extérieur, pat extérieur on commence quand même par le sol, puis le chemin x). Ensuite, on place les arbres random (ou à peu près) puis on corrige avec les combinaisons (j'explique plus loin ce que j'entends par là). Et enfin les autres éléments. Bon, j'ai sauté des étapes mais vous avez compris le principe (ou pas, posez la question dans ce cas =x). Suivant cette (votre) ordre, il faut donc que les éléments soit placés de manière efficace. Les arbres à côté de leur combinaison dans RM, c'est pas pour rien !! C'est con mais c'est à penser et à faire. Et si vous n'avez pas la même manière de faire, libre à vous d'adapter^^

NB: J'ai même pas pris en compte l'utilisation des autotiles et de shift mais bon, je les prend pas en compte pour l'instant (flemme d'y réfléchir xD) et pis… Restons pour simple l'instant ^^. Ça va être votre pire ennemi d'ailleurs ça… de rester simple en commençant =p.

Conclusion de l'intro

Donc pour résumer, à la fin du tuto/atelier, vous ne pourrez pas direct vous coller à la création du tileset de vos rêves, parce qu'il n'existe que dans vos rêves tout simplement et que j'ai des doutes quand au fait que vous ayez penser à tout ça déjà^^ (mais si vous l'avez fait, gogogo, hâte de voir ça^^). Et même après ce tuto, en plus d'une longue réflexion sur le tileset que vous voulez, il va falloir aussi expérimenter des dizaines de fois avant d'arriver à quelque chose de correct ou satisfaisant (ainsi que pleurer un nombre incalculable de fois sur la laideur de votre art naissant et votre incapacité à faire ce que vous imaginer     ).

Mais plus vous essaierez, plus vous vous progresserez, c'est comme tout. Du coup, corollaire, je vous conseille de faire plusieurs essais de tileset simple sans trop de complexité pour vous faire la main. Je vais vous donner un exemple simple et basique avec le minimum « vitale » d'un tileset d'extérieur. Une fois que vous aurez fini de lire, essayez de le reproduire dans un style similaire ou légèrement différent. À chaque fois que vous répéterez ce cycle, vous vous rendrez compte de petits détails qui affectent vos tiles et vos tileset. Plus vous répéterez ça, plus vous vous rendrez compte de ces détails et apprendrez à les repérer puis à les corriger le plus tôt possible. Pas la peine de vous attardez trop dessus non plus par contre au début ! Si ça bloque trop, laissez filer et continuez votre tileset, ça viendra en son temps .

Ah et dernière chose, le tileset pourra peut-être paraître trop simple voir laid pour certains, ou pas cohérent, ou je sais quelle autre critique. MAIS, il est au moins relativement simple à faire… Normalement. Du reste, excusez moi pour les couleurs mais c'est un machin qui me hante et que j'arrive encore pas très bien à gérer. Pas la faute d'avoir essayer d'étudier les théories des couleurs pourtant mais j'ai du tombé sur les mauvaises explications    (et pis, c'est immonde à lire, faut le dire et en plus je fais des rimes…
Passez à la phrase et oubliez ça, voulez-vous?).
Donc pour l'instant, je reste à l'intuitif et l'à peu près correct. Et si vous êtes pas content, bah, ALLEZ VOUS…. boire un thé avec un chameau

Ah oui, c'est un tileset d'extérieur mais vous pourrez faire pareil pour les autres bien sur. Dès que vous aurez bien compris le principe néanmoins… =p

I) Les deux composantes de base d'un tileset : motifs et éléments singuliers

Bon, la différence, c'est moi qu'il la fait parce que je sais pas comment dire sinon mais en gros, on peut distinguer deux grandes catégories basiques de tiles dans tout les tileset et qui vont servir à la construction du reste du tileset : Les motifs et les éléments singuliers.

En particulier les motifs, il faut vraiment pas les foirer car c'est vraiment la base des tileset et de ce qui constituera votre map. Qu'est-ce qu'on a là dedans du coup ? Eh bien, on a :
- Les sols (herbe, terre, route, sentier, neige, etc.)
- Les murs au sens large (mur de maisons en bois, en brique, en pierre, etc. ; les falaise de terre, de roche, de glace, de cristal, etc.)
- Les toitures (tuiles, ardoises, pailles, etc.)

Remarque: Si vous avez suivis, vous avez remarquer que je n'ai pas mis les « haut » de falaises (ni les « bas » ou les « bords » d'ailleurs). Pourquoi ? Tout simplement parce ce sont déjà des éléments composés/modifiés (herbe + bord/bas) et donc à faire plus tard (qu'on abordera plus loin aussi). Je n'ai pas non plus mis les étendues d'eau ou les escaliers parce c'est presque toujours des éléments composés aussi (pas toujours néanmoins). J'aurais pu mettre aussi les « herbes supérieurs » ou les barrières aussi mais… restons simple pour le moment x). Vous aurez tout le loisir d'analyser tout ça en détails plus tard en décortiquant comment sont construis les RTP (Tilesets A1 à A5 sous VX, VX Ace et MV en gros)

Ensuite viennent les éléments singuliers et là bah… c'est tout le reste excepté les autotiles (animées ou non) et les combinaisons (abordées juste après). Quelques exemples rapides pour vous les rappeler mais aussi pour vous montrer un peu le nombre important d'éléments auquel on peut penser :
- les arbres, les buisons, les herbes à fleurs ou non, les arbres morts, les lianes, la mousse, les plantations, les souches, les rondins de bois etc.
- les fissures, les trous, les roches (petites et grosses), etc.
- Les tonneaux, les caisses en bois, les panneaux, etc.
- Et le reste dont j'ai la flemme de vous faire la liste x) (pareil gogo analyser les RTP ; Tileset B et C principalement sous VX, VX Ace et MV)

Création des motifs

Il existe plusieurs « techniques » pour faire des motifs. Là j'en ai utilisé une basique qu'on pourrait dire « à éléments », cad un fond + des éléments/motifs par dessus comme l'exemple ci-dessus. Et... C'est tout =/

Motifs:

1ère étape, on pose un fond sur un premier calque. 2ème étape, on dessine nos éléments sur un second calque^^. Ça a l'avantage de permettre des modifications ultérieurs en plus =p

Pour le choix des couleurs, bah, ça dépend des cas. Pour l'herbe, un vert de fond intermédiaire, un vert plus sombre pour les tiges/feuilles (parce qu'en vrai, c'est ni l'un ni l'autre et les deux en même temps) et du jaune, toutes choisies un peu au hasard x). En ce qui concerne les autres motifs, il y a bien une règle mais j'ai pas envie de vous la donner tout de suite :3. Je préfère que vous continuez à lire^^. (mais elle finira par arriver, don't worry)

Pour le reste, pas plus d'explication, c'est des pixel à poser, suffit d'imiter… ou bien d'expérimenter à vos risques et péril =p. Ah cherchez pas à faire trop beau aussi =/ (on cherche à faire un tileset, pas une œuvre d'art au niveau de chaque tile… Elle va revenir celle-là é_è)

PS : Oui, oui, la route n'est qu'un carré marron, oui, oui. J'ai décider de rester simple… ou bien j'avais la flemme. À vous de voir  

Vérifier et construire la continuité des motifs

Tout d'abord lorsque « vos poserez » vos éléments, vous allez dessiner dans cette zone a peu près :

Et même faites le, dessiner surtout dans cette zone.
Ensuite, vous devez décaler votre tile par sa moitié verticalement et horizontalement. Sous Gimp, vous pouvez utiliser Calque> Transformation > Décalage puis « décalage de x/2 et y/2 » (Filtres > Divers > Translation sur Toshop'). Vous allez alors apercevoir une sorte de croix comme ceci :

Le but à cette étape est de créer le maximum d'éléments qui chevauchent cette croix comme ci-dessous. Plus vous le ferez, plus l'effet « motif » sur vos futurs map sera atténué.


Pour les motif de construction « humaine » plus spécifiquement, eh bien… Il y aura un peu de math pour votre bon plaisir… ou pas x). Je m'explique. Dans une bonne partie de ces tiles, tout est arrangé proprement avec des figures tel que les rectangles, les carrés, les cercles, etc. Et tout ça doit rentrer dans un « carré ». Comment faire pour faire pour les faire rentrer et optimiser la place ? Ben en calculant le maximum de forme que vous pouvez mettre si vous êtes matheux. Sinon, don't worry, on peut le faire au feeling (c'est juste un peu casse pieds parfois). Et puis avec l'habitude, ça va aller plus vite^^.

NB : Il existe des logiciels spécialisés, tel que PixelEdit généralement pas trop cher qui vous permettent de faire ça plus facilement mais bon, les log comme Gimp ou Toshop' ont aussi leur avantages. Ça, ça sera à vous de voir. Peut pas vous aider plus que ça sur les autres par contre =x

Tester ses motifs

Bah là tout simple, on répète le motif et on vérifie si ça passe . Enfin... simple :3

Spoiler:

Tester sa capacité d'observation: Un truc qu'il va falloir bien apprendre, c'est apprendre à bien observer, de manière générale, mais surtout ici pour corriger vos motifs. Par exemple, là, je vois parfaitement et immédiatement les tiles à cause d'un élément particulier (on peut le voir aussi grâce aux formes qu'ils dégagent mais c'est plus difficilement corrigeable, voir impossible à corriger, alors que les éléments oui). Et vous ? (N'allez pas regarder le tile, entraîner vous sur la map car c'est ça qui est important d'apprendre à faire é_è)

Solution :

Ptite technique pour repérer les motifs:

Ensuite, on passe aux autres motifs bien sur qu'on va continuer à tester sur une « pseudo-map ».

Spoiler:

Trop simple, pas beau ? M'en fous, allez me tester ça et entraînez vous é_è. Déjà ici, vous devez déjà apprendre à voir ce que ça va donner et si ça va être bien ou pas. À cette étape, je pouvais déjà « voir » à peu près ce que ça allez donné. Plus vous arriverez à bien voir ça dès cette étape, plus ça vous évitera des soucis (du genre exemple précédent ou de cohérence des couleurs). Donc go go et ne négligez pas trop cette étape même elle est chiante. Et une fois cela, vous pourrez passer à l'étape suivante^^.

Création des éléments singuliers

Bon, je place cette étape ici mais je suis pas sur que ça soit la meilleur idée. Dans la création du tuto, je l'ai mise ici au feeling (et aussi pour des raisons pédagogiques, d'abord les motifs, les éléments singuliers puis les éléments composés ; du plus simple au plus complexe en somme) mais certains vous conseillerez pt de faire ça en dernier et ça serait logique. Car les éléments singuliers sont… Bah singuliers… =/. Chacun d'eux nécessite une construction « personnalisée » et ça, ben ça demande  du boulot ! OR ! Si... pendant la construction des autres éléments, vous vous rendez compte que c'est pas cohérent… bah faudra recommencer. Et ça c'est chiant. Mais en même temps, l'étape suivante, je la trouve « fun » à faire et plus facile x) (entre autre parce c'est de la combinaison et qu'on n'a plus à tout faire de A à Z). Et ça peut être sympa de finir par ce qui est le plus « fun »^^. Mais bon, à vous de voir =/

Spoiler:

Tronc: Go télécharger et observer, faut pas déconner non plus -_-. Si vous n'y arrivez pas et que vous me poser la question, je vous mord. Ah si quand même, au milieu, c'est du orange. Utiliser le orange pour dessiner les zones clair dans un environnement marron clair est une technique classique et assez cool en plus d'être classe. =D (bien que pas trop intuitive =x)

Feuillages: Honnêtement, comment j'ai fait ici… ben méthode WTF, j'étais gavé de pas arriver au résultat que je voulais, j'ai dessiné un motif au hasard, je l'ai répété au hasard et pis voilà   . Ça risque d'arriver régulièrement au passage ce genre d'épisode. Seul « règle » ou « technique » que j'ai utilisé ici sinon, c'est le contour en sombre (ou noir suivant les cas). À cause du style graphique néanmoins =x. Ah et j'ai dessiné la forme avec le vert intermédiaire dès le début aussi. Go sur youtube, ya une bonne tripotée de vidéo qui montre comment faire non mais je vous jure…
...
…Quoi ? Oui, je fais ma feignasse pour les explications sur les arbres, oui, j'ai déjà dessiné une centaine de ces saletés, oui, ils continuent de me les courir sur le haricot, oui, j'ai pas assez travaillé le style old school T_T et NON, je n'expliquerais pas plus que ça et NON, vous ne pouvez pas me poser de question là-dessus, Grrr  

Mais bon en vrai, c'est parce que vous devez travailler votre sens de l'observation… Ou pas et c'est qu'une excuse pour protéger ma flemme inestimable. Sinon, vous avez le droit de poser des questions si… vraiment… vous galérez…

Pour finir sur ces trois cas, que ce soit pour le rocher, les cailloux, le tronc ou le feuillages, gogo voir après dans la section Bonus > La mystique de base du pixel art > La règle des 3 couleurs QUAND vous aurez fini de lire le reste… ou pas si vous êtes trop curieux.

Test des éléments singuliers
Pareil qu'avant, n'oubliez pas de tester^^
Pas d'image, c'est tout con et en plus, je suis déjà en train de faire ramer mon navigateur là, donc une de moins, ça fera pas de mal.

II) Les éléments composés : Autotiles, combinaisons de motif et combinaisons d'éléments singulier

Autotiles de type 1 : Le chemin

Première question avant de se lancer, par dessus ou par dessous ? Posez-vous la question avant de commencer ! L'herbe, ça monte sur la route en générale SAUF si elle est surélevé de base et entretenue. Un dallage, ça va être pareil a peu près. La neige, c'est par dessus aussi. Etc, etc.

Une fois, la réponse trouvé, vous pourrez utiliser cette technique pour la suite^^

Spoiler:

POUR L'ÉTAPE 6, au début, suivez simplement la règle ci-dessous. Une fois que vous aurez bien compris la mécanique des autotiles et que vous aurez la capacité de les visualiser facilement, vous pourrez en jouer un peu MAIS plus tard (toujours la même rengaine, je sais mais si vous vous attaquez par le plus dur tout de suite, vous allez pas faire long feu =/).

Spoiler:

Sinon, vous pouvez aussi allez voir le joli schéma complet que Kingdo' nous a partagé juste après. À vos risques et périls néanmoins ainsi qu'une probable migraine... :3

REMARQUE POUR XP: Les autotiles peuvent, a priori, se construire à peu près de la même manière (bien qu'il puisse exister de meilleure technique). La seule différence étant le nombre de tile:

Spoiler:

Autotiles de type 2 : Le mur et la toiture

Bon ben là, peut pas faire plus simple, vous disposez vos tiles par paquet de 4 pis vous ajouter en haut UNE petite modif pour commencer.

Spoiler:

Combinaisons/modifications de motif : les falaises

Spoiler:

Étape 1 à 4 : C'est là aussi qu'on peut voir l'avantage de séparer ses motifs en 2 éléments. Ça a beau être juste une commodité, c'est vraiment très pratique de pouvoir effacer rapidement le « fond » vert puis les éléments. Au début, je faisais en brut sans vergogne et à la fin je devais redessiné les « fleurs » (comme un idiot plein d'intelligence -_-) pour donner du réalisme et l'impression qu'elles « montent » sur la falaise^^.  Enfin bref, vous en verrez (ou pas) l'utilité un jour =p. Ou bien vous trouverez une technique différente^^.

Étape 6 et 7 : Sous Gimp (et probablement d'autres), si vous avez eu le pinceau trop lourd, vous pouvez modifier l'opacité du calque pour alléger l'effet. Ça peut même être une technique plus facile à gérer que de faire ça manuellement avec le pinceau =/

NB: Les falaises dans RM sont crées en combinaison de motifs mais aussi en autotiles de type I ("haut" de falaise) et II ("bas/milieu" de falaise). Ça peut avoir ses avantages.


Et du coup, comme je l'avais dit avant, les escalier, les « haut » de falaise et tout le reste, c'est EXACTEMENT la même chose. Vous pourrez donc, plus tard, utiliser la même technique pour les faire. Seul chose qui pourra changer un peu, c'est que ça pourra être un peu plus casse-pieds pour les réaliser. Les escaliers demandent, par exemple, un travail plus minutieux =x. C'est pourquoi je les ait pas mis dans ce tuto d'ailleurs. Mais sinon, c'est la même chose^^


Combinaison d'éléments singuliers
Bon, ben là, c'est les arbres et les fenêtres par exemple.
N'ayant pas vraiment beaucoup d'éléments singulier à combiner, ben j'ai que ça en fait =/

Spoiler:

Sur les combinaisons, une précision néanmoins. Les combinaisons :
- Verticale ok.
- Diagonale ok.
- Horizontale à bannir è_é

Illustration avec les arbres de RM:

Ça ne va pas bien marcher à cause de problèmes de perspectives =/. Dans certains styles, ça peut passer mais en général, c'est juste foireux x).
Mais pourquoi en diagonale, ça marche alors que c'est aussi un peu horizontale^^ ?
Bah en fait... c'est notre cerveau qui est juste mauvais en fait et qui croit à n'importe quoi xD. Et il en existe plein des trucs comme ça x). Lorsque vous aurez progressé et étudié un peu plus le sujet, vous vous sentirez presque comme un illusionniste là dessus =P. Jouant des tours d'optiques à vos futurs joueurs^^. Mais plus tard .

Astuce : Allez voir, les tileset de Candacis et de Shua. Elles ont une autre manière sympa de combiner les tiles. Bon en fait, c'est un peu un secret de polichinelle car tout le monde le fait mais bon^^

Test final

Et du coup, dernière partie, vous allez tester tout ça^^

Spoiler:

Conclusion

Voilà qui conclut donc ce tuto/atelier   . Félicitations, vous avez réussi un lire un pavé made in Shamu's Land                

Avec de la technique et de l'expérience, vous pourrez ensuite faire des ptit modif sympa (à mon sens) comme celle là par la suite :

On progresse   :

Et ensuite quand vous aurez compris le truc bah vous répéterez ça  

Spoiler:

Et tout ça, ce ne sont que des modifs des tiles précédemment créés^^. Mais juste après vous vous rendrez compte que les arbres sont juste laids au final avec les nouvelles modif T_T et noterez aussi une pléthore de détails casse-pieds et très visibles avec du recul T_T (les motifs de la falaise apparaisse mieux avec les nouvelles modif par ex    ). Cette étape se dénomme "l'enfer du pixel artiste" au passage.

Donc vous virez presque tout et pis vous recommencez jusqu'à un résultat à peu près correct    (à votre sens, c'est important )

Spoiler:

Voilà, pour la suite du programme x). Au delà, je pourrais plus aider =/.

Sinon, j'ai finalement passé tout ça en forme d'atelier, comme vous avez pu le constater x), mais je promet pas de toujours être disponible =/. Mais rien qu'en discutant entre vous, vous allez vous trouvé des petites morceaux de techniques sympa^^. C'est ce qui s'était passé au précédent atelier. Donc, gogo poster ça. Vous aurez pt pas forcément de ma part (en plus je me considère pas comme le plus compétent sur le sujet) ou des autres mais bon… Qui ne tente rien n'a rien comme on dit^^. Mais je suis sur qu'il y aura au moins un bon samaritain pour vous aider la plupart du temps  

Je pose aussi 2 conditions pour mon aide (dans la mesure du possible et de mes capacités bien sur) :
- Premièrement, vous me montrez que vous bossez (en postant vos créations). Si vous ne respectez la première condition, je vous baffe et ensuite pt que je vous réponds
- Deuxièmement, si vous vous attaquez tout de suite au tileset « amélioré » alors que vous avez pas le niveau ou que vous faites des fautes que j'ai précisément essayé d'expliquer dans ce tuto… Là… là, je vous mord et je ne vous répond même pas è_é.

Mais les questions sur le tuto en lui-même sont néanmoins autorisé bien sur^^. Mais pas sur la création des tiles en elle-même è_é (pas avant que vous m'ayez montrer quelque chose en tout cas). Go essayer, c'est comme ça qu'on apprend !

À part ça, et pour vraiment conclure cette fois-ci x), surtout, surtout, amusez vous bien =p ! Et puis... Bon pixel art!
Plush !  


Quand à moi, je vais aller décéder dans un coin tranquillement, JE SUIS MORT XD. Mais postez quand même vos créations ! Hâte de voir ça :3. Mais n'oubliez pas de rester simple !! N'oubliez pas non plus de tester tout ça !! D'observer attentivement aussi !! ET…… Bordel de m*****, je suis trop papa poule moi T_T. Ne désespérez pas, au bout d'un moment, on s'amuse bien ! Volez donc oisillons du pixel art… Tout chose arrive à point nommé qui sait attendre !:3

Bonus (en vrac)


Les proverbes/ptites phrases du pixel art by Shamu' =D

- Zoomer, dézoomer, zoomer, dézoomer, zoomer, dézoomer...

- Le pixel art est affaire de pixel

- Le pixel art n'est pas qu'affaire de pixel

- Le crayon tu utilisera, si old school tu fera.

- Observer et Analyser, tu dois ; Patienter et Persévérer , il faut !

- On courbe, on courbe, 3,3,2,1,1,2,3,3,4,5,5,4,4,3,...

- On n'angle pas ! Droitement en tout cas…

- Des calques, des calques, des calques… NNNNOOOONNNN… Le calque… j'ai oublié le calque T_T

Si vous ne les comprenez pas tout de suite, c'est pas grave^^. Quand vous les comprendrez, vous vous rappellerez peut-être votre noble serviteur, le bon Shamu' :'). PAS LA PEINE DE POSER LA QUESTION, IL N'Y AURA POINT DE RÉPONSE ! :p

La mystique de base du pixel art  

- La règle des trois couleurs : une couleur, la même plus sombre, la même plus claire et BOUM… Ooooh une roche ! Oo


- Éclat, ombre et relief : Du jaune, du noir, deux calques, l'opacité, la gauche et la droite.
(cf les falaises)

NB : jaune=clair et noir=sombre dans certains cas, cf le point au-dessus.

- Les calques… Les calques, je vous en conjure, les calques, utilisez les. Il a été scientifiquement prouvé que les calques diminuaient le taux de développement de maladies mentales chez les pixel artistes, donc… UTILISEZ LES (cf Proverbes/ptites phrases du pixel art).

- Le bruit pour le réalisme. Utiliser les effets/filtres de bruit permet d'avoir rapidement un aspect « réaliste » dans certains cas. Mais attention ! C'est une technique facile mais elle n'est pas toujours applicable. Et si vous optez pour un style réaliste, faudra l'assumer ! Jusqu'au bout !

- Les outils de couleur permet de créer beaucoup de variétés de tiles à partir d'un seul en modifiant la couleur du feuillages des arbres par exemple.


Astuces/raccourcis sur Gimp

- Afficher > Afficher grille et Afficher > Aligner sur la grille est très utile quand on veut faire un tileset ou un tile . Vous pouvez contrôler la taille de la grille dans Image > Configurer la grille. Pas  besoin de damier après ça (ou autre nom, me rappelle plus, la flemme de chercher é_è)

- Crtl + clic : tracer une ligne

- Crtl + shitf + O ou Calque > Transformer > Décalage puis « décalage de x/2 et y/2 » pour vérifier/corriger vos motifs

- Crtl +  ; : coller un motif dans toute la sélection. Utile pour vérifier rapidement ce que donne vos motif sous Gimp. (Les logiciels comme PixelEdit font ça plus rapidement, voir immédiatement mais bon… je crois pas qu'on puisse faire autant de chose que sous Gimp. Et pis, j'aime Gimp :3)

- Crtl lors d'une sélection permet de soustraire un morceau de la zone sélectionné
- Shift lors d'une sélection permet d'ajouter une sélection à la zone sélectionné

- On peut modifier l'opacité d'un calque et ça, c'est très cool. De même, on peut modifier l'opacité de la plupart des outils.

- Clic droit sur l'onglet des calques > Nouveau calque depuis le visible : permet d'obtenir un calque rapide à convertir en image pour tester sous RM

- Crtl + shift + E : Exporter l'image sous un certain format. Crtl + E pour exporter à nouveau dans le même format.

OMG first, je lis et je re XD

XD

Rapide x). Bon courage car il risque d'en falloir. À consommer avec modération (sauf cas de folie furieuse du making, à ce moment là... :p)

Edit: J'ai essayer de relire au maximum mais là, je craque. N'hésitez pas à signaler d'éventuelle fautes et je corrigerais ça demain ou plus tard

Shasha a écrit:C'est mort pour faire votre tileset à la fin de ce tuto =/. Vous pourrez le faire un jour mais pas tout de suite après

C'est tellement encourageant XD

- Zoomer, dézoomer, zoomer, dézoomer, zoomer, dézoomer...

Je connais

- On courbe, on courbe, 3,3,2,1,1,2,3,3,4,5,5,4,4,3,...

Sinon il y a l'outil plume :p

- Des calques, des calques, des calques… NNNNOOOONNNN… Le calque… j'ai oublié le calque T_T

Mais je suis évêque de la grande religions des calques mon petit.

J'ai trouver des images pour les tiles un peu plus précises si ca ne t'ennuie pas trop.

attention c'est un peu grand:

Sinon ton tuto est tres instructif , je ne compte pas faire mes propres tilesets mais je fait souvent des tiles avec X ressources pour 1 map.

Je pense que je vais plutôt organiser mes tiles par thèmes

Kingdo' a écrit:C'est tellement encourageant XD

Ah ben, il faut ce qu'il faut =p. Et puis, il vaut mieux le savoir dès le début^^

Kindo' a écrit:Sinon il y a l'outil plume :p

Plume? Je crois pas avoir ça sous Gimp  
C'est quoi?

Kingdo' a écrit:J'ai trouver des images pour les tiles un peu plus précises si ca ne t'ennuie pas trop.

Pour les autotiles I, tu veut dire?  

Sinon, l'image est assez parlante en effet^^. Je voulais la faire complète aussi mais j'ai eu la flemme à la fin x). Et puis, je pense qu'il vous mieux rester à la technique que j'ai donné au début pour pas trop se donner mal au crâne. Mais bon, après si les gens sont motivés... à leur risque et péril =p.

Kindo' a écrit:Sinon ton tuto est tres instructif , je ne compte pas faire mes propres tilesets mais je fait souvent des tiles avec X ressources pour 1 map.

Je pense que je vais plutôt organiser mes tiles par thèmes

Content qu'il l'ait été^^. Pour les tilesets à thèmes, après tu peut créer des tiles de transition (avec un peu des éléments des deux milieux) ou le faire à la zelda aussi x). Mais gaffe à la complexité, rien qu'avec les RTP, je sais plus quoi faire là xD

Salut,

J'avoue n'avoir lu qu'en diagonale pour l'instant mais il me semble que la version à laquelle s'applique la plupart des recommendations n'est pas précisée.
Je pense que ça serait utile dans la mesure où pas mal de contraintes de placement des élements et organisation du tileset / de l'autotile ne sont pas les mêmes sur toutes les versions.

Chapeau pour avoir pondu en tous cas, c'est du boulot !

@Al'Jeït
En plus, j'y ait pensé bordel x)

Bon, j'avoue pour ma part être seulement sur Ace et avoir présumé que ça serait suffisament similaire pour les autres log =/. Mais du coup, je veux bien que quelqu'un me corrige pour les autres (parce que je n'y jamais touché tout simplement et que je me suis basé principalement sur ce que j'ai pu grappillé comme info sur le fofo' =/)

J'ai pas le time de tout lire ce soir, mais ça m'a l'air très complet et très bien expliqué. Mes félicitations Shashamumugangan  .

Bon allez, j'ai regardé en diagonale, je ne vois rien à redire. Et pour un exemple, je trouve le rendu final plutôt mignon :3 .

Pas se shushi^^

Si tu vois des erreurs n'hésite pas à me le dire =p

[Vous devez être inscrit et connecté pour voir cette image]
Sur Gimp il y a écrit [Vous devez être inscrit et connecté pour voir ce lien] mais dans l'atelier de Raven c'étais plume, ca dépend des logiciels je pense ^^

Concrètement ca permet de créer des courbes plus ou moins facilement, je le trouve chiant à utiliser mais j'aurais été incapable de faire des ondulations correctent en pixel art.

Shamu a écrit:Bon, j'avoue pour ma part être seulement sur Ace et avoir présumé que ça serait suffisament similaire pour les autres log =/.

VX ACE et MV sont très similaire en ce qui concerne les tilesets (on passe de 32 à 48 pixels), ton tuto est suffisamment général pour qu'il soit valable pour les 2 versions.

Merci pour ce tuto Shamu tuto ^^

Un grand merci pour ce super tuto !

@ Phae et Spy

Ye vous en prie

@Kingdo'

Kingdo' a écrit:Concrètement ca permet de créer des courbes plus ou moins facilement, je le trouve chiant à utiliser mais j'aurais été incapable de faire des ondulations correctent en pixel art.

je le trouve chiant à utiliser

chiant

Comme tu a dit x). Il m'a soulé cet outil, je l'ai utilisé une ou deux fois pis, j'y touche plus pour le moment^^. Trop chiant x). Le crayon aussi au début mais maintenant, ça va =p.

Mais pour les courbes, y a pas le choix, c'est du pixel par pixel. Je pensais qu'on pouvais y échapper vu que les tiles, c'est déjà grand mais nan x). Pixel par pixel, au boulot après, on fait des modif (cf les proverbes =p). Ou on utilise la plume mais elle me soule pour l'instant x).

Kingdo' a écrit:VX ACE et MV sont très similaire en ce qui concerne les tilesets (on passe de 32 à 48 pixels), ton tuto est suffisamment général pour qu'il soit valable pour les 2 versions.

Je crois que la remarque de Al'Jeït visait l'organisation des tilesets. Cad, j'ai dit que les A contenait en gros les motif et les autres, les éléments éléments singulier. Mais ça varie pt. En tout cas, pour XP, ça doit varier vu que c'est illimité. Bon à part pour XP, VX, Ace et MV, je suis pas sur que ça soit nécessaire de préciser mais je préciserais bien pour ces 4 là si y a des variations que je connais pas^^

Shamu a écrit:Je crois que la remarque de Al'Jeït visait l'organisation des tilesets. Cad, j'ai dit que les A contenait en gros les motif et les autres, les éléments éléments singulier.

Z'avez compris ^^ mais comme je l'ai dit, la seule vraie différence entre VX ACE et MV c'est la taille des graphs, le reste c'est ctrl+C/ctrl+V

Par contre faut que même souligner que ça n'est pas valable pour XP en ce qui concerne les autotiles.

Sinon très sympa ce tuto ShaSha, bien joué.

Thanks Zealounet :3

Kingdo' a écrit:Z'avez compris ^^ mais comme je l'ai dit, la seule vraie différence entre VX ACE et MV c'est la taille des graphs, le reste c'est ctrl+C/ctrl+V

Dac' dac', bon j'irais corriger ça alors^^

Zeal' a écrit:Par contre faut que même souligner que ça n'est pas valable pour XP en ce qui concerne les autotiles.

Ah!

Du coup, qu'est-ce que je dis?
J'essaye d'expliquer un peu (si quelqu'un veut bien m'expliquer) ou bien je me limite à dire que ça n'est pas valable pour XP (si ça prend trop de place, il vaut pt mieux que j'évite et que je me contente de dire que c'est pas valable =/).
D'ailleurs ça veut dire quoi? x)
Il y a pas d'autotiles sous XP?

Et pour VX? Je suppose que ça va être pareil que Ace mais bon je demande au cas où^^

En fait les autotiles de XP fonctionnent différemment de ceux de VX (ensuite le fonctionnement est le même que VX sous Ace et sous MV), faudrait que je (re)trouve des infos dessus, mais sinon si Hinola passe par là il devrait s'y connaître mieux que moi.

En fait, chaque autotile de XP sont indépendant les uns des autres. C'est à dire que tu crée ton autotile comme ceci:
[Vous devez être inscrit et connecté pour voir cette image]

Et une fois dans RPG Maker XP, tu pourra choisir un maximum de 7 autotiles dans la bdd.
Mais en soit, la réalisation du dit autotile en soi reste plus ou moins pareille que pour VXace. XP et VX/VXace ont la même dimension de case, 32*32.

Yama' a écrit:Et pour un exemple, je trouve le rendu final plutôt mignon :3

AH!
J'avais pas capté

Me raillerais-tu, malandrin? Ou bien me persifflerais-tu?
Mais qu'importe en fait, j'assume le ton de cette article :3
Grand bien m'en fasse ou non d'ailleurs

************

Bon, sinon, j'ai rajouté des ptits trucs pour les différentes versions, modifier la mise en forme parce qu'elle me soulait et qu'elle était pas assez claire à mon gout (bien qu'on pourrait surement faire mieux) et tenter de corriger quelques fautes.

Ils en restent probablement encore mais, plus la motiv de les corriger là x). Si vous en apercevez, n'hésite pas à les signaler dans les commentaires (en bas de votre com pour pas juste faire votre grammar nazi bien sur x) ). Par contre, je les corrigerais seulement d'ici 1 mois ou 2... voir 1 an xD. Après, l'activité, c'est la grosse flemme intense qui s'installe là x).

Mais gogo postez vos créations tout de même.
Ah et dernière chose, n'imaginez pas non plus faire quelque chose de bien dès le premier coup, voir le deuxième, le troisième ou encore le dixième x). J'ai pensé la même chose au début. Néanmoins, là, je ne fait plus que virer purement et simplement mes anciennes créations ('fin je les garde quand même mais je ne compte plus les utiliser en l'état). Et encore pire après avoir fait ce tuto/atelier!! BON DIEU!! Ça m'a donné des idées là xD.

Enfin jusqu'à ma prochaine illumination où je me rendrais compte que mon idée était juste pourri et que je trouve meilleur à faire bien sur :3.
Bon courage de votre côté en tout cas =p

Nan nan, je parlais du screen de rendu final du tileset. Même si ça reste dans un style assez simple, le rendu est plutôt mignon (ouais, je suis très bon public, malgré le fait que je suis très pointilleux sur le graphisme XD ).

J'assume aussi ce point alors et dès lors :3 (j'ai presque envie de le développer mais grosse flemme en fait, il m'a trop épuisé pour le moment xD. Restons simple pour le moment   )
Je suis un peu vexé par le mignon aussi mais bon qu'importe :3

Excellent atelier / tuto Shamu Sempai, tu es toujours aussi plaisant et enrichissant à lire !



Je trouve que tu expliques bien du coup ça donne envie d'essayer. A mon retour peut être que je ferais un truc moche mais de moi, juste pour le fun et reprendre ce que j'avais vue avec Asha.

Merci ShuShua! :3
Tes commentaires me font toujours autant plaisir, ça va me motiver pour mes futurs articles/tutos ou atelier

Shua' a écrit:Je trouve que tu expliques bien du coup ça donne envie d'essayer.

Gogogo dans ce cas  
Hâte de voir ça^^

Shua a écrit: A mon retour peut être que je ferais un truc moche

Si tu reprend tes précédents arbres, tu risque déjà de faire bien plus beau que moi x).

M'enfin bref,
Bon courage en tout cas et en tout point! :3

Merci pour le tuto *u*

Bon du coup pour l'anecdote, j'écoutais l'album d'orelsan en lisant le tuto, et bien devinez sur quelle chanson je suis tombé quand j'ai lu ça :

sham' a écrit: Je vais vous donner un exemple simple et basique

:p

Forcément je l'ai lu en rythme

Bon, du coup, voici ce que donne le tileset herbe :

normal:

répété:

Ca fait un peu effet croix quand même, non ?

Lol x)

Ouais, je vois laquelle c'est x). Elle est assez adapté pour le coup en plus xD (mais en version un peu trop trash par contre x) ).
Edit: 'Fin "adapté", il y a quelques trucs similaires sur certains aspects, qu'on aille pas mal me comprendre x).

Pour ton tileset d'herbe, deux-trois conseil:

1) Je te conseillerais de faire en sorte que tout les brins d'herbe pointent vers le haut (ou haut gauche, à toi de voir) afin qu'on est vraiment l'impression qu'elle montent et les faire travailler ensemble aussi. Aussi essaye de faire en sorte qu'ils n'aillent pas dans 2 directions perpendiculaires (en rouge). Ensuite, essaye d'éviter les angles droit (en orange). Préfère plutôt les exemples en bleu.

2)Tes couleurs sont sympa mais il y a petit problème de travail entre elle. Essais de faire plusieurs essais avant de rajouter une troisième couleur et viens nous les montrer (Comme je l'ai dit, le choix des couleurs est un truc que je fais à l'intuitif, donc je peut pas te donner de "bonne explication" malheureusement, faut tester =p).

2) Une fois que tu aura fait ça, enregistre cette première version et essaye d'utiliser la technique que je te montre avec une couleur plus clair pour ajouter un petit plus^^ (en haut à droite). Mais pas avec la couleur que je t'ai donné (elle est vraiment pas bonne x), trop fluo xD ). Fais plusieurs essais jusqu'à en trouver une bonne, si t'a la motiv =p.

[Vous devez être inscrit et connecté pour voir cette image]

Sinon, pour le côté croix, ça va x). Pour un premier essai, c'est assez cool^^. Et même vraiment bien, en fait =p. On voit vraiment pas facilement, je pense que tu peut laisser ça de côté pour le moment

PS: Si tu pouvais mettre une image moins grand pour le test par contre, ça déforme tout sinon x).