Jump to content

Scaling game to fit phone screens


pdiddles03
 Share

Recommended Posts

Hi pdiddles03!

 

Here's how I do that (pixi-agnostic):

https://gist.github.com/jsteinbeck/0773c34ac1c33b714e02

 

It does more than what you want to do so it might be a little confusing. The scaling works roughly like this:

 

- Get the ratio for the width by dividing window.innerWidth by the original width

- Do the same for the height

- From both of the ratios, take the one that is smaller

- Apply the ratio to the stage using CSS transform: scale()

 

You can use the code if you want; it does also center the stage in the window and has a "snap to edge" feature when the difference between the original ratio and the window ratio is smaller than a threshold.

 

To scale a pixi project with this, use renderer.view as the element to scale.

 

Hope this helps!

Link to comment
Share on other sites

Did you hook it up to the window's resize event? Sorry, didn't mention that, but this is what you'll have to do:

window.addEventListener("resize", myStageResizerInstance.resizeToWindow.bind(myStageResizerInstance));
Link to comment
Share on other sites

Ok. but that is not the issue I am encountering.  I'm not concerned with resizing at this point.  What happens is this.  Lets say my game is  a width of 432 and a height of 508.  When I load it up on my phone, the ratio needed returns less then 1 so it downsizes my canvas when I apply scale to it.

Link to comment
Share on other sites

You didn't say that you only wanted to scale up, not down. You can try applying the smaller ratio instead of applying the bigger one:

ratio = ratioW < ratioH ? ratioH : ratioW;

This way it will scale up without black bars and the ratio of the content will remain the same but part of the stage will be cut off at the window border (at least if you hide overflow with CSS)... is this what you want?

Link to comment
Share on other sites

I can work around a vertical cut off.  I can't have the game horizontally cut off though.  I will give what you say a try. If this doesn't work the way I want, i will have to programmaticly figure everything out.  I was just trying to stay away from that hopeing there was something built in pixi to utilize like three.js has. Thank you for your help by the way!

Link to comment
Share on other sites

No none of these will work.  I will programmatically have to figure it out.I want it to fit on every device, work the same on every device, and not have crop bars.  It won't be as good as native or close to it if I am half hearted trying to scale it.

Link to comment
Share on other sites

So I am contemplating this solution again.  So lets say I scale the game in CSS to fit the width of the phone in portrait mode. What would be the next solution to make it fit vertically? Obviously it would be to increase height of the stage, but when I do that, it still only renders in the old stage area.

Link to comment
Share on other sites

  • 1 month later...

 

Did you hook it up to the window's resize event? Sorry, didn't mention that, but this is what you'll have to do:

window.addEventListener("resize", myStageResizerInstance.resizeToWindow.bind(myStageResizerInstance));

'myStageResizerInstance' - I'm confused by this, using renderer.view to scale, how do we create the instance you suggest?

Here's how pixi does the renderer.view

document.body.appendChild(renderer.view);
Link to comment
Share on other sites

I put a var on my renderer.view

var mypixiStage = document.body.appendChild(renderer.view);

and added the code suggested

window.addEventListener("resize", mypixiStage.resizeToWindow.bind(mypixiStage));

I'm getting the following error - any suggestions?

Uncaught ReferenceError: MO5 is not defined(anonymous function) @ StageResizer.js:3
Link to comment
Share on other sites

  • 2 weeks later...
  • 3 months later...
Uncaught ReferenceError: MO5 is not defined(anonymous function) @ StageResizer.js:3

Sorry, I just saw your question now. The reason you get this error is because the code snippet used my library's module system which you can find here: https://github.com/iiyo/MO5.js

 

I updated the gist so that it works without the module system.

 

By the way, what you wrote in your post is not the code I suggested. If you look closely, I used "myStageResizerInstance" which obviously is an instance of the StageResizer constructor, not a canvas element or anything like that.

Edited by RetroPixelDude
Link to comment
Share on other sites

Never write -

window.addEventListener("resize", mypixiStage.resizeToWindow.bind(mypixiStage));
bind returns a new function. And You will not be able to remove the listener.  

 

 

As a rule of thumb, that is correct. That's only an issue if you actually need to remove the listener, though. For most games you'll want the resizing to take place for as long as the page exists. In this case it doesn't make an awful lot of sense to assign the listener to a variable. It's ok to break these rules of thumb if it doesn't mean you sacrifice readability or increase the chances for hard-to-find bugs. You could also argue that in this case assigning this listener to a variable would violate YAGNI (You Ain't Gonna Need It) and/or KISS (Keep It Simple, Stupid).

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...