kriket

Cant quite nail an issue with Scaling the game on mobile. Its not showing all of the game but only part of the game

Recommended Posts

Its a tiny game code which I have uploaded on http://scaleissue.site44.com/ so pls use browser dev tools to have a look. 

As you will notice when u go to dev tools and choose mobile emulation (iphone 4, 5, 6 - landscape orientation only), the screen only shows the top-left corner of the actual game with scroll bars when in fact it should have scaled the game such that all of the game was being shown on the screen since I used            

            this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;


 (you might have to reload page to notice this issue when in dev tools). I tried the game on real mobile and still the same issue. 

All relevant scaling code is under boot.js

 

Please help as I cant quite nail the issue having tried several scaling modes. 

 

 

Share this post


Link to post
Share on other sites

it didnt scale fully on mine and a friends mobile. Also didnt scale properly on emulator either. check screenshot. (PS - this is not resizing the window, resposive design. Its actually reloading the whole page on say emulator or loading on say android mobile browser that shows the issue like in screenshot below)

Screenshot from 2016-02-12 15:28:18.png

Share this post


Link to post
Share on other sites

I don't have any answers for you, but I can repro this in Chrome 49 and in Chrome on my Nexus 6. But no idea around the scaling. I didn't see anything in your code that suggested problems, either.

If you upgrade Phaser to 2.4.3 does the problem go away?

Share this post


Link to post
Share on other sites

I'm just going to point out what I would do in this case; I would look through some tutorial on scaling that works and make a much simpler test, maybe just the background image and try to scale that. 

What I can say though is that your aspect ratio is pretty strange, 1024x480 is not something standard. Maybe try with different aspect ratios? Try a 16:9 one.
     

Share this post


Link to post
Share on other sites

Yeah, the funny thing is Scalemanager.SHOW_ALL certainly doesnt do this "Show the entire game display area while maintaining the original aspect ratio."

Its frustrating.

At worst I was just expecting black bars on some devices. But its ridiculous when the game isnt scaling at all on any device, high dpr or not. 

 

Share this post


Link to post
Share on other sites

Have you found a fix for this issue?

I haven’t touched my game in a couple of months and suddenly it starts doing this on Android while it’s fine in emulation on desktop as described above.

Share this post


Link to post
Share on other sites

I’ve fixed my issue. Turns out I was missing the maximum scale in the viewport meta tag. The following tag scales the game correctly.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Try adding that to your game and see if it helps.

Correction:

The solution above worked for a couple reloads and then I was back to the wrong scale (however that happened). What actually works is adding the meta tag at runtime and setting the scale to 1 / window.devicePixelRatio.

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.