Retina Display

Games
#1

what is, how works?

I have seen alot people speaking about retina display, in some apps I have seen “using Retina Display” and other things
so… what is this? and how it’s work? i know that is connected with Images Resolutions, but how works I dont know… and if possible… can I have only 1 image with hight resolution that is scaled for all devices correctly

thanks [import]uid: 23063 topic_id: 10516 reply_id: 310516[/import]

#2

Retina display is a reference to screen resolution. An iPod or iPhone 3G has the same screen dimensions as an iPhone 4G. However…the resolution of the older devices is 320x480 pixels where the 4G is 640x960 in the same screen area. The higher resolution is referred to as retina display because the human eye cannot detect individual pixels at that resolution.

Refer to the docs/apis for info about how to use it.
http://developer.anscamobile.com/content/configuring-projects
http://blog.anscamobile.com/2010/11/content-scaling-made-easy/

Generally speaking…
A normal image that is 32x32 pixels in size will need to be 64x64 pixels and named with an @2x extension to be used in retina devices. The config file is where you tell the device which image to use. Refer to the docs about details on this. Read those docs!!! There is a lot of info there if you are just starting out. [import]uid: 9492 topic_id: 10516 reply_id: 38298[/import]

#3

so i cant use only 1 image and scale her for all devices? [import]uid: 23063 topic_id: 10516 reply_id: 38302[/import]

#4

You can…but if you have too many images…all that texture memory can bog down a slower device.

This is why you see HD versions separate from normal versions. When you use retina display…the smaller (slower) devices use lower resolution images where the faster devices (4G) can use the higher resolution image.

If you are talking about a few button graphics…you can just use 1 universal image…but if you have LOTS of images…I recommend you separate them. [import]uid: 9492 topic_id: 10516 reply_id: 38305[/import]

#5

@Dhennrich

You need to make 2 images of the same kind,

if you have an image named player.png that is 32x32px then you need to make a player@2x.png image that is 64x64px.

Then in your code, if you want to use the Retina mode, you call the image like this;

local player = display.newImageRect("player.png", 32, 32)  
 player:setReferencePoint(display.CenterReferencePoint)  
 player.x = 200  
 player.y = 200

Note that normally you would just call display.newImage. You must also add the @2x thingy inside the config.lua.

You can also use the @2x images for the ipad but if you don’t want to scale the backgrounds you can make images with the ipad dimensions.

So when you make your images in photoshop of what image editor you use, make the canvas 640x960 so you can see what it looks like and then when you export the images you just have to scale the saved png files by 50%… [import]uid: 34126 topic_id: 10516 reply_id: 38308[/import]

#6

and if I want to use for android i will need a 3th imagem? like @1.6x? or whatever ?
i want to make a game for all devices, iOS and Android, but if I have to make 3 images for support all devices will make my game heavy dont you think? [import]uid: 23063 topic_id: 10516 reply_id: 38315[/import]

#7

I would do a separate build for android devices with another set of images.

I just been making games for a few months so I don’t know what is best for android and I only target iOS devices at the moment but I try to write my code as universal as I can.

I make my images (backgrounds, player, enemies, power ups etc) in adobe illustrator so I can scale my images easily without loss of quality, then all the buttons I make in photoshop. [import]uid: 34126 topic_id: 10516 reply_id: 38320[/import]