如何便捷地将3D内容添加到你的Flash游戏中

需要下列Adobe产品：

• Flash Player 11 beta和 playerglobal.swc。请下载适用于你的OS（Windows、Mac、linux）的Flash Player以及浏览器（Internet Explorer和其它）–（下载beta）

其它附加要求的产品（第三方/实验室/开源）

• Flare3D 2.0预发布版本 (下载)
• 用于本项目的MyFirst_Flare3D 范例文件 (下载)

在Adobe Max（October 2010）大会期间，Adobe引入了名称为"Molehill"的Stage 3D代码程序，它是一种将本机3D 功能带入 Flash 11的低级技术。五个月之后，Adobe发布了一款名称为"Incubator"的支持Molehill的 开发人员版本的Flash Player，由此人们进入了 利用 Flash开发高质量3D内容的新时代。

Stage 3D为许多平台带来快速的2D和3D渲染技术并且使用相应的Stage3D API， 这是一组低级API集合，它们能够充分利用GPU并且在浏览器中产生快速的渲染效果。

Mixamo和 Flare3D 非常兴奋地宣布推出一个工作流程，该工作流程能够用作一个用户的角色，自动生成装备，应用动画效果并且通过几次点击将其带入Flash中。 该工作流程既简单也快捷。

游戏引擎工作流程的内容创建

任何利用Mixamo创建的动画角色能够通过 Flare3D的高质量互动渲染器方便地在浏览器中发布和显示。 Mixamo提供的动画效果能够自动地应用于由用户在Mixamo中创建的角色或他们上载的角色。

为了能够对一个3D角色提供动画效果，相应的模型需要由一个底层skeleton进行"驱动"。 实现mesh网络支持动画的任务包含于装配过程中，它包括创建一个skeleton，将mesh网络与相应底层skeleton绑定以及设置控件以便为角色生成动画效果。 如果用户选择上载他们自己的带有装备的角色，则他们能够选中和定制任何Mixamo动画效果并且能够自动地将其应用于角色。 非装备的mesh网络也能够上载并且由Mixamo Auto-Rigger自动提供装备，这将生成一个能够应用的、支持动画效果的skeleton。 如果用户没有可以上载的角色，Mixamo可以出售一组具有动画效果的角色以及一套avatar创建工具。 除了Mixamo的人类角色之外，它还提供能够四足移动的四足动物角色，其中包括龙、狗、马等动物。

用户能够使用 .fbx或 .dae 格式下载角色，这些格式能够用于Flare3D。 Flare3D 支持 Collada文件格式（.dae, Collada 1.4.1），这是 Mixamo输出的主要文件格式之一。 Mixamo动画能够通过使用几行 ActionScript语句在Flare3D中加载和显示。 例如，如果你从 Mixamo.com将Mixamo的Carl角色作为 collada 文件下载，则你只需输入 ：

scene.addChildFromFile( "Carl.dae" );

图1. 在浏览器中显示的 Mixamo 角色

F lare3D不仅能够播放动画，而且还支持使用play()、stop()、gotoAndPlay()、gotoAndStop()等Flash传统方法进行动画组合（blending）、暂停（pause）、快进/快退（play forward/backward）以及帧速的变更。你可以使用标签进行特殊动画的播放，例如：奔跑（run）、行走（walk）、闲逛（idle）、说话（talk）等等。

你可以在这里进行互动演示的测试（你需要安装the Beta version of Flash Player 11 才能观看该演示）： http://flare3d.com/demos/max/mixamo.html

Mixamo能够方便地用于生成3D角色动画，这为在Flash中完整运行的 avatar作品、体育游戏、MMO游戏、仿真和虚拟社区提供巨大的潜能。 通过使用Adobe的Stage 3D 技术，Mixamo和 Flare3D能够利用成千上万的多边形绘制大量的角色，并且通过动画、纹理和灯光互动性，为你的作品赋予活力。

图 2. 在Flare3D中运行的1000多个植皮角色

端到端使用案例

为了看一看在flash中运行动画角色是何等的简单，让我们讨论一下一个端到端的使用案例。

1. 获取一个角色

你可以使用你自己的3D角色模型或从在线市场找到的大量角色模型中挑选一个。 Mixamo 可以提供大量特许的免费装备角色，它们能够在Flash中随意进行修改和使用。 如果你无论通过什么方式已经获取一个装备角色（即具有动画效果的角色），则你可以跳转到步骤3. 否则，如果你的角色只是一个不带装备的mesh（在线购买的大多数角色均是如此），则步骤2将引导你了解对其进行装备的相应过程。 当你登录到 Mixamo之后，单击相应的标签，然后再单击大型按钮：Upload Your Own Character。 这样，你将会跳转到 Upload Character页面。 单击 Upload 按钮，页面将提示你选中需要上载的角色文件。 浏览至你需要上载的角色并且选中它。

2. 装备你的角色（假定角色仍不带装备）

在上载时，Mixamo Auto-Rigger 能够自动检测未装配的模型。 如果你已经上载一个不带skeleton的角色，则你将被带到一个你可以将它定位正面向前的页面。 在完成这一操作之后，单击Rig 按钮，此时，你将被提示在膝盖、手腕、肘和头等位置放置标记（参见图3）。 在放置若干标记之后，Auto-Rigger 将生成一个与角色的mesh绑定的 skeleton，它允许你在线实时预览、测试和调整装备。 一旦你满意自动装备调整的结果，则你可以使用Mixamo的实时动画系统为角色生成动画效果。

图 3. Mixamo Auto-Rigger

3. 应用动画效果

在为你的角色提供装备之后，你的角色将被放置于你的角色集中并且当你开始创建动画时可以使用它。 你可以在网站搜索字段中输入一个关键词，以便寻找适合你的游戏的动画效果。 你可以选中相应的动画，然后在Mixamo Sequence Editor中对其进行编辑。 一旦完成编辑，你可以调整动画的参数以及在你的序列中添加clip。 在编辑序列的任何时刻，你均可以选中正在进行动画处理的角色。 一旦一个动作应用于角色，你可以使用你喜欢的文件格式下载具有动画效果的角色。 在 Flare3D和 Molehill管线中，.dae (Collada 1.4.1) 文件格式是最佳选择 。

图 4. Mixamo序列编辑器（Sequence Editor）

4. 设置FLARE3D环境

目前，可以使用Flare3D在Flash中生成具有动画效果的角色。 为了利用Flash显示3D对象，需要使用一些编程代码。 在下列步骤中，我们假定已经从 Mixamo中下载一个名称为 walking_1.dae的文件。 这可以是你希望的任何dae文件，但针对这一脚本范例，我们将使用这一名称。

记住，只有在Stage 3D 的 beta版本之后，开发人员工具才能直接使用，并且它们需要人工配置。 这是一项复杂的任务，因此，我们将引导你了解相应的基本步骤。 相应的工作流程如下所示：

• 创建一个新的 Flash Project 并且对其进行适当地配置。
• 对组件进行组织并且了解应该将它们放置于项目中的位置。 （例如 .dae 文件）。
• 将相应的ActionScript链接到项目。
• 发布。

安装软件

你需要安装下列程序：

• Flash Builder：运行setup程序，然后遵循相应的指令。 默认选项即可满足需求。
• Flex SDK：该软件已经打包到一个Zip文件，因此，你需要将它解压到你的系统的一个特定目录中。 在本文中，我们将会将它解压到 "C:\flex_45_molehill" 中。
• Player 11 beta：Adobe 为该产品通过一个简单的setup程序。 只需运行它，然后遵循相应的指令即可。
• globalplayer.swc：浏览到你解压 Flex SDK的目录并且搜寻下列路径：
  "C:\flex_sdk_45_mole\frameworks\libs\player\10.2"。 利用新的 "playerglobal.swc" 替换当前的"playerglobal.swc"（注意新文件的名称很长，将它重新命名为 playerglobal.swc）。在页面的底部（here）可以直接下载新玩家。

图 5. 新文件必须重新命名为 playerglobal.swc

• Flare3D 2.0 文件是库。 将这些文件放置于容易获取的位置。 因为，不久我们将看到在什么位置使用它们。

注意：此时，你需要确保在你的浏览器中已经安装 Flash 11.0 或更高版本。 如果没有安装，则下列教程无法工作，因此，最好现在对此进行确认。 你可以单击这里查看一下你当前运行的Flash版本。

5. 创建一个新的Flash项目

启动Flash Builder并且选中File > New > ActionScript Project。

图6. 创建一个新的ActionScript项目

下一步，为你的新项目提供一个名称。 例如，在相应的文本字段中输入 MyFirst_Flare3D （参见图7）。

图 7. 在New ActionScript Project 对话框中选中Flex SDK version 4.5.1

单击finish按钮，你将看到如下所示的情形：

图8. 在你创建一个新的ActionScript 项目之后的Flash Builder视图

看一下左边的面板，这是相应的package explorer，在这里你可以看到项目的层级结构。 在这里，你具有两个相关的文件夹：放置源代码的"src" 和保存你的编译之后的Flash应用程序的"bin-debug"。 展开"src" 文件夹及其中的默认包，然后双击MyFirst_Flare3D.as。 这是项目中的main类，它表示当启动应用程序时将首先执行该文件中的代码。 在下列步骤中，我们将编写一些用于加载一个3D模型的必要的代码。

现在，我们需要进行最终的配置设置。 跳转到Package explorer，然后在根条目上（项目名称），右击并且选中 properties。 在左边的面板中，选中ActionScript Compiler。 这里你需要定义两种设置。 配置将要使用的Flex SDK，然后添加Additional 编译器参数，以便指明Flex 必须编译适用于Flash Player 11的应用程序。

图9. 在Project Properties中，使用 Installed Flex SDK版本 4.5.1

1. 单击Configure Flex SDK，将新的 SDK添加到项目中并且在列表中选中它。 点击OK。

图10. 添加一个编译器参数以便识别Flash Player版本

2. 跳转到Additional编译器参数，然后在结尾部分，添加下行代码：

-swf-version 13

添加Flare3D

正如前面所述，Flare3D是一个库，而且你需要将其引用到项目中。 为了实现这一目的，跳转到项目properties屏幕。 在左边的面板中，选中ActionScript Build Path。 单击Add SWC 按钮，然后浏览至包含于Flare3D分类的 lib文件夹中的 Flare3D_.swc。

图11. 将 Flare3D 库添加到 ActionScript Build Path中

6. 将内容导入FLASH BUILDER

编写ActionScript代码

这是一个简单步骤。 这里，你只需在Package explorer中打开 "MyFirst_Flare3D.as"，然后利用下列代码替换当前代码即可：

package { import flare.basic.Scene3D; import flash.display.Sprite; import flare.basic.Viewer3D; import flare.core.Pivot3D; import flare.loaders.ColladaLoader; public class MyFirst_Flare3D extends Sprite { private var scene:Scene3D; private var model:Pivot3D; public function MyFirst_Flare3D() { scene = new Viewer3D(this); scene.camera.setPosition( 200, 200, -300 ); scene.camera.lookAt( 0, 50, 0 ); model = scene.addChildFromFile( "./assets/walking_1.dae", null, ColladaLoader ); } } }

注意下行代码：

model = scene.addChildFromFile( "./assets/walking_1.dae", null, ColladaLoader );

这里，Flare3D 将从相应的 assets 文件夹中加载一个3D模型。 该文件夹包含3D Collada文件。

重要：如果你没有 assets文件夹，则你需要创建一个assets文件夹，这样使代码才有意义。 你可以通过右击bin-debug 、选中new然后再选中folder创建它。 将该新文件夹命名为 assets。

图12. 在 bin-debug文件夹中添加一个assets文件夹

将你希望加载的 Collada 文件放置在这里。

7. 制作STAGE 3D内容

在运行你的项目之前，你必须将几行文本添加到相应的html文件中。 右击 MyFirst_Flare3D.html，然后选中Open With > Text Editor。

在第49行，添加：params.wmode="direct";

在第 87行，添加：<param name="wmode" value="direct"/>

在第 90行，添加：<param name="wmode" value="direct" />

现在，你可以在浏览器中查看你的项目。

运行应用程序

在工具栏上单击run按钮。 浏览器将启动，然后你将看到你的Flare3D项目开始运行。

图13. 如需看到你的 Flare3D 项目的运行状态，单击 Run按钮

你的默认浏览器将启动，它能够显示加载的文件。 记住核查启动的浏览器是否运行Flash 11 或更高版本。

图14. 使用 Flash Player 11的浏览器运行你的Flare3D 应用程序

你可以在这里下载相应的源代码。 如需在Flash Builder 中加载它，你需要将ZIP内容解压，然后在File菜单中选中Import Flash Builder Project。

下一步阅读方向

关于使用 Mixamo、Flare3D和 Stage 3D的更多教程、演示和信息，请 访问mixamo.com的相关资源页面。

Mixamo、Flare3D及未来展望

正如你已经看到的那样，即使在现在的早期阶段，Flare3D也支持通过简单的工作流程在浏览器中显示Mixamo角色和动画。 Mixamo和 Flare3D 均在不断地寻找提升开发人员效率的方法，这样他们可以集中精力创建内容、游戏和应用程序，而不需要编写那些能够自动完成的耗费时间的任务。

Mixamo 提供了第一款在线3D角色动画服务，并且为3D游戏开发人员提供了以前所未有的速度定制和创建专业级质量角色动画的功能。 此外，Mixamo 最近发布了一款革命性的Auto-Rigger，它能够在一分钟之内装备一个角色并且在几秒钟之内为其生成动画效果。 这一技术组合允许Mixamo用户在制作产品时移动更为迅速。 因为Mixamo可以输出非私有的文件格式，并且该用户具有控制权。 通过Mixamo自动装备的角色能够由3D画家/专业人员进行进一步修改以满足特定标准。 在开发过程中，动画制作者能够在任何时刻调整或更改下载的动画。 Mixamo 的设计宗旨是提升第三方画家的能力，以便通过支持实时高级编辑在更为专业的水平上更快及更经济地实现他们的愿景目标。

Flare3D 是为Flash创建 3D 内容的平台，它能够充分利用Molehill GPU渲染功能。 通过 Flare3D 为Flash生成的内容不需要任何附加的插件。 的确有一些因素使得开发人员能够受益于使用Flare3D生成内容。 例如，在没有3D框架协助的情形下使用 Stage 3D 不是轻而易举的事，并且它要求掌握超出大多数Flash开发人员知识范围的许多特定 3D概念的知识。 Flare3D 能够化繁为简。 通过Stage3D API在Flash中显示3D对象需要编写数百行代码。 而通过Flare3D，只需两行即可。

此外，Flare3D还计划在不久的将来发布一个名称为 Flare Studio的IDE，它能够使得开发和处理 Stage3D 的内容变得更加简便但更为有效。

Flare Studio 能够为用户提供向任何支持Flash的平台发布Mixamo 3D 动画的功能，这些平台包括PC、Mac、iOS、Android 和RIM Playbook。

Mixamo 仍在继续建立自己的定制内容库并且开发支持 Auto-Rigger的相关技术。

如需了解关于 Mixamo 或Flare3D的更多信息，请访问他们的网站http://www.mixamo.com和Flare3D.com，并且敬请期待 Flare3D的IDE的发布。

Stage 3D原先的代码名称是 "Molehill"，它是由Adobe开发并且通过一个新的Stage3D API支持的 2D和 3D渲染的一个新方法/模型。 关于更多相关信息，请访问Stage 3D on Adobe Labs。