hanyeah-pixijs入门-ticker

06

2016
08

pixijs入门-ticker

之前用MovieClip做动画的时候，发现stage的刷新频率（自己用setTimeout实现）和MovieClip的刷新频率不同步。

今天学习Ticker的时候才发现，原来人家用的是requestAnimationFrame，怪不得网上搜到的其他教程也用的也都是requestAnimationFrame，requestAnimationFrame和网页的刷新频率是一样的，一般默认是60帧。

官网API中的example。

The shared ticker instance used by PIXI.extras.MovieClip.
and by PIXI.interaction.InteractionManager.
The property PIXI.ticker.Ticker#autoStart is set to true
for this instance. Please follow the examples for usage, including
how to opt-out of auto-starting the shared ticker.

Examples

var ticker = PIXI.ticker.shared;// Set this to prevent starting this ticker when listeners are added.// By default this is true only for the PIXI.ticker.shared instance.ticker.autoStart = false;// FYI, call this to ensure the ticker is stopped. It should be stopped// if you have not attempted to render anything yet.ticker.stop();// Call this when you are ready for a running shared ticker.ticker.start();

// You may use the shared ticker to render...var renderer = PIXI.autoDetectRenderer(800, 600);var stage = new PIXI.Container();var interactionManager = PIXI.interaction.InteractionManager(renderer);document.body.appendChild(renderer.view);ticker.add(function (time) {
    renderer.render(stage);});

// Or you can just update it manually.ticker.autoStart = false;ticker.stop();function animate(time) {
    ticker.update(time);
    renderer.render(stage);
    requestAnimationFrame(animate);}animate(performance.now());

参考实现了一个小动画。

代码如下：

<html>
	<head>
		<title>pixijs入门-ticker</title>
		<script type="text/javascript" src="/js/pixi.min.js"></script>
		<script type="text/javascript">

		var frameRate=100;
		var renderer;
		var stage;
		var tf;
		var fps=0;
		var ticker;
		window.onload = function() {
			renderer = new PIXI.WebGLRenderer(600, 400);
			document.body.appendChild(renderer.view);
			stage = new PIXI.Container();
			//console.log(renderer);
			//

			var sprite = new PIXI.Sprite.fromImage('bunny.png');
			stage.addChild(sprite);
			sprite.y=200;

			tf = new PIXI.Text("fps:0", {
				font: '24px Arial',
				fill: 0xff1010,
				align: 'left'
			});
			stage.addChild(tf);


			ticker=PIXI.ticker.shared;
			ticker.autoStart=false;
			//ticker.speed = 0.5;
			ticker.start();
			ticker.add(function(time){ 
				sprite.x+=5;
				if(sprite.x>600){ 
					sprite.x-=600;
				}
				renderer.render(stage);
				//console.log("render:"+fps);
			});

			setInterval(showFps, 1000);
		}
		function showFps(){
			tf.text="fps:"+Math.round(ticker.FPS)+"\nspeed:"+ticker.speed+"\ndeltaTime:"+ticker.deltaTime;

		}

		</script>
	</head>
	<body>
	</body>
</html>

设置了speed貌似没有作用，依然是60帧。