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="http://hanyeah.com/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帧。



    « 上一篇下一篇 »

    相关文章:

    pixijs入门-移动端click  (2016-8-16 15:8:14)

    pixijs入门-mouseX  (2016-8-16 14:49:7)

    pixijs入门-MovieClip  (2016-8-16 14:0:55)

    pixi和egret效率对比2  (2016-8-6 15:6:9)

    pixijs入门-继承  (2016-8-3 9:22:26)

    pixijs入门-动画  (2016-8-2 16:51:2)

    pixijs入门-事件  (2016-8-2 15:10:29)

    pixi和createjs效率对比  (2016-8-2 9:45:21)

    评论列表:

    1.tekiz  2016/12/7 16:33:21 回复该留言
    对啊 为什么speed没用
    我研究了半天
    .hanyeah  2016/12/9 16:15:50 回复该留言
    我也不知道,研究了半天也不会。
    别纠结了,用egret吧。
    2.fun  2020/3/13 7:11:22 回复该留言
    默认speed就是1啊,改0.5明显会慢下来但是帧率不会变

    发表评论:

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。