Cran

Allowing programs to work with multiple screen sizes

Recommended Posts

I'm really new to PIXI.js and programming in general, I want my programs to work well on multiple screen sizes, but it gets annoying to type out width/8 or width/3*2 as coordinate values. This is the only way I ever though pf to do something like this but I'm sure there has to be a more efficient way, i tried making a function to simplify things, but it doesn't help much, i didn't want to use straight up numbers for coordinates, so i made a function that would take a number from 0 to 1000 and turn it into a value for the screen size, (0 being 0 and 1000 being the width or height of the screen) but then 1 on the height setting is not 1 on the width, and I just got more confused, is there an easier way to do this sort of thing?

Share this post


Link to post
Share on other sites

Hi!

Just set "app.stage.scale"  to something like width/1080 - and whatever is inside will be 0 at the left and 1080 at the right.

Its also good to decide what do you want to fix - width or height, and whether you want to change aspect ratio (non-uniform scale).

How scale of parent - affects child elements, well, its good old mechanism from Adobe Flash - every node has a transform, transform is defined by position, rotation,scale, and maybe other things. Resulting matrices of parent and child are multiplied.

Most common things that people do - either fix width or height, either make it always fit. PixiJS doesn't handle multiple screen sizes logic because there are actually many ways to do that and it can be coded by anyone. The fact that we dont have a solution pre-packaged inside the library, well, all solutions that people did were partial. If you make a universal one, you can make a plugin out of it and then it will go to the core.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

You said setting app.stage.scale to width/1080, that would help with the issue, but wouldn’t that change the size of the application, Or would that stay the same? what I mean is will the program be smaller than the window, I think I understand but I want to check

Share this post


Link to post
Share on other sites
11 hours ago, Cran said:

You said setting app.stage.scale to width/1080, that would help with the issue, but wouldn’t that change the size of the application, Or would that stay the same? what I mean is will the program be smaller than the window, I think I understand but I want to check

Not sure :) You can change scale, you can change it not-uniformly, and as a result you'll get FIT, x-fixed, y-fixed or another behaviour. PixiJS doesn't have those behavours pre-packaged, its up to you to discover how its done. Put different numbers in scale - get different results ;)

Treat it like an exercise, you wont get further without knowing how transform works.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.