Automatic Screen Scaling

Artiom

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

atilim

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,

ar2rsawseen

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

atilim

You're welcome. I'm adding this formulation to reference manual now.

Artiom

Great thanks

Artiom

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.

ar2rsawseen

if you output:

print(self.screenOffsetX.." "..self.screenOffsetY)

just after you use them to set position, what do you get?

Artiom

I got "0" and "26.666666666667"

Artiom

atilim, what is the anchor point of TextField?

I'm asking because depending on font size TextField is showing in different locations.

ar2rsawseen

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?

Artiom

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.

atilim

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.

Artiom

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.

atilim

hmm.. getHeight() returns ascender + descender height.

Can you tell me your font name and font size? Let me do some tests here.

Artiom

It's called Kid Kosmic, 14.

atilim

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.

Artiom

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.

atilim

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)

Artiom

Yes, I will do. Thanks atilim!