Search the Community

Showing results for tags 'hitbox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 11 results

  1. Hi everyone, I am new to Phaser framework and it's great! I have made a lot of progress on this Street Fighter game I am doing. A little background of my problem: I have my code set up that when I press W (Medium Punch), I increase the width of the sprite by via setRectangle playerKen.body.setRectangle(70, 80, -18); once I expanded the hitbox , I play the sprite, then set the width back to its original size once the animation has finished playing: kenAnimation = playerKen.animations.play('standingMediumPunch', 10, false).onComplete.add(function () { //reset the graphics back playerKen.body.setRectangle(35, 80, -18); playerKen.body.setCollisionGroup(kenCollisionGroup); playerKen.body.collides(mBisonCollisionGroup, hitEnemy, this); kenAttacking = false; playerKen.body.velocity.x = 0; playerKen.animations.play('standing', 7, true); playerKen.body.static = false; //console.log('punching'); }, this); I have also programmed the AI too, won't get into that. But my issue is the overlapping hitboxes. See the attached photo... When a situation like this occurs when I am punching and the AI is punching as well, the health of the player and the AI does not decrease. I looked into https://phaser.io/examples/v2/sprites/overlap-without-physics but the getBounds() method only gets the width of the sprite, not the hitbox. How can I see whether the two hitboxes have intersected? By the way, I am using p2 physics. Thanks a bunch!
  2. I am creating a platformer game where the player can attack enemies. I am currently using arcade physics, but would be willing to switch physics engines if need be. I would like to create hitboxes for my attacks that are separate from my player's hitbox (the player's sprite.body). The following gif (taken from Super Smash Bros: Melee) shows what I am trying to achieve. In this image, Jigglypuff is performing an upwards attack. The yellow hitboxes (surrounding Jigglypuff's body), are Jigglypuff's hitbox. If any of these intersect with a hitbox from an enemy's attack, Jigglypuff will be hurt by that enemy's attack. The red oval(s) is the hitbox of Jigglypuff's attack. If it intersects with an enemy's body hitbox, they will be hit by her attack. (note: the yellow hitboxes are always on Jigglypuff's body. The red hitbox only appears briefly during this attack) I have been able to make do so far with a single hitbox that changes during an attack by using: sprite.body.setSize()However, then I have to make the player invincible during attacks (so he doesn't take damage when his attack collides with an enemy). This strategy also causes problems when colliding with terrain. Another important part about creating separate hitboxes would be creating multiple hitboxes for a single attack. Each hitbox could store information like damage dealt, knockback amount, knockback direction, etc. This would allow attacks to perform differently depending on which part connects with an enemy. For example, if a player did a sword swing, one hitbox could be on the sword hilt, and only do small damage and knockback, while another hitbox could be on the sword blade, and have higher damage and knockback. This image shows another character performing an attack with separate hitboxes for the hilt and blade area of his sword as described above: I have seen some similar questions, and the obvious solution (having multiple physics bodies for one sprite) seems out of the question. Having seen a description of what I am trying to achieve, can anyone shed light on a way I could implement this? Create a group of empty sprites and use their bodies as the hitboxes? Thank you in advance.
  3. We are building a multiplayer top-down shooter deathmatch app. My team's idea is to upload all hits at a given time as x,y coordinates to an array (which is then passed to the server) and then check on each update loop to see if any enemy players were at those same coordinates. We were considering doing the traditional way (with collisions) but we're concerned about latency issues. Any insight about how to handle this? Any resources?
  4. Hi guys! My problem is dead simple but I can't find any perfect solution for it. I have a game, let's say Mario-like, where there's a player and some boxes. I want the boxes to act like normal arcade physics objects : they fall under gravity (they can be dropped from the sky). And I want the player to be able to jump on them. However, I do not want the player to be able to 'push' the boxes. Also, the boxes can stack on top of others. And the ones under can be destroyed, so the others on top have to fall onto the ground. Any ideas? Thanks!
  5. Hello, I try to make a shooter game with Phaser 2 but i encounter problems to rotate the player sprite and the player hitbox in the same time ... I simplidied my code to keep only the rotation of player : function create() { game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(200, 200, 'player'); game.physics.arcade.enable(player); player.anchor.set(0.5, 0.5);}function update() { // player rotation player.rotation = game.physics.arcade.angleToPointer(player); // hitbox rotation player.body.rotate = game.physics.arcade.angleToPointer(player); // player.body.rotation = game.physics.arcade.angleToPointer(player);}function render() { game.debug.body(player, "#9090ff", false);}Result : Init : player_rotate1.jpg And when i move the mouse : player_rotate2.jpg And What i try to make : player_rotate3.jpg Second question : Can i change hitbox type into a circle with Arcade library ? I made it with Box2D library : game.physics.box2d.enable(player);player.body.setCircle(14);but i don't want import two librarys ( and i can't rotate the player with this library ) Regards, Spalac
  6. Hi I would like to tween my sprite when it falls on a platform to make it look like a slime (increase its width and decrease its height, then back to normal). The problem is that I've enabled Arcade physics on it, and the body (body.width, body.height) is always adjusting to its visual size (sprite properties .width and .height). game.add.tween(this).to({ width: currentWidth + 10, height: currentHeight - 10}.onComplete.add(tweenBackToNormalSize);That creates opportunities to glitch underneath platforms and many other unwanted side effects. Is there a way I can get this effect without changing the hitbox ? Thanks in advance! Yann
  7. I am trying to make a game using Phaser that will have some fighting aspects to it. The problem I'm having is how to assign each frame a different set of hitboxes. I understand how I can create different hitboxes for a single frame of the animation, but how I cycle through a set of hitboxes as an animation is happening is where I run into trouble. From looking through the source code and all the examples, I couldn't find any aspect of Phaser that will support what I want, and before I get in too deep with Phaser I want to make sure this is possible. Thanks!
  8. So I'm playing around with hitbox bounds, but I want to actually be able to see the hitbox in-game. Is there a way to do that?
  9. Hello everyone I'm currently having an issue with button-hitboxes after I scale the game down, the buttons scale down as well but the hitboxes for the buttons remain at their original position. I create my phaser game with the following line of code: var game = new Phaser.Game(480, 640, Phaser.AUTO, 'gameCanvas', { preload: preload, create: create, update: update, render: render });The scaling is done through css (giving the canvas object a width of 100%): canvas {width: 100%; max-width: 480px;}Is anyone familiar with this issue? Is it maybe the wrong scaling approach using css? Any help is greatly appreciated!
  10. Is it possible to have a non rectangular hit box? I found these docs (oddly not from Phaser.io but look identical) which have a setCircle() and setPolygon() method for the Phaser.Physics.Arcade.Body, but the official Phaser docs do not. I see that the Ninja and P2 physics classes have a body element with some methods that look promising, but the rest of my project uses Arcade and there are some vague statements in the docs that make me think that there are some unimplemented features in the library. Can you have mixed physics? Can I implement arcade methods in Ninja or P2 (e.g. moveToObject(), angleToPointer(), etc.) easily? A larger scale question I have; what are the different physics systems for? The docs sort of explain the differences but I'm still unclear.
  11. I have just updated to the latest in the dev branch, and was going over my existing code to make sure it all still works, and I found a problem with some buttons. I have a Phaser.Button that use an image (720px by 249 px) with 3 frames (720px by 83px). During execution, I change the size of the button using the width and height properties. this.button.width = 300;this.button.height = 50;On some occasions, the buttons need to be half the width of the frame, and about two thirds the height. On these occasions, I notice that the hit box for the button is still the original frame size, while the sprite is being drawn at the expected size. In the previous version of Phaser I had, the hitbox was resizing with the rest of the button. After some small investigation, I found that I could get this to work as expected by slightly altering the checkPointerOver function in Input/InputHandler.js. When checking to see if the pointer is over the button, the code uses this.sprite.texture.frame.width and this.sprite.texture.frame.height, and that is always set to the original size of the frame. It doesn't take into account that I have resized the button to be smaller than this. This is my revised code, from line 478. I commented out the existing lines and added my modification below them to show the difference. checkPointerOver: function (pointer) { if (this.enabled && this.sprite.visible) { this.sprite.getLocalUnmodifiedPosition(this._tempPoint, pointer.x, pointer.y); // Check against bounds first (move these to private vars) //var x1 = -(this.sprite.texture.frame.width) * this.sprite.anchor.x; //Original Line var x1 = -(this.sprite.width) * this.sprite.anchor.x; var y1; //if (this._tempPoint.x > x1 && this._tempPoint.x < x1 + this.sprite.texture.frame.width) //Original Line if (this._tempPoint.x > x1 && this._tempPoint.x < x1 + this.sprite.width) { //y1 = -(this.sprite.texture.frame.height) * this.sprite.anchor.y; //Original Line y1 = -(this.sprite.height) * this.sprite.anchor.y; //if (this._tempPoint.y > y1 && this._tempPoint.y < y1 + this.sprite.texture.frame.height) //Original Line if (this._tempPoint.y > y1 && this._tempPoint.y < y1 + this.sprite.height) { if (this.pixelPerfect) { return this.checkPixel(this._tempPoint.x, this._tempPoint.y); } else { return true; } } } } return false; },I don't know if this has any other effects in other places, but my testing so far has not come up with any other unexpected behaviours. I'm not using pixelPerfect checking anywhere, so I didn't look at that.. Also, now that I have updated phaser, my entire phaser source folder is showing that I have made changes, so I dont want to try sort it out to make a pull request. Git be scary.