Retro Pixel Style and config.lua

Audio and Graphics
#1

I want to create a retro pixel style game, using only one set of images (without the @2x and other sizes)… like for example sprites in size 64x64 and I want them to be shown bigger on the screens, so they will look like in a retro pixel style game.

Now I wonder how I can use a config.lua setting to include ALL device screen sizes and make the images work on all of them. I can figure out how to make it work on iOS but when testing on an htc or other android devices the images (some pixels) looks wrong because some pixels will be stretched or not exactly upscaled.

Does anyone have a solution on how to build retro pixel style graphics which are working on all devices (showing the same kind of resolution on each screen without stretched pixels)?

Thank you!

#2

It sounds like you need the Ultimate config.lua file. Here it is.

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 60, imageSuffix = { ["@2x"] = 1.3, }, }, }

For more information, read this: http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

#3

Also, I use “nearest neighbor”:

http://docs.coronalabs.com/api/library/display/setDefault.html 

display.setDefault( "minTextureFilter", "nearest" ) display.setDefault( "magTextureFilter", "nearest" )
#4

Thx for your help!

Regarding the ultimate config.lua file: Is there a way to change the code to upscale pixels right from the beginning? Without having to upscale them loading the image files. Like for example: setting the screen size to width 320px and height 480px which will result in BIG “pixel”-images on all screens?

#5

Hi Daniela,

So you’d like to just use 320x480 content size on all devices? If so, you should drop that flexible config setup and just use that content size.

Take care,

Brent

#6

Hi Brent,

can you please post an example for a config.lua file to get a pixel look (even sized pixels on all devices and displays)? When I test the following code:

application = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = 320, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = 480, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = 'letterbox', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } }

I only get very small details but no bigger pixels.

#7

Hi Daniela,

I’m confused what your goal is. Do you want, for example, “pixels” of 8x8 real pixels on all devices? Such that, on an iPhone, there would be fewer pixels across the screen compared to the wider iPad?

Brent

#8

yes, exactly. Sorry for my bad explanation.

#9

Hi Daniela,

OK, please clarify a bit more. An iPhone5 is 640x1136 in actual pixels. A modern iPad is 1536x2048. So, assuming you have “pixels” of 8x8, does that mean you want 80 across on the iPhone5, and 192 across on the iPad? Or, do you want the same basic representation (approximate number of these “pixels”) across the screen on both devices?

Brent

#10

A solution for both would be great! :slight_smile: But what I’m looking for right now is a sample for the first case you mentioned… but it should work for iOS AND Android devices.

#11

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

#12

It sounds like you need the Ultimate config.lua file. Here it is.

local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 60, imageSuffix = { ["@2x"] = 1.3, }, }, }

For more information, read this: http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

#13

Also, I use “nearest neighbor”:

http://docs.coronalabs.com/api/library/display/setDefault.html 

display.setDefault( "minTextureFilter", "nearest" ) display.setDefault( "magTextureFilter", "nearest" )
#14

Thx for your help!

Regarding the ultimate config.lua file: Is there a way to change the code to upscale pixels right from the beginning? Without having to upscale them loading the image files. Like for example: setting the screen size to width 320px and height 480px which will result in BIG “pixel”-images on all screens?

#15

Hi Daniela,

So you’d like to just use 320x480 content size on all devices? If so, you should drop that flexible config setup and just use that content size.

Take care,

Brent

#16

Hi Brent,

can you please post an example for a config.lua file to get a pixel look (even sized pixels on all devices and displays)? When I test the following code:

application = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; content = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width = 320, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height = 480, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; scale = 'letterbox', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fps = 60, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } }

I only get very small details but no bigger pixels.

#17

Hi Daniela,

I’m confused what your goal is. Do you want, for example, “pixels” of 8x8 real pixels on all devices? Such that, on an iPhone, there would be fewer pixels across the screen compared to the wider iPad?

Brent

#18

yes, exactly. Sorry for my bad explanation.

#19

Hi Daniela,

OK, please clarify a bit more. An iPhone5 is 640x1136 in actual pixels. A modern iPad is 1536x2048. So, assuming you have “pixels” of 8x8, does that mean you want 80 across on the iPhone5, and 192 across on the iPad? Or, do you want the same basic representation (approximate number of these “pixels”) across the screen on both devices?

Brent

#20

A solution for both would be great! :slight_smile: But what I’m looking for right now is a sample for the first case you mentioned… but it should work for iOS AND Android devices.