Scaleform GFx速成

概述

在虚幻3引擎中用Scaleform新建您第一个菜单或HUD，并让它在引擎中工作，听起来有些难度。但是，这个过程简单方便。您必须具有Adobe Flash专业版本 (或等同的版本），并要清楚它如何使用，因为我们不会深入研究如何在Flash里设置每一个元素。这里的目的是逐个击破所有必要重点，设置Scaleform界面，使其在UE3中运行，而不是怎样使用Scaleform或flash自身。

这里的目的是逐个击破所有必要重点，设置Scaleform界面，使其在UE3中运行，而不是怎样使用Scaleform或flash自身。再次说明，这里的重点只是让您知道如何快速地设置一个运行的Scaleform界面，在虚幻3中使用。

设置页面

页面完全设置在Flash中，这样做的目的是让用户在使用界面时，方便地进行放元素、修改元素、以及元素动画制作的操作。我们不会逐个深入讲解页面中的每个设置，但是我们会浏览一下页面是如何构成的。您能用以下下载链接所提供的Flash文件进行下面的操作，或使用这些信息创建您自己的示例。想要获取更多详细的关于使用Scaleform GFx的文档，特别是CLIK组件，请访问官方网站： Scaleform Documentation site 。

该页面包括一个背景图片、一个显示信息的标签、若干可输入/显示数值的文本域和两个用于保存或关闭菜单的按钮。

动画

除了背景图片外，每个元素也都有动画，即当菜单开启时，这些元素会从屏幕外进入。显然，这并不十分必要，只是举个例子展示一下动画是如何处理的。

实例名

需要特别注意的是，任何一个您想在UnrealScript(Unreal 引擎脚本)中访问的对象必须设置唯一的*InstanceName(实例名)* 。这就在页面中辨别元素的方法，它并且这还能使您获得那些对象的引用。在这个范例中，每个元素都要设置 实例名 ，虽然我们以后并不需要访问所有的元素。最明显的就是和文本输入组建相配套的三个标签。对我们来说，没有必要访问这些静态标签。但是如果您正在本地化菜单中的文本，您的确需要访问这些元素。

enableInitCallback(启用Init回调)

要使UnrealScript(Unreal脚本)通知一个CLIK控件，则必须启用Flash中CLIK控件上的 enableInitCallback(启用Init回调) 属性。任何您需要在UnrealScript中访问的控件都应启用该属性，这样控件就能得到WidgetInitialzed(控件初始化) 的回调。该属性默认启用，但不对任何不需要UnrealScript(Unreal脚本)识别的对象启用。

指针

在Scaleform界面中显示指针非常简单 添加一个视频短片到使用指针图形的页面，然后再添加一些新的ActionScript(动作脚本)到该页面，这个动作脚本规定视频短片的指针指到鼠标每次更新的位置。

通过将指针图形导入到图层中并将其转换为MovieClip标记来创建该指针视频短片。然后把它放进一个叫 Cursor(指针) 的层，这个层在 Action(动作) 层的下面，但在其他所有层之上。

添加ActionScript(动作脚本)：

1. 选中视频短片指针，然后点击 F9 打开Actionscript(动作脚本)编辑器
2. 添加以下代码：
   Cursor ActionScript

      onClipEvent(enterFrame)
      {
            _X = _root._xmouse;
            _y = _root._ymouse;
      }
      

图片

您在Flash中使用的图片会同页面自动导入，但是为了避免发生任何问题，需要对图片进行合理的设置。

准备导入图片：

1. 选中 Library(库) 面板中的图片并在图片上右击，选中 Properties(属性) 。
2. 在 Bitmap properties(位图) 对话框中，选中 Allow Smoothing(允许平滑) 并把 Compression(压缩) 选项设置为 Lossless (PNG/GIF) (无损性(PNG/GIF)
   
3. 点击 显示高级属性。
4. 在 Linkage (链接) 选项中，勾选 Export for ActionScript(为动作脚本导出) ，然后在 Identifier(标识符) 区域中把文件名后的扩展名从图片的文件名中删除 (包括周期)等。
   
5. 点击 图标保存修改。
6. 最后，原始图片文件应该存放在同SWF文件名一样的文件夹中(同SWF文件路径相同)。

导入页面

一旦该页面在Flash中建立，它还需要转换到Unreal引擎中，这样它才能在游戏里使用。第一步是将页面从Flash中发布到一个.swf文件中。当您开启Scaleform Launcher(Scaleform启动器)浏览页面时，它会自动执行上述步骤，但是您也可以打开 File(文件) ,在 File(文件) 菜单中选择 Publish(发布) ，或者按 Shift+F12 进行手动发布。

发布过的.swf文件应放在 [GameName]\Flash 路径所在文件夹,该文件夹名是您的目标swf文件导入Unreal引擎中的包的名字。该文件夹同即将导入.swf的包直接关联，并且在导入阶段不能修改。您可以有选择性地在包内设置子文件夹以体现出分组情况。

要确保已经发布的.swf文件最终能保存正确的路径，最简单的方法就是在最初就在目标路径保存Flash文件(.fla)。这样发布的文件就会默认按照该路径保存。

页面发布后，您就能通过 UnrealEd(Unreal编辑器)^?中的Content Browser(内容浏览器)把它导入到虚幻引擎中，或使用 GFXIMPORT commandlet(GFX导入命令行开关 来执行该操作。按照该范例来执行，导入内容浏览器的步骤就完成了。

1. 打开虚幻编辑器，找到内容浏览器，然后点击 按钮。
2. 在显示为 SWF Movie (*.swf)*的文件浏览器上修改文件类型筛选并找到您已发布的.swf文件路径
3. 选中该文件并点击 按钮。
4. 在 Import(导入) 对话框中，在 Package(包) 、 Group(组) 和 Name(名称) 区域都已填好内容，这些地方都是灰的，不能修改。
   在这里使用默认设置就行。点击 按钮导入页面。
5. 一旦导入步骤完成，SWF和它包含的任何图片都将会在内容浏览器中显示。
   

绑定页面

以下UnrealScript(Unreal脚本)是驱动我们的Scaleform界面的UnrealScript类的事例。GFx短片播放器分类是所有Scaleform界面的基础分类。它通过 movie(视频) 属性关联一个swf文件，并能从该界面接受事件，向界面传递命令，也能在相关界面中访问界面元素。

如果您是新手，请阅读Custom UnrealScript Projects获取如何添加新的UnrealScript（Unreal脚本)项目的信息。

基本步骤如下：

• 视频播放器开启视频 - Start()
• 视频播放器已经初始化 - Advance()
  • 为所有启用*enableInitCallback* (启用Init回调)属性的元素调用WidgetInitialized 函数。
  • 保存引用到所需控件- 任何在页面中我们所要访问的对象必须有一个保存过的引用。
  • 为在按钮上的点击事件应用代理-使用了Widget bindings(控件绑定)，以便传递给按钮的WidgetInitialized 的控件是GFxCLICKWidget类型，这种类型的控件可以添加事件监听器。
• 当点击按钮时调用代理。
  • 保存按钮-使用玩家输入的信息改变消息
  • 退出按钮-关闭界面

class UIScene_Profile extends GFxMoviePlayer;

/** 对用于将消息显示在 UI 上的标签的引用 */
var GFxObject MessageLabel;

/** 对用于输入玩家名称的文本字段的引用 */
var GFxObject PlayerText;

/** 对用于输入玩家头衔的文本字段的引用 */
var GFxObject TitleText;

/** 对用于输入玩家家族的文本字段的引用 */
var GFxObject ClanText;

/** 对用于保存玩家资料信息的按钮的引用 - 因为我们希望得到 GFxCLIKWidget，所以必须添加一个窗体控件绑定 */
var GFxCLIKWidget SaveButton;

/** 对用于关闭 UI 的按钮的引用 - 因为我们希望得到 GFxCLIKWidget，所以必须添加一个窗体控件绑定 */
var GFxCLIKWidget ExitButton;

// 在打开 UI 开始视频播放时会调用
function bool Start(optional bool StartPaused = false)
{
	// 开始播放视频
    Super.Start();

	// 初始化视频中的所有对象
    Advance(0);

    return true;
}

// 启用 enableInitCallback 后会为视频中的每个对象自动调用回调函数
event bool WidgetInitialized(name WidgetName, name WidgetPath, GFxObject Widget)
{
    // 确定进行初始化的窗体控件，并相应地对它进行处理
    switch(Widgetname)
    {
        case 'messageLabel':
        	// 保存对可以向玩家显示消息的标签的引用
            MessageLabel = Widget;
            break;
        case 'playerText':
        	// 保存对玩家名称的文本字段的引用
            PlayerText = Widget;
            break;
        case 'titleText':
        	// 保存对玩家头衔的文本字段的引用
            TitleText = Widget;
            break;
        case 'clanText':
        	// 保存对玩家家族的文本字段的引用
            ClanText = Widget;
            break;
        case 'saveButton':
        	// 保存对可以保存玩家资料信息的按钮的引用
		// 将 Widget 转换为 GFxCLIKWidget 允许进行事件监听 - 请参阅 WidgetBindings
            SaveButton = GFxCLIKWidget(Widget);
            // 在点击这个按钮的时候添加代理
            SaveButton.AddEventListener('CLIK_click', SavePlayerData);
            break;
        case 'exitButton':
        	// 保存对可以关闭 UI 的按钮的引用
		// 将 Widget 转换为 GFxCLIKWidget 允许进行事件监听 - 请参阅 WidgetBindings
            ExitButton = GFxCLIKWidget(Widget);
            // 在点击这个按钮的时候添加代理
            ExitButton.AddEventListener('CLIK_click', CloseMovie);
            break;
        default:
        	// 如果不是我们要找的窗体控件，那么继续传递
            return Super.WidgetInitialized(Widgetname, WidgetPath, Widget);
    }

    return false;
}

// 添加通过使用输入的数据更改消息的代理
//在一个真实的游戏情境中，数据将被保存在某处
function SavePlayerData(EventData data)
{
    // 只在左鼠标按钮上
    if(data.mouseIndex == 0)
    {
    	// 使用输入的资料信息设置消息标签的文本属性
        MessageLabel.SetString("text", "Welcome,"@PlayerText.GetString("text")@"("$TitleText.GetString("text")@"in"@ClanText.GetString("text")$")");
    }
}

// 添加用于关闭视频的代理
function CloseMovie(EventData data)
{
    // 只在左鼠标按钮上
    if(data.mouseIndex == 0)
    {
    	// 关闭 UI
        Close();
    }
}

defaultproperties
{
    // 要使用的导入 SWF
	MovieInfo=SwfMovie'UDNHud.UI_QuickStart'

    // 设置窗体控件绑定，这样可以将 Widget 传递给它
    // 按钮的 WidgetInitialized 是 GFxCLICKWidget
    WidgetBindings.Add((WidgetName="saveButton",WidgetClass=class'GFxCLIKWidget'))
    WidgetBindings.Add((WidgetName="exitButton",WidgetClass=class'GFxCLIKWidget'))

    // 设置视频的属性
    // TimingMode=TM_Real 可以使菜单在游戏暂停的时候运行
    bDisplayWithHudOff=TRUE
    TimingMode=TM_Real
	bPauseGameWhileActive=TRUE
	bCaptureInput=true
}

测试页面

现在是时候检测游戏中的页面，以确保它能如预期正常运行。这十分简单。您所需要的只是一张可以运行的地图，在地图加载时，用一个小型kismet来打开短片。当然，您于何时、如何加载任一界面完全取决于您界面的类型。HUD是通过UnrealScript(虚幻脚本)处理的，所以它是实时加载的。主菜单可同先前描述的那样，通过kismet进行加载。或者游戏菜单可以使用任何一种方法进行加载。对测试来说，用Kismet可能是最简单的方法。

要打开在kismet中的Scaleform视频：

1. 添加一个 Level Loaded(关卡加载) (New Event(新事件)> Level Loaded(关卡加载))事件和一个 Open GFx Movie(打开GFx短片) 动作(New Action(新动作) > GFx UI(GFx界面) > Open GFx Movie(打开GFx视频))
2. 在Level Loaded事件模块中，把 Beginning of Level(关卡起始) 输出口链接到 Open GFx Movie(打开GFx视频) 动作的 In 输入端。
3. 选中在内容浏览器中导入的SWF文件，并在Open GFx Movie(打开GFx视频)动作模块的属性中点击 按钮使 Movie(短片) 应用该SWF。
4. 设置 Movie Player Class(视频播放器类) 为之前步骤中的类，在这个示例中的类是UIScene_Profile。这个类是用于驱动上一步骤应用的视频的类。
5. 启用 Take Focus(聚焦) 和 Capture Input(捕捉输入) (前提为这是一个菜单而不是HUD)，这将会聚焦该菜单并接受输入。

最终的设置应为以下效果：

现在点击 按钮播放地图，该Scaleform界面显示如下。

当您的鼠标移动时，指针也会移动，而且这两个按钮应该引发一些适当的动作： 修改信息界面或关闭界面。

• UI_QuickStart_AS3.part1.rar: UI_QuickStart的AS3版本

• UI_QuickStart_AS3.part2.rar: UI_QuickStart的AS3版本