Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

How to place images so they look good on every device?
Started by alexfontanellas Jul 23 2018 10:29 AM

1 reply to this topic
images scaling move infite background
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

alexfontanellas

[GLOBAL: userInfoPane.html]
alexfontanellas
  • Observer

  • 6 posts
  • Corona SDK

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
 

 



[TOPIC: post.html]
#2

dodi_games

[GLOBAL: userInfoPane.html]
dodi_games
  • Contributor

  • 370 posts
  • Corona SDK

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

 

I think you should read this




[topic_controls]
[/topic_controls]