| Apprentissage du CadrIF - page 2 |
II - Le graphisme
Introduction
La partie graphisme de ce langage est essentiel. C'est un long mais simple chapitre à ne pas rater car il dévoile un outil très important pour le déplacement d'un personnage.
1. Matériel requis
Avant toute chose, il est mieux de dire le matériel qu'il faudra pour ce chapitre, bien sûr...
- Photofiltre 7, et non photoshop, gimp ou autre... Ne téléchargez surtout pas la version gratuite de Photofiltre Studio X qui ne marche plus au bout de 30 jours ( vous n'aurez pas le temps de finir votre jeu en 30 jours
 ). Non, prenez la version entière, gratuite et légale de Photofiltre 7 téléchargeable ici: Lien
- Votre outil de dessin pour créer vos maps et vos persos.
- Et une connexion internet
Maintenant que vous avez tout ce qu'il vous faut, on va se lancer dans le vif du sujet.
2. Les objets
Les objets sont les surnoms donnés lors de ce tuto à votre map, à vos personnages... Enfin tout ce qui n'est pas outil de création. N'hésitez pas à créer un dossier à part pour les recueillir, car il y aura au moins une centaine d'image à la fin.
Donc, dès que vous avez crée votre map de jeu vue de dessus (bien sûr sans le personnage pour le début), placez la sur photofiltre est surtout retenez bien sa taille.
Petit cours à part pour ceux qui ne savent pas où se trouve et ce qu'est la taille d'une image sur Photofiltre. En faisant un clique droit sur votre image et ensuite en cliquant sur "Taille de l'image..." vous devez avoir cette fenêtre qui s'affiche: Lien.
La taille de l'image est égale à ce qui est souligné sur l'exemple que je viens de vous donner. Pour la retenir plus facilement, retenez la formule largeurxhauteur c'est à dire sur mon exemple 404x398. Voilà, c'était tout simple.
Maintenant, suspendez la fenêtre de la map que vous avez crée en cliquant sur le bouton - pas loin de la croix pour fermer. On va laisser reposer notre map le temps de créer notre personnage.
Notre personnage on va le surnommer OM (désolé pour les fans du PSG...) qui veut dire "Objet Mobile". Et surtout, pendant que vous le créez mettez le sur un fond transparent et retenez sa taille il faudra qu'elle reste la même tout le long de la création.
Donc lui aussi il faudra le faire reposer en bas de votre écran pour créer notre outil de création essentiel: LE QUADRILLAGE.
3. Le quadrillage
Le quadrillage servira à vous repérer dans les déplacements du personnage. Dans un langage mathématique, nous allons parler d'abscisses et d'ordonnées, mais simplifiées vu qu'il y aura des points de rencontre déjà entrés.
Commençons d'abord par créer ce quadrillage, dans une nouvelle image de la même taille que votre map que vous sauvegardez et que vous garderez à part sous le nom de QG. Ne faites surtout pas le quadrillage directement sur votre map sinon vous ne pourrez plus le retirer.
Bref, pour créer un quadrillage dans photofiltre il faut aller sur:
Filtre > Divers > Quadrillage
Vous arrivez alors sur cette fenêtre: Lien
L'élément important de cette fenêtre est celui que j'ai souligné en rouge (c'est à dire la taille des cellules). La taille des cellules doit être parfaitement ajustée pour avoir un jeu symétrique, ce qui n'est pas obligé mais plus agréable à regarder. Donc cette taille varie en fonction de la taille de votre personnage (si vous vous en souvenez), si le personnage fait 25x25 la taille des cellules fera alors 25 pixels.
Mais si la hauteur de mon personnage n'est pas égal à sa largeur, comment faire ?
Encore quelque chose de tout simple, il faudra mettre le plus grand nombre des deux comme taille de cellules.
Exemple: si mon image fait 600x750 , je vais prendre 750, si elle fait 12x10 je vais prendre 12.
Lien
Voilà à peu prés ce que ça donne! (ne vous inquiétez pas si vos carreaux sont différents, j'ai mis des cellules de 50 pixels alors ça doit être plus gros ou plus petit que vous).
Maintenant, repassez en rouge le côté gauche du dessin. Cette nouvelle droite s'appelle "ordonnée" mais nous la surnommerons "y". Et maintenant faites de même avec le côté bas du dessin. Cette autre droite s'appelle "abscisse" mais nous la surnommerons "x". Voilà alors ce que vous avez:
Lien
Nous avons presque terminé notre quadrillage! Mais un quadrillage sans nom ne sert à rien: et oui, il faudra donner un nom à chaque droite, et pour cela, pas le choix, il faut lui accorder un chiffre (sinon ce ne sera pas cohérent avec les variables de webidev  ). Et la technique la plus utilisée et la plus simple c'est de numéroter chaque ligne de 0 jusqu'au numéro de la dernière. Pour "y", il faudra numéroter de bas en haut en commençant par 0. Pour "x", il faudra numéroter de gauche à droite en commençant aussi par 0.
Mais, pour faire plus simple nous n'allons nommer que les 0, les 1 et vos dernières droites. Voilà comment faire:
Lien
Et pour terminer, il faudra rendre l’intérieur des carreaux transparents pour voir notre map à travers. Pour cela, il faudra consacrer 5 voir 10 minutes de votre vie à cliquer sur la baguette magique dans le menu de droite, de sélectionner l’intérieur de chaque carreaux un par un et ensuite d'aller sur:
Image > Transparence automatique > Région intérieur à la sélection.
Et vous devez refaire ça pour chaque carreaux à moins de trouver un autre moyen de rendre transparent vos carreaux. Sur photofiltre, il y en a un, mais il ne marche pas comme il faut avec ce quadrillage, alors...
Maintenant que tout est transparent, vous n'avez plus qu'à copier avec la fusion votre quadrillage, à le coller dans le vide en tant qu'image. Passons maintenant au chapitre le plus court à lire mais le plus long à réaliser. Préparez vos dolipranes, nous arrivons en mathématiques !
|
