Scaling, supporting multiple screen resolutions

@dave1707 Sorry for not responding earlier, I took a break from coding. I’ve been trying to put together an example of what I mean but for some reason I couldn’t replicate my issue in another project. I’ll give stripping down my current project to the bare minimum to show you, what exactly is happening. This could take a while though :#

Hello,
after a longer break, I now opened up the project again and I still have the same issue. Here’s what I’m trying to do:
I have made a game, which mostly uses hardcoded positions like (800, 400) and only rarely positions relative to WIDTH and HEIGHT.

I would now like to display the game on different screen sizes.
For that, I would like to keep the aspect ratio, say 16:9 (like most modern monitors), and then shrink or scale the entire image to fit the screen. This way, it would keep the same aspect ratio, which prevents the image from being stretched, but it doesn’t cut off stuff on smaller displays.
So if the display has an aspect ratio different to 16:9, it chooses the largest possible size for the image to be displayed at 16:9 to keep the ratio between length and height at 16/9.

Is there a way to do that? I’ve experimented with scale() and transform() but to no real effect. Since the positions of sprites and so on are already determined and this is now an afterthought, changing all positions to be relative to WIDTH or HEIGHT isn’t really an option.

Does anyone have an idea how you could achieve this?
Thanks in advance for any suggestions :slight_smile:

@Leon Have you tried my program above. That does text and graphics on different screen sizes keeping things similar.

@dave1707 Yes, I have and if I remember correctly, it worked really well. Though I had difficulty implementing this myself and wasn’t sure how to adapt the coordinates and sizes of sprites :neutral:
If I had a sprite like this: sprite(“file”, 200, 300, 64, 128), what would I have to change?

@Leon If that’s the normal size of the sprite, then you would keep that size. The value of 128 would get multiplied by the aspect ratio and the whole sprite would be scales by the scale function. Look at my code above in the draw function. The cat girl and pink girl sprites have their original sprite size of 101x171. As the screen size changes, the scale and aspect ratio values keep everything scaled correctly.

@dave1707 Thank you :slight_smile:
I’ll give it a try right now!

@dave1707 Thanks again, it seems to be working :slight_smile:
I’ll need to figure out how to treat touch positions now, but I hope that won’t be too difficult. Thank you :slight_smile:

@dave1707 I hope it’s okay to bother you again.
Somehow, I can’t figure out how to adapt the touch controls accordingly :confused:

I have a couple of buttons. The way they work is like this:
if CurrentTouch.x < self.x + self.w/2 and CurrentTouch.x > self.x - self.w/2 and CurrentTouch.y < self.y + self.h/2 and CurrentTouch.y > self.y - self.h/2 then

With self.x, self.y, … being the position and size of the button.
Do you know how I would have to change the code in order for it to work? I tried using *ar to multiply self.h/2 but this didn’t work. The x-position is off also.

If I wanted to zoom into the game, could I do that as well?

@Leon I never tried doing the touch on my program on different sized devices. I guess I can take my program and add a button to it and see what happens on my small iPad Air 3 and larger iPad Pro. I’ll let you know what I figure out.

@dave1707 Thank you, I really appreciate your help :slight_smile:

@Leon I tried a button in my program and it looks like there’s not a whole lot to do. A button would be setup just like normal. You would have to position the button using width and height. I might need to move some code around. I want to modify my code to remove the changing size by touching the screen and have dedicated code based on the device it’s on. That way I can load a copy on my 2 different sized iPads and see how it works. I’ll let you know what happens and I can post a copy of the code with just the button code. Do you have different devices you can try it on. If not, maybe the users here with different sized devices can try it.

@Leon Here’s a stripped down version. When you look over the code, you’ll see that there’s not much that changes from normal code. The major things you need to do is position everything based on WIDTH and HEIGHT. The size of everything needs to be multiplied by arX and arY to give it the correct size. arX and arY will be a ratio of the current WIDTH and current HEIGHT compared to a base WIDTH and base HEIGHT. The base WIDTH and HEIGHT will be the device you originally write the code for. The current WIDTH and HEIGHT will be the other device it runs on. Let me know how this works for you if you have different devices you can run this on.

PS. Tap the off/on button.

displayMode(FULLSCREEN)

function setup()  
    rectMode(CENTER)
    baseW,baseH=834,1112    -- these values are my iPad Air 3 width and height
    arX=WIDTH/baseW
    arY=HEIGHT/baseH
    fontSize(40*arX)
    font("ArialRoundedMTBold")
    fill(255)   
    stroke(255)
    strokeWidth(2)
    x,y=300,100
    xv,yv=3,3
    b1=button(WIDTH/2,HEIGHT/2+200,100*arX,100*arY)
end

function draw()
    background(0)

    sprite(asset.builtin.Planet_Cute.Character_Pink_Girl,x,y,101*arX,171*arY)
    sprite(asset.builtin.Planet_Cute.Character_Cat_Girl,100,600,101*arX,171*arY)

    noFill()
    ellipse(WIDTH/2,HEIGHT/2,50*arX,50*arY)
    ellipse(WIDTH*.75,HEIGHT*.75,100*arX,100*arY)

    line(WIDTH/2,HEIGHT/2,0,HEIGHT)
    line(WIDTH*.75,HEIGHT*.75,WIDTH*.15,HEIGHT*.15)

    rect(WIDTH/2,HEIGHT/2,WIDTH,HEIGHT)
    rect(WIDTH*.15,HEIGHT*.15,100*arX,100*arY)

    x=x+xv
    y=y+yv
    if x>=WIDTH or x<=0 then
        xv=-xv
    end
    if y>=HEIGHT or y<=0 then
        yv=-yv
    end 
    
    b1:draw() 
end

function touched(t) 
    if t.state==BEGAN then
        b1:touched(t)
    end
end

button = class()

function button:init(x,y,w,h)
    self.x=x
    self.y=y
    self.w=w
    self.h=h 
    self.c=false  
    self.n="off"
end

function button:draw()
    rect(self.x,self.y,self.w,self.h)
    fill(255)
    text(self.n,self.x,self.y)
end

function button:touched(t)
    if t.x>self.x-self.w/2 and t.x<self.x+self.w/2 and
            t.y>self.y-self.h/2 and t.y<self.y+self.h/2 then
        self.c=not self.c
        if self.c then
            self.n="on"
        else
            self.n="off"
        end
    end
end

@dave1707 After a little bit of trial and error it’s working now!
Thank you :slight_smile: