shvalb Posted September 17, 2016 Share Posted September 17, 2016 Hi guys, I'm trying to set hitArea for sprite which is bigger than the image itself but it doesn't work for me when applying a 'Over' event. Here is a code snippet: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <script src="scripts/phaser.js" type="text/javascript"></script> <script> var sprite; var graph; var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: function(){ game.load.image("square", "assets/box.png"); }, create: function() { this.game.stage.backgroundColor = "#4488AA"; graph = this.game.add.graphics(300,200); graph.beginFill(0xabcfff); graph.drawRect(0,0, 200, 200); graph.endFill(); // sprite = game.add.sprite(400,300,'square'); sprite.anchor.set(.5); // var rect = new Phaser.Rectangle(300,200, 200, 200); sprite.hitArea = graph.getBounds(); sprite.inputEnabled = true; sprite.events.onInputOver.add(function() { console.info("OVER!"); }, this); }, render: function() { game.debug.spriteBounds(sprite); game.debug.spriteInfo(sprite, 20,20); game.debug.spriteBounds(graph); game.debug.spriteInfo(graph, 20,140); } }); </script> </head> <body> </body> </html> When hovering over the rectangle area it doesn't trigger the event! Can anyone spot my problem? Cheers, Oren Link to comment Share on other sites More sharing options...
samme Posted September 17, 2016 Share Posted September 17, 2016 Hi Oren, `hitArea` is mysterious but it seems to be a rectangle local to the sprite, not the game world. In your example the actual input area is displaced toward the bottom right: http://codepen.io/anon/pen/WGxLZz?editors=0010 . For a larger `hitArea` centered on the sprite you can use {x: -100, y: -100, width: 200, height: 200}: http://codepen.io/anon/pen/gwrkbR?editors=0010 Link to comment Share on other sites More sharing options...
shvalb Posted September 19, 2016 Author Share Posted September 19, 2016 WOW - Thank you so much for this thorough reply!! You've explained it so clearly :-) You ROCK! Thank you. Link to comment Share on other sites More sharing options...
shvalb Posted September 19, 2016 Author Share Posted September 19, 2016 Hi again, Apparently I was happy too soon :-) There seems to be a problem when defining a hitArea and using different Scaling modes. Checkout this: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <script src="scripts/phaser.js" type="text/javascript"></script> <script> var sprite; var rect = new Phaser.Rectangle; var game = new Phaser.Game(2048, 1536, Phaser.AUTO, '', { preload: function() { // If commented out --> WORKS WELL, otherwise not. // game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image("square", "assets/box.png"); }, create: function() { this.game.stage.backgroundColor = "#4488AA"; sprite = game.add.sprite(1136, 1111, 'square'); sprite.anchor.set(.5); sprite.hitArea = new Phaser.Rectangle(1086,1061,100,300); sprite.inputEnabled = true; }, render: function() { game.debug.spriteBounds(sprite); game.debug.spriteInputInfo(sprite, 20, 20); game.debug.geom(sprite.hitArea, "red", false); game.debug.text("sprite.hitArea: " + sprite.hitArea, 20, 120, "red", game.debug.font); Phaser.Rectangle.clone(sprite.hitArea, rect).offset(sprite.x, sprite.y); game.debug.geom(rect, "yellow", false); } }); </script> </head> <body> </body> </html> It works well unless you uncomment the following line: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; Any idea how to resolve this issue? Thank you, Oren Link to comment Share on other sites More sharing options...
samme Posted September 19, 2016 Share Posted September 19, 2016 Will this work? http://codepen.io/anon/pen/jrrpgY?editors=0010 The yellow rectangle is where the actual overlap occurs. Link to comment Share on other sites More sharing options...
shvalb Posted September 19, 2016 Author Share Posted September 19, 2016 so WebGL is what making my problems? Is there a way to overcome this limitation? Thank you! Link to comment Share on other sites More sharing options...
samme Posted September 20, 2016 Share Posted September 20, 2016 No, I just changed it to Canvas to speed up the debug rendering. I thought http://codepen.io/anon/pen/jrrpgY?editors=0010 should be working how you want, does it? Link to comment Share on other sites More sharing options...
shvalb Posted September 20, 2016 Author Share Posted September 20, 2016 so it goes like this: If you initialize the ScaleManager with "SHOW_ALL" for WEBGL it doesn't scale the hitArea when you resize the browser window. it only does so (or works in a different way) in CANVAS and that's why your example worked well. I will have to find and alternative solution to hitArea :-( Thank you for your great help! Oren Link to comment Share on other sites More sharing options...
Recommended Posts