phaser.io example behaves differently when self-hosted

[olzi]

Hello phaser.io community.

Here are two addresses for the same phaser.io example. One is hosted on the official site, and the other by me:

https://phaser.io/examples/v2/input/game-scale
http://olli.wtf/battleground3/scale.html

Their javascript content should be identical, but the trouble is that I'm seeing inconsistent behavior on the example hosted by me.

Steps to reproduce:
1. Open Chrome desktop browser (I'm on Windows 7 64-bit Home Premium, Chrome 64.0.3282.140 (Official Build) (64-bit))
2. Activate Chrome's developer tools (pressing F12)
3. Toggle device toolbar on and select iPad from the toolbar, so that a touch device can be emulated
4. Open the example page: https://phaser.io/examples/v2/input/game-scale
5. When the example has loaded, click on one of the melon sprites in the right side of the screen, and take note of the "World X" coordinate in the debug panel
6. Using the keyboard arrow keys, scroll the camera enough to the right so that the melon sprite that was originally clicked is now on the left side of the screen
7. Click the same melon sprite again and take note of the "World X" coordinate again
8. Compare the two "World X" coordinates. They should match, and at this point they do.
9. Repeat steps 1-8, but in step 4 open the same example that is hosted by me: http://olli.wtf/battleground3/scale.html. Result of step 8 then is that the "World X" coordinates do not match.

Since the javascript content should be the same in both examples, tackling this is a little difficult. Is there maybe some deployment process I'm missing that would add extra javascript/css etc?

[olzi]

It would be nice to also hear if someone else can replicate the issue, even if there are no suggestions on how to proceed. Basically I have a problem in my project but I was able to distill it to this situation, with not even the official example working when inserting it into a html-page.

[Fenopiù]

Yes, I've the same issue with your link.

+/- 50px different.

[samme]

Run in console:

game.plugins.add({
  
  render: function () {
    var game = this.game;
    var debug = game.debug;
    
    game.world.children.forEach(function (sprite) {
      var x = sprite.worldPosition.x;
      var y = sprite.worldPosition.y;
      debug.text(x + ',' + y, x, y, 'white', '9px monospace');
      debug.pixel(x, y, 'red');
    });
    
    debug.text('Scale: ' + game.scale.width + ' x ' + game.scale.height, 16, 224, 'yellow', debug.font);
  }
  
});

 

Edited February 13, 2018 by samme
Add 'Scale: …'

[samme]

You have to confirm that the viewport and game canvas are the same size in both cases.

[olzi]

@Samme sorry, I'm having a difficult time understanding.

In both examples the game canvas has been created in a similar fashion, through the call to Phaser.Game. So shouldn't the viewport and game canvases be equal in both cases? Or are there some external factors such as css scaling the canvas in the official example so that game.input.activePointer.worldX provides accurate information in only that instance?

Shouldn't the game.input.activePointer.worldX have all the necessary information about the viewport and game canvas to provide accurate information, or is this something that hasn't been built-in into Phaser? Are there possibly any ready made libraries or functions that could provide accurate coordinates regardless of used viewport and game canvas settings?

[samme]

Maybe I misunderstood the problem.

Can you run the console code (above) in your example and repeat the steps, then screenshot? http://olli.wtf/battleground3/scale.html is gone now.

Also double-check which Phaser version you're using.

 

[olzi]

20 hours ago, samme said:

Maybe I misunderstood the problem.

Can you run the console code (above) in your example and repeat the steps, then screenshot? http://olli.wtf/battleground3/scale.html is gone now.

Also double-check which Phaser version you're using.

 

The link should still be there, looks like you have a dot at the end.

Attached are the screenshots from steps 5 and 7 when running that code through console in the self-hosted version. The Phaser version I'm using (http://olli.wtf/battleground3/phaser.min.js) is v2.10.0 (CE).

[samme]

OK, my first snippet was over-contrived, all you actually need is

game.plugins.add({
  
  render: function () {
    var game = this.game;
    var debug = game.debug;
    
    debug.text('Scale: ' + game.scale.width + ' x ' + game.scale.height, 16, 224, 'yellow', debug.font);
    
    debug.pointer(game.input.activePointer);
  }
  
});

 Try adding 

<meta name="viewport" content="initial-scale=1">

 

[olzi]

@samme thank you, that meta-tag seems to have done it!

 

Now that I know the solution, I dug around a little, and it seems this tag is present in the official example pages, but not in the index.html file that comes with this "hello world" tutorial: https://phaser.io/tutorials/getting-started/part6. Maybe something to consider adding if we have anyone reading this that can edit that example.