* >> Lese Utdanning Artikler >> science >> programming

Trykknapp Tutorial Series - Animasjon

Se DEMO

laste ned kildekoden

TILBAKE TIL TUTORIAL INDEX

SpriteRenderComponent brukes til å vise statiske sprite i den siste opplæringen har også muligheten til å vise bilder av animasjon. Ved å tildele en ressurs til loadFromImage eiendommen, vil SpriteRenderComponent faktisk skape en SpriteSheetComponent med en enkel ramme av animasjon. I kombinasjon den SpriteSheetComponent og SpriteRenderComponent har muligheten til å referere til en rekke enkeltbilder som finnes i ett enkelt bilde, som en filmremse.

Det første trinnet i å implementere en animasjon er å fjerne koden som instruerer SpriteSheetComponent å laste et bilde

Var Render. SpriteRenderComponent = new SpriteRenderComponent (); Render.positionReference = new PropertyReference ("@ Spatial.position"); entity.addComponent (Render, "Render");

SpriteRenderComponent ikke egentlig har noe begrep om animasjon. Det kan bli instruert hvilken ramme av animasjon for å vise til enhver tid, men det har ikke muligheten til å sykle gjennom disse rammene selv.

Til det trenger vi å introdusere en ny komponent: AnimationController. Formålet med AnimationController er å oppdatere tilstanden til en animasjon (nemlig å flytte til neste bildet i animasjonen etter en bestemt tidsperiode) og å fortelle en SpriteRenderComponent hvilken ramme som SpriteSheetComponent å vise.

Var Animasjon: AnimationController = new AnimationController (); Animation.spriteSheetReference = new PropertyReference ("@ Render.spriteSheet"); Animation.currentFrameReference = new PropertyReference ("@ Render.spriteIndex"); Animation.

defaultAnimation = "IdleRight";

Så som vi har nevnt tidligere SpriteSheetComponent viser til et bilde, og vet hvordan å bryte det bildet ned i sine enkelte rammer. Her lager vi en SpriteSheetComponent som refererer til en slik film strip bilde

Var IdleRightSpriteSheet: SpriteSheetComponent = new SpriteSheetComponent (); IdleRightSpriteSheet.imageFilename = "../media/idleright.png";

The enkeltbilder. i en filmstripe bilde kan justeres på en rekke forskjellige måter. For denne demoen bruker vi en rekke rammer som er innretta horisontalt.

Du kan se hvordan dette fungerer i bildet nedenfor.

CellCountDivider klassen gir en måte for oss å informere SpriteSheetComponent hvordan bildene er justert. Her forteller vi det at det er 6 bilder langs x-aksen

Var skillelinjen. CellCountDivider = new CellCountDivider (); divi

Page << [1] [2] >>

Trykknapp Tutorial Series - Animasjon

Trykknapp Tutorial Series - Oppdatering Animation

programming

programming