Scaling with letterbox and immersive sticky (newbie)

Belfryboi · December 2017

Hellooo

i just tried out gideros and i'm really liking it so far, also i'm pretty new to mobile games

so i've been struggling with this for well over a week now (checking out other engines too)
and basically i want to know how to properly position my ui elements across the screen in a responsive and efficient way

so i got a couple questions

(1)
the method i'm using right now is a 320 x 480 logical scene with a 570 x 360 background which i'll scale up, and i'm planning on positioning my elements using api's that target the actual device's resolution but here's my issue

when i set the orientation to landscape left and position my background(to 0,0), i get a blackspace on the side and my x coordinates seem like they moved, my guess is it's making up for the android navigation bar that's gone?

i'm also not sure if selecting landscape left in properties is the most efficient way to set the default orientation, it seems to work fine tho but i'm too novice to tell for sure

(2)
could someone please tell which api's are used to deal with responsive positioning, i know i'd probably find them eventually on my own but this way i can save some time and i'll know for sure c:

something like a list of preset variables like screenLeft = "insert corresponding api", just to get me going would be amazing

oleg · December 2017

see the settings for the "scale mode"
http://docs.giderosmobile.com/automatic_screen_scaling.html

local dx = application:getLogicalTranslateX()/application:getLogicalScaleX()
local dy = application:getLogicalTranslateY()/application:getLogicalScaleY()
background:setPosition(-dx,-dy)

hgy29 · December 2017

Or with latest gideros:

local dx,dy,_,_=application:getLogicalBounds()
background:setPosition(dx,dy)

antix · December 2017

@hgy29 that's nice, I did not know that :bz

Scaling is one of those things that for me has been a real headache. Mostly this springs from so many devices out there with so many different resolutions and aspect ratios. It seems you have to choose fitWidth, fitHeight, etc based on what the current device uses and it's a pain. I wonder if this could be handled internally?

Belfryboi · December 2017

awesome thanks for the replies, but now i cant seem to put something on the left of my screen, i'm using this Application:getDeviceWidth() and Application:getLogicalWidth()
but getting this error:

index '__userdata' cannot be found

oleg · December 2017

@antix in Arturs Sosin's book is a good decision

project = 800 x 480

iPad = (2048 x 1536)
iPhone 5 (1136 x 640).

2048/1536 = 1,33333333333
800/1,33333333333=600,01
1136/640 = 1,775.
480 * 1.775 = 852

background = 852 x 600

oleg · December 2017

@Belfryboi

Make the background larger and centered

background :setAnchorPoint(0.5, 0.5)
local halfWidth = application:getContentWidth()/2
local halfHeight = application:getContentHeight()/2
background:setPosition(halfWidth, halfHeight)

keszegh · December 2017

use lowercase when calling application:function, instead of Application:function.

antix · December 2017

@oleg, cool. I use 960 x 640 resolution for all my games so need to mess about with scaling to accommodate that. I have it working mostly I think

oleg · December 2017

@antix
I use:
logical Dimensions =1920/1200 = 16/10

background = 2133/1440 --(2133/1200 = 16/9) x (1920/1440 = 4/3)

Belfryboi · December 2017

@oleg

hmmm almost there i think but i dont quite get it yet, my background is perfectly centered now and i can position my elements at the top and bottom edge of my 16:9 phone but they're still like bound to the letterbox i think, can't get them to the far left or right edge

i'm not sure what you meant with make the background larger and centered, it already takes up my screen nicely and the previous thing you mentioned already works fine (background:setPosition(-dx,-dy), also thanks alot btw you've been a great help already and thx @keszegh, that did it, and sry for beign such a noob guys xd

BLACK @ 0x1A1A1A 
application:setBackgroundColor(BLACK)
 
local halfWidth = application:getContentWidth()/2
local halfHeight = application:getContentHeight()/2
 
local tWidth = application:getContentWidth()
local tHeight = application:getContentHeight()
 
local background = Bitmap.new(Texture.new("bg.png"))
stage:addChild(background)
 
local dx,dy,_,_=application:getLogicalBounds()
background:setPosition(dx,dy)
 
 
local damage = Bitmap.new(Texture.new("damage.png"))
stage:addChild(damage)
damage:setAnchorPoint(0,1)
damage:setPosition(0,tHeight)
 
local restore = Bitmap.new(Texture.new("restore.png"))
stage:addChild(restore)
restore:setAnchorPoint(1,1)
restore:setPosition(tWidth,tHeight)

snooks · December 2017

You want to set "damage" to (dx, tHeight). You need to calculate the true width of the screen, taking into account the offset to the left (same with height if there's an offset at the top). I use something like this...

local screenLeft, screenTop, screenRight, screenBottom = application:getLogicalBounds()
 
local screenHeight = screenBottom - screenTop
local screenWidth = screenRight - screenLeft

So you'd set "restore" to (screenWidth, screenHeight) and "damage" to (screenLeft, screenHeight).

Belfryboi · December 2017

Sweet! this is exactly what i needed, only one little thing i now

when i use (screenWidth, screenHeight) for "restore" it seems to go a little off screen, however when i use screenLeft instead of screenWidth it's perfectly at the edge where i want it

BLACK @ 0x1A1A1A 
application:setBackgroundColor(BLACK)
 
 
 
local screenLeft, screenTop, screenRight, screenBottom = application:getLogicalBounds()
 
local screenHeight = screenBottom - screenTop
local screenWidth = screenRight - screenLeft
 
 
local background = Bitmap.new(Texture.new("bg.png"))
stage:addChild(background)
background :setAnchorPoint(0, 0)
background:setPosition(screenLeft,screenTop)
 
local damage = Bitmap.new(Texture.new("damage.png"))
stage:addChild(damage)
damage:setAnchorPoint(0,1)
damage:setPosition(screenLeft,screenHeight)
 
local restore = Bitmap.new(Texture.new("restore.png"))
stage:addChild(restore)
restore:setAnchorPoint(1,1)
restore:setPosition(screenWidth, screenHeight)

oleg · December 2017

@Belfryboi

local halfWidth = application:getContentWidth()/2
local halfHeight = application:getContentHeight()/2
 
local minX,minY,maxX,maxY=application:getLogicalBounds()
--[[
minX - left 
maxX- right 
minY-top
maxY-bottom
]]
 
local background = Bitmap.new(Texture.new("bg.png"))
background :setAnchorPoint(0.5, 0.5)
background:setPosition(halfWidth, halfHeight)
 
local damage = Bitmap.new(Texture.new("damage.png"))
damage:setAnchorPoint(0,1)
damage:setPosition(minX,maxY)
 
local restore = Bitmap.new(Texture.new("restore.png"))
restore:setAnchorPoint(1,1)
restore:setPosition(maxX, maxY)

hgy29 · December 2017

Hey guys, you seem to have adopted getLogicalBounds()

Glad to see it is helpful!

snooks · December 2017

@Belfryboi: Oh yeah sorry, I was tripping balls there... its screenRight for screenRight, not screenWidth.

Using screenWidth will put it screenLeft past the right hand side, which is what you see.

@hgy29: yes, thanks for that... it's very useful!

Belfryboi · December 2017

sweetoo, thanks a lot for your patience guys! pretty glad i decided to try my luck here, you've all been super helpful

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Scaling with letterbox and immersive sticky (newbie)

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Scaling with letterbox and immersive sticky (newbie)

Comments