显示列表的渲染

发布时间:2015-10-29

1.显示列表

  LayaFlash的显示对象类与AS3显示对象类体系类似,下图展示了LayaFlash显示对象类之间的继承关系:

1.png

  Stage对象是容纳所有显示对象的显示列表根节点,Sprite和MovieClip作为容器可以容纳其他显示对象,容器与容器之间层层嵌套形成的树状结构就是显示列表。

  LayaFlash新增了Body显示类,一个LayaFlash项目中,Body对象被实现为一个实例。Body对象只有一个子显示对象,那就是Stage类对象。尽管如此,它却不会成为其他显示对象的父级显示节点。当Body实例接收到渲染事件或指令时,会通知Stage渲染更新其下部的所有子显示对象,子显示对象又遍历通知所有子显示对象……直至整个显示列表的渲染方法都被调用完成。


2.显示对象指令流

  在实现模拟AS3显示对象类的渲染流程的时,为了适应H5的资源异步加载的特性,避免在资源没加载完成的时候就进行显示对象的绘制,引入了VirtualCanvas虚拟画布和“指令流”的概念。

2.png

  上图以BitmapData类为界,分别表述了显示列表的树状渲染结构和BitmapData中指令流的组成结构。从中可以看出VirtualCanvas(虚拟画布)类、指令流列表与显示列表之间的关系。指令流以BitmapData为桥梁参与到显示列表的渲染流程中。

  位于最顶部的是Driver类,它在LayaFlash项目中不是显示类,与Body对象一样是一个单例。Driver单例每帧发起渲染调用,渲染流程就是从这里开始的。Driver单例先调用Body单例里的方法,再由Body单例驱动Stage,更新整个显示列表。

  每个BitmapData对象都包含一个VirtualCanvas对象,VirtualCanvas对象内部的_cmds_属性以数组的形式保存了外部所有对BitmapData对象的操作,这些操作有可能是旋转、裁剪、缩放……等与显示有关的任何操作。其他对象需要控制这些显示内容时,都会往这个指令列表中按照特定格式放入指令。

  游戏项目中使用的素材经过LayaFlash素材转换工具的转换,会变成存放在特定目录的图片资源(LayaFlash素材转换工具的具体用法,参见Flash资源转换工具》教程),原有的swf文件也被转换成描述资源信息的二进制文件,因而原来AS3中加载的可视资源操作都变成了对图片文件的操作,这些图片资源加载完成后生成一个H5的Image对象并和BitmapData的其他指令一起存入VirtualCanvas的指令列表_cmds_BitmapData又会被添加到其他显示容器中显示,从而Driver单例每帧渲染下所有显示对象就能按照这些指令绘制和呈现画面了。指令流与实际显示内容(Image)的异步合作有效避免了资源没加载完成就绘制内容的问题的发生,保证各个显示对象的内容得以准确呈现。

  更多显示对象的内容,请参见《显示对象处理》教程的内容。