Search the Community

how can I define the hit area of a single bullet and a sprite

Greetings! I'm currently playing around with PIXI.particles.ParticleContainer and am having a blast. What an awesome container! I'm writing because I'm having a peculiar issue regarding mouse events and the particles inside the ParticleContainer. Specifically, I create the ParticleContainer, add sprites to it via PIXI.Sprite.fromImage and then bind mouse down events to each sprite and specify a hit area for the sprite as well. That works! Specifically, it works if I add the sprites to the ParticleContainer and don't specify a position, and all the sprites show up in the top left corner of the ParticleContainer. However if I move the sprites around in the container by adjusting the sprite's x,y values, the hit area remains in the in the top left corner and I can still trigger the mouse event there, but that's clearly not the intent. I had guessed that the hit area would follow the sprites as they move around the container. Is this true? I'm posting below a section of my code to help explain. Thank you to any PIXI wizards who might have insight here. // Create the graph container this.graphContainer = new PIXI.particles.ParticleContainer( numNodes, { scale: true, position: true, rotation: false, uvs: false, alpha: false } ); this.graphContainer.hitArea = new PIXI.Rectangle(0, 0, 1000, 1000); this.graphContainer.interactive = true; this.graphContainer.interactiveChildren = true; // Create the graph nodes for (var i=0; i<numNodes; i++) { var x = graphData['nodes'][i]['x']; var y = graphData['nodes'][i]['y']; var node = new Node(this.top, null, x, y); this.nodes.push(node); this.graphContainer.addChild(node.getSprite()); } class Node { constructor(top, type, x, y) { this.top = top; this.initPosition = { 'x': x, 'y': y }; this.createSprite(); } createSprite() { this.sprite = new PIXI.Sprite.fromImage('images/bcat.png'); this.sprite.hitArea = new PIXI.Rectangle(0, 0, 100, 100); this.sprite.interactive = true; this.sprite.buttonMode = true; this.sprite.on('mousedown', (event) => { console.log('sprite event'); }); this.sprite.anchor.set(0.5); this.sprite.x = this.initPosition['x']; this.sprite.y = this.initPosition['y']; } getSprite() { return this.sprite; } }

I have on stage special "workspace" pixi container - I use it to allow user to draw on it. It works perfect if I set hitArea dimensions to renderer width and height but the problem is that user can move this layer or zoom in/out. I think result is obvious, after move/zoom it is not possible to draw on canvas because hitArea "run" out from the screen or it is too small. My question is what is the best actual solution for this (pixi v4)? I was thinking about setting Infinite hitArea but this is not possible. I could set hitArea Rectangle to be like 999999px so it should not be possible to go out of drawing area but is it ok? Can setting very big hitArea slow down interaction manager? Also another option was to replace hitArea (make it bigger) after move/zoom but this is proably not the best idea. Is there any elegant solution to cover this case easly?

Hi everyone, I have problem with scalling to mobile devices in phaser. I mean, every graphic in my app on PC is scalling correct on mobile devices and everything look perfect, but hitArea on sprites that have inputEnabled = true stay on the old positions and when I want to interact with sprite on my phone I have to click a little bit below and to the right from the sprite position. I use this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; to scale the game to mobile devices. Have anyone idea what is wrong?

Hello everyone, I'm just making game/app that will check personality and skills of the kids, before they choose their carrier path in life. I have problem with hit area. In web browser everything works properly but when I run my app on mobile device, every sprite is scalling ok, but when I want to click on it I have to click a little bit below and in the right. It looks like sprite change position on the screen after scalling down but hit areas stay in their old positions. Either pixelPerfect = true and false doesn't work. Have you any ideas what is wrong? I'm not including code 'cause whole project is too big now to put everything here, it'll be not clear and won't gave you guys clue what's going on. If that'll be necessery I can try to compress it to some pseudo code or something. And happy new year everyone!

Hi guys, i've bring this example with Pixijs and i've done a test. I put the canvas inside a div (#content), this div has transform: perspective(900px) and rotate(20deg). The hit area is not ok, 'cause has the old coordinates without calculate perspective. (see attachment) So, how can i get the new coords to pass to hitarea ? Thanks

How can we define a hitArea for a quadraticCurve line? is that even possible?Afaik, you got:PIXI.RectanglePIXI.CirclePIXI.Polygonfor defining hitArea,It seems that it's not possible, right? from https://github.com/pixijs/pixi.js/issues/3296 http://codepen.io/mohammad-ahmadi/pen/pNKOZQ?editors=0010

Hello! I have a major problem with touch input on sprite buttons. I have some letters as buttons and by default the hitArea was only as big as the letter itself, which was sometimes hard to hit (especially I + J). So I increased the hitArea by assigning it a rectangle that is much wider. On the PC in the Browser the enlarged hitArea works fine, but inside a webview inside an iOS or Android-App it doesn't seem to affect anything, I still have to tap the letters about 10 times until I hit it. Any idea where that problem comes from? It makes the game incredible annoying and pretty much unplayable. I also tried adding and resizing a physics body, no luck Example code from the Sprite creation: letter = this.game.make.bitmapText(0, 0, 'bitmapfont', letters, 170 * scale); letter.anchor.set(0.5); //this.guessButtons = this.game.add.sprite(200 * scale * (i - (line - 1) * charsPerLine) + 400 * scale, 1650 * scale + 170 * line * scale, letterTex); this.guessButtons = this.game.add.sprite(260 * scale * (i - (line - 1) * charsPerLine) + 130 * scale, 1650 * scale + 170 * line * scale, letter._glyphs[0].texture); this.guessButtons.hitArea = new Phaser.Rectangle(-100 * scale, -10 * scale, 280 * scale, 190 * scale); this.guessButtons.scale = new Phaser.Point(170/200 * scale, 170 / 200 * scale); this.guessButtons.name = "guessLetterButton_" + i; this.guessButtons.inputEnabled = !this.watchMode; this.guessButtons.events.onInputDown.add(this.selectLetter, this, 0, letters); this.guessButtons.tint = 0x404040;

Hello everyone, I'm trying to make a rectangle clickable just like a sprite. I read here and there and the hitArea way should be the best for me since the rectangle have variable size, so I can't really use an invisible sprite. That's what my code looks like but it raises the error : "Uncaught TypeError: Cannot read property 'onInputUp' of undefined". So what would be the proper way to do this (I coulnd't find doc on hitArea) : unpauseButton = game.add.graphics(0, 0);unpauseButton.beginFill(0x81DEED, 1);unpauseButton.drawRect(SIZE_X * 0.55, SIZE_Y * 0.65, SIZE_X * 0.1, SIZE_Y * 0.06);unpauseButton.hitArea = new Phaser.Rectangle(SIZE_X * 0.55, SIZE_Y * 0.65, SIZE_X * 0.1, SIZE_Y * 0.06);unpauseButtonText = game.add.text(SIZE_X * 0.55, SIZE_Y * 0.65, quitButton2Text, {fontSize: '16px', fill : '#000'});unpauseButton.hitArea.inputEnabled = true;// Error here :unpauseButton.hitArea.events.onInputUp.add(function () {unpauseGame(game, gameBoard, showQuitMessage, unpauseButton, darkScreen, quitTitleSprite, quitMessageSprite)});Thanks!

Hi, I'm posting this on the Phaser forums as I'm not getting much of a response on the Pixi forums. Also, I think the answer could be useful for users of Phaser (as Phaser uses the same convention as far as I know). I am having difficulty defining a polygon hitArea for a sprite and I'm really not sure what I'm doing wrong. For test purposes; I have done the following: Drawn a graphic to the screenCreated a spriteGiven the sprite a hit area with the same co-ords as the graphic I have drawn (but relative instead of absolute co-ords)Added a click handler to the sprite so that I can raise an alert() when I click inside the shape It is almost detecting all clicks over the shape but not everywhere. Especially around the inside edges of the shape, the click event is not firing. My code is as follows: function drawTest() { // I defined the polygon which will be drawn to screen as a shape var funnyShape = new PIXI.Polygon([ new PIXI.Point(100,100), new PIXI.Point(200, 300), new PIXI.Point(315, 210), new PIXI.Point(40, 120), ]); // I create an instance of the graphics object var theShape = new PIXI.Graphics(); // I draw the shape to the polygon area indicated theShape.beginFill(0xE3BE10); theShape.drawShape(funnyShape); theShape.endFill(); // I add the shape to the screen stage.addChild(theShape); // create sprite // I create my sprite var mrSprite = new PIXI.Sprite(); // I position and anchor my sprite mrSprite.position.x = 100; mrSprite.position.y = 100; mrSprite.anchor.x = 100; mrSprite.anchor.y = 100; // I make sure the sprite is interactive (clickable) mrSprite.interactive = true; // The hit area is relative co-ords, so I set the hit area (should be the same as the drawn polygon) mrSprite.hitArea = new PIXI.Polygon([ new PIXI.Point(0,0), new PIXI.Point(100, 200), new PIXI.Point(215, 110), new PIXI.Point(-60, 20) ]); // I add the click event handler mrSprite.click = function(mousedata) { alert("Clicked"); }; // I add the sprite to the screen stage.addChild(mrSprite); }Any help or guidance you could give would be great as this problem has been driving me up the wall for a week! Thanks! (Apologies for posting in the Phaser forums). Hopefully it is relevant as Phaser uses Pixi. Jordan

Hi All, Apologies for the frequent posts - I'm finding my way with the Pixi API's. I've run into a strange issue whereby I cannot set an accurate polygon hit area for a sprite. My understanding is this: By default, all sprites will have a bounding rectangle as a hit areaFor more complicated sprites, you can override this hit area using a new PIXI.Polygon (using Pixi.Points) to draw the relevant hit area polygon.If I want to visualise this hit area, I can create a new graphics object and use lineTo / moveTo with the same x/y co-ords as my polygon hit area.However, when feeding my coords to the graphics object, the graphics object fills perfectly over the sprite. However, when I set these same points (x,y) coords as the coords for my sprite polygon hit area - the hit test is all over the place. (I would expect the graphics object to accurately reflect the hit area as they share the same x/y points!) Do I have a misunderstanding somewhere?

Hi, I can´t find any information on how to use the new hitArea property for Phaser 2.0.0, I want to use this to check whether the face of a character is clicked/pushed or if it the rest of the body that is clicked. I am pretty new to Phaser so hopefully someone can help me at either showing me where to find the documentation on this or give an example of how to set an area and how to check if this area is clicked. Thanks in advance!

Hey, I'm trying to set a mousedown and touchstart in a Spine object, but this don't dispatch a event. After this I tried to set a hitArea in spine, but this don't made diference. What I can do?