将 HTML5 Canvas WebGL 游戏移植到 Flash ActionScript 3.0答案

【问题标题】：Porting an HTML5 Canvas WebGL game to Flash ActionScript 3.0将 HTML5 Canvas WebGL 游戏移植到 Flash ActionScript 3.0
【发布时间】：2011-11-23 20:48:25
【问题描述】：

我在一月份为Mozilla Game On 2010 competition 创建了一个HTML5 Canvas WebGL game（我知道已经很晚了——我直到昨天才发布它）。现在我想将它移植到 Flash ActionScript 3.0 以完成大学作业。

我精通两种静态语言，如 C/C++ 和 Java；以及 Python 和 JavaScript 等动态语言。不过我不知道 ActionScript，但因为它是 ECMAScript 的一个子集，所以应该很容易理解。

我想学习 ActionScript 3.0 中的编程，以便能够将我的游戏移植到 Flash 中。更具体地说，我想了解更多关于：

ActionScript 与浏览器和服务器端 JavaScript 有何不同，以及基础知识。
ActionScript 中的 OpenGL 编程（包括加载纹理、着色器等）。
如何使用类似 API 的 2D HTML5 Canvas 在 Flash 中创建 HUD（在我的游戏中，我有 2 个画布，一个用于 3D 游戏，另一个用于平视显示器）。
支持 ActionScript 中的矢量和矩阵计算。
如何在 Flash 中加载音频和精灵等资源。

如果您能给我提供一个页面链接，我将不胜感激，我可以通过该链接了解有关这些主题的更多信息。更直接的动手方法会更好。

如果您能检查我的 JavaScript 源代码并建议我解决此问题的最佳方法，那将会更有帮助。

main game engine 的代码和game 本身可以在我的Github repository 中找到。

【问题讨论】：

为什么要将 HTML5 移植到闪存。用例是什么？
Flash 真的很烦人，我同意。但是，我的大学已经过时了。讲师不接受Flash以外的任何多媒体。别问我——教育系统很烂！ =(
糟透了：\。编写与那些 flash -> html5 编译器相反的内容。然后在html5中做
是的，我知道。 HTML5 比 Flash 更好。但是，它不会让我在大学里获得分数。当我了解更多相关信息时，也许我会创建一个 SWF 到 SVG + Canvas 转换器。

标签： javascript actionscript-3 html5-canvas webgl porting

【解决方案1】：

ActionScript 和 JavaScript 的核心非常相似。在某些方面，您可以认为 ActionScript 更像是一个强大的库，位于 ECMAScript 之上。有一些区别（即 ActionScript 喜欢将自己视为基于类的 oop，而 JavaScript 是基于原型的），但如果您对其中一个感到满意，那么您应该对另一个感到满意。

ActionScript 有一个基于类的继承系统并支持接口（但如果你愿意，你仍然可以做一些原型魔法，但不推荐这样做）。它还支持强类型对象。

var object:MovieClip = new MovieClip();

这会将object 变量强输入为MovieClip 类的实例。

如果您的游戏是 3D 密集型游戏，那么您将需要研究新的 Flash 11 Stage3D 和 Context3D 类。这些暴露了在 Flash 11 之前无法实现的低级 GPU 加速 API。您可以使用 Flash 10 制作有趣的 3D 内容，但您通常使用drawTriangles()，它没有硬件加速。 Flash 11 目前处于测试阶段，但应该很快就会推出。 Flex SDK 的 beta 版本可以让您针对 Flash 11 播放器进行编译。

还有很多 3D 库是建立在这些低级 api 之上的。如果你四处寻找它们，它们很容易找到。但我建议在深入了解 3D 库之前对 ActionScript 的工作原理有一个深入的了解。

无论您使用 Flash 11 还是 Flash 10，Flash 中的 HUD 内容都很简单。对于“经典”Flash，您需要熟悉他们在 Flash 中使用的 display tree 概念。只需确保显示顺序正确，您的 HUD DisplayObject 将始终位于渲染 DisplayObject 的“顶部”

对于 Flash 11，StageVideo 和 Stage3D 对象直接位于舞台上方，但位于附加到舞台的所有普通闪光灯 DisplayObjects 后面。因此，在这种情况下，我会让Stage3D api 处理所有繁重的渲染工作，并为您的 HUD 元素使用传统的显示堆栈。

您可能还想通过 Flash CS5.5 抓住自己的 Flash Builder。如果您是程序员（我假设您是程序员，因为您在这里发帖），它不会让您在尝试编码时流血。 FB 是基于 Eclipse 的，它相当不错但并不完美。但是，如果您自己使用免费的 Flex SDK，并且不介意使用命令行，您就可以开始编译 swf，非常快速且便宜（又名免费）。

另外，请查看FlashDevelop。我已经有一段时间没有使用它了，因为它的内置分析器切换到 FB，但它可能对你有用。

Importing images and audio 使用 Flex SDK 非常简单。

[Embed(source="logo.gif")]
public var LogoBitmapData:Class;

然后实例化该类：

 var bitmapData:BitmapData = (new LogoBitmapData()) as BitmapData;

然后在任何你想用的地方使用它。

只是关于 Flex 的说明。 Flex 是一组建立在普通 Flash API 之上的 UI 库，Flex SDK 包括用于编译 MXML 和 ActionScript 代码文件的库和工具。因此，尽管听起来您应该使用 Flex SDK 来编译 Flex 应用程序，但您也可以使用它来编译直接的 ActionScript 代码。

Vector3D 和 Matrix3D 有内置类。

至于教程或参考资料，我真的没有任何可提供的。我发现 Internet 上有关 ActionScript 编程的大部分信息都非常受欢迎或遗漏（当您可以找到不是由图形设计师编写的东西时）。我会在here 中挖掘，看看你是否能找到任何对你有意义的东西。

显然，我可以对这些内容进行更多讨论，但希望这会推动您朝着正确的方向前进。

【讨论】：

【解决方案2】：

欢迎来到 AS3 :)

@32bitkit 在 IDE 信息方面击败了我，但我绝对推荐 Flash Builder。如果您要进行任何真正的 AS3 工作，这是一个真正的工具，而且物有所值。

就实际教程而言，Senocular 以编写一些最好的内容而闻名。他有很多很棒的教程here，但以下两个是特别优秀的 AS3 入门教程：

AS3 Introduction in Flash CS3 这个教程很好，因为它解释了 AS2（非常类似于 JavaScript）和 AS3 之间的区别。忽略它基于使用 Flash“IDE”这一事实。
AS3 Introduction Without Learning Flex 这个很有用，因为它更多地介绍了语言本身，没有 IDE 或 Flex 框架的所有陷阱。它将帮助您理解语言本身。

如第二个教程所示，基于 AS3 的项目将从 flash.display.Sprite 类继承。您可以查看该here 的文档。也许这听起来很傻，但只要浏览AS3 Reference docs，您就会真正了解很多关于 AS3 的知识。 Adobe 在这些方面做得很好。

在 AS3 中需要注意的另一件事是如何处理事件。 This tutorial 解释了 EventDispatcher 类如何作为事件管理的基础。您可以使用内置事件或调度您自己的事件。

HTH！

【讨论】：