LayaBox引擎源码阅读笔记（二、从入口函数开始学习）

上篇博客已经把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);
}