How to know where the image will be placed on the screen

So i wanted to know what the best method to place an image on the screen ?

i normally use  display.newImageRect  to import the image then i use 

variable.x= contentCenterX ( * play with number )

variable.y= contentCenterY ( * play with number )

this results in me spending 10mins to place on the image where i want it to go 

plus i dont know how to find the X,Y cordinates of an image (in an image sheet)

currently i was trying to place an image on the bottom of the screen the image would either go particaily under the screen or had a slight gap between the bottom and the image 

Hi! I think its all about time to understand content scaling and positioning.  You can make some variables to define the borders of the screen like:

local centerX = display.contentCenterX

and

local left = centerX - display.actualContentWidth / 2

I always start with centerX and center based on my content area.

DoDi

1 Like

https://docs.coronalabs.com/api/library/display/index.html

Loads of helpful values available here which will allow you to calculate the edges of the screen on any device.

You also need to read about anchor points. If you anchor an image at top left, you can then easily place it in the top left no matter its size.

You might want to spend some time reading this tutorial:  https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/

It will help you understand the Corona content area set up which should help with positioning.

Because every game and app is different there are as many different strategies on positioning items. For instance, if I’m creating a menu, once I figure out where to put the first button then to put the next buttons I use a relative placement. Let’s say my buttons are 50 px high and I want a 25 px padding between them:

local buttonPadding = 75 button1.x = display.contentCenterX button1.y = 100 button2.x = button1.x button2.y = button1.x + buttonPadding button3.x = button1.x button3.y = button2.y + buttonPadding button4.x = button1.x button4.y = button3.y + buttonPadding button5.x = button1.x button5.y = button4.y + buttonPadding

Then if you don’t want the entire button group centered, you can just change the .x of button1 and the rest of the buttons move with it. Need to change the spacing, adjust the value of button padding.

Some objects need edge positioned or a relative distance from an edge. Some objects need center positioned or a relative distance from the center.  You need to understand that the boundaries of the defined content area don’t always mean the edge of the screen or device. Frequently at least two edges of the screen are not the same as two edges of the defined content area. Some objects have to stay inside the bounds of the defined content area. 

You will end up using these various boundaries to position your objects. By knowing your object sizes you can calculate a lot of your locations instead of resulting to trial and error.

Rob

Hi! I think its all about time to understand content scaling and positioning.  You can make some variables to define the borders of the screen like:

local centerX = display.contentCenterX

and

local left = centerX - display.actualContentWidth / 2

I always start with centerX and center based on my content area.

DoDi

https://docs.coronalabs.com/api/library/display/index.html

Loads of helpful values available here which will allow you to calculate the edges of the screen on any device.

You also need to read about anchor points. If you anchor an image at top left, you can then easily place it in the top left no matter its size.

You might want to spend some time reading this tutorial:  https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/

It will help you understand the Corona content area set up which should help with positioning.

Because every game and app is different there are as many different strategies on positioning items. For instance, if I’m creating a menu, once I figure out where to put the first button then to put the next buttons I use a relative placement. Let’s say my buttons are 50 px high and I want a 25 px padding between them:

local buttonPadding = 75 button1.x = display.contentCenterX button1.y = 100 button2.x = button1.x button2.y = button1.x + buttonPadding button3.x = button1.x button3.y = button2.y + buttonPadding button4.x = button1.x button4.y = button3.y + buttonPadding button5.x = button1.x button5.y = button4.y + buttonPadding

Then if you don’t want the entire button group centered, you can just change the .x of button1 and the rest of the buttons move with it. Need to change the spacing, adjust the value of button padding.

Some objects need edge positioned or a relative distance from an edge. Some objects need center positioned or a relative distance from the center.  You need to understand that the boundaries of the defined content area don’t always mean the edge of the screen or device. Frequently at least two edges of the screen are not the same as two edges of the defined content area. Some objects have to stay inside the bounds of the defined content area. 

You will end up using these various boundaries to position your objects. By knowing your object sizes you can calculate a lot of your locations instead of resulting to trial and error.

Rob