Pokémon Script Project Index du Forum

S’enregistrer | Rechercher | Connexion
 Information des admins 
Si vous désirez parler de PSP ou obtenir du soutient là dessus, merci d'aller faire un tour sur https://pokemonworkshop.com/forum/index.php Imbécile heureux

[Tutoriel]Une WorldMap dans le style BW
Aller à la page: 1, 2, 3, 4  >
 
Poster un nouveau sujet   Répondre au sujet    Pokémon Script Project Index du Forum -> Game Making -> Ressources techniques -> Tutoriels
Sujet précédent :: Sujet suivant   
Auteur Message
EonNeo
Membre


Inscrit le: 08 Aoû 2012
Messages: 254

MessagePosté le: Mar 28 Aoû - 01:58 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Salut à tous!

A l'arrivée de la cinquième génération de Pokémon, nous avons tous pu observer une WorldMap d'un style différent de ce que nous connaissions auparavant.
De nombreuses personnes tentent de recopier ce style, avec parfois des réussite, parfois des catastrophes, ou alors des abandons de l'idée.

Le tutoriel que je vous propose vous permettra de réaliser une WorldMap dans le style BW donc, et sera détaillé du mieux que possible afin qu'il soit accessible à tous, que vous ayez ou non déjà utilisé Paint ou d'autre logiciel capable de réaliser du pixel art.
La technique utilisée est la mienne, libre à vous de la modifier si certaines choses vous paraissent plus évidentes ainsi.

Ce tutoriel est de difficulté moyenne. Le temps nécessaire peu varier entre 6 et 10 heures de travail.


Partie 0: Matériel nécessaire:

Avant de vous lancer, il vous faut déjà préparer une ébauche de votre WorldMap (îles, essentiellement continentale, etc...), le mieux étant d'avoir une idée précise (forme des contours, vous pouvez vous aider de lieux déjà existants, dans cet exemple ma WorldMap est basée sur Washington). Il est préférable, dans le cas ou votre idée est claire, de faire un schéma représentant le relief ainsi que la disposition des villes.

Enfin, pour ce tutoriel, vous aurez besoin du matériel suivant:
-Un ordinateur équipé du logiciel Paint
-Les différents fichiers que je vous fournis ci-dessous:


Tiles:

Forêt:

Plage:

Désert:

Carte d'Unys:




Partie 1: L'architecture de base:

Pour commencer, ouvrez Paint, ou tout autre logiciel de retouche (Gimp, Photoshop ou Paint.net feront également l'affaire, mais ce tutoriel est "optimisé" pour Paint).
Ouvrez un nouveau fichier, et dimensionnez le en 256x168.
Ensuite, tracez en bleu les mers et océans de votre WorldMap. Vous obtenez un résultat comme celui-ci:



Faites ensuite Sélectionner > Sélectionner tout et copiez votre image. Ouvrez sous Paint le fichier "Forêts.png" fourni dans la partie 0. Vérifiez que la seconde couleur de votre pinceau est bien la couleur blanche, puis faites Sélectionner > Sélection transparente. Pour finir, coller l'image précédemment copiée. Votre WorldMap est désormais boisée!



Nous allons maintenant nous occuper des plages. Munissez-vous de la couleur blanche, et blanchissez les côtes où vous souhaitez voir apparaître vos plages.
Personnellement, j'ai souhaité en faire sur un coté de ma rivière, et sur la partie sud de la grande île.
Vous obtenez une image similaire à celle-ci:



Maintenant, nous allons répéter les étapes qui nous ont permis d'obtenir nos forêts. Commencez par copier votre image, puis ouvrez "Plages.png". A nouveau, vérifiez que la couleur blanche est bien sélectionnée comme deuxième couleur, et n'oubliez pas de faire Sélectionner > Sélection transparente avant de coller.
Vous devriez désormais avoir de belles plages.



Pour clore cette partie, nous allons ajouter un désert à notre WorldMap. Encore une fois, blanchissez la zone ou vous souhaitez faire votre désert.
J'ai décidé d'en réaliser un dans la partie nord ouest de ma carte. Bien sûr, la taille dépend de vous.
Vous devriez avoir une image proche de la mienne:



Copiez votre image, puis ouvrez "Déserts.png". Si vous avez suivi correctement jusque là, vous devriez savoir ce qu'il vous reste à faire!
Vous vous retrouvez donc à faire une WorldMap ressemblant à celle-ci:



Cette partie est terminée, je vous laisse souffler un peu et on se retrouve dans un instant pour la partie suivante!



Partie 2: Montagnes, civilisation, mers et finalisation:

J'espère que vous avez suffisamment profité de votre pause, car c'est dans cette partie que ça va se corser!
Avant toute chose, faites une sauvegarde de votre map actuelle.
Nous allons commencer par placer des montagnes. A l'aide du fichier "Tiles.png", sélectionnez des montagnes, et assemblez les de façons a obtenir un beau résultat. Placez les sur votre WorldMap.
Vous pouvez aussi ajouter des villes. Pour cela, ouvrez sous Paint la carte d'Unys. Plusieurs options s'offrent à vous: reprendre intégralement Volucité et la caser sur votre WorldMap, prendre des quartiers de Volucité et tenter d'obtenir un résultat concluant, ou refaire vous-même une ville. J'ai opté pour la seconde option. Mon résultat est le suivant:



Comme vous pouvez le voir, j'ai rajouté une tile perso de cratère. En effet, ce dernier prenant un part importante dans mon projet, il était nécessaire de le faire apparaître sur ma WorldMap. Vous êtes vous aussi dans la liberté de rajouter des tiles réalisées par vous même.

Nous obtenons donc quelque chose qui ressemble de plus à une vraie WorldMap. Mais comme vous pouvez le voir, les séparations entre le désert et la forêt, ou entre la ville et la forêt (et le cratère dans mon cas) ne font pas très naturelles. C'est le moment de sortir la palette des plaines! Vous pourrez la trouver dans le fichier "Tiles.png".
Je vous recommande aussi d'améliorer la transition entre le "sol" et la montagne. Après quelques heures de combat acharné, vous devriez obtenir quelque chose comme ça:



Je détaillerai plus cette étape dans une partie annexe. Comme vous le voyez, le résultat est plus joli en rajoutant un petite plaine au niveau des villes, et entre la forêt et le désert. J'ai aussi rajouté un peu de lave au sommet d'une montagne afin d'en faire un volcan. Vous pouvez de même modifier les montagnes pour en faire, par exemple, des glaciers.

Notre WorldMap est presque terminée! Prenez maintenant la palette des mers et océans.
Commencez par remplir votre carte avec des couleurs distinctes (Non profond, moyennement profond et très profond), puis rajoutez une à une les couleurs intermédiaires.
Pour finir, prenez la palette des côtes. Les couleurs claires correspondent aux côtes exposées au Soleil, et les foncées à celles qui ne le sont pas. La hauteur maximale d'une côte est de trois pixel, et la minimale de un. Bien sûr, ne mettez pas de côte au niveau des plages! Une annexe portant sur les côtes sera réalisée.
Vous devriez obtenir, avec un peu de patience, à ceci:



Cette partie est terminée, mais rassurez-vous, la suivante sera moins difficile!



Partie 3: Villes, donjons et routes:

Vous êtes prêts à attaquer cette dernière partie? Oui? Alors c'est parti!
Commencez par faire une sauvegarde de votre map.
Ensuite, vous allez devoir la découper en carrés de 8x8px. Pourquoi? Pour être sûr de placer correctement nos villes, pour que la map rende bien dans PSP.
Vous pouvez d'abord découper à la verticale, puis à l'horizontale, mais prenez garde à bien respecter les dimensions des carrés!
Vous obtiendrez ceci:



Maintenant, prenez les tiles prédécoupées de villes et de donjons du fichier "Tiles.png", et collez les de la façon suivante:



Maintenant, vous pouvez recoller les carrés pour reformer votre map. Il ne vous reste qu'à relier les villes entre elles! Si vous souhaiter faire des ponts, vous pouvez prendre modèle sur ceux de votre carte d'Unys. N'oubliez surtout pas les ombres sous les routes! Le traçage des routes fera l'objet d'une annexe là aussi.

Vous avez désormais une belle WorldMap, digne de celle de Pokémon Black & White! Alors, c'était si dur que ça?

N'hésitez pas à poster vos résultats en réponse à ce topic! Vous pouvez bien sur me demander de l'aide si besoin!
J'espère que ça vous a plu (par contre, ma map est non libre XD) !




Annexe 1: Mer et côtes:

Je vous l'avais promise, alors la voici, la première annexe!
Comme son titre l'explique, nous allons apprendre à remplir la mer de votre WorldMap, et à lui rajouter des côtes.
Pour commencer, ouvrez votre WorldMap. J'ai un peu changé, je prendrais cette carte comme base pour cette annexe:



Nous allons commencer par faire la mer. Prenez pour commencer les tiles de mer, inclus dans le fichier "Tiles.png".
Ensuite, Vous allez couper à la hache votre semblant de mer en trois parties: une en utilisant la couleur la plus claire, une en utilisant la couleur moyenne, et la dernière en utilisant la plus foncée (Astuce: faites des marques au-dessus des couleurs utilisées pour vous en souvenir). Vous obtiendrez quelque chose de semblable à ceci:



C'est moche, c'est le moins qu'on puisse dire. Mais patience, nous allons améliorer tout ça. Prenez les couleurs intermédiaires à celles déjà utilisées, et rajoutez les à votre mer.
Le résultat devrez être similaire à ça:



Maintenant, vous n'avez plus qu'à répéter l'opération jusqu'à avoir utilisé toutes les couleurs de la palette. Si certaines couleurs ne vous conviennent pas, vous pouvez les personnaliser. Surtout, ne faites pas des contours bien droits suivant les lignes du continent: l'océan n'est pas dénué de relief, ainsi n'hésitez pas à faire des avancées d'eau profonde, etc...
Vous devriez, après un peu d'efforts (il en faut bien), avoir un résultat tel que celui-ci:



Voilà qui ressemble enfin à quelque chose! Nous allons donc pouvoir nous attaquer aux côtes à présent.
Munissez-vous de la palette de couleur des côtes (vous savez où la trouver).
Pour commencer, je vous conseille de tracer d'abord les bases de vos côtes.

Mais avant, j'aimerai vous expliquer les règles à suivre:
-Ne mettez jamais de côtes au niveau des plages, le jour où vous verrez une plage au dessus d'un côte, appelez-moi.
-De même, évitez les côtes au niveau des déserts. Là par contre, ce n'est pas une obligation puisqu'un désert peut être en hauteur.
-Les pixels des côtes se placent toujours au Sud des pixels du continent! Ceci est très important si vous voulez que l'effet de perspective soit réussi! (exemple:
).
-Les côtes font un maximum de 3 pixels de haut.

En suivant mes conseils, vous arriverez à un résultat proche du mien:



Maintenant, il faut donner du détail à ces côtes! Pour faire plus réaliste, il faut que les côtes exposées au Soleil (qui se trouve sur la droite de votre WorldMap normalement) soient plus claires que les autres.
Pour cela, utilisez les trois premières couleurs pour détailler les côtes exposées, et les quatres dernières pour les côtes non exposées (Astuce: pour ces dernières, il est tout de même possible de glisser deux ou trois pixels clairs pour éclaircir).
Vous devriez obtenir quelque chose comme ceci:



J'espère que cette annexe vous aura été utile!

PS: je vous ai trouvé une map que j'ai trouvée bien réalisée, surtout au niveau des côtes si ça peut vous aider:
C'est ici que ça se passe!



Annexe 2: Villes et Routes:

Dans cette seconde annexe, vous allez apprendre à placer les villes et tracer les routes en détail.
En effet, beaucoup de personnes semblent avoir du mal avec cette étape, qui est pourtant peu difficile.

Pour commencer, ressortez votre WorldMap, et découpez la en carreaux de 8x8. Vous obtiendrai un résultat similaire à celui-ci (j'ai pris une nouvelle carte pour cette annexe):



Maintenant, il vous faut placer vos villes. Pour cela, prenez la tile correspondante et prédécoupée dans le fichier fourni dans la partie 0.
Déposez vos villes en prenant garde à avoir activé la transparence. Essayez de répartir assez équitablement vos villes, sauf une disposition spécifique est voulue (ce qui est le cas dans ma map: le Nord-Ouest sera rempli uniquement lorsqu'il sera visité dans le jeu, pour des raisons scénaristiques).
Vous devriez avoir un résultat ressemblant à ceci:



Maintenant, il va falloir relier les villes avec des routes. Pour cela, prenez la couleur claire des villes et tracez vos routes de deux pixels d'épaisseur.
Pour ce qui est des routes en diagonale, il vous faudra vous munir de la seconde couleur claire des villes.
Puisque des images seront plus parlantes que des mots (très bon sujet de philo au passage), je vous poste quelques exemples pour vous aider dans votre tâche:

Commencez par tracer le "corps" des routes:



Pour compléter les pentes, procédez comme ci-dessous:



Si vous voulez ajouter un pont, il vous suffit de réaliser cette figure:



Enfin, pour une route ne menant à aucune ville, faites comme ceci:





Avec un peu de maîtrise, vous pourrez réaliser différentes pentes pour vos routes.
Il faut ensuite ajouter un ombrage sous vos routes. Cet ombrage doit être réalisé avec la couleur sombre située sous les villes fournies dans les ressources.
Il doit faire deux pixels de hauteur et doit être situé sur le dessous des routes. Voici quelques exemples:



Pour ce qui est de l'ombre des ponts, je vous renvois à l'image du pont détaillé postée juste au dessus.
Maintenant, vous avez donc une WorldMap ressemblant à ceci:



Maintenant, il vous faut rajouter les lieux de votre carte, à savoir les tours, forêts, grottes, etc...
Cette étape peut être réalisée avant les routes, mais personnellement je préfère la faire après: le cas inverse rend la disposition des routes dépendante de l'emplacement des lieux.
Au passage, pensez à prendre les pixels noirs de la dernière ligne sur la tile des lieux et à la décaler vers le bas: cela vous permettra de mieux centrer ces lieux, à la manière des villes.
Vous pouvez au passage rajouter quelques routes pour éviter les vides trop grands sur votre map (sauf, comme déjà dit, si cela est volontaire).
Vous obtiendrez quelque chose proche de ceci:



Il ne vous reste qu'à rassembler les différents carreaux.
Votre WorldMap est désormais terminée!






Crédits:

The_godlings_rapture (DeviantArt)
Les membres suivants remercient EonNeo pour ce message :
Psykomatik (28/08/12), Solfay (30/08/12)


Dernière édition par EonNeo le Lun 3 Déc - 23:25 (2012); édité 5 fois
Revenir en haut
Publicité






MessagePosté le: Mar 28 Aoû - 01:58 (2012)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Akito アート
Membre


Inscrit le: 21 Sep 2011
Messages: 773
Démon
Localisation: Néan
Masculin

MessagePosté le: Mar 28 Aoû - 07:30 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Méchant, je voulais faire le tuto mais j'avais pas eu le temps !
Je rigole mais tu n'as pas mis les crédits des ressources si j'ai bien vu et tu as juste traduit un tutoriel de DeviantArt non ?
Revenir en haut
EonNeo
Membre


Inscrit le: 08 Aoû 2012
Messages: 254

MessagePosté le: Mar 28 Aoû - 09:26 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Oui, j'avais oublié le crédit (je viens de le rajouter).
Après c'est plus une reformulation qu'une traduction du tutoriel de The_godlings_rapture (avec son autorisation bien entendu) mais pour ce qui est des annexes, ce sera un peu plus personnel (mais si certains passages l'étaient déjà un peu).
Revenir en haut
Akito アート
Membre


Inscrit le: 21 Sep 2011
Messages: 773
Démon
Localisation: Néan
Masculin

MessagePosté le: Mar 28 Aoû - 10:07 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Je me suis servi de ce tuto (en anglais, raison pour laquelle j'avais pris 6H à faire ma WorldMap).
Merci de l'avoir traduit en partie et de l'avoir fais en Français.
Revenir en haut
erwin
Membre


Inscrit le: 28 Jan 2012
Messages: 144
Chasseur solitaire
Localisation: Les iles célestes

MessagePosté le: Mar 28 Aoû - 13:33 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

c'est super ce tuto, j'ai fini ma map en moins de 3 heures !
Revenir en haut
Facebook
Eternalis
Membre


Inscrit le: 25 Avr 2012
Messages: 81
Masculin

MessagePosté le: Jeu 30 Aoû - 18:11 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

J'add a la liste des tutos.
Revenir en haut
EonNeo
Membre


Inscrit le: 08 Aoû 2012
Messages: 254

MessagePosté le: Lun 3 Sep - 23:01 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Ok, merci!

Je ferai la suite après la rentrée par contre.

Edit:
Annexe 1 sur les mers et les côtes disponibles!

Et comme je l'ai dit précédemment, n'hésitez pas à poster vos créations!
Revenir en haut
Overheat45
Membre


Inscrit le: 23 Jan 2012
Messages: 325
Localisation: Réunion
ID Steam: 00

MessagePosté le: Mer 26 Sep - 13:46 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Merci EonNeo! Grâce à toi j'ai pu faire une world map dont je suis vraiment fière!


Si il y a des erreurs, dites le moi svp.
elle est non libre.


yügö:


Revenir en haut
Visiter le site web du posteur Skype Yahoo Messenger ICQ AIM GTalk/Jabber
Laito'
Membre


Inscrit le: 03 Fév 2012
Messages: 2 168
O NN PA LE KOUTO
Localisation: Béziers
Masculin
ID Steam: laitonite
Nintendo Network: laitonite_laito

MessagePosté le: Mer 26 Sep - 14:47 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Pas mal dans l'ensemble, juste l'eau qui est vachement moche à voir.
Revenir en haut
Visiter le site web du posteur Skype Facebook Twitter
EonNeo
Membre


Inscrit le: 08 Aoû 2012
Messages: 254

MessagePosté le: Mer 26 Sep - 17:05 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Pas mal, mais tu as oublié de faire l'eau et les côtes (il y a une partie annexe pour t'aider là-dessus).
Il faudrait aussi que tu rajoutes une ombre sous les routes et les ponts, pour l'instant aide-toi de mon exemple, je n'ai pas encore fait la partie sur les routes.
Il te faudra aussi travailler les transitions, surtout celle désert-forêt.
Revenir en haut
Overheat45
Membre


Inscrit le: 23 Jan 2012
Messages: 325
Localisation: Réunion
ID Steam: 00

MessagePosté le: Jeu 27 Sep - 16:33 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

D'accord. Voila j'ai fini l'eau mais les détails des côtes c'est trop dure. Je ne sait même pas comment placer les couleurs.


Yügö:


Revenir en haut
Visiter le site web du posteur Skype Yahoo Messenger ICQ AIM GTalk/Jabber
EonNeo
Membre


Inscrit le: 08 Aoû 2012
Messages: 254

MessagePosté le: Jeu 27 Sep - 19:32 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

L'eau est déjà beaucoup mieux!

Je me suis permis de modifier ta WorldMap pour y faire les côtes, j'espère que ça te plaira:

Revenir en haut
Overheat45
Membre


Inscrit le: 23 Jan 2012
Messages: 325
Localisation: Réunion
ID Steam: 00

MessagePosté le: Ven 28 Sep - 15:12 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Merci beaucoup de l'avoir fait à ma place. J'aurais souffert sinon...
Si tu veut je peux te mettre dans les crédits?
En tout cas. Merci beaucoup.
J'adores ton tuto...
Revenir en haut
Visiter le site web du posteur Skype Yahoo Messenger ICQ AIM GTalk/Jabber
EonNeo
Membre


Inscrit le: 08 Aoû 2012
Messages: 254

MessagePosté le: Ven 28 Sep - 19:03 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

C'est toi qui as fait la map, et les ressources ne sont pas de moi, donc pas besoin de crédits.
Revenir en haut
Overheat45
Membre


Inscrit le: 23 Jan 2012
Messages: 325
Localisation: Réunion
ID Steam: 00

MessagePosté le: Sam 29 Sep - 08:27 (2012)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

OK.
C'est pas grave.
Revenir en haut
Visiter le site web du posteur Skype Yahoo Messenger ICQ AIM GTalk/Jabber
Contenu Sponsorisé






MessagePosté le: Aujourd’hui à 16:57 (2017)    Sujet du message: [Tutoriel]Une WorldMap dans le style BW

Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet    Pokémon Script Project Index du Forum -> Game Making -> Ressources techniques -> Tutoriels Toutes les heures sont au format GMT + 1 Heure
Aller à la page: 1, 2, 3, 4  >
Page 1 sur 4

 
Sauter vers:  

Index | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Powered by phpBB © 2001, 2005 phpBB Group
Thème par Thomas et l'équipe de la refonte PSP 2012 (version 1.0)
Traduction par : phpBB-fr.com