Scaling game to fit phone screens

[pdiddles03]

I have  a game that is longer vertically then horizontally.  How do I scale it and make it's aspect ratio remain the same.  I never did that before and need help with calculations and the functions that need to be used.

[jfhs]

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!

[pdiddles03]

Thanks so much for your help Infinity. Doesnt work exactly as I want. I want to fill the screen but doesn't seem to work . Maybe I just have to play around with it.

[jfhs]

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));

[pdiddles03]

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.

[pdiddles03]

Upon testing this method does work but not for me. I don't want black bars on my screen. I will try to figure another method out and post here.

[jfhs]

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?

[pdiddles03]

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!

[pdiddles03]

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.

[pdiddles03]

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.

[GourmetGorilla]

 

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);

[GourmetGorilla]

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

[d13]

You could alternatively try `scaleToWindow`:

 

https://github.com/kittykatattack/scaleToWindow

[jfhs]

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 September 23, 2015 by RetroPixelDude

[coter]

Not the topic... Never write -

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

bind returns a new function. And You will not be able to remove the listener.  

[jfhs]

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).

[Joe Kopena]

I have a recent Pixi-oriented tutorial on scaling while preserving aspect ratio here:

http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/