Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Scaling with letterbox and immersive sticky (newbie) — Gideros Forum

Scaling with letterbox and immersive sticky (newbie)

BelfryboiBelfryboi Member
edited December 2017 in General questions
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 :p

(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?

image

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

bg.png 564.3K

Comments

  • olegoleg Member
    edited 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)

    Likes: Apollo14

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    Or with latest gideros:
    local dx,dy,_,_=application:getLogicalBounds()
    background:setPosition(dx,dy)
    +1 -1 (+6 / -0 )Share on Facebook
  • @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?
  • 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

  • @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

    Likes: antix

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • @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)
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • use lowercase when calling application:function, instead of Application:function.

    Likes: oleg, antix

    +1 -1 (+2 / -0 )Share on Facebook
  • @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 ;)
  • @antix
    I use:
    logical Dimensions =1920/1200 = 16/10

    background = 2133/1440 --(2133/1200 = 16/9) x (1920/1440 = 4/3)
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • BelfryboiBelfryboi Member
    edited 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

    image
    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)
    positioning.png
    1280 x 721 - 613K
  • 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).
  • 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

    image
    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)
    positioning2.png
    1100 x 619 - 462K
  • olegoleg Member
    edited December 2017 Accepted Answer
    @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)
    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • hgy29hgy29 Maintainer
    Accepted Answer
    Hey guys, you seem to have adopted getLogicalBounds() :) Glad to see it is helpful!

    Likes: oleg, antix, talis

    +1 -1 (+3 / -0 )Share on Facebook
  • snookssnooks Member
    Accepted Answer
    @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!

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • sweetoo, thanks a lot for your patience guys! pretty glad i decided to try my luck here, you've all been super helpful :)

    Likes: snooks, hgy29

    +1 -1 (+2 / -0 )Share on Facebook
Sign In or Register to comment.