003 中心對齊UI小部件,通過CLIK佈局

Post date: 2012/11/22 上午 10:08:27

QQQQQQQQQQQQQQQQQQQQQQQQQQQ.

Help, tips, BKM's for creating aspect ratio and/or resolution indepenent UI's in Scaleform

Hi there

Firstly, thanks for releasing Scaleform to Unity. I have purchased the license and have begun the process of getting Scaleform integrated into my game. Right now things are going pretty well except for being unable to scale/position the elements in my UI in a resolution independent manner.

The easy question first:

Is there a BKM (Best Known Method) for creating resolution/aspect ratio independent UI’s in Scaleform? If so, where is this information?

The longer question second:

I am developing my stage sizes @ 1024x768 using AS3. In my simple example have just a few buttons in the dead center of the screen. I’ll run this up in Unity and in the 4:3 aspect ratio everything is fine, as expected. When I switch to a 16:9 aspect ratio my buttons move to the right and in a 16:10 they move slightly more right. I figure I need to use the LayoutData to adjust the offsets. This seems to have no effect. I’ve set them to 0 in the example below but I’ve set the values to +1000/-1000 and there has been no difference. It seems that there is something I am missing? This seems like an awfully difficult way to keep a button centered in the screen? Please advise on how one would go about making aspect/resolution independent UI’s in Scaleform.

Thanks ahead of time!

Here is the relevant experts from my code (A full script can be provided):

In my configUI():void function

//Bunch of code...

super.config();

stage.scaleMode = StageScaleMode.NO_SCALE;

NewGameButton.textField.text = "New Game";

NewGameButton.layoutData = new LayoutData();

NewGameButton.layoutData.alignH = "center";

NewGameButton.layoutData.offsetH = 0;

NewGameButton.layoutData.offsetHashH["16:10"] = 0;

NewGameButton.layoutData.offsetHashH["16:9"] = 0;

NewGameButton.layoutData.offsetHashH["4:3"] = 0;

NewGameButton.data = SELECTION_NEWGAME;

NewGameButton.addEventListener(ButtonEvent.CLICK, handleMenuSelection, false, 0, true);

//Additional buttons setup...

layout = new Layout();

layout.tiedToStageSize = true;

addChild(layout);

if (Extensions.enabled) {

ExternalInterface.call("OnRegisterSWFCallback", this);

}

//Remaining code...

Attachment

Attachment

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA.

For a detailed explanation of the CLIK Layout system, see the documentation here:

[ScaleformSDK]\Doc\sf_4.1_CLIK_AS3_User_guide.pdf - pages 113 - 116

There is also a tutorial video at: https://www.youtube.com/watch?v=B...ndex=8&feature=plpp_video

Also, there are two demos that show how to use CLIK Layout properly here: [ScaleformSDK\\Resources\AS3\CLIK\demos\

Layout_Main.fla

Layout_FullScreen_Demo.fla

The AS3 classes for these demos are in: \com\scaleform\demos\

Layout_Main.as

Layout_FullScreen_Demo.as

I can verify both of these demos work in Unity.

For center aligned objects, such as your menu, do not specify any properties. Simply add a new layoutData to the object, and these object will inherit their position from the movie clip you nest them in:

NewGameButton.layoutData = new LayoutData();
//DON'T use these:
NewGameButton.layoutData.alignH = "center";
NewGameButton.layoutData.offsetH = 0;
NewGameButton.layoutData.offsetHashH["16:10"] = 0;
NewGameButton.layoutData.offsetHashH["16:9"] = 0;
NewGameButton.layoutData.offsetHashH["4:3"] = 0;

However, this is sort of a workaround. There are some code fixes that need to be introduced in the CLIK Layout code, but for now this should get you working.

If you want to fix the code yourself, rather than waiting for a patch, open Layout.as and go to line 246, and change that else if block to:

else if (alignH == LayoutMode.ALIGN_CENTER) { 
    spr.x = (rect.width / 2 + rect.x) - ((spr.width/2) + offsetH);
}

Then go to (the original) line 283, and change that else if block to:

else if (alignV == LayoutMode.ALIGN_CENTER) { 
    spr.y = (rect.height / 2 + rect.y) - ((spr.height/2) + offsetV);
}

If you apply the fix, you can then go back to using:

NewGameButton.layoutData = new LayoutData();
NewGameButton.layoutData.alignV = "center";
NewGameButton.layoutData.alignH = "center";
            
NewGameButton.layoutData.offsetH = 0;
NewGameButton.layoutData.offsetHashH["16:9"] = 0; 
NewGameButton.layoutData.offsetHashH["4:3"] = 0;