HUD-Any Tips for dealing with different device resolutions?

[redmotion]

Hi guys/gals,

I'm getting close to release for my first game and I'm trying to get the hud working now.

I've noticed that many devices have a different aspect ratio (should have paid more attention to that before I started tbh...) and I'm wondering how people treat them?

These are the resolutions I want to cater for:

320x240 Android low (AR 1.33)
1024x768 Ipad/Ipad2 (1.33)

800x480 Android HD (AR 1.66)
1024x600 Kindle Flame / Blackberry Playbook (1.70) <--- current HUD works well with these
1280x800 Galaxy Tab 10.1" (AR 1.6)

480x320 Iphone 3G (AR 1.5)
960x640 Iphone 4/4S (AR 1.5)

Current HUD components all use these options: Viewport Aspect Ratio independent and adjust to nearest pixels

I used the first option because I wanted the buttons for world and level selection to always appear square and some text is made with multiple texture maps inside containers.

I wonder if that was a bad idea to do it this way and whether I should redo them with the VARI switched off (and accept some elements won't be square) or whether people make individual HUDs for all the different aspect ratios?

Thanks in advance.

[giggsy]

For Candy Island I ended up changing the container sizes in script depending on the screen resolution ... which itself were a mixture of aspect ratio dependant and independant.
Worked quite well, although it can get a pain to maintain because you partially need to insert some magic numbers.

Unforunately, as we started focussing on iOS first, I lost the adaption code somewhere in our SVN, so I can't show you.
We are now also reworking the whole UI and it will be far less aspect ratio dependant (e.g. no rounded corners in container textures), and that will help a lot!

[dbladez]

Ya, I did kinda the same.

I would check the aspect ratio, then setup a member variable magic number setup to shrink the height of the container of the hud to crush everything a bit. Then just add a black background, so it had a black bar on the top/bottom, a small bar one for certain huds.

It was either that, or spend hours everytime I'd want to do an iPhone/iPad/Android build to change it around manually to prevent words being clipped or wrapped.

However now I can just get the OSType and my game auto detects and script fixes everything as it goes. 5 hours implementation to get it going, but saves me 2+ hours each time I want to export a certain platform build, and sometimes you might forget something.

[Fraser]

Yo guys, After wrestling with HUD stuff for hours I've come to use a method that I will stick with. (until shiva2 comes out, nicox said HUD is getting overhaul)

Anyway, I use a technique that is write once and forget for all resolutions and is truly aspect ratio independent while keeping buttons in right position.

EDIT: It's pretty much as dbladez and giggsy describe I think.

To see how it works in a game go to this playable demo and press the "R" key to rotate the screen: http://www.silicondroid.com/wip

The onscreen controls use this technique:

[1]
Make your HUD in the editor, all items aspect ratio independent.

[2]
Use code similar to this, this needs calling once at HUD startup and then any time you rotate the device or change resolution:

Code: Select all

--------------------------------------------------------------------------------
--  Function......... : SetScale
--  Author........... :
--  Description...... :
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
function AI_HudGame.SetScale (  )
--------------------------------------------------------------------------------
   
    if(not this.bActive ( ))
    then
        return
    end
   
    local nScale = application.getCurrentUserViewportAspectRatio ( )
    if(nScale > 1)
    then
        nScale = 1
    end
    this.nScale ( nScale )
   
    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Button0" )
    hud.setComponentSize ( h, this.K_BUTTON_SIZE ( )*nScale, this.K_BUTTON_SIZE ( )*nScale )
   
    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Stick0Thumb" )
    hud.setComponentSize ( h, this.K_BUTTON_SIZE ( )*nScale, this.K_BUTTON_SIZE ( )*nScale )

    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Stick0Back" )
    hud.setComponentSize ( h, this.K_STICKSLOT_W ( )*nScale, this.K_STICKSLOT_H ( )*nScale )

    local nSize = this.K_TOP_BUTTON_SIZE ( )*nScale

    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Button4" )
    local x = this.nOrigin0_X ( )/this.nScale ( )
    hud.setComponentPosition ( h, x, this.nOrigin0_Y ( ) )
    hud.setComponentSize ( h, nSize, nSize )
   
    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Button3" )
    local x = this.nOrigin1_X ( )/this.nScale ( )
    hud.setComponentPosition ( h, x, this.nOrigin1_Y ( ) )
    hud.setComponentSize ( h, nSize, nSize )

    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Button1" )
    local x = 100 - this.nOrigin3_X ( )/this.nScale ( )
    hud.setComponentPosition ( h, x, this.nOrigin3_Y ( ) )
    hud.setComponentSize ( h, nSize, nSize )

    local h = hud.getComponent ( this.getUser ( ), "HUD_Game.Button2" )
    local x = 100 - this.nOrigin2_X ( )/this.nScale ( )
    hud.setComponentPosition ( h, x, this.nOrigin2_Y ( ) )
    hud.setComponentSize ( h, nSize, nSize )

    user.sendEvent ( this.getUser ( ), "AI_Camera", "onSetScale", 1/nScale )
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------


NOTE:
the this.nOrigin variables are setup once by reading HUD positions just after new template instance. These origin values allow one to mantain same position relative to screen corner when rotating. So controls near left of screen get moved in +x, controls near right in -x. the uppercase K_ variables are used as constants (hardcoded vars)

In the online game demo I use the same method for the text in the options screen (accessible by pressing the 3rd top black button) try rotating with "R" and you see the text is scaled to always fit within controls. In that case the whole hud was created at runtime (no editor template and not aspect ratio independent) and I apply scaling by polling aspect ratio in a state loop looking for change (I am not botherd about game FPS performance as it is paused when in options).

Code: Select all

--------------------------------------------------------------------------------
--  State............ : ShowingGui
--  Author........... :
--  Description...... :
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
function AI_Options.ShowingGui_onLoop ( )
--------------------------------------------------------------------------------
   
    local nScale = application.getCurrentUserViewportAspectRatio ( )
    nScale = math.min ( nScale, 1 )
    if(this.nScale ( ) == nScale)
    then
        return
    end

    this.nScale ( nScale )
    local hUser = application.getCurrentUser ( )

    local h = hud.getComponent ( hUser, "SCREEN" )
    if(h)
    then
        hud.setListTextHeight ( h, this.K_TEXTH_SCREEN ( )*nScale )   
    end
   
    local h = hud.getComponent ( hUser, "LIST" )
    if(h)
    then
        hud.setListTextHeight ( h, this.K_TEXTH_LIST ( )*nScale )   
        hud.setListVerticalScrollBarWidth ( h, this.K_LIST_THUMB_W ( )/nScale )
        hud.setListVerticalScrollBarArrowHeight ( h, this.K_LIST_THUMB_H ( )*nScale )
    end

    local h = hud.getComponent ( hUser, "OK" )
    if(h)
    then
        hud.setListTextHeight ( h, this.K_TEXTH_BUTTON ( )*nScale )   
    end

    local h = hud.getComponent ( hUser, "CANCEL" )
    if(h)
    then
        hud.setListTextHeight ( h, this.K_TEXTH_BUTTON ( )*nScale )   
    end

    local h = hud.getComponent ( hUser, "POPUP" )
    if(h)
    then
        hud.setListTextHeight ( h, this.K_TEXTH_POPUP ( )*nScale )   
    end
   
--------------------------------------------------------------------------------
end
--------------------------------------------------------------------------------