Ticker Animation Zeitbasiert und Framebasiert

Hier ist ein Numeric Stepper hinzugekommen, mit dem man die Framerate (FPS) ändern kann. Siehe dazu auch meinen Tipp Komponenten Numeric Stepper.

Es gibt einen zweiten Kreis, der pro Tick seine x-Position um 5 Pixel erhöht, dadurch wird er schneller wenn man die FPS erhöht.

Der erste Kreis verhält sich wie im vorigen Beispiel, unabhängig von FPS mit einer Geschwindigkeit von 100 Pixel pro Sekunden.

	    
var circle = new lib.Kreis();
circle.x = 20;
this.addChild(circle);

var circle2 = new lib.Kreis();
circle2.x = 20;
circle2.y = 60;
circle2.alpha = 0.5;
this.addChild(circle2);

createjs.Ticker.addEventListener("tick", myListener.bind(this));
createjs.Ticker.setFPS(40);


function myListener(evt) {
	// Bewegung 100 pixels pro Sekunde(deltaInMillisek / 1000msProSek * PixelProSekunde)
	//delta ist die Zeit seit dem letzten Aufruf in Millisekunden
	//egal wie die FPS Framerate verändert wird die Schnelligkeit bleibt gleich
	//sie wird bei einer niedrigen Framerate abgehackter

	circle.x += evt.delta / 1000 * 100;
	if (circle.x > 560) {
		circle.x = -10;
	}
	circle2.x += 5;
	if (circle2.x > 560) {
		circle2.x = -10;
	}
}