Jump to content

Phaser Scale Manager - "Show All" - Not working


megmut
 Share

Recommended Posts

I might be missing something obvious here, but I can't get the Phaser.ScaleManager.SHOW_ALL to function how I want to. So my solution to scaling to different devices follow something similar to this: http://v-play.net/doc/vplay-different-screen-sizes/

Now I've made my game canvas size 1920x1280 - I'm aware this is HD, it's for Ipad at the moment. This is an aspect ratio of 3:2, which going by the aspect ratio rules, should be enough to fit inside any container.

 photoshop.png

This works fine inside my browser when testing.. 

browser.png

As you can see above, the game is shrunk down small enough to keep the aspect ratio of 3:2 within a 950x778 resolution. This works fine. It doesn't however, work fine on any tested mobile device. i.e:

iphone.png

Now what's  happening here, is the game is scaling, however it's scaling to make the width 100% of the inner device, but thus forcing the height out of the 3:2 ratio which the letterbox effect was supposed to fix. 

Am I doing something stupid, or is there a known fix for this? Also, I have tested on 3 browser emulations, and 4 actual devices.. all have the same issue.

For reference, here's the code I'm using to get this effect.:

// in index //
class Game extends Phaser.Game {
	constructor() {
		super(1920, 1280, Phaser.Canvas, 'content', null, true);
        ....
    }
}

// in boot //

export default class Boot extends Phaser.State {
    init() {
        this.game.scale.trackParentInterval = 1;
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    }
}

 

Link to comment
Share on other sites

 

I ran into a similar issue a few days back with trying to keep aspect using SHOW_ALL, only to find one of my css  statements was incorrectly modifying the div wrapper for the canvas element.   

You should be able to confirm if you have some external css or dom issue through Chrome's inspector.

 

Link to comment
Share on other sites

@ivanix Thanks for the tip on checking the css. I've done so, and nothing is wrong, though it did put me on the right path. I'm closer to finding the issue. So I *THINK* what's happening, is the canvas loads at 1920*1280 (3:2) then phaser SHOW_ALL gets called. Phaser then looks at the innerWidth (568) and to keep the case aspect ratio, 568/1.5 (3:2), the height comes out at 379, which is where my issue lays, as the innerHeight is 320.

After digging through the code, I have a sneaky suspicion that Phaser isn't actually looking at what maximum height that fits into the the inner dimensions. 

Here's the SHOW_ALL function: https://github.com/photonstorm/phaser/blob/v2.4.4/src/core/ScaleManager.js#L1659

I'm thinking, maybe I have to try to solve this with USER_SCALE, Though any tips would be greatly appreciated! 

Link to comment
Share on other sites

Here's a sample that should work for you:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Phaser Test Show All</title>

	<meta name="viewport" content="user-scalable=no,  initial-scale=1,  maximum-scale=1,  width=device-width" />
    <script src="http://cdn.jsdelivr.net/phaser/2.4.4/phaser.min.js"></script>

</head>

<body onload="" >
 
<div id="canvasholder"></div>

<style>
html, body {
    margin: 0 auto;
    padding: 0;
    background: #0000ff;
}
canvas {
    border: 1px solid #00ff00;
}
#canvasholder {
    width: 99vw;
    height: 99vh;
    margin: 0 auto;
}
</style>
<script>
    var game;
    function create() {
        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    }
    game = new Phaser.Game(1920, 1280, Phaser.AUTO, 'canvasholder', {create: create });
</script>
</body>
</html>

 

You are right in that Phaser does not go by the innerWidth and innerHeight of the window directly, instead it follows the dimensions of canvas's parent container. If the element you specified in Phaser.Game doesnt exist, phaser places the canvas inside the body element and follows it's dimensions.

In the example above, if the style rules are removed for #canvasholder, you will see the issues you are describing where the canvas height will overflow.

Another possible issue with mobile devices will be the viewport setting. without the settings in the example, some browser will try to zoom out to fit the content and this may cause havoc afterwards.

Hope this helps! : )

 

Link to comment
Share on other sites

  • 1 year later...

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