How to center - x axis 0 is going away from screen

[agrizphpsoft]

I have four buttons. I want them in the center.

 

I tried the helloworld app to display text. when i give 0,0 to x and y axis, i can only see the “world”. Hello was missing.

local textObject = display.newText( "Hello World!", 0, 0, native.systemFont, 24 )

Only World! is visible.

Now

One button size is 64px

math.round(( display.contentWidth / 2 ) - ( ( 4 \* ( buttonWidth ) + 15 ) / 2 ))

four buttons and each button will have 5px space between each other. So, the above calculation will give the x axis for the first button. So, i can place other buttons accordingly. But these codes are not working.

I tried

display.pixelWidth

display.viewableContentWidth

display.actualContentWidth

display.contentCenterX

But i am not able to center it.

Is there any cook book i can go through with corona?

Please help

Thanks

[joedavinci]

OK I am unsure what you mean or what you are trying to do with the “64 pixel button”… but I think I know where your problems are starting.

By default, when you create and position an object on screen, the position (x and y coordinates) you are giving it are the position of the object’s CENTER…

• in case of a square, it’s the middle of the square on both axis…

• in case of a circle, it’s the middle point of the circle…

• in case of a text object, it is the middle of the text… so basically you are choosing a position to which the text will be CENTER-aligned.

you can change these so called “anchor points” using simple variable setting of “anchorX” and “anchorY” … they have values from 0 to 1:

anchorX: 0 = left, 1 = right, 0.5 = center

anchorY: 0 = top, 1 = bottom, 0.5 = center

so what you want to do is this:

local textObject = display.newText( "Hello World!", 0, 0, native.systemFont, 24 ) textObject.anchorX = 0 textObject.anchorY = 0

…and then your text object will be alligned to the top left corner of your screen.

[joedavinci]

also if you need to play with text more, and start juggling with both anchor points, text width, line breaks and alignment, you need to use the more advanced way to set up the text object :

local options = { --parent = textGroup, text = "Hello World", x = 100, y = 200, width = 128, --required for multi-line and alignment font = native.systemFontBold, fontSize = 18, align = "right" --new alignment parameter } local myText = display.newText( options )

… this is from the corona documentation…

I usually simplify/shorten it by containing the options array directly in the setup call:

local myText = display.newText( { text = "Hello World", x = 100, y = 200, width = 128, --required for multi-line and alignment font = native.systemFontBold, fontSize = 18, align = "right" --new alignment parameter } )

[joedavinci]

OK I am unsure what you mean or what you are trying to do with the “64 pixel button”… but I think I know where your problems are starting.

By default, when you create and position an object on screen, the position (x and y coordinates) you are giving it are the position of the object’s CENTER…

• in case of a square, it’s the middle of the square on both axis…

• in case of a circle, it’s the middle point of the circle…

• in case of a text object, it is the middle of the text… so basically you are choosing a position to which the text will be CENTER-aligned.

you can change these so called “anchor points” using simple variable setting of “anchorX” and “anchorY” … they have values from 0 to 1:

anchorX: 0 = left, 1 = right, 0.5 = center

anchorY: 0 = top, 1 = bottom, 0.5 = center

so what you want to do is this:

local textObject = display.newText( "Hello World!", 0, 0, native.systemFont, 24 ) textObject.anchorX = 0 textObject.anchorY = 0

…and then your text object will be alligned to the top left corner of your screen.

[joedavinci]

also if you need to play with text more, and start juggling with both anchor points, text width, line breaks and alignment, you need to use the more advanced way to set up the text object :

local options = { --parent = textGroup, text = "Hello World", x = 100, y = 200, width = 128, --required for multi-line and alignment font = native.systemFontBold, fontSize = 18, align = "right" --new alignment parameter } local myText = display.newText( options )

… this is from the corona documentation…

I usually simplify/shorten it by containing the options array directly in the setup call:

local myText = display.newText( { text = "Hello World", x = 100, y = 200, width = 128, --required for multi-line and alignment font = native.systemFontBold, fontSize = 18, align = "right" --new alignment parameter } )