React与游戏引擎设计原理的相互印证

前几年做网页游戏,近来改做基于React的单页应用。虽然这是完全不同的两种软件产品,但感觉React和游戏引擎本身的设计颇有相似之处:

架构层级中的定位

无论是游戏引擎,还是React,都是作为核心基础库被应用于软件中。而且,它们的用处都是用于帮助构建图形用户界面(GUI)的工具,即视图层的基础工具组件。更具体来讲就是用于渲染。

组件化

为方便开发者的工作,React和游戏引擎都会提供自定义组件的功能,使得重用代码变得方便,也使得业务逻辑变得更清晰。不过游戏引擎中的组件往往叫做精灵(sprite)。

图形缓冲区与虚拟DOM

为了使界面流畅,游戏引擎往往有图形缓冲区,把渲染好的界面缓存进去,真正绘制屏幕的时候从缓冲区读取。React 也是这样,不过它缓存的不是像素阵列而是虚拟DOM树(Virtual DOM)。开发者在业务逻辑代码中并不直接操控屏幕,业务逻辑状态的改动影响的是缓冲区。随后游戏引擎或React会把它们从缓冲区绘制到屏幕上。

独立的渲染循环

无论是游戏引擎还是React都是使用一个独立于业务逻辑的渲染循环,负责把缓冲区的内容绘制到屏幕上。这个机制最简单的实现就是使用一个定时任务,比如每秒60次绘制,那么软件体现出来就是每秒绘制60帧。然而为了兼顾流畅性和性能,无论是游戏引擎还是React都会智能调整帧率,不需要的时候就不绘制。不过由于游戏动画多,画面品质要求高,一般来说需要的帧率会远高于React应用。

脏区重绘

随着时间的推移软件的发展,屏幕像素越来越大,图形界面上画的东西越来越多,也越来越复杂,如果完全重绘整个屏幕是很耗时的操作。为了渲染性能,React 和游戏引擎都使用了按需绘制的策略,即使用某些算法来检测改动的区域即脏区,只绘制改动的部分。游戏引擎检测的一般是缓存中的位图哪些区域变化,React则检测虚拟DOM中哪些节点变化。

目前想到的就这么多,总结来说就是它们在基本设计原理上都使用了相似的方案,可以相互印证。

发布了20 篇原创文章 · 获赞 9 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/time1812/article/details/88855232