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

    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
    +1 -1Share on Facebook

    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)

      Likes: antix, oleg, snooks, Apollo14, SinisterSoft, totebo

      +1 -1 (+6 / -0 )Share on Facebook
    • antixantix Member
      @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?
      +1 -1Share on Facebook
    • BelfryboiBelfryboi Member
      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

      +1 -1Share on Facebook
    • olegoleg Member
      @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
    • olegoleg Member
      @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
      Слава Україні!
      +1 -1Share on Facebook
    • keszeghkeszegh Member
      use lowercase when calling application:function, instead of Application:function.

      Likes: oleg, antix

      Longtitle Productions, creator of
      Fragmenter - animated loop machine and IKONOMIKON - the memory game
      +1 -1 (+2 / -0 )Share on Facebook
    • antixantix Member
      @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 ;)
      +1 -1Share on Facebook
    • olegoleg Member
      @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
      Слава Україні!
      +1 -1Share on Facebook
    • 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
      +1 -1Share on Facebook
    • snookssnooks Member
      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).
      +1 -1Share on Facebook
    • BelfryboiBelfryboi Member
      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
      +1 -1Share on Facebook
    • 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
      Слава Україні!
      +1 -1Share on Facebook
    • 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
    • BelfryboiBelfryboi Member
      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.