object placement approach that takes screen resolution & auto-scaling mode into account?

Solar2D General Questions/Discussion
#1

QUESTION - What would be a solid approach on how to place objects on a background image precisely, but in a way that takes into account the following ideally seamlessly (i.e. no need for any if/then’s re which device/resolution you are on)

a) different device screen resolutions
b) the auto-scaling mode (e.g. letterbox say)

Could assume that landscape only would be supported.

FURTHER BACKGROUND:

Let’s say for a given level you have a background image. Assume this is the largest resolution (I’m assuming the best approach is to design images with the max resolution, and then to create copies of it at the required resolutions). So say somewhere on the background image is a closed door, but then during the game you want to overlay at this specific point an open door…after it’s open.

So what is the best approach re when you create/show/position the open door?

Simplistically is it just to place it based on percentage of the screenW/screenH for the current view? But then would there need to be any adjustment to this simply formula to handle a case where the image on device X has some black at top/bottom due to letterbox scaling? Or do you keep the simply percentage based approach and then make sure there is a correct size image for every possible device and use auto-scaling (not sure how well this would work in the Android space)?

[import]uid: 140210 topic_id: 25042 reply_id: 325042[/import]

#2

PS. As a Question 2 addendum - are there any tools/approaches that would let you create these images in Photoshop in layers, and then hit a magic button, and what pops out is the images with Lua code required for the positioning? I’m probably dreaming here but lets say you had a door and a window in the image that might open you could have from PhotoShop:

* Layer 1 -> main image
* Layer 2 -> just the window open little image
* Layer 3 -> just the door open image
Plus Lua code that holds the required locations of the window/door images so they can be easily overlaid when required in the correct position.

If there’s nothing this advance it at least gives a bit of the feel for my original question and what is the easiest approach currently available… [import]uid: 140210 topic_id: 25042 reply_id: 101713[/import]

#3

There are programs for coords but not like that with layers in Photoshop. Kwik works with Photoshop but I haven’t used it so am unsure on specifics. (I’ve heard great things, though.)

RE size you should be able to position using either normal coordinates based on your config.lua file and then using scaling, such as letterbox or zoomEven.

Have you looked at image suffixes? Using them allows you to create an app that easily scales to various resolutions. [import]uid: 52491 topic_id: 25042 reply_id: 101767[/import]

#4

Peach - yes have looked into suffixes etc…

To try to pose my question more specifically, does the effect of letter box on some devices mean you’re placement of a smaller image on a precise point over the background image (i.e. based on % screen width/height) may be slightly off?

If yes, does what approach would you recommend? Do you have to always place objects based on % of background image width/height as opposed to screen width/height then?

If no, why would this be? Lets say there were black bars at top & bottom, then would screenHeight be higher than the actual size of the background content image which has been letter boxed. In this case setting an object at Y = 10% x ScreenHeight wouldn’t quite be right then no?

tks
[import]uid: 140210 topic_id: 25042 reply_id: 101963[/import]

#5

I’m not entirely confident on the terminology but this is how I’d explain it;

You have an active area on the screen. On an iPhone4 this is 640x960.

You use letterbox or zoomEven to scale up to the iPad, the “active area” is larger but the same width/height ratio. (This is why there are black bars.)

If you had positioned an object at x = 320 (the middle of the screen on the iPhone4) you will see it still appears in the middle on the iPad, because everything has scaled up evenly.

The only images that would appear in the black bars would be those you set as OUTSIDE the screen on the iPhone4. Eg;

myImage.y = -50

That would be in the black bar.

Play around a little switching between simulators and I think it might clear some of this up for you :slight_smile: [import]uid: 52491 topic_id: 25042 reply_id: 102005[/import]

#6

ok - will have a play first :slight_smile: [import]uid: 140210 topic_id: 25042 reply_id: 102014[/import]