UDN
Search public documentation:

ScaleformQuickStartCH
English Translation
日本語訳
한국어

Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 主页 > 用户界面 & HUD > Scaleform GFx > Scaleform GFx速成

Scaleform GFx速成


概述


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

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

quickstart.jpg

设置页面


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

样本文件
UI_QuickStart - Part 1
UI_QuickStart - Part 2
UI_QuickStart - Part 3
UI_QuickStart - Part 4
UI_QuickStart AS3 version (part 1 of 2)
UI_QuickStart AS3 version (part 2 of 2)

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

quickstart_scene.jpg

动画

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

实例名

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

instance_name.jpg

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

导入页面


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

publish_menu.jpg

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

folder_package.jpg

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

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

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

绑定页面


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

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

基本步骤如下:

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

UIScene_Profile.uc
  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视频)动作模块的属性中点击 use_selected_button.jpg 按钮使 Movie(短片) 应用该SWF。
  4. 设置 Movie Player Class(视频播放器类) 为之前步骤中的类,在这个示例中的类是UIScene_Profile。这个类是用于驱动上一步骤应用的视频的类。
  5. 启用 Take Focus(聚焦)Capture Input(捕捉输入) (前提为这是一个菜单而不是HUD),这将会聚焦该菜单并接受输入。

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

kismet_setup.jpg

现在点击 pie_button.jpg 按钮播放地图,该Scaleform界面显示如下。

quickstart_load.jpg

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

quickstart.jpg