Gestire gli stati di animazione con Starling

Starling Framework è un'API AS3 che imita l'elenco di visualizzazione, con una differenza cruciale: utilizza le nuove funzionalità di Flash Player 11 per eseguire il rendering di tutto il contenuto tramite la GPU. In questo tutorial, imparerai ad aggiungere più animazioni a uno sprite usando Starling Framework. Si presuppone una conoscenza di base dell'utilizzo di spritesheet con Starling.


Anteprima del risultato finale

Clicca qui per vedere la demo su cui lavoreremo. Clicca a sinistra oa destra della scimmia per farlo camminare in quella direzione; notare come mostra un'animazione durante lo spostamento e una cornice statica quando si è fermi.


Codice iniziale

I file sorgente dell'intera demo (sia nello stato iniziale che in quello finale) si trovano nel download sorgente. Tuttavia, lavoreremo principalmente con un file, MonkeySprite.as, quindi ecco i contenuti, per riferimento:

 package import flash.utils.getTimer; importare starling.animation.Juggler; import starling.core.Starling; import starling.display.MovieClip; import starling.display.Sprite; import starling.events.Event; importare starling.textures.Texture; importare starling.textures.TextureAtlas; MonkeySprite di classe pubblica estende Sprite private var standMovie: MovieClip; // standing animation private var mouseX: Number = -1; // posizione del clic del mouse sull'asse x private var lastTime: int; // last onFrame movement private var movieVector: Vector.; funzione pubblica MonkeySprite () var atlas: TextureAtlas = Assets.getTextureAtlas (); var standFrames: Vector. = atlas.getTextures ("monkey_1"); standMovie = new MovieClip (standFrames, 7); standMovie.loop = true; addChild (standMovie); pivotX = this.width * 0.5; this.addEventListener (Event.ENTER_FRAME, onFrame);  public function onFrame (e: Event): void if (mouseX == -1) return; // snap se (this.x <= mouseX+5 && this.x >= mouseX-5) this.x = mouseX;  else var timeDiff: int = getTimer () - lastTime; lastTime + = timeDiff; if (mouseX> this.x) this.x + = timeDiff * .15;  else this.x - = timeDiff * .15;  public function moveToPoint (pointX: Number): void mouseX = pointX; lastTime = getTimer (); 

Guarda lo Screencast

Ecco gli URL menzionati nel video:

  • Lo Starling Framework
  • Flash Builder
  • mrdoob's Hi-ReS-Stats
  • Vicki Wenderlich's Free Art Archive

Vuoi altri tutorial sullo storno?

Fateci sapere nei commenti!