Problem with ImmersiveSticky

Getting Started Newbie Questions
#1

Hello

i have a problem when i enable immersive sticky and cant find a solution

so my goal is to get my ui elements nice and neatly along the side of multiple screen resolutions, so i use display.screenOriginX/Y and display.contentWidth/Height, this works fine until i enable immersive sticky, then i seem to get different results. the ui on left and right edge move a little to the middle f.e.

my config.lua is default, nothing changed - 320 width x 480 height with letterbox scaling

[lua]

local leftSide = display.screenOriginX;
local rightSide = display.contentWidth-display.screenOriginX;
local topSide = display.screenOriginY;
local bottomSide = display.contentHeight-display.screenOriginY;

local totalWidth = display.contentWidth-(display.screenOriginX*2);
local totalHeight = display.contentHeight-(display.screenOriginY*2);
local centerX = display.contentCenterX;
local centerY = display.contentCenterY;

local bg = display.newImageRect(  “bg.png”,  570, 360 )
bg.x, bg.y = centerX, centerY

local object = display.newRect(0, 0, 10, 10);
object.x, object.y = leftSide+10+object.contentWidth*0.5, topSide+10+object.contentHeight*0.5;

local object2 = display.newRect(0, 0, 10, 10);
object2.x, object2.y = leftSide+0+object2.contentWidth*0.5, bottomSide-0-object2.contentHeight*0.5;

native.setProperty( “androidSystemUiVisibility”, “immersiveSticky” )
display.setStatusBar( display.HiddenStatusBar )

local function onResize( event )
  native.setProperty( “androidSystemUiVisibility”, “immersiveSticky” )
end
Runtime:addEventListener( “resize”, onResize )

[/lua]

thanks in advance

#2

You might want to set the immersive property as the first thing in your code before you start collecting screen sizes.  You might also want to investigate the display.safeScreenOriginX/Y properties in addition to display.screenOriginX/Y which may give you better immersive sticky values.

Rob

#3

you have at least two, probably three, problems:

1)  you store the screen dimensions while non-immersive.  you should either use them dynamically (get rid of “leftSide” et al), or recalc them all after resize, because they WILL change

2)  you create all your objects before entering immersive (using the previously stored non-immersive screen dimensions).  at the very least move status bar and immersive to the very first lines of code, but you may want to insert a delay or await an initial resize event following the immersive request.

  1. you don’t show your config.lua, but if you want everything positioned relative to a fixed top-left (rather than center-center) then you should set your x/yAlign in config.lua accordingly (otherwise screenOriginX or screenOriginY will adjust too, depending on orientation and relative aspect ratios, when you enter immersive to keep the letterbox centered)
#4

Hey, thanks for the reply, rob and dave, gonna look into it right now.

This is what i got so far

I’ve moved the immersiveSticky up and given the safeSceenOriginX/Y a shot

after adding the test code on the documentation i got this result on my phone

Code added:

[lua]

local safeArea = display.newRect(
    display.safeScreenOriginX,
    display.safeScreenOriginY,
    display.safeActualContentWidth,
    display.safeActualContentHeight
)
safeArea:translate( safeArea.width*0.5, safeArea.height*0.5 )

[/lua]

Result:

(Everything looks good and works on the simulator btw, just not on my phone)

The blue lines are my bg popping up behind the safezone square, not sure what to do from here though if i want them it to cover the whole screen

#5

You want your background to fill the screen outside the safe zone. The safe zone is where you can put UI elements that need to be interacted with and not hidden in area’s where the device’s UI elements (status bars, button bars) occur.

Rob

#6

You might want to set the immersive property as the first thing in your code before you start collecting screen sizes.  You might also want to investigate the display.safeScreenOriginX/Y properties in addition to display.screenOriginX/Y which may give you better immersive sticky values.

Rob

#7

you have at least two, probably three, problems:

1)  you store the screen dimensions while non-immersive.  you should either use them dynamically (get rid of “leftSide” et al), or recalc them all after resize, because they WILL change

2)  you create all your objects before entering immersive (using the previously stored non-immersive screen dimensions).  at the very least move status bar and immersive to the very first lines of code, but you may want to insert a delay or await an initial resize event following the immersive request.

  1. you don’t show your config.lua, but if you want everything positioned relative to a fixed top-left (rather than center-center) then you should set your x/yAlign in config.lua accordingly (otherwise screenOriginX or screenOriginY will adjust too, depending on orientation and relative aspect ratios, when you enter immersive to keep the letterbox centered)
#8

Hey, thanks for the reply, rob and dave, gonna look into it right now.

This is what i got so far

I’ve moved the immersiveSticky up and given the safeSceenOriginX/Y a shot

after adding the test code on the documentation i got this result on my phone

Code added:

[lua]

local safeArea = display.newRect(
    display.safeScreenOriginX,
    display.safeScreenOriginY,
    display.safeActualContentWidth,
    display.safeActualContentHeight
)
safeArea:translate( safeArea.width*0.5, safeArea.height*0.5 )

[/lua]

Result:

(Everything looks good and works on the simulator btw, just not on my phone)

The blue lines are my bg popping up behind the safezone square, not sure what to do from here though if i want them it to cover the whole screen

#9

You want your background to fill the screen outside the safe zone. The safe zone is where you can put UI elements that need to be interacted with and not hidden in area’s where the device’s UI elements (status bars, button bars) occur.

Rob