Retro Pixel Style and config.lua

Hi Daniela,

Before considering this, you should think about the user experience. A user on a smaller device (phone) would only see a small portion of the game, but a user on a tablet would see a much larger portion of the game? This seems a bit “unfair” to phone users IMHO. :slight_smile:

Brent

How is a game like “Roller Polar” for example doing this kind of “scaling” for all devices?

What about a “solution” for the same basic representation across the screen on all devices, but without getting stretched, so pixels appear still as even sized pixels and not stretched? Can this be done?

And how can (for example) a character placed on a pixel background on an exact position to fit the pixels in the background without an offset to the background pixels? With a retro style game the character pixel “grid” should be the same pixel “grid” the background and GUI are using. How can this be achieved for placing elements like UI and characters on screen? Movement of the characters hasn’t to be pixel perfect and can be smooth, but when a character is stopped or placed on the screen it should be in front of the exact background pixels positions.

Hope this makes sense :wink:

Has anyone done this with Corona before?

so you want your content size to vary with device resolution, effectively an eighth of it?  then how about something like this (though you’ll very likely still need to tweak to taste):

application = { content = { width = math.floor(display.pixelWidth/8), height = math.floor(display.pixelHeight/8),

Thx for the tip Dave! I guess it’s the right direction because now pixels look like pixels. :slight_smile:

Now I have only one problem unsolved… how can I make sure to make this look similar on each device? Right now with an iPad mini I have HUGE images and with an iPad Air it’s looking good.

now your problem is “density”, wrt retina displays (or any high-density display, regardless of brand name, ie android)

corona normally handles this given a “typical” config.lua - but you’re intentionally bypassing that to get your pixel look

so instead of dividing TRUE pixelWidth/Height by 8, you’d want to divide “density-normalized-width/height” by 8.

that is, you’d like to treat a 2048x1536 device as if it were a 1024x768 device (or vice versa – just get either one “right”, then normalize the other to match)

on android this is pretty simple now that they’ve added some queries to system.getInfo() for dpi

on ios, i don’t think you can query for directly for dpi, but since there are fewer devices you could try sniff-detect by device name

hth

Thank you for the info!

I have developed some kind of “hack” right before I got your info here and to achieve even sized pixels on different screens with the following config.lua file… but now I have a new problem because I don’t know how to place images on screen to the correct coordinates: In detail this means, when I’m using a background image which is big enough to cover all kind of screen sizes (it gets cropped on the edges depending on the screen sizes). This image is always centered on the screen. Now I want to place (for example) characters on the screen on the correct positions inside the visible area of the screen. Normally I could use the display.screenOriginX and display.screenOriginY values to make positioning on all screens the same. But this isn’t working with the hacked config.lua file. Characters are placed correctly based on the screen size, but how can I place them over the background image now, so it is the same “over the background” coordinates for all screens (devices)?

local aspectRatio = display.pixelHeight / display.pixelWidth local pix=math.floor(display.pixelHeight/240) application = {    content = {        width = math.floor(display.pixelWidth/pix),        height = math.floor(display.pixelHeight/pix),       scale = "letterBox",       antialiasing=false,       fps = 30,    }, }

i don’t think you can have it both ways.  that is, you can’t say “i want a content size that varies by device resolution” (your pixel setup) and “i want a consistent content size regardless of device resolution” (typical corona setup)

you could set it up EITHER way and get it to work, BUT you’ll have to “do the math” for the half of the problem that you prevent corona from doing for you

with the pixel setup you solve the “eight device pixels equals one content pixel” problem for free, but have a varying sized content area you’ll have to deal with for fullscreen images

with the typical setup you get a consistent content size (caveat any letterboxing) for free, but would have to deal with sprite scaling (or equiv display group scaling, etc) to get your exact-pixel upscaling look

Thx for the details Dave! This helps a lot in figuring out how to achieve the desired look for all devices.

Why don’t you generate/produce your content with the visual look you want instead of trying to play with the config  ?

How is a game like “Roller Polar” for example doing this kind of “scaling” for all devices?

What about a “solution” for the same basic representation across the screen on all devices, but without getting stretched, so pixels appear still as even sized pixels and not stretched? Can this be done?

And how can (for example) a character placed on a pixel background on an exact position to fit the pixels in the background without an offset to the background pixels? With a retro style game the character pixel “grid” should be the same pixel “grid” the background and GUI are using. How can this be achieved for placing elements like UI and characters on screen? Movement of the characters hasn’t to be pixel perfect and can be smooth, but when a character is stopped or placed on the screen it should be in front of the exact background pixels positions.

Hope this makes sense :wink:

Has anyone done this with Corona before?

so you want your content size to vary with device resolution, effectively an eighth of it?  then how about something like this (though you’ll very likely still need to tweak to taste):

application = { content = { width = math.floor(display.pixelWidth/8), height = math.floor(display.pixelHeight/8),

Thx for the tip Dave! I guess it’s the right direction because now pixels look like pixels. :slight_smile:

Now I have only one problem unsolved… how can I make sure to make this look similar on each device? Right now with an iPad mini I have HUGE images and with an iPad Air it’s looking good.

now your problem is “density”, wrt retina displays (or any high-density display, regardless of brand name, ie android)

corona normally handles this given a “typical” config.lua - but you’re intentionally bypassing that to get your pixel look

so instead of dividing TRUE pixelWidth/Height by 8, you’d want to divide “density-normalized-width/height” by 8.

that is, you’d like to treat a 2048x1536 device as if it were a 1024x768 device (or vice versa – just get either one “right”, then normalize the other to match)

on android this is pretty simple now that they’ve added some queries to system.getInfo() for dpi

on ios, i don’t think you can query for directly for dpi, but since there are fewer devices you could try sniff-detect by device name

hth

Thank you for the info!

I have developed some kind of “hack” right before I got your info here and to achieve even sized pixels on different screens with the following config.lua file… but now I have a new problem because I don’t know how to place images on screen to the correct coordinates: In detail this means, when I’m using a background image which is big enough to cover all kind of screen sizes (it gets cropped on the edges depending on the screen sizes). This image is always centered on the screen. Now I want to place (for example) characters on the screen on the correct positions inside the visible area of the screen. Normally I could use the display.screenOriginX and display.screenOriginY values to make positioning on all screens the same. But this isn’t working with the hacked config.lua file. Characters are placed correctly based on the screen size, but how can I place them over the background image now, so it is the same “over the background” coordinates for all screens (devices)?

local aspectRatio = display.pixelHeight / display.pixelWidth local pix=math.floor(display.pixelHeight/240) application = {    content = {        width = math.floor(display.pixelWidth/pix),        height = math.floor(display.pixelHeight/pix),       scale = "letterBox",       antialiasing=false,       fps = 30,    }, }

i don’t think you can have it both ways.  that is, you can’t say “i want a content size that varies by device resolution” (your pixel setup) and “i want a consistent content size regardless of device resolution” (typical corona setup)

you could set it up EITHER way and get it to work, BUT you’ll have to “do the math” for the half of the problem that you prevent corona from doing for you

with the pixel setup you solve the “eight device pixels equals one content pixel” problem for free, but have a varying sized content area you’ll have to deal with for fullscreen images

with the typical setup you get a consistent content size (caveat any letterboxing) for free, but would have to deal with sprite scaling (or equiv display group scaling, etc) to get your exact-pixel upscaling look

Thx for the details Dave! This helps a lot in figuring out how to achieve the desired look for all devices.

Why don’t you generate/produce your content with the visual look you want instead of trying to play with the config  ?