Confused with getting images to align

Getting Started Newbie Questions
#1

Am displaying a image that is 31 pixels wide at display.contentCenterX (imageOne)

If I print display.contentCenterX is reads 384.

if I print the imageOne.x it is 399.5

Now I want put another image above the first (imageTwo), so I place it using imageOne.x (i have to reference the first image incase it has moved).

if I print imageTwo.x it is 412 (image width is 25).

I could be having a bad day but this is really confusing me, am sure in the past if I used the x value from another image it made it sit so the centers of both images where the same.

Am using Build 843.

Dave

[import]uid: 117617 topic_id: 28698 reply_id: 328698[/import]

#2

So are you putting imageOne in the supposed centerX? I’m getting a little confused from the way you wrote it. Can you please write again a bit clearer? [import]uid: 147322 topic_id: 28698 reply_id: 115691[/import]

#3 
gunA = display.newImage("gun.png",display.contentCenterX, display.contentHeight - 110)  
local ball = display.newImage( blueBallGroup, "ball.png", gunA.x, pt.y )

Sorry.

Dave [import]uid: 117617 topic_id: 28698 reply_id: 115694[/import]

#4

I don’t really know what’s happening, but when I run your code, it’s putting it a little offset. (I expect that’s what you’re talking about) It works, however if I set the x and y after positioning it, like this:

[lua]gunA = display.newImage(“gun.png”)
local ball = display.newImage( blueBallGroup, “ball.png”)
gunA.x, gunA.y=display.contentCenterX, display.contentHeight-110
ball.x, ball.y=gunA.x, 384 – I don’t know where ‘pt’ is, or I’d put it there.[/lua]

See if that works.

binc :slight_smile: [import]uid: 147322 topic_id: 28698 reply_id: 115697[/import]

#5

Yep thats sorted it.

Weird thing is, now my Y setting is well off and I needed to lower the item to get it back where it should be.

It’s like adding the X/Y on newImage is not behaving like it should.

Thanks,

Dave [import]uid: 117617 topic_id: 28698 reply_id: 115701[/import]

#6

Hi Dave,

I can think of two things that might help you here:

1.) With Corona, it’s generally a good idea to always size your image files as a number that can be divided by two into a whole number. So assuming that your first image is square (31x31px), resize its canvas to 32x32. Likewise for the second image, assuming that it’s square (25x25px), resize the canvas to 28x28. Images with heights/widths that are odd or that don’t divide into whole numbers can exhibit odd behavior, and I’ve even seen them appear out of focus or blurry. And this is absolutely critical when creating bitmap masks.

2.) When you specify the x and y coordinates inside of the parenthesis (like you did in your example), you’re actually defining the upper-left hand corner of the image. When you specify them outside of the parenthesis (as binc did in his example), you’re specifying the center coordinates of the image, unless you set a different reference point. It’s a little quirky, but the way I personally get around it is to never define coordinates inside the parenthesis, but rather immediately afterwards. Also, if you aren’t familiar with the object:setReferencePoint() API, you should check it out. That will allow you to define exactly where you want your X and Y coordinates to be in relation to your image (center, top-left corner, bottom-right corner, etc.). In addition to resizing your PNGs to be divisible by 2, here’s my recommended code:

gunA = display.newImage("gun.png")  
 gunA:setReferencePoint(display.CenterReferencePoint)  
 gunA.x = display.contentCenterX  
 gunA.y = display.contentHeight - 110  
  
local ball = display.newImage( blueBallGroup, "ball.png")  
 ball:setReferencePoint(display.CenterReferencePoint)  
 ball.x = gunA.x  
 ball.y = pt.y )

Hope that helps!

Best,
Jason [import]uid: 27636 topic_id: 28698 reply_id: 115702[/import]

#7

Ah thanks Jason, that explains why I was having problems. I always thought everything used center unless you changed it.

Dave [import]uid: 117617 topic_id: 28698 reply_id: 115708[/import]