Best way to scale UI elements for all screen sizes

General
1

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!

2

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.

3

Okay thanks

4

@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

5

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:

http://iosres.com

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.

6

Ok thanks guys!

7

@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