Construct3的架构

作者： Ashley | 2017年3月16日   翻译：Stone Fan

在过去几个星期，我们已经展示了Construct3许多可见的改进。不过我们也花了很多工夫来改进Construct 3的内部架构。 基于我们开发此类软件大约十年的经验，我们利用重写编辑器的机会实现了一些新的复杂的后台处理过程。 这些过程最终可以带来很大的不同，但它们并不能立即被用户察觉到。 让我们来谈谈一些这方面的改进。

编辑器内部的精灵表单化(spritesheeting)

在Construct 2发布后不久，我们发现了Windows自身的一个限制：它最多只支持10,000个图形对象。 （可能他们认为“应该对任何人都足够了！”）我们惊讶地发现用户创建的项目实际上已经达到这个限制值。 幸运的是，Construct2似乎能很好地应付所有的这些内容 - 问题在于Windows自身！

此外，一些用户在导出项目后会出现图形质量轻微变化的问题。 这是因为Construct 2仅在导出时才将图像汇编到精灵表单中，在某些非常特殊的情况下，这会让渲染质量产生微妙的变化。 最后进行精灵表单化有许多好处，如节省内存和提高渲染性能，并且因为它将大量的图像整合到一个图像中，它有助于规避Windows中的图形数量限制。

为了解决这些问题并且能在编辑器中获得精灵表单化的好处，我们对Construct 3中的图形管线进行了重大的重新设计。现在Construct 3在编辑器中生成精灵表单。 这允许项目可以拥有比Construct2更大的规模，规避Windows中的10,000限制。 它还保证您在布局视图和预览模式中所见的内容就是导出后所得的内容，另外还能减少内存使用并且可以在编辑器中提高渲染性能。

精灵表单也是在编辑器中按需生成的。 当项目打开时，不必等待加载图像或精灵表单。 相反，它们会在您于布局视图中查看内容时才进行生成。 这也使得内存使用更低，因为只有您当前看到的内容才会被加载到内存中。 这是您在移动设备上仍然可以打开和查看大型项目的原因之一。

当您在编辑项目中的图像时，编辑器会在后台自动重建精灵表单。 没有必要手动创建或编辑：一切都已经为你处理好。 您也可以查看Construct3在编辑器中生成的精灵表单，而无需预览或导出。 这可以帮助您判断是否有图像无法有效地打包，也可以调整您图像的大小以节省内存。 （有时候，使用者要求能够手动调整精灵在精灵表单上的位置，但在您进行下一次更改时这些调整会被抛弃并自动重新生成，因此这可能不是一个非常有用的功能！）

在Construct 3编辑器中查看精灵表单

我们还对精灵表单化过程本身做了很多改进：

• 在Construct2中，只有动画精灵可以整合到精灵表单中。 在Construct3中，所有类型的对象都可以放置在精灵表单上，包括在同一表单中放入不同的精灵。 唯一的例外是瓦片背景，它仍然保持独立，因为它需要创建不同类型的纹理。
• 精灵表单可以采用矩形形状，而不仅仅是正方形，节省内存。
• 打包算法现在递归进行，以便更好地压缩和分割精灵表单到最小的精灵表单集，进一步节省内存。
• 调整精灵表单上图像的位置以优化mipmap的生成，有助于避免缩小图像时出现的接缝。
• 精灵表单的打包和渲染采用多核进行处理，以获得最佳性能。 （下面更多）

我们对编辑器中的图标使用类似的精灵表单化方案，有助于确保编辑器可以有效管理大量的图标。

增强的WebGL渲染器

Construct3的布局视图实际上是使用Construct 2的运行时所用的WebGL渲染器渲染的。 这已经是一个多能和高性能渲染器。 Construct2的布局视图渲染器实际上不太复杂，针对OpenGL 1.1进行编写以获得最大兼容性，而且缺少了运行时游戏级性能的绘制引擎。 所以这已经是一个重大的改进了。

紧接着我们将它修改为使用更新的Javascript语言功能，做了更多的性能调整，添加更好的线和几何渲染功能，更优质的文本渲染，异步纹理创建和完全支持WebGL 2功能 （等同于OpenGL ES 3.0）。 Construct 2的运行目前支持WebGL 2，但只能修复一些无二次幂限制的纹理。 在Construct3中，我们使用WebGL 2的全部功能集来减少内存需求和提高性能。但这不是强制的，如果你的系统不支持WebGL 2，它仍然会使用WebGL 1。

在Construct2中，我们还必须在每个布局视图选项卡中使用单独的渲染器，这增加了内存使用。 在Construct3中，所有选项卡共享一个渲染器，消除了多个渲染器的开销，并确保资源只会被加载一次。

总的来说，这使得Construct3布局视图更强大，能够在编辑器中呈现高要求的内容。 我们还打算将改进的WebGL渲染器移植回运行时，但是由于运行时的不同要求，这不可能短期内实现。 然而，这项工作一旦完成，我们将能在编辑器和运行时拥有相同的渲染器 ，简化后期的维护并且确保渲染器所做的改进会同时影响两者。

我们对Construct 3布局视图进行的压力测试，运行仍然良好。

多线程处理

在浏览器中，Web Workers可以方便地在另一个线程上安全有效地运行Javascript，与主应用程序同步运行。 Web Workers专门设计用于避免其他语言的多线程代码所引发的令人讨厌的错误和竞争条件。 Construct3内部使用一个框架来给Web Workers分配任务，在所有可用的CPU内核中并行运行 ，从而最大限度地提高了多任务性能。 这用于并行处理精灵表单打包，精灵表单渲染，压缩/解压缩，音频编码/解码，和导出时图像重新压缩/脚本压缩。

此外，现代Web API慢慢开始提供异步功能，这也可以充分利用您的CPU内核。 我们会尽可能使用这些功能，如加载内容，异步创建WebGL纹理，处理图像和其他数据格式，以及网络功能。

asm.js组件和新的压缩器

Construct2使用的一些功能需要移植到浏览器中。 我们使用asm.js重构了这些功能，以便能够在浏览器中以类似的性能运行它们，并且通常将它们安排为多线程处理。 这些功能包括一个新的音频编码器，PNGCrush(用于批量压缩PNG图片)和zlib（用于读取zip文件）。

Construct 2在导出时使用的压缩器和混淆器是Google Closure Compiler，它是一个Java应用程序（请注意，Java与Javascript是不同的）。 令人烦恼的是，这需要安装Java来和Construct 2一起使用，并且编译到asm.js的工具目前不支持Java。 因此对于Construct3，我们使用babili ，一个基于主流JavaScript编译器Babel的新式Javascript压缩器，它本身就是用Javascript编写的。 这个压缩器最初没有Closure Compiler拥有的混淆功能，所以我们我们自己进行了编写 。

总的来说，这意味着您可以运行Construct 2的所有工具，从音频编码、脚本压缩和混淆，直接在浏览器中运行！ 我们还计划在未来研究将asm.js模块移植到WebAssembly，因为这样可以进一步提高效率。

没有更多的jQuery

作为一个额外的彩蛋，我们已经从Construct3的运行中删除了对jQuery的依赖。现代浏览器的支持已经足够了，jQuery不再是必需的，删除它简化了代码，使项目效率更高。

为了更容易移植插件，第三方插件仍然可以标示他们需要jQuery，在这种情况下，它仍然会像以前一样进行捆绑。 但是默认情况下Construct 3项目根本不会使用jQuery。 我们鼓励第三方开发人员从他们的插件中删除任何jQuery的依赖项。 访问youmightnotneedjquery.com查看用来替换的内置API列表。

Construct3框架

在开始Construct3的开发工作时，我们研究了许多现有的Javascript框架，确定它们不适合我们想要创建的软件类型。 所以Construct3使用了我们自己设计和开发的自定义框架。 这意味着我们可以完全控制Construct 3中的UI代码、允许我们根据我们的需要进行定制、沿堆栈一直修复bug、使用最新的web平台功能进行优化、游戏引擎级别的Javascript性能体验、超快的启动时间和最小的下载大小。

这个框架内部就是一个奇妙的区域，特别是因为我们创建了一个全新的方法来创建大型的网络应用程序。 我们会在未来通过博客来介绍更多的东西，但有一个成果我们想事先强调。 在网站平均下载大小是2.3mb的时候 ，我们已经决然地优化了Construct 3，以便能够以大约1MB的初始下载启动编辑器。 这意味着即使第一次加载它，它应该像加载一个普通的网页一样快。 它在后台不断缓存资源以供离线使用，并且示例项目是按需下载的，但您在开始使用Construct3前不必等待任何这些资源。这是一个很好的例子，可以解释自定义框架如何取得基于web状态相关的卓越成果。 与Construct 2的安装程序相比，这是一个更有效的启动方式，毕竟Construct2的安装包接近60mb，而且在下载完成后还需要其他的步骤。

结论

我们利用重写Construct 3编辑器的机会进行了重大的架构改进，例如编辑器精灵表单，新的多线程处理模块和得到很大改进的布局视图渲染器。 虽然Construct3是在浏览器中运行，但我们并没有减少功能集，我们移植或替换了Construct 2拥有的所有功能。 这也有助于让Construct 3使用起来更容易，因为没有必要安装其他框架，比如Java，而且所有这些功能可以无缝跨平台，从Windows到Android。 我们自己定制的框架允许我们突破典型Web内容的性能特征，另外，编辑器和运行都采用Javascript进行编写，这为共享代码带来了一些有趣的机会，比如使用WebGL渲染器。

我们认为浏览器技术有时会被误解为一种能力低和不灵活的技术。 我们认为将Construct移植到浏览器而且具有相同的功能集，同时做出一些显著的架构改进，所有这些都可以非常高效地提供给用户，这表明浏览器其实是一个强大和高能的应用程序平台。 不久我们将开始我们的公开测试版，所以到时候你可以自己看一看！