CODEWITHSUNDEEP
luacoronasdk
QuestionMarks
QuestionMarks

Reputation: 246

Image displays in top left corner in Corona Simulator

I just started playing with lua / Corona, and have been using the book "Create Mobile Games with Corona." (Silvia Domenech) The first project in the book is to make a simple planet defense game. For this, I am using a multi-screen application (or "scene" as it's called in OS X). The very first step is displaying an image using groups in Corona.

The book has me enter the following code in the main scene group:

local image = display.newImage( "images/iphone_767.png")
group:insert( image )

After adding it to (what I think is) the correct group, the code looks like this:

-- Called when the scene's view does not exist:
function scene:createScene( event )
    local group = self.view

    -----------------------------------------------------------------------------
local image = display.newImage( "images/iphone_767.png")
group:insert( image )       
    --  CREATE display objects and add them to 'group' here.
    --  Example use-case: Restore 'group' from previously saved state.

    -----------------------------------------------------------------------------

end

For the image, I first tried an image that was 320 x 480. When it rendered on the simulator, it is situated way off to the top left of the simulator. Here is a screenshot of how it renders: https://i.sstatic.net/s0sH3.jpg

The config file is set for 320 x 480 px. I'm really at a loss as to what could be causing this since I haven't modified anything outside of what I described. Any ideas?

Upvotes: 2

Views: 2546

Answers (4)

happy_marmoset
happy_marmoset

Reputation: 2215

Seems there is simplified way exists now:

image.x = display.contentCenterX
image.y = display.contentCenterY

Or single line:

local image = display.newImage('images/iphone_767.png', display.contentCenterX, display.contentCenterY)

But now it is seems more conventional pattern is to create centeredGroup first:

-- Create centered group
local centeredGroup = display.newGroup()
centeredGroup.x = display.contentCenterX
centeredGroup.y = display.contentCenterY

-- Add background
local image = display.newImage(centeredGroup, 'images/iphone_767.png', display.contentCenterX, display.contentCenterY)

Upvotes: 1

Rob Miracle
Rob Miracle

Reputation: 3063

Corona SDK has recently started using a new graphics engine that affects how things are positioned. The display.newImage() used to draw the top left corner at 0, 0, but now it draws the center at 0, 0. Your best bet is to always explicitly set the .x and .y of the image where you want it.

Upvotes: 1

Jordan Schuetz
Jordan Schuetz

Reputation: 1036

I personally like setting a variable to display.contentWidth and display.contentWidth.

_W = display.contentWidth
_H = display.contentHeight
image.x = _W/2
image.y = _H/2

You could also format it like so:

image.x = _W*.5
image.y = _W*.5

Upvotes: 1

Anand
Anand

Reputation: 3760

Set the x and y values of the token to screen center (assuming you want to center it):

image.x = display.contentWidth/2
image.y = display.contentHeight/2

Thanks Anand

Upvotes: 2

Related Questions