As far as I know, there’s only one other person deep into Scaleform UI for UDK/UE3, so this post probably won’t be useful for too many people. But just in case anyone else ever wants to create a single UI for every language, this is how to do it. We’re going to use the Button.textField.htmlText property to set the text in all of our buttons.
First off, embed your fonts in your font library and import them into your fla as usual:
Now, just to experiment, you can drop a CLIK button (copy from CLIK_Components_AS3.fla and paste into your fla). Name it button. Then somewhere on the timeline, add this code:
button.textField.htmlText = "<font size=\"20\" face=\"$ARBerkley\">Berk </font><font size=\"20\" face=\"$BitstreamVeraSans\">Vera</font>";
In my file, I have fonts named $ARBerkley and $BitstreamVeraSans, but you should replace those with the names of the fonts in your own file. Save your file and then test it with the Scaleform Launcher. You should see a button with two different fonts in it. You can click on that button and add event listeners, and do anything else that you would do with any other button. If your UI consists of lone buttons, then you’re practically done already. When you get your localized text from UDK, put it into a formatted html string like the one above, using the desired font, and set that as button.textField.htmlText.
But if your UI has button bars, you have a little more work to do. Next, you’ll need to make a new ActionScript file:
ButtonBarHTML .as
package {
import scaleform.clik.controls.Button;
import scaleform.clik.controls.ButtonBar;
public class ButtonBarHTML extends ButtonBar {
public function ButtonBarHTML() {
// constructor code
super();
}
override protected function populateRendererData(renderer:Button, index:uint):void {
renderer.textField.htmlText = itemToLabel( _dataProvider.requestItemAt(index) );
renderer.data = _dataProvider.requestItemAt(index);
renderer.selected = (index == selectedIndex);
}
}
}
[Edit: Since posting this, I’ve started using a custom button class instead of a custom button bar. I’ve learned that enabling/disabling buttons clears the htmlText. But with a custom button, in updateText you can set textField.htmlText = _label and leave everything else the same. Send it html the same way you would send plain text to any other button, and it’ll just work.]
Save that somewhere and then edit your fla’s source path at File > ActionScript Settings so that your fla can find it. Copy the button bar from CLIK_Components_AS3.fla into your fla’s library. Then change its name and class to ButtonBarHTML. Click on the check mark to validate class information just to make sure that Flash/Animate sees your custom ButtonBarHTML.as file.
Now, when you populate your button bar (via the button bar’s dataProvider), instead of sending just the text you want displayed, send it html, and you can set the font and the text depending on which language the game is running in.
Using the button’s htmlText property, you can also include images, change text color, and do other stuff with your buttons.
