Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Automatic Screen Scaling — Gideros Forum

Automatic Screen Scaling

ArtiomArtiom Member
edited February 2012 in General questions
I have a little trouble with a letterbox automatic screen scaling.
I develop my game on Nexus S it has 480 * 800 while logical 320 * 480.
When I show my score text field in 0, 0 it's showing in about 0, 20.

I think this is because different ratio between 480 * 800 (1.67) and 320 * 480 ( 1.5).
So I wrote the following code to know distance from logical y = 0 to upper border of screen and
y = 480 to lower (assuming they are same):

local ratio = application:getDeviceWidth() / application:getLogicalWidth()
local screenOffset = (application:getDeviceHeight() - ratio * application:getLogicalHeight()) / (2 * ratio)

But appears that my game screen located not in center by Y coordinate. Offset from upper border is less than from lower.

How can I calculate offset so I could show my scores in the 0,0 ?

ps: sorry for my English

Dislikes: Yan

+1 -1 (+0 / -1 )Share on Facebook

Comments

  • atilimatilim Maintainer
    Hi,

    You can calculate the offset by using these formula:
    local dx = -application:getLogicalTranslateX() / application:getLogicalScaleX()
    local dy = -application:getLogicalTranslateY() / application:getLogicalScaleY()
    For example the below code displays the box always at top-left corner not matter what scaling mode is used:
    local bitmap = Bitmap.new(Texture.new("box.png"))
    local dx = -application:getLogicalTranslateX() / application:getLogicalScaleX()
    local dy = -application:getLogicalTranslateY() / application:getLogicalScaleY()
    bitmap:setPosition(dx, dy)
    stage:addChild(bitmap)
    Hope this helps

    cheers,
  • ar2rsawseenar2rsawseen Maintainer
    edited February 2012
    That's pretty good example, I've done little more complex calculations previously. :) thanks ;)

    Just if someone needs it:
    --note positive values
    local dx = application:getLogicalTranslateX() / application:getLogicalScaleX()
    local dy = application:getLogicalTranslateY() / application:getLogicalScaleY()
     
    --sample object
    local bitmap = Bitmap.new(Texture.new("box.png"))
    stage:addChild(bitmap)
     
    --different positions
     
    --top left
    bitmap:setPosition(-dx, -dy)
     
    --top right
    bitmap:setPosition(dx+application:getContentWidth()-bitmap:getWidth(), -dy)
     
    --bottom left
    bitmap:setPosition(-dx, dy + application:getContentHeight()-bitmap:getHeight())
     
    --bottom right
    bitmap:setPosition(dx+application:getContentWidth()-bitmap:getWidth(), dy + application:getContentHeight()-bitmap:getHeight())
  • atilimatilim Maintainer
    :) You're welcome. I'm adding this formulation to reference manual now.
  • ArtiomArtiom Member
    edited February 2012
    I'm trying to show my scores like this:

    self.screenOffsetX = application:getLogicalTranslateX() / application:getLogicalScaleX()
    self.screenOffsetY = application:getLogicalTranslateY() / application:getLogicalScaleY()

    self.scoreField = TextField.new(self.font, "0")
    self.scoreField:setPosition(- self.screenOffsetX, - self.screenOffsetY)
    self.scoreField:setTextColor(0x00ff00)

    I don't see it.
    If I make self.scoreField:setPosition(- self.screenOffsetX, 10 - self.screenOffsetY)
    then I see only half of text.

    UPD: self.screenOffsetY = application:getLogicalTranslateY() / (application:getLogicalScaleY() * 2) seems to be working. But I don't know is it correct or coincidence.
  • ar2rsawseenar2rsawseen Maintainer
    edited February 2012
    if you output:
    print(self.screenOffsetX.." "..self.screenOffsetY)
    just after you use them to set position, what do you get?
  • I got "0" and "26.666666666667"
  • ArtiomArtiom Member
    edited February 2012
    atilim, what is the anchor point of TextField?

    I'm asking because depending on font size TextField is showing in different locations.
  • Values seems to be ok. You have too much offset on y axis?
    I would guess it's top left corner for TextField.
    Are you sure your logical dimensions are correct? Smallest one is provided first and greater one second.
    And what orientation do you have?
  • Yes, logical dimensions are 320 * 480. Orientation is portrait.

    When I change the size of font sometimes I see scores.. when size is very small.
  • atilimatilim Maintainer
    edited February 2012
    Hi all,

    The origin of the TextField is its baseline. (the red line shown in the picture)
    http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/500px-Typography_Line_Terms.svg.png

    Therefore to see the text, you should translate it down about its size on the y-axis.
    500px-Typography_Line_Terms.png
    500 x 134 - 13K
  • ArtiomArtiom Member
    edited February 2012
    Thanks atilim,

    If I use self.scoreField:setPosition(0, self.scoreField:getHeight() - self.screenOffsetY) than text is cropped a bit at the top (about 3-5 pixels).

    May be getHeight() function returns distance between baseline and ascender height, but needs to be between descender and ascender height.

    I use TTFont.
  • atilimatilim Maintainer
    hmm.. getHeight() returns ascender + descender height.

    Can you tell me your font name and font size? Let me do some tests here.
  • ArtiomArtiom Member
    edited February 2012
    It's called Kid Kosmic, 14.
  • atilimatilim Maintainer
    edited February 2012
    Hi @Artiom,

    Can you try this code:
    local dx = -application:getLogicalTranslateX() / application:getLogicalScaleX()
    local dy = -application:getLogicalTranslateY() / application:getLogicalScaleY()
     
    local font = TTFont.new("kidkosmic.ttf", 14)
     
    local text = TextField.new(font, "score 123456789")
    text:setPosition(dx, dy + text:getHeight())
    stage:addChild(text)
    It worked well on me.
  • A-ha.. I understood.

    The problem is that I print only numbers without text.
    See screenshots from my Nexus. I think the problem in font.
    device-2012-02-29-221937.png
    480 x 800 - 6K
    device-2012-02-29-221952.png
    480 x 800 - 3K
  • atilimatilim Maintainer
    edited February 2012
    Yes, after your post, I've seen the bug (maybe feature :) ) when I use only numbers. Maybe the best solution is using a fixed translation like:
    text:setPosition(dx, dy + 15)
  • Yes, I will do. Thanks atilim!
Sign In or Register to comment.