How to place images so they look good on every device?

Hi,

I am building a game for both IOS and Android. I understand that the images to be displayed correctly on every device with different height and width, we need different size of images for example with @2x, @4x.

I am building the game with the following config.lua:


application =

{

    content =

    {

        width = 320,

        height = 480,

        scale = “letterbox”,

        xAlign = “center”,

        yAlign = “center”,

        imageSuffix =

        {

            ["@2x"] = 1.5,

            ["@4x"] = 3.0

        }

    }

}


So I build the game based on the 320x480 ( I mean placing the images for example at y = display.contentWidth - 100.

I wanted an infinite background so to do that I created 3 images as follow:

y = display.contentHeight/2

snowBackground = display.newImageRect(“level1/FONDO1.png”,480,320)

snowBackground.x = display.contentCenterX

snowBackground.y = y

sceneGroup:insert(snowBackground)

snowBackground2 = display.newImageRect(“level1/FONDO2.png”,480,320)

snowBackground2.x = display.contentCenterX+480

snowBackground2.y = display.contentCenterY

sceneGroup:insert(snowBackground2)

snowBackground3 = display.newImageRect(“level1/FONDO3.png”,480,320)

snowBackground3.x = display.contentCenterX+2*480

snowBackground3.y = display.contentCenterY

sceneGroup:insert(snowBackground3)

And to make it move I created the following function:
 

local function moveBackground(self,event)

    if self.x < -480 then

        self.x = 952

    else

        self.x = self.x - i

    end

end

And then I assign the function accordingly:

snowBackground.enterFrame = moveBackground

snowBackground2.enterFrame = moveBackground

snowBackground3.enterFrame = moveBackground

Runtime:addEventListener(“enterFrame”, snowBackground)

Runtime:addEventListener(“enterFrame”, snowBackground2)

Runtime:addEventListener(“enterFrame”, snowBackground3)

If I test it on a 320x480 device the backgrounds fit perfectly, but then when testing it on an Iphone 7, it takes the @2x images so the size of the images are 640x960 and then they do not fit since it was designed for the 320x480.

How could I approach it?

Thanks

Hi! Please next time use the <> for your code.

I think you should read this

Hi! Please next time use the <> for your code.

I think you should read this