alternate content
3 Circle with pause
	<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);

			// Paused based on tick
			tickCircle = new createjs.Shape();
			tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
			tickCircle.y = 160;
			stage.addChild(tickCircle);

			// Paused based on time
			pauseCircle = new createjs.Shape();
			pauseCircle.graphics.beginFill("green").drawCircle(0, 0, 40);
			pauseCircle.y = 270;
			stage.addChild(pauseCircle);

			// UI code:
			output = stage.addChild(new createjs.Text("", "14px monospace", "#000"));
			output.lineHeight = 15;
			output.textBaseline = "top";
			output.x = 10;
			output.y = stage.canvas.height-output.lineHeight*3-10;


			createjs.Ticker.addEventListener("tick", tick);
			createjs.Ticker.setFPS(60);
		}
		
		function tick(event) {
			// time based
			timeCircle.x = timeCircle.x + (event.delta)/1000*100;
			if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0;}
 
            // pausing tick based
            if (!event.paused) {
				tickCircle.x = tickCircle.x + 2.1;
				tickCircle.alpha = 1.0;
				if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0;}
			}else{
				tickCircle.alpha = 0.4;
			}

            // pausing time based
            if (!event.paused) {
				pauseCircle.x = pauseCircle.x + (event.delta)/1000*100;
				pauseCircle.alpha = 1.0;
				if (pauseCircle.x > stage.canvas.width) { pauseCircle.x = 0;}
			}else{
				pauseCircle.alpha = 0.4;
			}

			output.text = "getPaused()    = "+event.paused+"\n"+
				"getTime(true)  = "+createjs.Ticker.getTime(true)+"\n"+
				"getTime(false) = "+createjs.Ticker.getTime(false);

			stage.update();
		}

		function togglePause() {
			var paused = !createjs.Ticker.paused;
			createjs.Ticker.paused = paused;
			document.getElementById("pauseBtn").value = paused ? "resume" : "pause";
		}
	</script>
 
	<input type="button" value="pause" id="pauseBtn" onclick="togglePause();"><br>
	<canvas id="demoCanvas" width="500" height="360">
		alternate content
	</canvas>


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

1 Comment

  1. Victor Cheung: according to http://www.createjs.com/Docs/EaselJS/classes/Ticker.html#method_getTime, getPaused() is deprecated. Hence, please update this example by using "paused" property as suggested.