Automatic Screen Scaling — Gideros Forum

#### Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

# Automatic Screen Scaling

Member
edited February 2012
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

• 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,
• 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())```
• Maintainer
You're welcome. I'm adding this formulation to reference manual now.
• Member
Great thanks
• 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.
• Maintainer
edited February 2012
if you output:
 `print(self.screenOffsetX.." "..self.screenOffsetY)`
just after you use them to set position, what do you get?
• Member
I got "0" and "26.666666666667"
• 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.
• Maintainer
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?
• Member
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.
• Maintainer
edited February 2012
Hi all,

The origin of the TextField is its baseline. (the red line shown in the picture)

Therefore to see the text, you should translate it down about its size on the y-axis.
• 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.
• Maintainer
hmm.. getHeight() returns ascender + descender height.

Can you tell me your font name and font size? Let me do some tests here.
• Member
edited February 2012
It's called Kid Kosmic, 14.
• 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.
• Member
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.
• 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)`
• Member
Yes, I will do. Thanks atilim!