Phaser

Phaser 3
1

I have create a simple animation screen using phaser and its rendering perfect and invoking all pointer events like pointerover, pointerout, pointerup and pointerdown on button btn as expected for browser. But when I render same game using WebView its rendering screen but its not invoking any pointer events. To confirm JavaScript is working I have tested by adding eventlistner on window and it was working.

    var config = {
        type: Phaser.CANVAS,
        width: 650,
        height: 900,
        canvas: document.getElementById('myCustomCanvas'),
        scale: {
            mode: Phaser.Scale.FIT,
            width: 750,
            height: 1334,
            parent: 'game'
          },
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
    scene : {
        preload: function(){game.preload(this, 'asset_url');},
        create: function(){game.create(this);},
        update: function(){game.update(this);},
        }
    };
    


function game(config) {

     this.start = function(config)
     {
	   this.phaserGame = new Phaser.Game(config);
	 };

    this.create = function()
	{
	  var btn = this.scene.add.sprite(375, 665, 'btn');
	  btn.setInteractive()
		.on('pointerover', () => {
		    console.log('pointerover');
		})
		.on('pointerout', () => {
			console.log('pointerout');
		})
		.on('pointerdown', () => {
			console.log('pointerdown');
		})
		.on('pointerup', () => {
			console.log('pointerup');
		});
	};
}

I am using Xamarin Forms WebView to render game in mobile. My setting for WebView is as follow.

var webView = CreateNativeControl();
            webView.SetWebViewClient(new HTMLGameWebClient(this));
            webView.Settings.LightTouchEnabled = true;
			webView.Settings.JavaScriptEnabled = true;
			webView.Settings.DomStorageEnabled = true;
            webView.Settings.MediaPlaybackRequiresUserGesture = false;

            SetNativeControl(webView);

I also have conditional CSS which is used only if canvas is rendering in mobile.

canvas {
    width: 100vw !important;
    height: unset;
}

Thanks in advance for any helps or suggestions.

2

Admittedly not sure as I haven’t use Xamarin and Phaser. Because of that extra layer, let’s take another step to be sure the issue is specifically between Phaser events + Xamarin web view. If you create a non-Phaser JS page where you click on a button in the DOM and handle those events, do the pointer events work?

If it doesn’t, then it’s a wider issue with your Xamarin web view setup. If it does, then it’s more of an issue with Phaser. Well, we should go a layer closer with WebGL/canvas before blaming Phaser. The idea is to go at a basic example and eliminate possibilities.

If your game doesn’t need to be in a Xamarin app, check out Capacitor which can generate an APK for you:

Good luck!

3

Hi @msanatan, Thanks for suggestion. I have tried adding pointover event only on canvas and it seems its working perfect. but not phaser events.

4

Hola @parth280197, it’s good that you checked. I’d say the most important thing is to see what’s happening in the web view. Here’s a guide I found on debugging the Xamarin Forms webview:

If you can get the debugger running and share any error output, I’m sure the much smarter members of the community can sort you out :sweat_smile:

5

Hello @msanatan I already attached debugger with WebView there was no error in it I also figured out the issue It was mode: Phaser.Scale.FIT configuration I removed it and all events starts executing fine. for some reason the pointer events on sprites are misplaced in different locations.
Thanks for your help.

6

Awesome! I’m glad you figured it out. It seems that someone else had a similar problem with that scaling mode:

Hopefully that discussion helps if you need to use it!