Hello,
I’ve been attempting to make my project work not only on my iPad but all currently supported iOS-devices. I’m struggling to find a good way to run it on screen sizes different to my iPad’s.
I wanted to scale everything but the UI using scale((WIDTHHEIGHT)/(originalWidthoriginalHeight)) with originalWidth/originalHeight being the WIDTH and HEIGHT values of my iPad. However, when I tried this, it rendered everything to the bottom-left corner. How can I fix this or is there a more elegant method to support other aspect ratios/screen sizes?
Thanks in advance 
@Leon - one of the ways I do this is by using aspect. Determine aspect as aspect = WIDTH/HEIGHT and then scale by reading in the device screen width and screen height.
However you must remember the orientation as that will significantly change what you would like to produce. So you have to build into your project the ability to change your output according to orientation. Then you use aspect to scale if you transfer from one device to another.
I have tried that. The issue is, that the image isn’t centered anymore.
For instance, when I put scale(0.5) before all the drawing happens and run the project, it shows the a shrunken version of the scene in the bottom left corner rather than in the center.
@Leon - could you let us have a little example code and tel us what devices and resolutions you are transferring code to and from?
@Leon Here’s something I wrote back in March of 2017 for different screen sizes. I start with the iPad Pro and go down to the iPad watch. Tap the screen to switch sizes.
displayMode(FULLSCREEN)
function setup()
device={"iPad Pro","iPad Air","iPhone7 Plus","iPhone7","iPhone 5","Watch 42mm","Watch 38mm"}
rectMode(CENTER)
fontSize(40)
font("Baskerville-Italic")
x=300
y=100
xv=3
yv=3
dev=1
if WIDTH<HEIGHT then
tab={vec2(1024,1366),vec2(768,1024),vec2(414,736),
vec2(375,667),vec2(320,568),vec2(156,195),vec2(136,170)}
else
tab={vec2(1366,1024),vec2(1024,768),vec2(736,414),
vec2(667,375),vec2(568,320),vec2(195,156),vec2(170,136)}
end
wm=WIDTH
hm=HEIGHT
end
function orientationChanged()
setup()
end
function draw()
background(0)
fill(255)
stroke(255)
strokeWidth(3)
-- same code for all devices
w=tab[dev].x -- width of device from table
h=tab[dev].y -- height of device from table
mw=wm -- largest width of all devices
mh=hm -- largest height of all devices
ar=(w/h)/(mw/mh) -- aspect ratio
scale(w/mw,h/mh) -- scale of device to largest screen
sprite("Planet Cute:Character Pink Girl",x,y,101,171*ar)
sprite("Planet Cute:Character Cat Girl",100,600,101,171*ar)
text("Tap screen to show different device sizes.",mw*.38,mh*.25)
text(device[dev],mw*.2,mh*.45)
text(tab[dev].x.." "..tab[dev].y,mw*.2,mh*.4)
noFill()
ellipse(mw/2,mh/2,50,50*ar)
ellipse(mw*.75,mh*.75,100,100*ar)
line(mw/2,mh/2,0,mh)
line(mw*.75,mh*.75,200,100)
rect(mw/2,mh/2,mw,mh)
rect(200,100,100,100*ar)
-- end of same code for all devices
-- calculate motion of sprite
x=x+xv
y=y+yv
if x>=mw or x<=0 then
xv=-xv
end
if y>=mh or y<=0 then
yv=-yv
end
end
function touched(t) -- display different device size
if t.state==BEGAN then
dev=dev+1
if dev>#device then
dev=1
end
end
end
Thanks for your answers
I’ll try to implement this in my project and test it in XCode.
Actually, I still have difficulty scaling my project for different screen sizes.
Why isn’t it sufficient to put scale(…) in front of everything that’s supposed to be scaled? In my particular case I would use scale((width*height)/(WIDTH/HEIGHT)). When I do this, the sizes of all objects are exactly as needed. However, the objects aren’t centered anymore. Instead, depending on the screen size, everything is too much on the left or too much on the right unless the aspect ratio equals 1. Why is that and what can I do to fix it?
@Leon, i usually define all positions as a fraction of the WIDTH and the HEIGHT, e.g. pos=VEC2(0.1WIDTH, 0.9HEIGHT).
Thanks, I tried that. But it didn’t workout for me/this specific project. I’d just like to know how to get everything that’s drawn centered when using scale.
@Leon Are you trying to do the scaling on the actual device or are you on an iPad trying to scale it there for the different sizes.
I’ve attempted both. I’ve used the Simulator in XCode and I tried it on the iPad using Multitasking with another App open next to Codea.
@Leon Did you try running my code above. That does the scaling for different sizes and everything is in the correct scaled places for the different devices.
Yes, I tried that. I just don’t comprehend why scale(…) alone isn’t enough. When do you need mh and mw for adjusting the positioning of sprites?
@Leon Everything is relative to the lower left corner of the screen. When you draw or write text, it’s from that corner on all devices or it should be.
@dave1707 My issues is, that I’d like the App to scale automatically for all devices so I can potentially port it to Android using loveCodea.
@Leon You should be able to read the width and height values of the device and scale accordingly. All of your code placement should be based using the width and height and not hard coded.
@dave1707 Most of my code doesn’t use width and height. Isn’t it possible to use scale(…) and transform(…, …) instead?
@Leon You use width and height so you know the size of the screen you’re using. And you draw things using width and height so things are on the screen in the correct position no matter the screen size. If you try drawing something on the iPad Pro at position 1000,1000 it will be in the upper right corner. On the iPad Air it will be off the screen. But if you draw something at position width - 50, height - 50, it will be in the upper right corner no matter what device you use.
@dave1707 Thanks. I’m aware of why you should use width and height. I would just like to know whether you can use scale to shrink everything and translate to put it in the center of the screen. I couldn’t get it to work.
@Leon Can you show a simple program of how you’re trying to center something using scale and translate. Maybe if I can see how you’re trying to do it, I might see why it doesn’t work.