javascript - 将 HTML5 Canvas WebGL 游戏移植到 Flash ActionScript 3.0

标签 javascript actionscript-3 html5-canvas webgl porting

我创建了一个 HTML5 Canvas WebGL game一月份的 Mozilla Game On 2010 competition (很晚了,我知道——我直到昨天才发布它)。现在我想将它移植到 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 个 Canvas ,一个用于 3D 游戏,另一个覆盖它用于抬头显示器)。
  • 支持 ActionScript 中的向量和矩阵计算。
  • 如何在 Flash 中加载音频和 Sprite 等资源。

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

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

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

最佳答案

ActionScript 和 JavaScript 在核心上非常相似。在某些方面,您可以将 ActionScript 视为更像是在 ECMAScript 之上分层的强大库。存在一些差异(即 ActionScript 喜欢将自己视为基于类的 oop,而 JavaScript 是基于原型(prototype)的),但如果您对其中一个感到满意,那么您应该对另一个感到很自在。

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

var object:MovieClip = new MovieClip();

这会将 object 变量强类型化为 MovieClip 类的实例。

如果您的游戏非常注重 3D,那么您会想要了解一下新的 Flash 11 Stage3DContext3D类。这些公开了一个低级别的 GPU 加速 API,在 Flash 11 之前这是不可能的。您可以使用 Flash 10 制作有趣的 3D 作品,但您通常使用 drawTriangles() ,这不是硬件加速。 Flash 11 目前处于测试阶段,但应该很快就会发布。 Flex SDK 的 Beta 版本应该可以让您针对 Flash 11 播放器进行编译。

还有不少 3D 库构建在这些低级 API 之上。如果你四处寻找它们,它们很容易找到。但我建议在深入了解 3D 库之前,先深入了解 ActionScript 的工作原理。

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

的“顶部”

对于 Flash 11,StageVideoStage3D 对象直接位于舞台上方,但在附加到舞台的所有普通 flash DisplayObjects 后面.所以在那种情况下,我会让 Stage3D api 处理所有繁重的渲染工作,并为您的 HUD 元素使用传统的显示堆栈。

您可能还想捕获自己 Flash Builder通过 Flash CS5.5。如果你是一名程序员(我假设你是因为你在这里发帖),它不会让你的眼睛在尝试编码时流血。 FB 基于 eclipse,它相当不错但并不完美。但是,如果您拥有免费的 Flex SDK,并且不介意使用命令行,您就可以开始编译 swfs,非常快速且便宜(又名免费)。

另外,查看 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 代码。

内置类 Vector3DMatrix3D .

就教程或引用而言,我真的没有什么可以提供的。我发现 Internet 上关于 ActionScript 编程的大部分信息都非常随意(当您找到不是由图形设计师编写的内容时)。我会在 here 中挖掘看看你是否能找到任何对你有意义的东西。

显然,关于这方面我还可以深入探讨,但希望这能插入您朝着正确的方向前进。

关于javascript - 将 HTML5 Canvas WebGL 游戏移植到 Flash ActionScript 3.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7532725/

相关文章:

具有非 JS REST API 的 Javascript 服务器渲染库

javascript - 如何从 USB 端口向 HTML 网站发送信号?

javascript - 通过 HTML 表单 + JavaScript 将 JSON 结构提交给 MailChimp API

actionscript-3 - 在 Actionscript 3.0 中设置文本大纲/边框

actionscript-3 - 在 as3/AIR mobile 中从相机录制视频、叠加位图、添加音频、保存到设备

flash - Actionscript-3 命名空间和动态类型?

javascript - 单击时复选标记无响应

javascript - 检索存储在数组中的文本行并将它们显示在带有换行符的 Canvas 上?

javascript - 未捕获的类型错误 : Cannot call method 'add' of undefined (Kinetic js)

javascript - 为什么我的角色在 2D 横向卷轴中移动不顺畅?