上篇博客已经把Laya整个框架梳理了一遍,本编博客我们就开始从Laya的入口学起。
如果我们需要跑起来我们的工程,首先需要将工程编译,Laya默认采用的是Gulp进行编译,配置文件写在了gulpfile.js
如果有同学对于Gulp感兴趣可以去百度查相关资料,掌握几个自动化编译工具我认为还是很重要的东西。
我们工程的入口函数一般为Main.ts,这里面不光会处理我们自己的逻辑初始化,也会初始化Laya在我们工程上需要的东西。
在初始化后Laya中的浏览器代理Browser会去监听浏览器的帧循环函数,这里就是我们程序的主要更新源头了
Browser.window.requestAnimationFrame(loop);
function loop(stamp){
Laya.stage._loop();
Browser.window.requestAnimationFrame(loop);
}
所有帧处理逻辑都集中在Laya.stage._loop函数之中而这个循环主要就是调用Stage中的render函数,这个函数处理了当前帧所有的逻辑与渲染提交。
var __proto=Stage.prototype;
/**@inheritDoc */
__proto.render=function(context,x,y){
//1.解析获得当前更新模式:sleep mouse fast三种模式
if (this._frameRate==="sleep"){
var now=Browser.now();
if (now-this._frameStartTime >=1000)this._frameStartTime=now;
else return;
}
//2.renderCount渲染累计
this._renderCount++;
//3.stage不显示 只更新逻辑
if (!this._visible){
if (this._renderCount % 5===0){
CallLater.I._update();
Stat.loopCount++;
Laya.systemTimer._update();
Laya.startTimer._update();
Laya.physicsTimer._update();
Laya.updateTimer._update();
Laya.lateTimer._update();
Laya.timer._update();
}
return;
}
this._frameStartTime=Browser.now();
var frameMode=this._frameRate==="mouse" ? (((this._frameStartTime-this._mouseMoveTime)< 2000)? "fast" :"slow"):this._frameRate;
var isFastMode=(frameMode!=="slow");
var isDoubleLoop=(this._renderCount % 2===0);
Stat.renderSlow=!isFastMode;
//4.本次需要更新渲染就清空context
if (isFastMode || isDoubleLoop){
CallLater.I._update();
Stat.loopCount++;
if (!Render.isConchApp){
if (Render.isWebGL && this.renderingEnabled){
context.clear();
_super.prototype.render.call(this,context,x,y);
Stat._show && Stat._sp && Stat._sp.render(context,x,y);
}
}
}
//5.渲染,重置颜色 再将指令flush
if (this.renderingEnabled && (isFastMode || !isDoubleLoop)){
if (Render.isWebGL){
RunDriver.clear(this._bgColor);
context.flush();
VectorGraphManager.instance && VectorGraphManager.getInstance().endDispose();
}else {
RunDriver.clear(this._bgColor);
_super.prototype.render.call(this,context,x,y);
Stat._show && Stat._sp && Stat._sp.render(context,x,y);
if (Render.isConchApp)context.gl.commit();
}
}
//6.更新逻辑
Laya.systemTimer._update();
Laya.startTimer._update();
Laya.physicsTimer._update();
Laya.updateTimer._update();
Laya.lateTimer._update();
Laya.timer._update();
}
从上面代码可以看出更新主要分三步:清空画布——提交渲染——更新逻辑
这里的context是Stage持有的内容对象,在没有启用WebGL的情况下该对象为CanvasRenderingContext2D实例,如果启用WebGL后这个对象为WebGLContext2D对象,x,y默认为0,0
在Laya2.0的index.html中一开始是不存在canvas标签的,是在初始化时append上去的。
Render._mainCanvas.source.id = "layaCanvas";
Render._mainCanvas.source.width = width;
Render._mainCanvas.source.height = height;
if(laya.renders.Render.isConchApp){
Browser.document.body.appendChild(Render._mainCanvas.source);
}else{
Browser.container.appendChild(Render._mainCanvas.source);
}