Re: Positioning display objects

Games
#1

Hello, was hoping someone might be able to help me out.

I’m having some issues aligning display objects with Solar 2D. (I have read the documentation, understand it, but either it’s not working in practice, or I am missing a fundamental.)

Let’s say I wanted to create a ‘hidden object’ game, but it could be anything along these lines really. How can I go about this in landscape mode, and properly align display objects on top of a background for any device. My first step is updating build.settings with the correct orientations, let’s keep it exclusively at “landscapeLeft”

-What would be the correct reference width and height in the config file? If it’s a landscape background 1920 x 1080, should it be these values of your standard image? Do the values need to be switched to portrait mode in the config file?
-What would be the best practice to implement for scale in the config file?
-Let’s create a rectangle on the screen and we wanted it at 100, 100 for all devices. I’m not getting the expected behaviour, and this is after considering a centered anchor.

Any help would be appreciated.
Thanks

#2

You can find an explanation to what’s happening in here:

The simple version is that when the content area defined in your config.lua doesn’t perfectly match with the user’s device resolution, there will some “unused” area that will be handled as mentioned in that post.

You can always find the edges by using math. I’ve written a module that does exactly this. You can find it and a demo project of it over at:

#3

I think Letterbox scaling will allow you the maximum control of scales and positions of display objects.

We always use letterbox scaling in all our projects and then explicitly make adjustments in the code for situations where we might want to scale things up or down based on certain devices but if you want consistency in positions and relative sizes of display objects across devices, the best way is to set your desired canvas size in the config file and set scaling to Letterbox.

We use the 9:16 iphone 6 resolution for our default canvas size (750x1334) but you should be able to use 1080x1920 just as well

Edit- Solar2D will often behave erratically with images that are large (sometimes even at 1920x1080) and will attempt to do some behind the scenes scaling to them despite setting scaling to letterbox. If this is what you’re experiencing, you might want to force the dimensions of an image by specifying the width and height parameters after you’ve loaded it. We occasionally need to do this with some large backgrounds in menus etc

#4

Thanks guys for two very informative replies. They were above and beyond what I could learn from the documentation. I should make a point of looking through the forums a little more first…

That said I still have an issue and wanted to throw it by you guys. If I have a background…could be any dimension, and I have setup Solar config to be 2/3 and aspect ratio to letterbox, I am still having a bit of a math issue positioning an item on top of this background.

A practical example would be this…
I open the background in my favourite editor, let’s say Gimp, and I want an overlay object in my game to be (statically) positioned at a location. let’s say I’ve identified the top left point of the overlaying object in this background image with a top left corner of 200, 200. I only know this value because I’ve used a mouse over in Gimp to find the exact top left pixel.

To test this out, I load the background image in my game, everything looks good based on the config settings. However, when I create a display rectangle (my test of a foreground object in a game) that is anchored at 0, 0, and with x, y 200, 200, I still can’t seem to calculate the math, even when I consider the X and Y offsets. Perhaps there is a helper function in XeduR’s library that he kindly provided as reference, but I think I’m still missing how to calculate the exact location based on the aspect ratio. It seems a little more complicated that just adding or subtracting the x or y offset. I’m assuming I should be multiplying my 200,200 location by the aspect ratio of 2/3, but it doesn’t quite work out.

Thanks in advance

A

#5

With letterbox scaling, things should be perfectly in sync between Solar2D and whatever programme you’re using for creating your assets as this scaling method will respect the aspect ratio.

As you said, the problem is probably caused by offsets due to scaling. I reckon the dimensions you have supplied into your config.lua for height and width are not the same as your canvas in Gimp so things are either being scaled up or down by a certain factor that you will need to multiple/divide to move between the two coordinate systems.

When I had earlier posted that we use 750x1334 (portrait) as our width and height in solar2D, we also ensure that all assets that we make are designed with this canvas size in mind and our math lines up perfectly between all Adobe programmes and Solar2D. Hope this helps…

#6

Aspect ratio based positioning as such might not be all that straightforward given that it can change from device to device.

The thing about Solar2D is that the coordinates {0,0} are based on the content area defined in your config.lua. If there is a device that is wider than what you’ve defined, then the actual x coordinate for the left edge of the screen would be a negative number.

If you wanted to position objects relative to the width of the screen, for instance, then you could multiply the width of the screen by the value that you want and add that to the leftmost point on the screen. In my screen module, this’d be x = screen.minX + screen.width*someValue.

Finally, you shouldn’t be multiplying your images by the aspect ratio (unless you have some specific reason for doing so) as Solar2D automatically scales the images for you. For instance, if you have a content area of 960x640 and you’ve got an image of 200x200px, said image would be 400x400px on a 1920x1280 screen.

#7

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.