Thursday, December 20, 2012

UDK: Aligning MobileInputZones with your ScaleForm UI

I spent some time getting my UI ready for iOS, using the Layout tools ScaleForm provides. This let me get my UI elements to work on all screen sizes and aspect ratios without having to do complicated functions and other hacks. If you're doing a mobile UI in ScaleForm, I highly recommend it.
Here's some reference:
Scaleform Docs on Layout
Scaleform Layout in Unity (I know, the video is for Unity, but the same code applies)

So, everything was working great... until I got back to UDK (Shocker!)

What I needed was a MobileInputZone to stay the right size and snapped to the upper-right hand corner. After tweaking pretty much every setting, I figured out two things:



  1. You can snap Zones to the right side of the screen two ways:
    1. If the size if relative(bRelativeSizeX/Y == true), set the position relative (bRelativeX/Y == true) to 1.0-SizeX
      1. For example: X=.9; SizeX=.1
    2. If the size is not relative, set the position to the SizeX*-1
      1. For example: X=-64; SizeX=64
  2. You need to set bSizeYFromSizeX=true to account for aspect ratio changes. This makes the height the same as the width no matter what aspect ratio you've got.
With those two things in mind, here's my fancy mobileInputZone that stays up in the upper-right and scales near-perfectly with my Scaleform UI using Layout and the scalemode of the flash file set to NO_BORDER:


DefaultGame.ini
[InfoButtonZone MobileInputZone]
Type=ZoneType_Button
bRelativeX=true
bRelativeY=true
X=.91
Y=0
bRelativeSizeX=true
bRelativeSizeY=true
SizeX=.09
SizeY=1
bSizeYFromSizeX=true
bIsInvisible=true
TapDistanceConstraint=5
AuthoredGlobalScale=2.000000
bApplyGlobalScaleToActiveSizes=true

No comments:

Post a Comment