[SOLVED] Background image help!

Hey guys, in Photoshop I created a 1136 px x 640 px background.png image. In the code I made sure the picture was aligned. This is my code.

local bg = display.newImage("images/bg1.png", -700, 0)

I tried many different sizes (All with the 16:9 ratio).
I can create a rectangle that fills up the entire screens.
And yes I am rendering on an iPhone 5 simulator.
Please help! Thanks

If you have copied this directly from your code, then the solution is easy. You’ve missed a comma between the image name and the “left” argument

local bg = display.newImage("images/bg1.png"-700, 0)

–should be 

local bg = display.newImage(“images/bg1.png”, -700, 0)

i was thinking maybe other image software’s codes have some similarities with yours .  thank you

Sadly, no. I did miscopy the text. There is a comma!

In that case, I am not sure what your problem is?

Is the image not appearing / wrong size / wrong position?

When I simulate the app the image appears, but is much smaller than it should be (black rectangles on the bottom and right). I also tried making a big 7000px x 4500px with no luck.

Ok so that tells me what you are seeing, but what result are you trying to get? Can you paste in your code so we can see what you are trying to do?

Also, if you are using dynamic scaling (i.e. you have set a width and height in config.lua), then it could be that you need to use display.newImageRect() instead of display.newImage().

Here is a picture of the result.

screenshot.png

Here is my background code.

local bg1 = display.newImage("images/bg1.png",-700, 0)

Here is the config file

application = { content = { width = 1136, height = 640, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, } --]] }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } } --]] }

Any help?!?

Still no luck :confused:

I tried using display.newImageRect but that didn’t even show the background.

The config.lua needs to be width 640, height 1136.  The config.lua always is done assuming a vertical device. 

Beyond that here is how I would code it:

local bg = display.newImageRect(“images/bg1.png”, 1136, 640)

bg.x = display.contentCenterX

bg.y = display.contentCenterY

Hey, Rob. 

Unfortunatly, that does not work :confused:

The changing of the config file helped a bit, but when I do newImageRect, the background is black.

Hi @masniebylski,

Can you do this in your code:

[lua]

print( “SUFFIX:”, display.imageSuffix )

[/lua]

And tell me what the value is when you run it?

Also can you post your code?  At least around your background and any positioning you need.

@Brent- The suffex is NIL 

@Rob

The main.lua

-- Hide the status bar. display.setStatusBar( display.HiddenStatusBar ) --Set up the physics world local physics = require( "physics" ) physics.start() --physics.setDrawMode( "hybrid" ) -- Overhead view, like looking at a pool table from above. physics.setGravity( 0, 0 ) -- [Background] --local bg = display.newRect(-700, 0, 2272, 1280) --bg:setFillColor(0,180,40) local bg = display.newImageRect("images/bg1.png", 1136, 640) bg.x = display.contentCenterX bg.y = display.contentCenterY print("Suffix:", display.imageSuffix) --Player local player -- [Pad] local up local left local down local right function spawnWall(x,y) local wall= display.newImage("images/wall.png", x, y) physics.addBody(wall, "static",staticMaterial) end 

And the current config is 

application = { content = { width = 1136, height = 640, scale = "letterBox", fps = 30, --[[imageSuffix = { ["@2x"] = 2, } --]] }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } } --]] }

BTW, when I changed the config, the image proportions became messed up.

Hi @maxniebylski,

As Rob stated above, the width and height need to be reversed… width is the short side, height the tall side… even if you’re doing a landscape-oriented app (the orientation(s) are handled in the build.settings file, not the config.lua). So first, swap those around.

As for the image suffix being “nil”, that means that it’s at the 1:1 ratio on the device. As such, it’s not even attempting to use your @2x images. You should set up all of your potential image suffixes with the proper names, and then create your images accordingly. That should solve the issues you’re having.

Best regards,

Brent

Hey Brent, sorry for the confusion. First off, the @2x part of the config is all in comments, so i’m not using it. Second, when I do switch the height and the width, my 100x100 pixel images are messed up (their width is like 2 times their height)

I presume your 100x100 pixel image is nothing to do with the background?

If it IS the background image, then the width SHOULD be 2 times the height, according to the last code you posted:

local bg = display.newImageRect("images/bg1.png", 1136, 640)

The arguments for newImageRect are (imageName, width, height), so swap the 2 numbers and you should be good.

If the 100x100 image is completely unrelated, then you need to post the code for it so we can take a look.

The 100x100 is unrelated. You can see the code 4 posts above this one. The function spawnWall is the 100x100 image.

It is now fixed! Thanks for ALL the help xD

If you have copied this directly from your code, then the solution is easy. You’ve missed a comma between the image name and the “left” argument

local bg = display.newImage("images/bg1.png"-700, 0)

–should be 

local bg = display.newImage(“images/bg1.png”, -700, 0)