scaling anomaly

Audio and Graphics
#1

Hi,

I’ve read all the documentation regarding content scaling but I don’t get why I’m getting such strange results with my project: I have an image and a text displayed on the screen, they occupy different portions of the screen and it works fine cause they don’t overlap on each other. That’s true for all devices with the exception of iphone (3gs), when I simulate on it the image is displayed higher on the y axis and cover the text. Why is that ?

  • my config.lua:

application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = “letterbox”,
        fps = 30,
        antialias = false,
        xalign = “center”,
        yalign = “center”,
        graphicsCompatibility = 1,

        imageSuffix =
        {
            
            ["@2"] = 2

        }

    }
}
 

  • this is how I display the image:

head = display.newImage (“head-1.png”)
        head.y = display.contentHeight - 340
        head.x = display.contentWidth  - 280

  • and the text:

text = display.newText( “-- some quite long text”, 0, 0, 375, 0, “Capitals”, 22 )

text: setTextColor( 180, 34, 168 )

Am I am making some basic mistake I’m not aware of??

Thanks.

 

#2

Hi @akak,

Sometimes it can be useful, in early development, to set up a basic rectangle which mimics your content area, and set it somewhere in the background. This way, you can see how the content area is actually being used and how other display objects relate to it when simulating on different devices.

Brent

#3

Hi Brent,

thank you very much. I considered that strategy myself, in fact I noticed that, across devices, the rectangle I add on the screen as a reference keeps his position in much more of a ‘constant’ way than the other objects.

Now, do you have an idea on how to extrapolate the value of the y coordinate of the bottom of the rectangle, so that I can use it as a constant value to set the ys of the other objects?

thanks a lot in advance!!!

#4

Hi @akak,

Well, getting the bottom point of the rectangle should be something very basic like:

[lua]

rect.y + (rect.height*0.5)

[/lua]

or…

[lua]

rect.contentBounds.yMax

[/lua]

But since this probably isn’t a “long term” solution (keeping some rectangle around during all of development), are you seeking to align certain objects (like UI, menu bar, etc.) to a certain edge of the screen on any device? I have a solution for that if you’d like it.

Brent

#5

Thank you Brett!

I think the problem revolves around image sizing rather than positioning. My text maintains the same proportion across devices but the image that should contain it (a comic-like balloon) gets scaled down on iphone 3gs, this results in the text breaking the visual boundaries I want to keep it in…

Am I making sense?

(sorry for the late reply, I had to be off developing my project for a while)

#6

Hi @akak,

I should have mentioned this the first time… are you using “newImageRect()” to display your images? Or simply “newImage()”? The first one is the API to use for dynamic image selection. If you’re not yet versed in that topic, please see the guide here:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

Best regards,

Brent

#7

Hi @akak,

Sometimes it can be useful, in early development, to set up a basic rectangle which mimics your content area, and set it somewhere in the background. This way, you can see how the content area is actually being used and how other display objects relate to it when simulating on different devices.

Brent

#8

Hi Brent,

thank you very much. I considered that strategy myself, in fact I noticed that, across devices, the rectangle I add on the screen as a reference keeps his position in much more of a ‘constant’ way than the other objects.

Now, do you have an idea on how to extrapolate the value of the y coordinate of the bottom of the rectangle, so that I can use it as a constant value to set the ys of the other objects?

thanks a lot in advance!!!

#9

Hi @akak,

Well, getting the bottom point of the rectangle should be something very basic like:

[lua]

rect.y + (rect.height*0.5)

[/lua]

or…

[lua]

rect.contentBounds.yMax

[/lua]

But since this probably isn’t a “long term” solution (keeping some rectangle around during all of development), are you seeking to align certain objects (like UI, menu bar, etc.) to a certain edge of the screen on any device? I have a solution for that if you’d like it.

Brent

#10

Thank you Brett!

I think the problem revolves around image sizing rather than positioning. My text maintains the same proportion across devices but the image that should contain it (a comic-like balloon) gets scaled down on iphone 3gs, this results in the text breaking the visual boundaries I want to keep it in…

Am I making sense?

(sorry for the late reply, I had to be off developing my project for a while)

#11

Hi @akak,

I should have mentioned this the first time… are you using “newImageRect()” to display your images? Or simply “newImage()”? The first one is the API to use for dynamic image selection. If you’re not yet versed in that topic, please see the guide here:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

Best regards,

Brent