Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

How to know where the image will be placed on the screen
Started by oceanisdeep95 Sep 02 2018 04:10 PM

3 replies to this topic
images picture placement
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

oceanisdeep95

[GLOBAL: userInfoPane.html]
oceanisdeep95
  • Observer

  • 2 posts
  • Corona SDK

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 



[TOPIC: post.html]
#2

dodi_games

[GLOBAL: userInfoPane.html]
dodi_games
  • Contributor

  • 317 posts
  • Corona SDK

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



[TOPIC: post.html]
#3

nick_sherman

[GLOBAL: userInfoPane.html]
nick_sherman
  • Corona Geek

  • 1,609 posts
  • Corona SDK

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.
  • horacebury likes this

[TOPIC: post.html]
#4

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,853 posts
  • Corona Staff

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




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: images, picture, placement