I am working on Phaser game its working as expected in web browser and invoking all events for button btn
. But, when I render same game in WebView It renders fine but its not invoking any phaser events like pointerover, pointerout, pointerdown, and pointerup. I have attached here some code to refer. I want to invoke some logic once user click on button var btn
but its not invoking anything on any event in webview.
To add more details JavaScript is working in WebView I confirmed that by adding event listener or Window and it was logging that events.
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);},
}
};
this.start = function(config)
{
this.phaserGame = new Phaser.Game(config);
};
this.create = function()
{
var btn = this.scene.add.sprite(375, 665, 'boltBtn');
btn.setInteractive()
.on('pointerover', () => {
console.log('pointerover');
})
.on('pointerout', () => {
console.log('pointerout');
})
.on('pointerdown', () => {
console.log('pointerdown');
})
.on('pointerup', () => {
console.log('pointerup');
});
this.scene.add.image(375, 1015, 'boltMsg');
};
this.update = function()
{
//update code
};
If game is render on mobile to fix styling I am using some css.
canvas { width: 100vw !important; height: unset; }
In order to make sure I have correct settings for WebView I have following settings in c#
.
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);
Thanks in advance for any helps or suggestions.