RESIZE Scale mode and viewport issue

[AlgoGames]

I have come across some issue which I think should have a simple solution but I could not find much on google so I am going to ask experts here. The problem is the handling of game for mobile devices when RESIZE mode is used.

Let say I made a game with 400x800 resolution and have all assets according to the same resolution. My mobile device has device size of 200x400 and devicePixelRatio of 2 so I have 400x800 pixels available for my game on mobile. If I do not specify anything is the viewport meta tag in html then RESIZE method gets 400x800 as the width and height and everything looks perfect on mobile but if I use something like following

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

I get 200x400 as width and height in resize method. I do all calculations in the game and scale everything down according to 200x400 and when game is rendered it still has 400x800 pixels available to draw which leads to entire game looking blurry.

I decided to consider devicePixelRatio as well so whatever width and height I got in resize method, multiplied it with devicePixelRatio which gave me 400x800 canvas size to draw my game and there was no need to scale anything down so basically I ended up drawing for 400x800 when only 200x400 size was available for drawing according to the Phaser. I think now all I have to do it to scale entire game down to fit into 200x400. I tried set world.scale property which gives something very incorrect and though the game is scaled down according to 200x400, the view is repeated and screen constantly flickering so I think this is not what I am supposed to be doing. The other option of adding everything to a group then scaling all down for 200x400 size. I have spent a few hours on looking for a solution and I believe there is a simpler solution which I might not know yet.

What is the correct way of handling this? Am I overdoing this? I am trying to make it truly responsive and calculating everything per the size of 200x400 does not look correct even if this is the size I get in resize method since I have 400x800 pixel size available to draw. Also, the game should not be dependent on viewport meta tag. Some sites may use it and some not. Or even if it is dependent on viewport, I should be able to take that into account and handle everything amicably in my game.

Any advice/help is much appreciated.

[samme]

I'm not sure you want RESIZE at all. Try

1. Use meta viewport with width=device-width
2. Create game with
   • width 400
   • height 800
   • scaleMode SHOW_ALL
3. Done

[AlgoGames]

samme.

400x800 was just an example of explain what was the issue. I am writing a game which should be responsive and should adapt to any resolution and I think RESIZE scale mode is exactly what I should use. I have no issues with using RESIZE scale mode. The real issue is the width and height I get in the game when using RESIZE mode and meta viewport with width=device-width. The game looks blurry because everything is scaled down to 200x400. If I use SHOW_ALL then game looks just fine and crisp on any resolution or device because in this case the entire game is drawn for full scale and then canvas is scaled down. The problem with SHOW_ALL is letter boxing effect for different aspect ratios which is not what I want.

[samme]

3 hours ago, dcgames said:

If I use SHOW_ALL then game looks just fine and crisp on any resolution or device because in this case the entire game is drawn for full scale and then canvas is scaled down.

What are you using for game.width and game.height in this case?

[AlgoGames]

5 hours ago, samme said:

What are you using for game.width and game.height in this case?

I use maximum which is 400x800. There is a big difference in clarity between SHOW_ALL and RESIZE so my understanding is that SHOW_ALL draws everything for given width and height and then re-scales entire game to fit the device. In RESIZE also I can do the same thing by considering devicePixelRatio but how do I re-scale everything to fit the device afterwards, is the question.

[samme]

The width you're getting from the viewport declaration is correct because device-width is in CSS pixels (logical pixels). You need to either increase game.resolution or increase the game size while scaling down.

In Phaser 2.6 you can use:

new Phaser.Game({
  width:      '100%',
  height:     '100%',
  resolution: window.devicePixelRatio || 1,
  scaleMode:  Phaser.ScaleManager.NO_SCALE,
});

Phaser 2.7 doesn't seem to handle resolution correctly so you can try something like

var size = '' + ((window.devicePixelRatio || 1) * 100) + '%'

new Phaser.Game({
  width:      size,
  height:     size,
  scaleMode:  Phaser.ScaleManager.SHOW_ALL,
});

With RESIZE the callback is really for repositioning your game objects, not resizing the game again (because Phaser just resized the game itself), so you may get unexpected results with that.

[AlgoGames]

The only option I think I can go for at this point is to prepare different set of assets for lower size which can look better since higher sized assets are looking worst when scaled down so assets optimized for lower sizes should not make any difference to look and feel of the game. I actually do not have any other problem with the size I am getting in RESIZE method except that it makes entire game look blurry when scaled down on certain mobile devices which are low on logical pixel size but have a very high pixelDeviceRatio so even though they have a lot of pixels available to draw the game the logical pixels available in the RESIZE scale mode makes everything scale down to the extent that the assets which were prepared for HD resolution on desktop look even more blurry on mobile devices with almost same pixel size as desktops and high devicePixelRatio. Interestingly SHOW_ALL scale mode looks much better in this case and if I could ignore letter boxing then it will save me a lot of calculations which I have to do for re-positioning my game assets in RESIZE scale mode.