Scaleform and aspect ratio

[TOP-Proto]

Hi guys, i have been implementing our menus for some time, and i was wondering if anyone has a workflow for different aspect ratios.

at 4.3 ratio my game menus look great, high or low resolutions

at 5.3 (1280x768) i start having problems with left and right letterboxing.
same with 16.9 and 16.10 ratios.

I notice the ut hud doesnt seem to be affected by ratio problems, so i know theres something out there to fix this.

Does anyone know what the workflow is for scaleform UI's to be compatible with different aspect ratios?

Thanks for any help given guys

[Doublezer0]

there are flash global vars that scaleform gives you access to for aligning and settings the scalemode of the flash. I dont know if these will help you but when in doubt.... use a widescreen resolution and if it still gives you problems create your menu items independantly and position them based on the screencapabilities of the user.

[TOP-Proto]

there are flash global vars that scaleform gives you access to for aligning and settings the scalemode of the flash. I dont know if these will help you but when in doubt.... use a widescreen resolution and if it still gives you problems create your menu items independantly and position them based on the screencapabilities of the user.

Yes but these dont seem to be set in uscript anywhere.
Im not brilliant in flash so im hoping someone who has a workflow for getting their menus ingame working in widescreen will be able to share it with us all.

[TOP-Proto]

ok i figured out the aspect changes that need to be done.

im gonna save you guys a bit of work by giving you the code for this.

exec function NormalAspect()
{
MainMenuMovie.RootMC = MainMenuMovie.GetVariableObject("_root");
MainMenuMovie.RootMC.SetFloat("_xscale", 100);
MainMenuMovie.RootMC.SetFloat("_yscale", 100);
MainMenuMovie.RootMC.SetFloat("_x", 0);
MainMenuMovie.RootMC.SetFloat("_y", 0);
}

exec function Wide53AspectMode()
{
MainMenuMovie.RootMC.SetFloat("_x", -128);
MainMenuMovie.RootMC.SetFloat("_xscale", 125);
}

exec function Wide54AspectMode()
{
MainMenuMovie.RootMC.SetFloat("_y", -26);
MainMenuMovie.RootMC.SetFloat("_yscale", 107);
}

exec function Wide169AspectMode()
{
MainMenuMovie.RootMC.SetFloat("_x", -171);
MainMenuMovie.RootMC.SetFloat("_xscale", 134);
}

exec function Wide1610AspectMode()
{
MainMenuMovie.RootMC.SetFloat("_x", -102);
MainMenuMovie.RootMC.SetFloat("_xscale", 120);
}

you will also need to add the setfloat for the ommited values to be set to default too.

seems to work ok so far but i have not yet done any extensive testing on it.

[TOP-Proto]

by the way these go in class MyModGFxHUDWrapper extends UDKHUD;

and can be called by the console.

[TOP-Proto]

oh and i built my flash scenes at 1024x768.

[TOP-Proto]

since 1600x1200 is a 4.3 ratio like 1024x768 if i built my hud at that resolution would that give me a higher quality hud??

most my controls are small and not noticiable but if i was to use a big background at a lower resolution and scaled it up im guessing it would look blocky...

i guess this is something for me to look into.

[Doublezer0]

subclass GFXMoviePlayer


enum GFxScaleMode
{
SM_NoScale,
SM_ShowAll,
SM_ExactFit,
SM_NoBorder
};

enum GFxAlign
{
Align_Center,
Align_TopCenter,
Align_BottomCenter,
Align_CenterLeft,
Align_CenterRight,
Align_TopLeft,
Align_TopRight,
Align_BottomLeft,
Align_BottomRight
};


Those are the available options, you can also set the viewport size for the flash movie.

For left/right side spacing, I would recommend using 2 swf files, one kept to the left, one to the right. The other option ( which seems quite painful ) is to use actionscript to resize/reposition the widgets.


/** Sets the viewport location and size for the movie being played */
native final function SetViewport(int x, int y, int width, int height);

native final function SetViewScaleMode(GFxScaleMode SM);
native final function SetAlignment(GFxAlign a);

not sure if this is what you require but its how we deal with this kind of issue in flash. scaleform aint exactly flash tho admittedly

[John J]

Found this while searching..... I am just using the following AS for my main menu:

Stage.scaleMode = "ShowAll";
Stage.align = "TL"; // Use Top Left to align

I author the movies at 1680x1050 and everything stays where it should and has the proper aspect ratio no matter what resolution I am in. Seems to work fine.

[TOP-Proto]

yeh i do mine at 1900x1200 and found all i needed was

SetViewScaleMode(SM_ExactFit);

[John J]

Cool.. seems like this turned out to be easier than originally thought.

[Wizzard~Of~Ozz]

yeh i do mine at 1900x1200 and found all i needed was

SetViewScaleMode(SM_ExactFit);

I am curious, at 800x600 how does the hud look with that setting? I haven't tried it since July where it would squish/stretch the thing and it looked pretty bad.

[TOP-Proto]

I am curious, at 800x600 how does the hud look with that setting? I haven't tried it since July where it would squish/stretch the thing and it looked pretty bad.

Generally it looks bad. A good design eliminates as much of the bad look as possible - using scale9 helped alot.

I do still have a problem with some fonts looking bad, but i think if i changed the font size on the fly that would solve this.

[Wizzard~Of~Ozz]

Generally it looks bad. A good design eliminates as much of the bad look as possible - using scale9 helped alot.

I do still have a problem with some fonts looking bad, but i think if i changed the font size on the fly that would solve this.

If your hud has a distinct left/right side, why not split those into 2 separate left/right symbols. Then you can "crop" the area of flash to your current aspect ratio and move the entire left/right panels in/out by just adjusting the _x value.

Just a thought. If I get bored I might try it out, but for now having left/right/bottom in separate files seems to work well and I get 0 stretching.

[TOP-Proto]

If your hud has a distinct left/right side, why not split those into 2 separate left/right symbols. Then you can "crop" the area of flash to your current aspect ratio and move the entire left/right panels in/out by just adjusting the _x value.

Just a thought. If I get bored I might try it out, but for now having left/right/bottom in separate files seems to work well and I get 0 stretching.

The problem isnt stretching, the whole purpose of desigining at a higher resolution was that it would look good on all resolutions under it, the problem is text is sharp as hell at the right res, but how the text is handled when scaling down isnt a change in font size its a resize of your font making it look blurry. Overall this only affects a few very small fonts we use, the rest of our fonts look great.

I have not looked into a fix for this, but so far the workflow i have implemented is a very good one for us