Screen Resize help needed!

Studio
#1

Hey there! I’m trying to resize some UI components based on the aspect ratio of a screen as per this post, but as a coding ametuer I’m not quite sure how to use the snippet @Seb gave in that post.

(For quick reference, here’s the snippet:
let aspectRatio : number;
Z.screen.on("resize",(height,width)=>aspectRatio = height/width); )

I also noticed in the Docs that there’s something listed as Z.ScreenSizeConstrain but I’m not sure if this is what I’m looking for, or even how I would use it.

Really, we’re just trying to make something to resize some elements on a tablet versus a phone, as users for our project will likely have both devices in use at some point.

EDIT: I managed to find this post in which @howiemnet 's code seemed to work for now. Going to test it more to make sure I realy understand what’s happening with the code, but it’s a promising start!

#2

I use this code to resize a backdrop ui

const K_O_Background_image = symbol.nodes.K_O_QRPhotoFrameeXmas_iPhoneBackground_png;

Z.screen.on(“resize”, (w,h)=>
{
K_O_Background_image.scale([1,w/h,1]);
});

Steve

1 Like
#3

Hi @abiro and thanks @stevesanerd!

You can create a blank script under the object you’d like to resize and paste:

Z.screen.on('resize',(x,y)=>
{
     parent.scale([x/y,1,1])
});

This should resize the object based on the device screen size (you might want to play with what axis the x/y is affecting based on if your content is landscape or portrait).

Hope this helps and let me know if you have any q’s :slight_smile:

George

2 Likes
#4

@George @stevesanerd Thank you both! I just got to my work machine so I’ll give it a go today :slight_smile:

2 Likes
#5

Just came back to say it works beautifully! Thank you so much guys :slight_smile:

2 Likes