Codea's pixel use

General
1

I’m using Codea on an iPad mini and when defining the location of sprites and other objects, I was just wondering if when I say for example, WIDTH-100, the location will look the same on an iPad or iPhone or if it needs to be in relation to width (e.g. WIDTH*1/4).

2

@Staples The ipad and iPad mini with retina display have the same pixel size but the mini has a smaller display size. So WIDTH-100 will be the same except appear smaller on the mini. Even on a retina vs non retina, WIDTH -100 will still be the same because the retina display uses pixels at .5 value increments to give it the higher resolution.

3

@dave1707 So, if I wanted it to look the same on all devices, what would I have to do?

4

You could use percentages of the screen size like:

w=WIDTH/100
h=HEIGHT/100

So w&h are 1% of the screen size in their relative dimensions

To get the device type you can use deviceMetrics() like so

for k,v in pairs(deviceMetrics()) do
        print(k.."="..v)
    end
5

@Staples I ran the below code on my iPad Air (retina) and ipad 1 (non retina) and it looked the same. I’m sure it will look the same on a mini. I can’t say what it will look like on an iPhone.


function setup()
end

function draw()
    background(40, 40, 50)
    fill(255)
    ellipse(WIDTH-100,300,100)
end
6

@dave1707 Ok, thanks. I’m pretty far into a project at the moment so I will probably try to finish it to a point and test how it looks. If it looks bad on a non-retina, I will probably use percentages as @Coder described.

7

@Staples I did some other checking and the iPhone 4 has a width to height ratio of 1 to 1.5 . The iPhone 5 has a ratio of 1 to 1.775 . The ipad has a ratio of 1 to 1.333 . So depending on the device, you’ll have to scale what’s being displayed by those ratios if you want them to look similar.

8

@Staples, non retina and retina iPads will look the same using WIDTH - 100. However, if you want it to scale to iPhone as well, you need to use percentages such as WIDTH * 3/4

9

@Staples It should look the same on a retina and non retina device. Only sharper on the retina. The problem you’ll have is the iPhone 4 and iPhone 5 that have a lower resolution and different width to height ratios.

10

@dave1707 @JakAttak @Coder I just had an idea and as I don’t have an iPhone, I just wanted to verify if this would work. If I used this code

print(WIDTH)
print(HEIGHT)
--let's say it returned width=575 and height=1050
w = WIDTH/575
h = HEIGHT/1050

to define 1 pixel on my screen as a percentage. Then if I added *w to all x values and *h to all y values, would it look the same on an iPhone, iPad w/ retina, etc.?

11

@Staples Have a look at the scale() command under GRAPHICS. That might be an easy way to do what you want.

12

@Staples Here’s an example of the scale() command. The rectangle in the lower left of the screen is the dimensions of the iPhone display. I drew some objects on the ipad display, did the scale command and drew the same objects on the iPhone display. You can see how the scale command redraws it to the iPhone scale.

EDIT: Added code to handle screen rotations.


Code removed. See discussion "scale command" for new example.
13

@Staples, to get it to scale by multiplying everything by w and h, do w = WIDTH / 1024 and h = HEIGHT/768 (assuming you are using landscape, if not switch the 768 and 1024. This will give you the scale factor of your screen to an iPad screen, so it should scale properly.

14

@JakAttak Oh,ok I just made up the width and height in mine because I didn’t have my iPad then. So, even for non-retina displays, the height (in portrait mode) and width are always 1024 and 768?

15

@Staples, yes, all iPads are 1024 x 768 for Codea