arcadedice Posted March 13, 2016 Share Posted March 13, 2016 Hi, I've searched the forum and couldn't really find an answer for this, so here is my question. In short is there a way to resize click regions for mouse events after you resize your canvas? A bit of explanation. I have built an interactive map, where the user can click a region and highlight it green, the problem occurs when I shrink the browser and try to click on different regions. It appears that even though I shrunk the map, the click regions still remain the same size (See example image). For instance I can click to the right of a region and still capture its event. Any help with this would be greatly appreciated. I've attached a snippet of my resize code and can provide more examples on request. thanks handleResize: function handleResize(event) { this.parentDiv = document.getElementById('world-map'); this.parentWidth = this.parentDiv.offsetWidth; this.parentHeight = this.parentDiv.offsetHeight; console.log('this.parentWidth, this.parentHeight: ', this.parentWidth, this.parentHeight); // this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE; // Breaks other functionality // Resize the canvas $('canvas').width(this.parentWidth); $('canvas').height(this.parentHeight); // Resize the game this.game.width = this.parentWidth; this.game.height = this.parentHeight; // Refresh the game scale this.game.scale.refresh(); }, Link to comment Share on other sites More sharing options...
Recommended Posts