The app I’m making is for iPads or iPad Minis. But I’m having some scaling problems. I position all of my shapes and sprites and texts with height and width for the X and Y, but often they still collide because of the size. What’s the best way to scale the elements so it maintains the same position for all screens. Thanks!
I can’t give you the correct answer, but this question has been asked and answered several times already. Try to do a forum search for scaling and see what you can find. I’d have to do the same thing to answer your question.
Okay thanks
@Coder1500 the way that everyone uses is that they put all their dimensions and positions in reference to WIDTH and HEIGHT, I have my own technique which I don’t wish to share, but that’s probably your best bet
You won’t have a problem with scaling when moving between regular iPads and iPad minis as they have the same number of points/ pixels:
The 12 inch pro is different resolution.
As @CamelCoder said, try defining coordinates/ sizes as fractions eg WIDTH * 0.1
instead of 102
. This might yield unexpected results when the orientation changes, or if you don’t use OVERLAY displaymode.
Ok thanks guys!
@Coder1500 I’m don’t know if you figured out your issue, but here’s an example that shows scaling on different devices. I posted something like this already, but I couldn’t find it so I wrote it again. Tap the screen to switch to different device sizes. You can rotate the screen to show different orientations. 2 dimensional objects ( circle, rectangle, Sprite) don’t scale exactly, but they’re not too bad. They could be resized using their width, height parameters to correct that, but I didn’t do that here.
EDIT: Added code to calculate an aspect ratio for the different screens so that circles, squares, and sprites appear with the correct x,y sizes.
displayMode(FULLSCREEN)
function setup()
device={"iPad Air","iPhone7 Plus","iPhone7","iPhone 5"}
rectMode(CENTER)
fontSize(40)
font("Baskerville-Italic")
x=300
y=100
xv=3
yv=3
dev=1
if WIDTH<HEIGHT then
tab={vec2(768,1024),vec2(414,736),vec2(375,667),vec2(320,568)}
else
tab={vec2(1024,768),vec2(736,414),vec2(667,375),vec2(568,320)}
end
end
function orientationChanged()
setup()
end
function draw()
background(0)
fill(255)
stroke(255)
strokeWidth(2)
-- same code for all devices
w=tab[dev].x -- width of device from table
h=tab[dev].y -- height of device from table
mw=tab[1].x -- largest width of all devices
mh=tab[1].y -- 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("qwertyuiop",mw/2,mh*.25)
text(device[dev],mw/2,mh*.95)
text(tab[dev].x.." "..tab[dev].y,mw/2,mh*.9)
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
-- 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>4 then
dev=1
end
end
end