How to dynamically place objects?

WauloK · April 2013

I've got a basic game written, but cannot place objects correctly depending on screen resolution.
For example, I'd like to position the Score in the top-left corner of the screen.
My logical dimensions are 320x480

This does not work: http://appcodingeasy.com/Gideros-Mobile/Ignore-Automatic-Screen-Scaling-when-positioning-objects

If I set the resolution of the Player to iPhone 5 Retina, the top left corner is 0,-44. However, during testing I discovered the top of the screen is -37, not -44 so the Score does not show up.

scoreText = TextField.new(nil, "Score: " .. score)
scoreText:setPosition(-dx,-dy)
stage:addChild(scoreText)

In fact, it doesn't seem to matter what resolution for simulating, the Score does not show.

WauloK · April 2013

The scaling is set to Letterbox as recommended by posts in this forum.

fxone · April 2013

Please make 'scoreText' position dependent on 'application:getLogicalWidth()' or/and 'application:getLogicalHeight()' function like:

scoreText = TextField.new(nil, "Score: " .. score)
scoreText:setPosition(application:getLogicalWidth()*0.1,application:getLogicalHeight()*0.1)
stage:addChild(scoreText)

hgvyas123 · April 2013

i think TextField has anchorpoint set to 0,1 and not 0,0 as bitmap by default might be this is the problem over here

WauloK · April 2013

480 * 0.1 = 48

This will not display text at 0.

iPhone 5 retina: 1136 * 0.1 = 113.6

This will also not display the score at the top of the screen. (-47)

fxone · April 2013

@WauloK I wrote LogicalWidth not DeviceWidth etc.. anyway have you checked this out?

hgvyas123 · April 2013

@fxone

application:getLogicalHeight() or width will always return 480 and 320 so i think they can not do the job

WauloK · April 2013

Yeah that's a good point. @hgvyas123

hgvyas123 · April 2013

wow all the posts are posted exactly after 2 minutes of interval

coooooool

[edit : sequence broken]

WauloK · April 2013

@fxone Yes. I tested your code. Doesn't work. Probably because of what @hgvyas123 said.

hgvyas123 · April 2013

@WauloK :

so it is a anchor point issue right? you need to position textfield from the bottomLeft

WauloK · April 2013

So how would you suggest I code it to automatically set to -37 based on the bottomLeft corner of the textfield on iPhone 5 retina and wherever for other resolutions? I don't think 1 pixel will make any difference.

hgvyas123 · April 2013

assuming you are using letterbox with 320x480 in portrait mode

try this code

 
local font3 = TTFont.new("arial.ttf", 20)				-- this is TTFont without caching
 
local dx = application:getLogicalTranslateX() / application:getLogicalScaleX()
local dy = application:getLogicalTranslateY() / application:getLogicalScaleY()
 
local text3 = TextField.new(font3, "Îñţérñåţîöñåļîžåţîöñ (UTF-8)")
text3:setPosition(-dx,-dy+text3:getHeight())
stage:addChild(text3)

it will always display text on top left corner

fxone · April 2013

@hgvyas123 @WauloK maybe my method is not so accurate to 1 pips, but at least text will be visible

WauloK · April 2013

@hgvyas123 Cheers. That seems to work. Now to work out how to get the other extremes of the screen. I need top left and bottom right.

WauloK · April 2013

@fxone heh. But your text will be 48 pixels from the top.. Nowhere near the top-left

zvardin · April 2013

http://appcodingeasy.com/Gideros-Mobile/Ignore-Automatic-Screen-Scaling-when-positioning-objects

It's basically the same idea @hgvyas123 said, but when I forget off the top of my head I always end up checking back to that for reference.

OZApps · April 2013

With bitmaps, you can rescale/position the same but when working with text, for example the difference between the retina and non retina text, you might also want to scale the text, 20 pt on 320x480 might be large, but on 640x960 you might want to scale that to 2x and if you get to iPad retina it might require to be larger.

Have you tried to get the textWidth, so you can use DEVICE_WIDTH - textWith which should make it right justified.

There was another discussion with Atilim, where because Gideros uses baseline text, it can affect the positioning a little in comparison to others that position the text from the top instead, like a bitmap.

WauloK · April 2013

Wouldn't it be better to place text with physical dimensions rather than logical?
Logical will never line up on multiple resolutions where you want it to, unless you scale everything then it looks crap.

hgvyas123 · April 2013

you might also want to scale the text, 20 pt on 320x480 might be large, but on 640x960 you might want to scale that to 2x and if you get to iPad retina it might require to be larger.

i think Gideros will do that internally for us

petec · April 2013

@WauloK - I had a similar problem keeping a close button (and other things, but just close button stuff shown here) in top right corner. In main lua I got the aspect ratio of the screen using:

local aspect=application:getDeviceHeight()/application:getDeviceWidth()

Then set global variables for adjustment offsets for the close button (globals so that I could access them in any scene):

closeBtnDy=0
closeBtnDx=0

Then I used the aspect variable to set different offsets for various aspect ratios to deal with ipads, iphone5 and various other ones (I think I bashed through all the ones provided in Gideros) and set the values by trial and error to get the button in the right place:

if aspect<=1.6 then
	closeBtnDy=10
end
if aspect<=1.5 then
	closeBtnDy=20
end
if aspect<1.35 then
	closeBtnDy=60
end
if aspect>1.7 then
	closeBtnDx=10
end
if aspect>1.75 then
	closeBtnDx=20
end

Sorry about the formatting but the '<' symbol seems to mess things up!

I then set the close button position using:<pre escaped='true' lang=lua>self.closeBtn:setPosition(760+closeBtnDx,40-closeBtnDy)

I actually had lots of other offset variables in as well to position other items differently according to the aspect ratio so that things looked better on the different screens.

Pete

pedroluis5 · April 2013

Use this

application:setLogicalDimensions(application:getDeviceWidth(),pplication:getDeviceHeight());

This will get the device resolution and set this on propreties of your project.

When you use setposition this funcion use the refecere of logical dimension of you project propreties.

this function above change this value to the correct resolution of you device.

WauloK · April 2013

Thanks @petec and @pedroluis5
It shouldn't be this hard

OZApps · April 2013

@petec, have you tried to store that in a table ?

local tAspect = 
{
 ["1.6"] = 10,
 ["1.5"] = 20,
 ["1.35"] = 60,
 ["1.7"] = 10,
 ["1.5"] = 20
}
 
closeBtnDx = tAspect[tostring(aspect)]

It is much easier than a series of IF's and you can add as many more as you want ...

petec · April 2013

@OZApps, thanks for that. I'm not a very efficient coder and don't make anything like enough use of tables (although I'm very slowly getting better at it) so that is really useful.

In this instance, as well as having adjustments for the close button, I also had a number of other variables for adjusting other items - I guess these could all be in tables as well or could they all somehow be in one table?

OZApps · April 2013

@petec, depending on the type of data, you can either have multiple tbles or a table with multiple dimensions

I guess I will write up an article that can help you understand this, will post the link here soon.

petec · April 2013

@OZApps, that will be great. Thanks.

OZApps · April 2013

Dunno if this helps, there is an article on this written at http://dev.oz-apps.com/?p=306, there could be more depeding on the feedback, etc

petec · April 2013

@OZApps, that's really helpful as far as tables are concerned and the way they can be used. Many thanks for taking the time to write the article - it is duly bookmarked.

The thing I noticed when reading it that I'd not spotted before is that it works for specific aspect ratios. My original if...then version used greater than and less than conditions to pick up not just the specific values but also the in between aspect ratios so that it would get close for devices that had odd screen ratios (e.g. the Archos 70 has a nominal 800x480 screen but uses part of the screen for the home, menu and back buttons so the width is nearer 770 even though the height is 480 (landscape here). Would it be possible to do something like that using tables?

OZApps · April 2013

@petec,
I did notice that you used <=, with tables it is a Key Value pair, or dictionary objects as it is called. In a dictionary we have a word not a range or words (alternative spellings) so you cannot really use ranges.

In the case of resolutions which is the main concern, the way would be to use the resolutions as HxW --> 800x480 using the application:getDeviceHeight() .. "x" .. application:getDeviceWidth() which can be an entry in the table. This could be more accurate or important as there could be an android table with a larger resolution but an aspect ratio of x, but the positions for the same aspect on a smaller device would not b be the same. Simple things like fontSize could change too. Hope I managed to explain that.

hgvyas123 · April 2013

actually this method will work for only on know ratio it will not work when new device launched with new type of aspect ratio or might be any missed ratio also for the resolutions like 480x800 and 480x854 ratio would be almost same. so i think my method is better for all kind of resolution

Howdy, Stranger!

Categories

In this Discussion

Top Posters

How to dynamically place objects?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

How to dynamically place objects?

Comments