Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
How to dynamically place objects? — Gideros Forum

How to dynamically place objects?

WauloKWauloK Member
edited April 2013 in General questions
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.

Likes: ar2rsawseen, Yan

Gideros Tutorials and Mobile apps:
http://BlueBilby.com/
+1 -1 (+2 / -0 )Share on Facebook
«1

Comments

  • The scaling is set to Letterbox as recommended by posts in this forum.
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • fxonefxone Member
    edited 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)
  • 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

    :)
  • WauloKWauloK Member
    edited 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)
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • fxonefxone Member
    edited April 2013
  • @fxone

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

    :)

    Likes: WauloK

    +1 -1 (+1 / -0 )Share on Facebook
  • Yeah that's a good point. @hgvyas123
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • hgvyas123hgvyas123 Guru
    edited April 2013
    wow all the posts are posted exactly after 2 minutes of interval

    coooooool

    [edit : sequence broken]
    :)
  • @fxone Yes. I tested your code. Doesn't work. Probably because of what @hgvyas123 said.
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • @WauloK :

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

    :)
  • 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.
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • hgvyas123hgvyas123 Guru
    edited 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

    :)

    Likes: fxone, WauloK

    +1 -1 (+2 / -0 )Share on Facebook
  • fxonefxone Member
    edited April 2013
    @hgvyas123 @WauloK maybe my method is not so accurate to 1 pips, but at least text will be visible :D

    Likes: hgvyas123

    +1 -1 (+1 / -0 )Share on Facebook
  • @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.
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • @fxone heh. But your text will be 48 pixels from the top.. Nowhere near the top-left ;)
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • 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.
  • 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.
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • 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.
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • hgvyas123hgvyas123 Guru
    edited 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
  • petecpetec Member
    @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

    Likes: WauloK

    +1 -1 (+1 / -0 )Share on Facebook
  • 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.
  • Thanks @petec and @pedroluis5
    It shouldn't be this hard :)
    Gideros Tutorials and Mobile apps:
    http://BlueBilby.com/
  • @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 ...

    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • petecpetec Member
    @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?
  • OZAppsOZApps Guru
    edited 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.

    Likes: hgvyas123

    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
    +1 -1 (+1 / -0 )Share on Facebook
  • petecpetec Member
    @OZApps, that will be great. Thanks.
  • 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
    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • petecpetec Member
    @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?
  • @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.

    twitter: @ozapps | http://www.oz-apps.com | http://howto.oz-apps.com | http://reviewme.oz-apps.com
    Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
    Cool Vizify Profile at https://www.vizify.com/oz-apps
  • 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

    :)
Sign In or Register to comment.