VOIR LA DEMO
télécharger le code SOURCE
Retour à la index du tutoriel
Le SpriteRenderComponent utilisé pour afficher le sprite statique dans le dernier tutoriel a également la possibilité d'afficher des images d'animation. En attribuant une ressource à la propriété loadFromImage, l'SpriteRenderComponent créera en fait un SpriteSheetComponent avec un seul cadre de l'animation.
En combinaison du SpriteSheetComponent et SpriteRenderComponent ont la possibilité de référencer un certain nombre d'images individuelles contenues dans une seule image, comme une bande de film.
La première étape dans la mise en œuvre d'une animation est de supprimer le code qui indique au SpriteSheetComponent à charger une image
var Render:. SpriteRenderComponent = new SpriteRenderComponent (); Render.positionReference = new PropertyReference ("@ Spatial.position"); entity.
addComponent (Render, "Render");
Le SpriteRenderComponent n'a pas vraiment de concept de l'animation. Il peut être demandé quelle image de l'animation pour afficher à un moment donné, mais il n'a pas la capacité de se défiler ces images. Pour cela nous avons besoin d'introduire une nouvelle composante: l'AnimationController.
Le but de la AnimationController est de mettre à jour l'état d'une animation (à savoir pour passer à la prochaine image de l'animation après une période de temps déterminée) et de raconter une SpriteRenderComponent qui cadre à partir duquel SpriteSheetComponent à afficher.
var Animation: AnimationController = new AnimationController (); Animation.spriteSheetReference = new PropertyReference ("@ Render.spriteSheet"); Animation.currentFrameReference = new PropertyReference ("@ Render.spriteIndex"); Animation.
defaultAnimation = "IdleRight";
Alors que nous l'avons mentionné plus tôt, le SpriteSheetComponent référence à une image, et sait comment briser cette image en ses images individuelles. Ici, nous créons un SpriteSheetComponent qui fait référence à l'une telle image de bande de film
var IdleRightSpriteSheet: SpriteSheetComponent = new SpriteSheetComponent (); IdleRightSpriteSheet.imageFilename = "../media/idleright.png";The images individuelles. dans une image de bande de film peuvent être alignés dans un certain nombre de façons différentes.
Pour cette démonstration, nous utilisons une série d'images qui sont alignés horizontalement. Vous pouvez voir comment cela fonctionne dans l'image ci-dessous.
PushButton Tutorial Series - Mise à jour de Animation
- Conception base de données Tables
- AS3IsoLib Tutorial Series - Obtenir Started
- Spécificateurs d'accès en C ++ Classes
- Programmation Android: Bonjour tout le monde [1]
- Programmation Tutoriel Papervision 3D - Fog
- Iphone dessin sur une image Partie 1
- Comment faire des jeux pour mobile Platforms
- Code complet de la Magie Html client Edges
- Espace blanc dans Java
- Popularité de Various programmation informatique Languages