Tutorial - Affichage de Pictures
voici ce que peut donner un assemblage d'images
Logiciel : RPG Maker 2000/2003
Niveau : Aucun
Requis : Rien
Temps : Le temps qu'il vous faudra pour comprendre
Niveau : Aucun
Requis : Rien
Temps : Le temps qu'il vous faudra pour comprendre
L'affichage d'images dans votre jeu se doit d'être maîtrisé pour les menus les utilisant, pour l'affichage d'ombres ou d'éléments sur une map, ou pour une introduction avec l'affichage d'un texte ou pour un système de dialogue customisé. Il est donc important d'apprendre à maîtriser l'affichage d'images et à s'en servir comme il faut.
Tout d'abord, étudions la fenêtre de réglages de l'image :
(1) N° d'Image
Le N° d'image s'applique à toute image que vous affichez, vous devez en assigner un pour chaque image, sachant que le N° 1 est la couche la plus basse, chacun des nombres suivants étant la couche derrière celui qui suit. Pour un élément du décor, tel qu'une ombre, préférez lui donner le nombre 1, puis par exemple 2 pour le brouillard, qui sera sur l'ombre, et 3 pour le menu, qui sera à son tour au dessus du brouillard. Notez que deux images affichées avec le même numéro se remplacent, ce qui est utile pour faire des jauges et autres éléments changeants ou animés.
Entrez le numéro dans le carde ou cliquez sur les flèches pour augmenter et diminuer le nombre existant. Le nombre maximum de numéros est 50, vous ne pourrez donc afficher que cinquante images en même temps.
(2) Fichier de l'image
Vous permet tout simplement de sélectionner le fichier de l'image à afficher dans la liste d'images disponibles dans le dossier "Pictures" de votre projet.
(3) Coordonnées d'affichage spécifiques
Le réglage des coordonnées se fait en pixels par rapport à l'écran, les coordonnées entrées définissant celles du centre de l'image.
Le cadre X concerne le nombre de pixels horizontaux et Y le nombre de pixels verticaux. Les coordonnées de départ (0,0) sont le coin en haut à gauche de l'écran. Les limites horizontales sont 960 et - 640 pixels, les limites verticales 720 et -480 pixels.
Ce réglage permet donc d'afficher une image n'importe-où dans l'écran et dans une large zone en dehors de l'écran. Ceci est utile dans les calculs précis pour afficher une image sur de grandes maps.
(4) Coordonnées d'affichage définies par des variables
Ce réglage spécial permet de régler les coordonnées d'affichage de l'image à partir des nombres contenus dans les variables. Vous devez sélectionner une variable contenant le nombre de pixels horizontaux X et une autre contenant le nombre de pixels verticaux Y.
Ce réglage est très utile lorsque les coordonnées de l'images sont calculées, ou lorsqu'elles sont affectées par un évènement quelconque. Le nombre contenu dans la variable est souvent peu précis et variable (d'ou son nom), il est plutôt conseiller de connaître ce nombre et de l'entrer dans les coordonnées spécifiques si l'utilisation de variables n'est pas obligatoire, cela évitera tout bug d'affichage de l'image.
(5) Défilement de l'image avec la map
Cette option à cocher permet de "coller" l'image à la map, c'est à dire qu'elle ne suit pas le déplacement de l'écran et reste à son emplacement de départ. C'est très utile pour afficher des éléments du décor ou des ombres, mais cette option ne doit pas être cochée pour l'affichage d'images de menu ou de brouillard. A vous de l'utiliser correctement pour afficher vos images. Lorsqu'elle est cochée, l'option est active, et elle est inactive lorsqu'elle est décochée.
(6) Agrandissement
L'agrandissement permet de faire varier la taille de votre image. 100 % est la taille de base de votre image, plus le pourcentage augmente, plus l'image est grande (200 % et l'image sera deux fois plus grande par exemple), et plus le pourcentage diminue, plus l'image rétrécit. Le minimum est 20 % et le maximum 800 %.
Cette option peut être utile pour un rétrécir ou agrandir des images trop grosses ou trop petites. Lorsqu'il est bien utilisé, il peut aussi servir à l'animation des images.
(7) Couleur de transparence
Cette option permet d'utiliser ou non la couleur de transparence de votre image, c'est à dire la couleur qui sera invisible lors de l'affichage (généralement la couleur de fond). Cette couleur aura dûe être choisie lors de l'importation de l'image dans le dossier "Pictures", l'option ne permettant que d'activer ou désactiver cette transparence.
Par exemple, on activera la couleur de transparence pour une ombre ou un élément du menu et du décor, mais on la désactivera pour le brouillard et les effets de lumière.
Transparence
La transparence permet de donner un effet de transparence aux moitiés hautes et basses de l'image à afficher. Plus le pourcentage est élevé, plus l'image est transparente, et plus il est abaissé, plus elle est visible. A 0 %, l'image est normale, à 100 %, l'image est complètement invisible.
Cette option est utile pour régler le taux de transparence de l'image, mais elle peut aussi être utilisée pour l'animation de l'image, telle que l'apparition ou la disparition.
(9) Attributs additionnels
Cette partie permet de régler les modifications concernant l'image, telles que la teinte et les effets additionnels.
(9-1) Teinte/Saturation
La couleur générale et la saturation de l'image peuvent être modifiés à partir de cette option.
Lorsque tous les curseurs se trouvent au milieu (à 100 %), l'image est normale. Lorsque vous les déplacez ou entrez un pourcentage, cela modifie le taux de cette couleur dans l'image. Plus le pourcentage est élevé, et le curseur est déplacé vers la droite, plus la couleur est accentuée. A 0 %, elle disparaît, à 200 %, elle est doublée. Vous pouvez modifier le taux de bleu, de rouge et de vert de l'image, ces couleurs étant les couleurs primaires constituant tout image. Variez les taux pour obtenir telle ou telle autre couleur. Lorsque tous les curseurs sont au maximum (à 200 %), l'image est entièrement blanche, lorsqu'ils sont tous au minimum (à 0 %), l'image est noire, il ne reste plus de couleurs.
La saturation permet de modifier l'intensité des couleurs. Plus le curseur est déplacé vers la droite, plus l'intensité est élevée, et plus il est déplacé vers la gauche, plus l'intensité est faible. Au maximum, les couleurs de l'image sont très saturées et fluo, au minimum, l'image est en noir et blanc.
(9-2) Effet additionnel de Rotation
Cette effet fait tourner l'image sur elle-même, plus ou moins vite selon la vitesse. La vitesse maximum est 9, la vitesse minimum est 1.
L'image tourne toujours dans le sens des aiguilles d'une montre, son point de rotation est son pixel central.
Cette option est utile pour l'animation d'images, il n'est pas possible de bloquer cette rotation afin de pencher l'image seulement.
(9-3) Effet additionnel de Vaque
Cette effet fait onduler l'image, plus ou moins selon l'amplitude. L'amplitude maximum est 9, l'amplitude minimum est 1.
Les vagues ondulent très faiblement à 1, et font de grandes vagues à 9. L'image ondule toujours horizontalement, cet effet est très intéréssant pour les effets "aquatiques" et les animations d'apparition ou de disparition d'images. Un passage de l'amplitude la plus faible à la plus forte donne un effet de "dissolution" de l'image dans l'eau.
Maintenant que vous connaissez toutes les fonctionnalités de l'affichage d'une image, vous pouvez vous en servir pour affficher l'image comme il vous plaît, mais aussi animer cette image, la faire apparaître, dispraître, la faire se déplacer, etc...
Pour ce faire, il existe la fonction "Déplacer un Image" :
Dans cette fenêtre, vous trouverez tous les réglages et options de base d'une image, à l'exception des options de sélection du fichier, de déplacement de l'image avec la carte et d'activation de la couleur de transparence. Elles n'y sont pas car la fenêtre sert à régler les déplacement d'une image existant définie par le numéro d'image. Il ne se passera rien s'il n'existe pas déjà une image qui correspond au numéro sélectionné.
En outre, une nouvelle option est apparue en haut de la fenêtre : le Temps de Transition.
Il permet d'établir en combien de dixièmes de secondes les caractéristiques de l'image à l'affichage se transformeront en ces nouvelles caractéristiques que vous pouvez régler.
Si vous augmentez le taux d'agrandissement de l'image, avec temps de transition d'une seconde (dix dizièmes), vous verrez l'image grossir au taux que vous avez choisi en une seconde.
Il en est de même pour toute option de réglage, ainsi que pour les coordonnées : l'image se déplacera aux nouvelles coordonnées pendant le temps de transition. C'est ce qui permet d'animer une image.
Avec cette technique, on peut créer des effets de brouillard qui bouge, des menus animés, des ombres variantes à la lumière du jours, etc... C'est une méthode couramment utilisée lors des introductions, pour afficher, animer, faire disparaître textes et images, ou pour rendre des surfaces d'eau plus réalistes avec un effet de vagues, faire un girophare par rotation d'un effet de lumière transparent, etc...
TECHNIQUE D'AFFICHAGE D'UNE IMAGE SUR UNE GRANDE MAP
L'affichage de pictures sur une map de la taille de l'écran est simple, mais il est plus compliqué des les afficher à un endroit précis ou sur la totalité d'une grande map. Cette technique nécéssite plusieurs calculs pouvant parfois être très compliqués.
Voici comment procéder pour afficher une image sur toute la map (la taille de l'image doit être égale à la taille, en pixels, de la map) :
Faites tout d'abord le calcul suivant en remplaçant les chiffres encadrés par le nombre de carreaux horizontaux et le nombre de carreaux verticaux que comporte votre map.
Vous pouvez faire le calcul directement dans l'évènement, mais, sachant qu'il est inexact et que vous aurez besoin de modifier les résultats, je vous conseille plutôt d'empoigner votre calculatrice.
Voici une petite explication du déroulement du calcul :
Il faut savoir tout d''abord qu'on veut les coordonnées du pixel central de l'image, et donc du pixel central de la map (puisque l'image et la map font la même taille).
On prend les largeurs horizontale et verticale de la map en carreaux, on les divise par deux pour obtenir le milieu.
On soustrait les coordonnées X et Y du héros, puisque l'affichage se fait par rapport à l'écran et que l'emplacement de l'image ne doit pas varier en fonction de l'emplacement du héros.
On multiplie le tout par seize, puisque chaque carreau fait seize pixels de large. Ensuite, on ajoute 160 pixels horizontalement, pour trouver le milieu de la map, et 128 verticalement pour trouver le milieu vertical de la map. Ces valeurs comblent l'écart entre les coordonnées du héros et du centre de la map.
Il y a une inexactitude qui est due aux coordonnées du héros, il faut donc rajouter ou enlever un ou deux carreaux (soit 16 pixels) aux résultats pour obtenir le centre exact de la map.
Cette technique ne marche pas si elle est calculée sur le bord de la map, alors je vous déconseille de la mettre directement dans vos évènements.
Dans le réglage des coordonnées, n'utilisez pas les variables de résultats comme coordonnées, entrez votre résultat modifié directement en coordonnées spécifiques. De cette manière, que vous soyer n'importe-où dans votre map, l'image s'affichera de la même manière. Il vous suffit de faire le calcul une fois par map, et le tour est joué.
Pour l'affichage de l'image, créez un évènement parallèle invisible n'importe-où dans la map et affichez votre image avec les bonnes coordonnées. Normalement, l'image devrait s'afficher correctement !
Cette technique ne marche bien sûr QUE lorsque l'image est de la même taille que la map. Pour qu'une petite image se répète sur toute la map, il existe une technique beaucoup plus complexe, mais je ne m'en souviens plus exactement...
Si vous voulez avoir plus de facilité dans le calcul des coordonnées, sachez que tout est logique, réfléchissez pourquoi on multiplie ou on soustrait, et tout vous paraîtra plus clair et accessible. Vous pourrez ainsi calculez les coordonnées de vos images de votre propre manière !
Voilà , c'est tout pour ce tutorial, si quelqu'un désire le compléter avec ses méthodes ou le corriger, n'hésitez pas à m'en faire part ! Ce tutorial serait une meilleure aide pour les autres makers s'il était complété avec diverses autres techniques !
Merci de votre écoute, bon vent !
Tout d'abord, étudions la fenêtre de réglages de l'image :
(1) N° d'Image
Le N° d'image s'applique à toute image que vous affichez, vous devez en assigner un pour chaque image, sachant que le N° 1 est la couche la plus basse, chacun des nombres suivants étant la couche derrière celui qui suit. Pour un élément du décor, tel qu'une ombre, préférez lui donner le nombre 1, puis par exemple 2 pour le brouillard, qui sera sur l'ombre, et 3 pour le menu, qui sera à son tour au dessus du brouillard. Notez que deux images affichées avec le même numéro se remplacent, ce qui est utile pour faire des jauges et autres éléments changeants ou animés.
Entrez le numéro dans le carde ou cliquez sur les flèches pour augmenter et diminuer le nombre existant. Le nombre maximum de numéros est 50, vous ne pourrez donc afficher que cinquante images en même temps.
(2) Fichier de l'image
Vous permet tout simplement de sélectionner le fichier de l'image à afficher dans la liste d'images disponibles dans le dossier "Pictures" de votre projet.
(3) Coordonnées d'affichage spécifiques
Le réglage des coordonnées se fait en pixels par rapport à l'écran, les coordonnées entrées définissant celles du centre de l'image.
Le cadre X concerne le nombre de pixels horizontaux et Y le nombre de pixels verticaux. Les coordonnées de départ (0,0) sont le coin en haut à gauche de l'écran. Les limites horizontales sont 960 et - 640 pixels, les limites verticales 720 et -480 pixels.
Ce réglage permet donc d'afficher une image n'importe-où dans l'écran et dans une large zone en dehors de l'écran. Ceci est utile dans les calculs précis pour afficher une image sur de grandes maps.
(4) Coordonnées d'affichage définies par des variables
Ce réglage spécial permet de régler les coordonnées d'affichage de l'image à partir des nombres contenus dans les variables. Vous devez sélectionner une variable contenant le nombre de pixels horizontaux X et une autre contenant le nombre de pixels verticaux Y.
Ce réglage est très utile lorsque les coordonnées de l'images sont calculées, ou lorsqu'elles sont affectées par un évènement quelconque. Le nombre contenu dans la variable est souvent peu précis et variable (d'ou son nom), il est plutôt conseiller de connaître ce nombre et de l'entrer dans les coordonnées spécifiques si l'utilisation de variables n'est pas obligatoire, cela évitera tout bug d'affichage de l'image.
(5) Défilement de l'image avec la map
Cette option à cocher permet de "coller" l'image à la map, c'est à dire qu'elle ne suit pas le déplacement de l'écran et reste à son emplacement de départ. C'est très utile pour afficher des éléments du décor ou des ombres, mais cette option ne doit pas être cochée pour l'affichage d'images de menu ou de brouillard. A vous de l'utiliser correctement pour afficher vos images. Lorsqu'elle est cochée, l'option est active, et elle est inactive lorsqu'elle est décochée.
(6) Agrandissement
L'agrandissement permet de faire varier la taille de votre image. 100 % est la taille de base de votre image, plus le pourcentage augmente, plus l'image est grande (200 % et l'image sera deux fois plus grande par exemple), et plus le pourcentage diminue, plus l'image rétrécit. Le minimum est 20 % et le maximum 800 %.
Cette option peut être utile pour un rétrécir ou agrandir des images trop grosses ou trop petites. Lorsqu'il est bien utilisé, il peut aussi servir à l'animation des images.
(7) Couleur de transparence
Cette option permet d'utiliser ou non la couleur de transparence de votre image, c'est à dire la couleur qui sera invisible lors de l'affichage (généralement la couleur de fond). Cette couleur aura dûe être choisie lors de l'importation de l'image dans le dossier "Pictures", l'option ne permettant que d'activer ou désactiver cette transparence.
Par exemple, on activera la couleur de transparence pour une ombre ou un élément du menu et du décor, mais on la désactivera pour le brouillard et les effets de lumière.
Transparence
La transparence permet de donner un effet de transparence aux moitiés hautes et basses de l'image à afficher. Plus le pourcentage est élevé, plus l'image est transparente, et plus il est abaissé, plus elle est visible. A 0 %, l'image est normale, à 100 %, l'image est complètement invisible.
Cette option est utile pour régler le taux de transparence de l'image, mais elle peut aussi être utilisée pour l'animation de l'image, telle que l'apparition ou la disparition.
(9) Attributs additionnels
Cette partie permet de régler les modifications concernant l'image, telles que la teinte et les effets additionnels.
(9-1) Teinte/Saturation
La couleur générale et la saturation de l'image peuvent être modifiés à partir de cette option.
Lorsque tous les curseurs se trouvent au milieu (à 100 %), l'image est normale. Lorsque vous les déplacez ou entrez un pourcentage, cela modifie le taux de cette couleur dans l'image. Plus le pourcentage est élevé, et le curseur est déplacé vers la droite, plus la couleur est accentuée. A 0 %, elle disparaît, à 200 %, elle est doublée. Vous pouvez modifier le taux de bleu, de rouge et de vert de l'image, ces couleurs étant les couleurs primaires constituant tout image. Variez les taux pour obtenir telle ou telle autre couleur. Lorsque tous les curseurs sont au maximum (à 200 %), l'image est entièrement blanche, lorsqu'ils sont tous au minimum (à 0 %), l'image est noire, il ne reste plus de couleurs.
La saturation permet de modifier l'intensité des couleurs. Plus le curseur est déplacé vers la droite, plus l'intensité est élevée, et plus il est déplacé vers la gauche, plus l'intensité est faible. Au maximum, les couleurs de l'image sont très saturées et fluo, au minimum, l'image est en noir et blanc.
(9-2) Effet additionnel de Rotation
Cette effet fait tourner l'image sur elle-même, plus ou moins vite selon la vitesse. La vitesse maximum est 9, la vitesse minimum est 1.
L'image tourne toujours dans le sens des aiguilles d'une montre, son point de rotation est son pixel central.
Cette option est utile pour l'animation d'images, il n'est pas possible de bloquer cette rotation afin de pencher l'image seulement.
(9-3) Effet additionnel de Vaque
Cette effet fait onduler l'image, plus ou moins selon l'amplitude. L'amplitude maximum est 9, l'amplitude minimum est 1.
Les vagues ondulent très faiblement à 1, et font de grandes vagues à 9. L'image ondule toujours horizontalement, cet effet est très intéréssant pour les effets "aquatiques" et les animations d'apparition ou de disparition d'images. Un passage de l'amplitude la plus faible à la plus forte donne un effet de "dissolution" de l'image dans l'eau.
Maintenant que vous connaissez toutes les fonctionnalités de l'affichage d'une image, vous pouvez vous en servir pour affficher l'image comme il vous plaît, mais aussi animer cette image, la faire apparaître, dispraître, la faire se déplacer, etc...
Pour ce faire, il existe la fonction "Déplacer un Image" :
Dans cette fenêtre, vous trouverez tous les réglages et options de base d'une image, à l'exception des options de sélection du fichier, de déplacement de l'image avec la carte et d'activation de la couleur de transparence. Elles n'y sont pas car la fenêtre sert à régler les déplacement d'une image existant définie par le numéro d'image. Il ne se passera rien s'il n'existe pas déjà une image qui correspond au numéro sélectionné.
En outre, une nouvelle option est apparue en haut de la fenêtre : le Temps de Transition.
Il permet d'établir en combien de dixièmes de secondes les caractéristiques de l'image à l'affichage se transformeront en ces nouvelles caractéristiques que vous pouvez régler.
Si vous augmentez le taux d'agrandissement de l'image, avec temps de transition d'une seconde (dix dizièmes), vous verrez l'image grossir au taux que vous avez choisi en une seconde.
Il en est de même pour toute option de réglage, ainsi que pour les coordonnées : l'image se déplacera aux nouvelles coordonnées pendant le temps de transition. C'est ce qui permet d'animer une image.
Avec cette technique, on peut créer des effets de brouillard qui bouge, des menus animés, des ombres variantes à la lumière du jours, etc... C'est une méthode couramment utilisée lors des introductions, pour afficher, animer, faire disparaître textes et images, ou pour rendre des surfaces d'eau plus réalistes avec un effet de vagues, faire un girophare par rotation d'un effet de lumière transparent, etc...
TECHNIQUE D'AFFICHAGE D'UNE IMAGE SUR UNE GRANDE MAP
L'affichage de pictures sur une map de la taille de l'écran est simple, mais il est plus compliqué des les afficher à un endroit précis ou sur la totalité d'une grande map. Cette technique nécéssite plusieurs calculs pouvant parfois être très compliqués.
Voici comment procéder pour afficher une image sur toute la map (la taille de l'image doit être égale à la taille, en pixels, de la map) :
Faites tout d'abord le calcul suivant en remplaçant les chiffres encadrés par le nombre de carreaux horizontaux et le nombre de carreaux verticaux que comporte votre map.
Vous pouvez faire le calcul directement dans l'évènement, mais, sachant qu'il est inexact et que vous aurez besoin de modifier les résultats, je vous conseille plutôt d'empoigner votre calculatrice.
Voici une petite explication du déroulement du calcul :
Il faut savoir tout d''abord qu'on veut les coordonnées du pixel central de l'image, et donc du pixel central de la map (puisque l'image et la map font la même taille).
On prend les largeurs horizontale et verticale de la map en carreaux, on les divise par deux pour obtenir le milieu.
On soustrait les coordonnées X et Y du héros, puisque l'affichage se fait par rapport à l'écran et que l'emplacement de l'image ne doit pas varier en fonction de l'emplacement du héros.
On multiplie le tout par seize, puisque chaque carreau fait seize pixels de large. Ensuite, on ajoute 160 pixels horizontalement, pour trouver le milieu de la map, et 128 verticalement pour trouver le milieu vertical de la map. Ces valeurs comblent l'écart entre les coordonnées du héros et du centre de la map.
Il y a une inexactitude qui est due aux coordonnées du héros, il faut donc rajouter ou enlever un ou deux carreaux (soit 16 pixels) aux résultats pour obtenir le centre exact de la map.
Cette technique ne marche pas si elle est calculée sur le bord de la map, alors je vous déconseille de la mettre directement dans vos évènements.
Dans le réglage des coordonnées, n'utilisez pas les variables de résultats comme coordonnées, entrez votre résultat modifié directement en coordonnées spécifiques. De cette manière, que vous soyer n'importe-où dans votre map, l'image s'affichera de la même manière. Il vous suffit de faire le calcul une fois par map, et le tour est joué.
Pour l'affichage de l'image, créez un évènement parallèle invisible n'importe-où dans la map et affichez votre image avec les bonnes coordonnées. Normalement, l'image devrait s'afficher correctement !
Cette technique ne marche bien sûr QUE lorsque l'image est de la même taille que la map. Pour qu'une petite image se répète sur toute la map, il existe une technique beaucoup plus complexe, mais je ne m'en souviens plus exactement...
Si vous voulez avoir plus de facilité dans le calcul des coordonnées, sachez que tout est logique, réfléchissez pourquoi on multiplie ou on soustrait, et tout vous paraîtra plus clair et accessible. Vous pourrez ainsi calculez les coordonnées de vos images de votre propre manière !
Voilà , c'est tout pour ce tutorial, si quelqu'un désire le compléter avec ses méthodes ou le corriger, n'hésitez pas à m'en faire part ! Ce tutorial serait une meilleure aide pour les autres makers s'il était complété avec diverses autres techniques !
Merci de votre écoute, bon vent !