UDN
Search public documentation:

Scaleform
日本語訳
中国翻译
한국어

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 Home > User Interfaces & HUDs > Scaleform GFx

Scaleform GFx


ScaleFormHome.jpg

Scaleform GFx provides a means of using motion graphics created in Adobe Flash Professional as user interfaces and heads-up displays in Unreal Engine 3. These can be rendered directly to the screen or rendered as textures which can be used in materials and applied to geometry within the world. Scaleform GFx puts the power to design UIs into the hands of the artist, providing a collection of premade widgets designed specifically for use in games and built-in support for effects such as animation.

With its integration into Unreal Engine 3, Scaleform allows UnrealScript as well as Kismet's visual scripting to work in conjunction with Flash's scripting language ActionScript to create engaging, interactive interfaces that take advantage of Flash's motion graphics capabilities and the developers' familiarity with Unreal Engine 3's tools.

For more documentation on working with Scaleform GFx in general, especially CLIK components, see the official Scaleform Documentation site.

ALERT! Note: While most of the documentation available is built on Scaleform 3.0, they are still applicable to Scaleform 4.0.

  • gs_scaleform.jpg
    Information for those starting out creating user interfaces and HUDs using Scaleform GFx in Unreal Engine 3. Setting Up Flash for Scaleform - Basic Scene Quick Start - Workflow Tips - Terminology

Essential Reading

Technical Topics

Content Topics

Tutorial Topics

CLIK Topics

Official Scaleform Documentation and Tutorials
  • Scaleform UDK Documentation - Official Scaleform 4.0 UDK documentation.
  • Importing a SWF - This video discusses a few important rules when creating and importing Flash content into UDK.
  • Render Textures & Materials - This video discusses creating the render texture and material necessary to display interactive Flash content on a BSP surface in a UDK level.
  • Adding a SWF to a BSP Object - In this video we cover the steps needed to add a Flash file onto a BSP surface, including the necessary Kismet workflow.
  • Capturing Input - In this video we explain how to use a GFx capture key kismet node to route keyboard and game controller inputs to a Flash file. This then interprets that input and enables you to rotate a movie clip in 3D.
  • Using Invoke ActionScript & FSCommands - In this video we cover the use of Invoke ActionsCript in Kismet, which allows you to call an ActionScript function in the Flash file from UDK. We'll also cover sending a command back to UDK from the Flash file via FS Commands.
  • Creating Custom Menus - In this sixth UDK video tutorial, we'll show you the basics of how to create a custom menu system using Scaleform GFx and UnrealScript.
  • Using Scaleform 3Di Flash AS2 Extensions to Create 3D UI - This video will explain how to translate and rotate movie clips in 3D space using our new 3Di ActionScript 2 extensions in Scaleform GFx 3.2 and higher.
  • Working with Fonts - In this seventh UDK video tutorial, we'll show you everything you need to know to properly use fonts in Flash and the September 2010 build of UDK.
  • Mastering a Scaleform HUD
    1. HUD Overview - This is part one of a four part series which will take you file by file, asset by asset through the September 2010 UDK Scaleform HUD.
    2. UTGFxHudWrapper.uc - This is the second video explaining how the September 2010 UDK Scaleform HUD was put together. In this video I go over the basic construction of the UTGFxHudWrapper.uc class, and spend some time detailing how the pause menu is opened and closed as part of the HUD.
    3. GFxMinimapHud.uc - Part 1 - This is the third video explaining how the September 2010 UDK Scaleform HUD was put together. In this video I go over the first half of the GFxMinimapHud class, as well as the udk_hud Flash file.
    4. GFxMinimapHud.uc - Part 2 - This is the fourth video explaining how the September 2010 UDK Scaleform HUD was put together. In this video I go over the second half of the GFxMinimapHud class.
  • Getting Started with CLIK
    1. Initial Setup - In this tutorial, we'll show you how to use the new component lightweight interface kit, or CLIK to rapidly prototype a basic front end menu system, which will include a main menu and an options screen, all composed of core CLIK components such as buttons, sliders, options steppers, and radio buttons.
    2. Main Menu Setup - In step two, we'll add some basic functionality to the main menu.
    3. Creating the Options Screen - In step 3, we'll make the button on the main menu take the user to the options screen, and we'll also add a difficulty settings option stepper as our first option.
    4. Checkboxes, Radio Buttons, & Sliders - In step 4, we'll add several new components, including video settings check boxes, radio buttons, and a volume slider.
    5. Adding Functionality - In step 5, we'll add the ok and cancel buttons, as well as some functionality to the difficulty settings option stepper and the radio buttons.
    6. Retaining Changes - In step 6, we'll set up the options screen so that it retains any changes the user makes, once the OK button is pressed.
    7. Adding a Background - In this tutorial we'll show you how to skin the components which make up the menu we created in tutorials 1-6. We'll break the process into eight steps. In step we'll add a background graphic to the menu.
    8. Importing a Background - In this step, we'll import a graphic created in Adobe Photoshop to serve as a window for our options screen. We'll also align components to fit the window, and duplicate a component so we have two differently skinned versions of it.
    9. Skinning the Main Menu Button - In this step, we'll skin the main menu button.
    10. Skinning the OK and Cancel Buttons - In step ten, we'll skin the ok and cancel buttons.
    11. Skinning the Sound Slider - Step eleven will cover skinning the sound slider.
    12. Skinning the Checkboxes - We'll skin the video settings checkboxes in step twelve.
    13. Skinning Radio Buttons - We'll cover skinning the video settings radio buttons in this step.
    14. Skinning an Option Stepper - The final step in Getting Started with CLIK will cover skinning the difficulty option stepper.
  • Scaleform User Interface Design - Matt Doyle live at Unreal University held at MIGS 2011.

Scaleform GFx Integration


The Scaleform GFx integration in Unreal Engine 3 includes:

  • GFx runtime player with 3Di rendering (Flash 8 currently supported, Flash 10 coming soon)
  • CLIK Flash UI Framework
  • Scaleform IME for Asian language chat support
  • AMP profiler for performance and memory
  • Game UI samples - HUD, menu, 3d inventory, and loading screen
  • Docs, videos, and demos

The following are not included in the integration:

  • Scaleform Video is NOT included with UE3 / UDK. For an additional cost UE3 licensees (with source access) that would like an integrated video solution within their Flash content can add Scaleform Video by contacting Scaleform Sales. Note: Scaleform Video is not available to UDK users as source access is required to be able to integrate Scaleform Video.
  • Content authoring tools. You will need some method of authoring Adobe Flash compatible content. Scaleform provides official support for content produced by the Adobe Flash toolset, which is included as part of the Adobe Creative Suite. Alternative tools, such as Sothink SWF Quicker, are also available, but are not officially supported by Scaleform.

Please check out the Scaleform website for the latest updates from Scaleform. Scaleform and GFx are registered trademarks of the Scaleform Corporation. Scaleform GFx © 2011 Scaleform Corporation. All rights reserved.

Adobe and Flash are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

The Scaleform GFx license is included at no cost for all UE3 licensees and UDK users (both commercial and non-commercial).

Support


For UDK users, Scaleform and Flash support will be provided by the community through the UDK forums and UDN online docs, samples and videos.

Commercial UDK developers may be interested in Scaleform's Premium Support, which is available for an additional fee directly from Scaleform and includes:

  • Access to the Scaleform dev site - latest Scaleform docs, samples and videos.
  • Direct email and phone support with Scaleform senior engineers.
  • Private forums managed and responded to by Scaleform senior engineers and other commercial game developers.

Most UDK developers should not need the Premium Support, however, we wanted to make sure you know it's available before you start emailing us for access to the Scaleform dev site and technical support questions. To inquire about Scaleform Premium Support, please email sales at Scaleform.

UDK Example UI Files


Basic Scene using CLIK buttons and labels

See \UnrealEngine3\UDKGame\Flash\example\udk_GFxCLIKBasicScene.fla.

udk_GFxCLIKBasicScene.jpg

This is the file created through an earlier example in this document. In includes two CLIK buttons, and drives the text of a single label via clicking the buttons. It is an example of setting up the buttons to respond to a click or press and execute the function.

Controller Button Input Sample

See \UnrealEngine3\UDKGame\Flash\example\udk_GFxControllerButtonInput_Sample.fla

udk_GFxControllerButtonInput_Sample.jpg

This file illustrates the use of the handleInput, and setting up controller button presses to drive functions and actions within your UI. In order for this to work properly, with the XBox 360 Controller button graphics not being actual selectable buttons (similar to buttons in a button bar within a UI), an invisible CLIK button needed to be added and given focus. To call a controller button press, the names are:

  • GAMEPAD_A
  • GAMEPAD_B
  • GAMEPAD_X
  • GAMEPAD_Y
  • GAMEPAD_R1
  • GAMEPAD_R2
  • GAMEPAD_R3
  • GAMEPAD_L1
  • GAMEPAD_L2
  • GAMEPAD_L3
  • GAMEPAD_START
  • GAMEPAD_BACK

To preview the SWF, it must be viewed in the GFx Player, not the Adobe Flash Player. The ActionScript within the .fla is documented and explains in detail what each piece is doing.

Download Samples

May QA Release part 1 part 2 part 3 part 4 part 5 part 6 part 7 part 8
June QA Release part 1 part 2 part 3 part 4 part 5 part 6 part 7 part 8
July QA Release part 1 part 2 part 3 part 4 part 5 part 6 part 7 part 8
August QA Release part 1 part 2 part 3 part 4 part 5 part 6 part 7 part 8 part 9 part 10 part 11
October QA Release part 1 part 2
November QA Release part 1 part 2 part 3 part 4 part 5 part 6
December QA Release part 1 part 2
January 2011 QA Release part 1 part 2
February 2011 QA Release part 1 part 2
March 2011 QA Release part 1 part 2
April 2011 QA Release part 1 part 2
May 2011 QA Release part 1 part 2
June 2011 QA Release part 1 part 2
July 2011 QA Release part 1 part 2
August 2011 QA Release part 1 part 2
September 2011 QA Release part 1 part 2
October 2011 QA Release part 1 part 2
November 2011 QA Release part 1 part 2
December 2011 QA Release part 1 part 2
January 2012 QA Release part 1 part 2 part 3 part 4

ALERT! Please contact Scaleform for audio and video integration support.