Differences

This shows you the differences between the selected revision and the current
version of the page.


fr:wmebook:ch1_2 2010/02/16 18:09 fr:wmebook:ch1_2 2010/02/22 17:34 current
Line 1: Line 1:
-====== 1.2. L'éditeur de sprite ======+====== 1.2. L'éditeur de sprites ======
Qu'est ce qu'un sprite ? Qu'est ce qu'un sprite ?
Line 5: Line 5:
Un sprite (en français lutin) est dans le jeu vidéo un élément graphique qui peut se déplacer sur l'écran. En principe, un sprite est en partie transparent, et il peut être animé (c’est-à-dire qu'il est formé de plusieurs images qui s'affichent les unes après les autres). Le fond de l'écran constitue généralement le décor et les sprites sont les personnages et les objets qui se superposent au fond d'écran et qui se déplacent. Le moteur Wintermute ne supporte pas les images animées du type gif, flc ou autres, il utilise son propre format. Ces fichiers sont appelés **Sprites**. Un sprite (en français lutin) est dans le jeu vidéo un élément graphique qui peut se déplacer sur l'écran. En principe, un sprite est en partie transparent, et il peut être animé (c’est-à-dire qu'il est formé de plusieurs images qui s'affichent les unes après les autres). Le fond de l'écran constitue généralement le décor et les sprites sont les personnages et les objets qui se superposent au fond d'écran et qui se déplacent. Le moteur Wintermute ne supporte pas les images animées du type gif, flc ou autres, il utilise son propre format. Ces fichiers sont appelés **Sprites**.
-Dans le gestionnaire de projet, allez dans "data -> scenes -> street -> sprites". Faites un clic droit sur le répertoire, et appuyez sur "Add sprite...". La fenêtre suivante apparait :+Dans le gestionnaire de projets, allez dans "data -> scenes -> street -> sprites". Faites un clic droit sur le répertoire, et appuyez sur "Add sprite...". La fenêtre suivante apparait :
{{wmebook:sp0.jpg|}} {{wmebook:sp0.jpg|}}
Line 17: Line 17:
Appuyez sur la petite feuille blanche, pour ajouter une image. Nous allons utiliser des images qui se situe dans le répertoire "data -> scenes -> street -> sprites -> sign", ouvrez l'image "sign00.bmp". Appuyez sur la petite feuille blanche, pour ajouter une image. Nous allons utiliser des images qui se situe dans le répertoire "data -> scenes -> street -> sprites -> sign", ouvrez l'image "sign00.bmp".
-A propos, j'aimerais vous parler des formats d'images disponibles, car ils ont chacun leurs spécificités, et que c'est important de connaître leurs différences. Pour ma part, j'utilise essentiellement les formats png et jpg. Le format png, supporte la transparence, prend peu de place, tout en proposant une qualité d'image optimale. Je l'utilise pour tout mes sprites, et pour les éléments se situant dans les premiers plans. Le format jpg, quant à lui, prend très peu de place, mais a le défaut de dégrader la qualité de l'image. Le format que j'éviterais, par contre, est le format bmp, il prend beaucoup de place, n'apporte rien de particulier, et ne supporte pas la transparence. En sachant cela, c'est à vous de faire la part des choses : Est ce que mon jeu sera une oeuvre d'art graphique prenant la place de deux DVD, ou sera t-il un jeu téléchargeable ?+A propos, j'aimerais vous parler des formats d'images disponibles, car ils ont chacun leurs spécificités, et que c'est important de connaître leurs différences. Pour ma part, j'utilise essentiellement les formats png et jpg. Le format png, supporte la transparence, prend peu de place, tout en proposant une qualité d'image optimale. Je l'utilise pour tout mes sprites, et pour les éléments se situant dans les premiers plans. Le format jpg, quant à lui, prend très peu de place, mais a le défaut de dégrader la qualité de l'image. Le format que j'éviterais, par contre, est le format bmp, il prend beaucoup de place, n'apporte rien de particulier, et ne supporte pas la transparence. En sachant cela, c'est à vous de faire la part des choses : Est ce que mon jeu sera une oeuvre d'art graphique prenant la place de deux DVD, ou sera t-il un jeu téléchargeable ? Il va falloir que vous jaugiez, certains éléments de votre jeu nécessiteront plus de détails que d'autres.
-Revenons à nos sprites. Vous pouvez voir qu'une nouvelle partie est apparue.+Revenons à nos sprites. Vous pouvez voir qu'une nouvelle partie est apparue en bas à gauche.
{{wmebook:sp3.jpg|}} {{wmebook:sp3.jpg|}}
 +
 +Les petites pages blanches, comme celles qui se trouvent à droite du paramètre **Delay**, servent à étendre la valeur que aurez entré, à toutes les images du sprite. Par exemple, si vous avez une animation composé de 10 images, et que vous voulez que chaque image soit affichée 60 millisecondes, vous entrez juste 60 dans le champ de texte, et appuyez sur ce bouton.
 +
 +Voyons à présent, plus en détail, à quoi servent chaques propriétés.
 +
 +**Delay** c'est le temps en milliseconde, durant lequel l'image sera affichée.
 +
 +**Move by** c'est le nombre de pixels que le sprite parcourra, la premier champ correspond à l'abcisse, et le second à l'ordonnée. Personellement, je préfére gérer le mouvement des sprites dans les scripts, car c'est beaucoup plus flexible.
 +
 +**Sound** c'est le fichier audio, qui sera joué lorsque cette image apparaîtra.
 +
 +**Event** est une fonctionnalité intéressante. L'image, lorsqu'elle apparaît peut déclencher, ce que l'on appelle un événement, ce qui ve dire qu'elle enverra un message à un script, pour notifier qu'elle est apparue. Mais, nous verrons cela après.
 +
 +**Keyframe** n'est plus utilisé.
 +
 +**Kill sounds** ça veut dire que cette image arrêtera, tout les sons du sprite, ayant été enclenché.
 +
 +**3D only / 2D only** vous permet de n'afficher cette image que quand le jeu est en mode accéléré(avec carte graphique), ou non accéléré(sans carte graphique). Ainsi, vous pouvez optimiser l'affichage de vos sprites. Par exemple, vous pourriez avoir l'image d'une ombre, qui est à moitié transparente. Mais, le rendu serait mauvais sur un système non-accéléré, ainsi en cochant l'option **3D only**, vous éviterez ce problème.
 +
 +**Image** est l'image qui sera affichée.
 +
 +**Hot spot** est un point important de l'image. C'est la partie active de l'image, par exemple si le pointeur de souris de votre jeu est un sprite, ce point est celui qui pointe réellement sur l'écran. Par défaut, ce point se situe au point (0,0) de l'image (le premier pixel), il n'est pas toujours nécessaire de le modifier, mais, parfois ce le sera. Si votre curseur était par exemple une croix, ce point devrait se situer au milieu de la croix, et non dans le coin en haut à gauche. Sur votre écran à droite, là où se trouve l'aperçu de l'image, il y a une croix rouge, c'est le "Hot spot". Si vous bougez l'image, vous verrez que les valeurs du "Hot spot" changent. Maintenant, essayez de placer le "Hot spot" au centre de l'image. Vous pouvez aussi directement entrer les valeurs dans les champs de textes. Ensuite, appuyez sur les petites pages blanches à droite, pour étendre ces valeurs à toutes les autres images de votre sprite, constatez que c'est pratique ;-).
 +
 +**Transparent** de nos jours, avec le format d'image png, cette fonction est devenu obsolète. Cette fonction avait pour but de gérer la transparence pour les formats d'images ne la supportant pas. Elle vous permet de déterminer une couleur qui ne sera pas affichée par le moteur, la rendant ainsi transparente.
 +
 +**Alpha color / Opacity ** détermine l'opacité de l'image.
 +
 +**Decoration subframe** une image marquée comme décoration, est une image qui ne sera pas interactive, même si le sprite l'est.
 +
 +**Total time** est une valeur, non modifiable, qui affiche le nombre de milliseconde durant lequel l'image sera affichée.
 +
 +Maintenant, avant d'ajouter une nouvelle image à notre sprite, allons voir le deuxième onglet, intitulé "Properties".
 +
 +{{wmebook:sp4.jpg|}}
 +
 +Comme vous pouvez le voir, à part le nom du sprite, vous pouvez également ajuster certains paramètres.
 +
 +**Looping** veut dire que l'animation sera jouée en boucle.
 +
 +**Continuous** n'est pas encore utilisé.
 +
 +**Pixel precise** est une valeur très importante. Si, vous avez une image qui contient des parties transparentes, et que cette option est active, l'image ne sera cliquable, que dans ses parties non-transparentes.
 +Si cette option n'est pas activée, l'image entière sera cliquable.
 +
 +**Streaming animation** est utile, pour les sprites très grands(beaucoup de grandes images). Mais, elle est lente, dans ce cas, l'usage de la vidéo est préconisé. Nous en parlerons plus loin.
 +
 +**Mute sounds** coupe les sons émis par ce sprite.
 +
 +**Scripts** vous permet de gérer l'animation par script, avec toute la flexibilité que cela permet, néanmoins vous l'utiliserez rarement.
 +
 +Continuons, notre travail sur le sprite.
 +
 +Cliquez sur la petite feuille blanche, pour ajouter une nouvelle image. Selectionnez, l'image "sign01.bmp", et importez-la. Notez, qu'avec les petites flèches vertes, vous pouvez monter ou descendre l'image dans la pile. Donc, même si vous n'importez pas les images dans le bon ordre, il vous est toujours possible de modifier cet ordre par la suite.
 +
 +Dans la même section, tout en haut, vous pouvez voir des boutons, permettant de jouer l'animation, de la rembobiner, etc... Appuyez sur le bouton de lecture, vous devriez voir des bandes rouges défilant sur l'image, c'est parce que l'animation est trop rapide. Sélectionnez, la première image, est entrez dans le champ "Delay", la valeur "1200", puis sélectionnez la seconde image, et entrez dans le champ "Delay" la valeur "1000". N'oubliez pas d'appuyez sur entrée après avoir tapé la valeur, sinon elle repartira à zéro.
 +
 +Sauvegardez.
 +
 +On va maintenant ajouter du son, sélectionnez la seconde image, et appuyez sur le bouton pour explorer les répertoires, à droite du champ "Sound". Allez dans le répertoire, "sounds" du répertoire "data", et sélectionnez le son intitulé "néon". Maintenant, lancez l'animation.
 +
 +Si vous voulez retirer le nom du fichier son, il y a une méthode commune à ce type de bouton. Appuyez de nouveau sur le bouton pour explorer les fichiers, et appuyez sur "Annuler", Wintermute vous demandera alors si vous voulez enlever le lien vers ce fichier, appuyez sur "Oui", et voilà, le fichier son a été supprimé.
 +
 +Une autre fonctionnalité des sprites, qui pourrait vous être utile est la possibilité d'ajouter des "sous-images", en Anglais "sub-frame". Je ne l'ai personnellement jamais utilisé, mais d'autres, plus créatifs, l'utiliseront peut-être. Vous pouvez créer des "sub-frame", en cliquant sur le bouton à droite de celui pour ajouter de nouvelles images(la page blanche).
 +
 +Note : la croix rouge, sert à supprimer une image.
 +
 +Une dernière chose, à propos de l'éditeur de sprite est la possibilité de tester le sprite dans la scéne. Pour cela, cliquez sur "View"(tout en haut) et sur "Background images...", si vous voulez enlever le décor, appuyez simplement sur le bouton "No image".
 +
 +Sauvegardez.
 +
 +Dans le prochain chapitre, nous parlerons de l'outil que vous utiliserez certainement le plus, j'ai nommé, l'éditeur de scènes.
 +
 +[[fr:wmebook:ch1_2|UP]]
 
fr/wmebook/ch1_2.1266340158.txt.gz · Last modified: 2010/02/16 18:09 by rens
Recent changes RSS feed Creative Commons License Driven by DokuWiki