Scaling Modes

The calls to GFx::Movie::SetViewport keep the viewport dimensions equal to the screen resolution. If the aspect ratio of the screen is different than the native aspect ratio of the Flash content the interface may become distorted. Scaleform provides functions to:

• Maintain the aspect ratio of content or allow it to stretch freely.
• Position content relative to the center, corners, or side of the viewport.

These functions are very useful for rendering the same content on both 4:3 and widescreen displays. One of the advantages of Scaleform is that scalable vector graphics enable content to resize freely to match any display resolution. Traditional bitmap graphics typically require artists to create large and small versions of bitmaps for different screen resolutions (e.g., one set for low resolution 800x600 displays and another set for high resolution 1600x1200 displays). Scaleform enables the same content to scale to any resolution. Additionally, traditional bitmap graphics are fully supported for those game elements where bitmaps are more appropriate.

GFx::Movie::SetViewScaleMode defines how scaling will be performed. To ensure the movie fits in the viewport without affecting the original aspect ratio the following call can be added to the end of GFxTutorial::InitGFx() along with the other calls to setup the GFx::Movie object:

pUIMovie->SetViewScaleMode(Movie::SM_ShowAll);

The four possible arguments to SetViewScaleMode are covered in the online documentation and are:

• SM_NoScale The size of the content is fixed to the native resolution of the Flash stage.
• SM_ShowAll Scales the content to fit the viewport while maintaining the original aspect ratio.
• SM_ExactFit Scales the content to fill the entire viewport without regard to the original aspect ratio. The viewport will be filled, but distortion may occur.
• SM_NoBorder Scales the content to fill the entire viewport while maintaining the original aspect ratio. The viewport will be filled, but some clipping may occur.

The complementary SetViewAlignment controls the position of the content relative to the viewport. When the aspect ratio is maintained, some part of the viewport may be empty when SM_NoScale or SM_ShowAll are selected. SetViewAlignment decides where to position the content within the viewport. In this case, the interface buttons should be centered vertically on the far right of the screen:

pUIMovie->SetViewAlignment(Movie::Align_CenterRight);

Try changing the arguments to SetViewScaleMode and SetViewAlignment to see how the application behavior changes when the window is resized.

The SetViewAlignment function does not have any effect except when SetViewScaleMode is set to the default of SM_NoScale. For more complex alignment, scaling, and positioning requirements, GFx supports ActionScript extensions that enable the movie to choose its own size and position. The scale and alignment parameters can also be set through ActionScript instead of C++. SetViewScaleMode and SetViewAlignment modify the same properties represented by the ActionScript Stage class (Stage.scaleMode, Stage.align).