网页游戏引擎的对比和设置主要取决于你的具体需求，例如游戏类型、性能要求、开发经验等。以下是一些常见的游戏引擎及其特点，供你参考：

1. Unity：Unity是最受欢迎的游戏引擎之一，支持2D和3D游戏开发，有强大的社区支持和丰富的资源。它有直观的实时编辑器，但学习曲线相对陡峭。设置主要是调整渲染设置、优化设置、网络设置等，确保游戏能在不同设备上流畅运行。

2. Phaser：Phaser是一个专门为创建HTML5游戏设计的JavaScript引擎，适合初学者使用，因为它易于上手且有详细的文档。设置主要关注游戏逻辑、物理引擎、图像加载等。

3. Egret：Egret是一个基于HTML5的开源游戏引擎，适用于快速开发2D游戏。它有强大的动画和交互支持，但可能需要熟悉Flash的一些概念。

*. Cocos2d-x：这是一个跨平台的游戏开发框架，支持2D游戏开发，适合C++开发者。设置包括优化图形、调整帧率、管理内存等。

5. Godot：Godot是一个免费且开源的游戏引擎，支持2D和3D游戏，适合学习者和独立开发者。设置包括性能优化、渲染设置、物理引擎等。

选择引擎时，你应该考虑以下因素： - 所需的技术栈（比如是否熟悉JavaScript或C++） - 游戏类型（2D还是3D） - 性能需求（是否需要跨平台，对性能有无特别要求） - 开发周期（引擎的易用性和社区支持可能影响开发效率）

在设置过程中，通常需要调整： - 渲染质量：包括分辨率、抗锯齿、帧率等 - 硬件兼容性：确保游戏能在不同设备和浏览器上正常运行 - 性能优化：如减少绘制次数、压缩资源、使用懒加载等 - 网络设置：对于在线游戏，需要考虑网络同步和延迟处理

最重要的是，实际操作中根据自己的项目需求进行选择和调整。

至此，这个玩具版的渲染引擎就完成了。虽然这个玩具并没有什么用，但如果能通过实现它来了解真实的渲染引擎是如何运作的，从这个角度来看，它还是“有用”的。

ctx.fillText(layoutBox.styleNode?.node.nodeValue, x, y + parseInt(fontSize), width)

ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`

18游戏盒子在哪里下载安装 const { x = 0, y = 0, width } = parent?.dimensions.content || {}

网页游戏引擎对比怎么设置

function renderText(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D, parent?: LayoutBox) {

const { left, top, right, bottom } = layoutBox.dimensions.border

const { width, height, x, y } = layoutBox.dimensions.borderBox()

function renderBorder(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D) {

首先拿到布局节点的位置、尺寸信息，以 x,y 作为起点，绘制矩形区域。并且以 CSS 属性 background 的值作为背景色进行填充。

const { width, height, x, y } = layoutBox.dimensions.borderBox()

function renderBackground(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D) {

默认情况下，HTML 元素按照它们出现的顺序进行绘制。如果两个元素重叠，则后一个元素将绘制在前一个元素之上。这种排序反映在我们的布局树中，它将按照元素在 DOM 树中出现的顺序绘制元素。

function renderLayoutBox(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D, parent?: LayoutBox) {

如果我们为 2* 个字母都建一个映射表，按 ascii 的编码来排序，那么 charsMap[*5] 就代表字符 A，当用户在键盘上按下 A 键时，就把 charsMap[*5] 对应的数据输出到内存区域上，这样屏幕上就显示了一个字符 A。

[0, 0, 1, 1, 0, 0, 0, 0], // 按从左至右的顺序来读取 bit，转换成十进制数字就是 12

为了在屏幕上显示文本，首先必须将物理上基于像素点的屏幕，在逻辑上以字符为单位划分成若干区域，每个区域能输出单个完整的字符。假设有一个 25* 行 512 列的屏幕，如果为每个字符分配一个 11*8 像素的网格，那么屏幕上总共能显示 23 行，每行 ** 个字符（还有 3 行像素没使用）。

然后根据 memory[x + y * rowSize] = 1 公式，将 (x1,y1) 至 (x2,y2) 之间对应的内存区域置为 1，这样就画出来了一条直线。

为了简单起见，我们用 1 bit 来表示屏幕的一个像素，0 代表白色，1 代表黑色。屏幕每一行的长度用变量 rowSzie 表示，每一列的高度用 colSize 表示。

在计算机底层进行像素绘制属于硬件操作，它依赖于屏幕和显卡接口的具体细节。为了简单起点，我们可以用一段内存区域来表示屏幕，内存的一个 bit 就代表了屏幕中的一个像素。比如在屏幕中的 (x,y) 坐标绘制一个像素，可以用 memory[x + y * rowSize] = 1 来表示。从屏幕左上角开始，列是从左至右开始计数，行是从上至下开始计数。因此屏幕最左上角的坐标是 (0,0)。

实际上绘制才是最难的部分，但是这一步我们有现成的 canvas[5] 库可以用，不用自己实现一个光栅器，所以相对来说就变得简单了。在真正开始绘制阶段之前，我们先来学习一些关于计算机如何绘制图像、文本的基础知识，有助于我们理解光栅化的具体实现过程。

浏览器通常在图形API和库（如Skia、Cairo、Direct2D等）的帮助下实现光栅化。这些API提供绘制多边形、直线、曲线、渐变和文本的功能。

绘制阶段主要是根据布局树中各个节点的位置、尺寸信息将它们绘制到页面。目前大多数计算机使用光栅（raster，也称为位图）显示技术。将布局树各个节点绘制到页面的这个过程也被称为“光栅化”。

布局树是渲染引擎最复杂的部分，这一阶段结束后，我们就了解了布局树中每个盒子节点在页面中的具体位置和尺寸信息。下一步，就是如何把布局树渲染到页面上了。

// 如果元素设置了 height，则使用 height，否则使用 layoutBlockChildren() 计算出来的高度

dimensions.content.height += child.dimensions.marginBox().height

dimensions.content.x = x + dimensions.margin.left + dimensions.border.left + dimensions.padding.left

dimensions.content.y = y + height + dimensions.margin.top + dimensions.border.top + dimensions.padding.top

dimensions.content.x = x + dimensions.margin.left + dimensions.border.left + dimensions.padding.left

计算当前节点的位置相对来说简单一点。这个方法会根据当前节点的 margin border padding 样式以及父节点的位置信息对当前节点进行定位：

如果这个差值为正数，说明子节点宽度小于父节点；如果差值为负数，说明子节点大于父节。上面这段代码逻辑其实就是根据 underflow width padding margin 等值对子节点的宽度、边距进行调整，以适应父节点的宽度。

// 如果只有 marginLeft 和 marginRight 是 auto，则将两者设为 underflow 的一半

} else if (!isWidthAuto && isMarginLeftAuto && isMarginRightAuto) {

} else if (!isWidthAuto && isMarginLeftAuto && !isMarginRightAuto) {

} else if (!isWidthAuto && !isMarginLeftAuto && isMarginRightAuto) {

if (!isWidthAuto && !isMarginLeftAuto && !isMarginRightAuto) {

如果这些属性没有设置，就使用 0 作为默认值。拿到当前节点的总宽度后，还需要和父节点对比一下是否相等。如果宽度或边距设置为 auto，则可以对这两个属性进行适当展开或收缩以适应可用空间。所以现在需要对当前节点的宽度进行检查。

let totalWidth = sum(width, marginLeft, marginRight, borderLeft, borderRight, paddingLeft, paddingRight)

这个方法执行布局树的单次遍历，向下执行宽度计算，向上执行高度计算。一个真正的布局引擎可能会执行几次树遍历，有些是自上而下的，有些是自下而上的。

在本节内容的开头有提到过，盒子的宽度取决于其父节点，而高度取决于子节点。这意味着，我们的代码在计算宽度时需要自上而下遍历树，这样它就可以在知道父节点的宽度后设置子节点的宽度。然后自下而上遍历以计算高度，这样父节点的高度就可以在计算子节点的相关信息后进行计算。

它将遍历样式树，利用样式树节点提供的相关信息，生成一个 LayoutBox 对象，然后调用 layout() 方法。计算每个盒子节点的位置、尺寸信息。

export function getLayoutTree(styleNode: StyleNode, parentBlock: Dimensions) {

anonymousBlock.children.push(buildLayoutTree(child))

如果一个块节点包含一个内联子节点，则需要创建一个匿名块（实际上就是块节点）来包含它。如果一行中有多个子节点，则将它们全部放在同一个匿名容器中。

如果 DOM 节点 display 属性的值为 none，则在构建布局树的过程中，无需将这个 DOM 节点添加到布局树上，直接忽略它就可以了。

通常情况下内容是垂直增长的。也就是说，在容器中添加子节点通常会使容器更高，而不是更宽。另一种说法是，默认情况下，子节点的宽度取决于其容器的宽度，而容器的高度取决于其子节点的高度。

CSS 的 display 属性决定了盒子在页面中的布局方式。display 的类型有很多种，例如 block、inline、flex 等等，但这里只支持 block 和 inline 两种布局方式，并且所有盒子的默认布局方式为 display: inline。

在 CSS 中，所有的 DOM 节点都可以当作一个盒子。这个盒子模型包含了内容、内边距、边框、外边距以及在页面中的位置信息。

styleNode.values = { ...styleNode.values, ...getInlineStyle(ele.attributes.style) }

我们可以在调用 getStyleValues() 函数获得当前 DOM 节点的 CSS 属性值后，再去取当前节点的内联样式值。并对当前 DOM 节点的 CSS 样式值进行覆盖。

在 CSS 选择器中，不同的选择器优先级是不同的，比如 id 选择器就比类选择器的优先级要高。但是我们这里没有实现选择器优先级，为了实现简单，所有的选择器优先级是一样的。

result = { ...result, ...cssValueArrToObject(rule.declarations) }

const inheritableAttrValue = getInheritableAttrValues(parent)

function getStyleValues(ele: Node, cssRules: Rule[], parent?: StyleNode) {

styleNode.children = ele.children.map((e) => getStyleNode(e, cssRules, styleNode)) as unknown as StyleNode[]

styleNode.values = { ...styleNode.values, ...getInlineStyle(ele.attributes.style) }

function getStyleNode(ele: Node, cssRules: Rule[], parent?: StyleNode) {

当查找到匹配的 DOM 节点后，再将 DOM 节点和它匹配的 CSS 属性组合在一起，生成样式树节点 styleNode：

const classes2 = selector.class.split(' ').filter(Boolean)

const classes = ele.attributes.class.split(' ').filter(Boolean)

匹配选择器实现起来非常容易和平精英游戏盒子里面的照片，因为我们的CSS 解析器仅支持简单的选择器。 只需要查看元素本身即可判断选择器是否与元素匹配。

return eles.map((ele) => getStyleNode(ele, cssRules, parent))

export function getStyleTree(eles: Node | Node[], cssRules: Rule[], parent?: StyleNode) {

CSS 解析器相对来说简单多了，因为很多知识点在 HTML 解析器中已经讲到。整个 CSS 解析器的代码大概 100 多行，如果你阅读过 HTML 解析器的源码，相信看 CSS 解析器的源码会更轻松。

parseDeclaration() 会将 color: red; 解析为一个对象 { name: "color", value: "red" }。

while (this.index < this.len && this.rawText[this.index] !== ':') {