alternate content
Time vs non-time
	<script>
		
		var stage, timeCircle;
		function init() {
			stage = new createjs.Stage("demoCanvas");
			
			timeCircle = new createjs.Shape();
			timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
			timeCircle.y = 50;
			stage.addChild(timeCircle);
			
            // Add another circle that's tick based
			tickCircle = new createjs.Shape();
			tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
			tickCircle.y = 160;
			stage.addChild(tickCircle);

			createjs.Ticker.addEventListener("tick", tick);
			createjs.Ticker.setFPS(20);
		}
		
		function tick(event) {
			// time based
			timeCircle.x = timeCircle.x + (event.delta)/1000*100;  // Even default is set 20FPS, the lag is making the + 5 slower
			tickCircle.x = tickCircle.x + 5;  // 100 / 20 = 5

			if (tickCircle.x > stage.canvas.width || timeCircle.x > stage.canvas.width) { timeCircle.x = 0; tickCircle.x = 0; } // Set both to left for reference

			stage.update();
		}
	</script>
 
	<select onchange="createjs.Ticker.setFPS(Number(this.value));">
		<option value="10">10 fps</option>
		<option value="20" selected>20 fps</option>
		<option value="30">30 fps</option>
		<option value="40">40 fps</option>
		<option value="50">50 fps</option>
		<option value="60">60 fps</option>
	</select><br>
	<canvas id="demoCanvas" width="500" height="200">
		alternate content
	</canvas>


	<script>
	    init();
	</script>
  • No labels