stats性能插件添加了以后,会默认在左上角显示性能帧数,每次刷新所用时间,占用内存

将以下代码拷贝粘贴到项目的  res/file/stats.js  (需要自己新建 stats.js 文件)

// stats.js – http://github.com/mrdoob/stats.js

var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?”block”:”none”;l=a}var l=0,c=document.createElement(“div”);c.style.cssText=”position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000″;c.addEventListener(“click”,function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel(“FPS”,”#0ff”,”#002″)),f=h(new Stats.Panel(“MS”,”#0f0″,”#020″)); if(self.performance&&self.performance.memory)var t=h(new Stats.Panel(“MB”,”#f08″,”#201″));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}}; Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement(“canvas”);q.width=r;q.height=f;q.style.cssText=”width:80px;height:48px”;var b=q.getContext(“2d”);b.font=”bold “+9*a+”px Helvetica,Arial,sans-serif”;b.textBaseline=”top”;b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f, v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+” “+h+” (“+e(c)+”-“+e(g)+”)”,t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};”object”===typeof module&&(module.exports=Stats);

 

第一步:

在 主程序 页面 顶部 变量名申明: stats 变量 为 输出对象

第二步 在 加载 子程序中 加载这个插件 输入以下代码:

插件加载js(‘stats’, ‘res/file/stats.js’)

 

第三步 在 创建 的 子程序中 加入以下代码

stats = new Stats();
document.body.appendChild(stats.dom);

 

第四步 在 更新子程序中输入以下代码:

stats.begin();

// 更新游戏逻辑代码 如果这里有更新逻辑的话~没有

stats.end();

 

运行游戏:

如游戏左上角,我们可以看到帧率 占用内存 等信息。

发表回复

后才能评论