Search the Community

Showing results for tags 'body'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 92 results

  1. I'm trying to add a collision box to a sword swing. I'm using one sprite for the swing and rotating it 0, 90, 180, 270 degrees, depending on direction. As physics bodies are not affected by their sprite's rotation, I'm using body.setSize(width, height, offsetX, offsetY) to move the collision area depending on direction. Problem: It seems that (width, height) updates earlier than (offsetX, offsetY), or that the new offset is delayed one update. This leads to the hitbox reaching beyond the player's attack range. How can I avoid this? One way to easily test this is by calling sprite.body.setSize( <randomX>, <randomY>, <randomOffsetX>, <randomOffsetY> ). The sprite's angle does not affect this. ^ The collision area updates its size first, and later snaps to its new offset. ^ The sword sprite, 48x48. Red box indicates where the body's collision area should be.
  2. I see the docs of the Body class But i am not sure which would be the right property to change. I have two balloons falling down and they might both at the same time or one after the other, hit my rectangle. The problem is, both objects stop moving after they hit the rectangle. i am sure this has to do something with physics. As if the vertical(y coordinate) velocity gets set to 0 when they hit the rectangle. Here is a sample code: graphics = si.gameObject.add.sprite(boxX, boxY, si.ImageAssetKeys.BALLOON_ANIM_ATLAS, 0); floatingAnim = graphics.animations.add('floating', si.GraphicsUtility.getFloatingAnimArray(), 30, true); splashAnim = graphics.animations.add('splash', si.GraphicsUtility.getSplashAnimArray(), 30, false); splashAnim.onComplete.add(si.LetterBox.splashComplete, this);'floating'); = graphics;, 0.5); = false; = false; = false; = true; = velocity; = false; = false; Which body property should I change to prevent the stop in movement of balloons?
  3. Online Body Editor Hi guys. during the development in Phaser i found out, that there is no simple online editor for Making Physics bodies for P2 physics in Phaser. So i came up with an simple idea. To do a simple online body editor to make json files for Phaser. I know its super simple and it could do much more things as other desktop body editors can do, but when you want just simple body in two minutes, i think its a good way. I took me less than two hour to do it, so dont judge it for bad appearance and not efficient solutions for the algorithm. Maybe ill do things like more bodies in one json file, or auto edge-tracer adn stuff like that, but fell free to comment and come up with your ideas to improve it for the future. So please, if have have anything to say to this, comment below, i would be pleased.
  4. I'm new to Phasor and using it to make a little game for my son with a firetruck driving around and spraying water to put out fires. When the space bar is pressed, the game creates individual water drop sprites coming from the truck with gravity turned on. I give the water drop velocity a slightly random component to make it spread out and not all follow a single parabola. There is a timed event to destroy each water drop. Here is a code snippet creating a water drop that is shooting to the right. drop = waterdrops.create(truck.body.position.x + TRUCK_SIZE1_X/2, truck.body.position.y - 20, 'waterdrop'); drop.frame = 0; drop.body.gravity.y = 300; drop.body.velocity.y = -100 + randn()*20 + truck.body.velocity.y/2; drop.body.velocity.x = 100 + randn()*20 + truck.body.velocity.x/2;, destroyDrop, this, drop); I fiddled around with different numbers until it looked like a nice spray of water coming out and hitting the ground. This works great when developing on my Macbook Air. However, the really weird issue is that when I run it on my Windows 7 machine the water only goes half as far before being destroyed. I tried doubling the delay time and this made it work well on windows 7 but then on the Macbook the water goes way too far. I also notice that the truck itself seems to go slower. It seems to me that if the body.velocity and body.acceleration values are scaled differently on each machine. My first though was that maybe it has to do with screen resolution, but thinking about it further that doesn't seem to make sense. So, why is there a difference in water drop behavior between the two platforms? Also, is there a better way to do what I'm trying to do here? As I said, I'm new to Phasor and this is just what I came up with after reading a few tutorials and looking at other examples. The game as it stands is hosted here -> Thanks! Ben ** UPDATE I ran the game on another Windows 7 machine and it works okay. So the problem seems to be with my older Windows 7 Machine. Could this be an issue of client side CPU processing capability? Does Phaser adjust frame rate to deal with slower computers?
  5. Can't debug.body on a group!

    Hi, in my render function, I have the following: render: function() {;; }, Now, the player, has a little green box around him, however the monster (or the group of monsters) has nothing and I get a warning: " gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);" HOW TO I GET A LITTLE GREEN DEBUG BODY ON A GROUP OF OBJECTS?
  6. HI Been going through the Book Discover Phaser, but are stuck with this bit of code: The jump functionality on the player somehow doe's not work. When I console.log the body.touching object, I can see, that body.touching.down does not turn true, when the player hit's the a platform. Furthermore, the cursor.up is detected when I leave out this bit of code: '&& this.player.body.touching.down', but somehow does not function, when the code is as in the Quote. Any Ideas to what I should be looking for? Thanks.
  7. Load polygon - Phaser

    I am trying to load physics body in Phaser, but it doesn't work, here is a little part of the code: preload: game.load.physics('physicsData','assets/img/assets-pack.json'); create: grass.body.clearShapes(); grass.body.loadPolygon('physicsData','grassBody'); JSON file seems to be ok - I checked out the content. I get two alerts: *data is null* & *Phaser.Cache.getPhysicsData: Invalid key/object: "physicsData / grassBody"* - how can it be invalid?\ I can send the whole project if needed.
  8. Hello, I have searched a solution for a problem for long time and didn't found, if someone have some ideas I am taking all x) did someone know if it's possible to rotate a group of bodies around an anchor point, I set some bodies for invisble walls and my objective is to turn them around by 90° around an anchor point, I know It must be not very comprehensive so I set up an Image to explain myself. In the screen, I have 2 bodies and I want them to turn around the red dot what must be my anchor point, I know it's impossible in arcade so I tried in P2 physics and impossible to found any solution :/ Thanks for reading, feel free to leave a feedback
  9. Hey guys, hope you're having a great time. And I have a little problem you may be able to help me with. I'm making sort of RTS and there are lots of units marching to each other and killing each other. The problem is, they are stepping onto each other, and kind of pushing each other, and sometimes even jumping someplaces. This looks weird. Watch this video and you will understand what I'm talking about (I'm using Warcraft 2 sprites just for testing purposes, and also because they are great). A little more details: I'm using Arcade physics. All units are objects of the same class, derived from Phaser.Sprite. All of them have a circle body, anchor set to 0.5 (if if matters), and are moving using velocity (before that I was modifying their poistions manually but with the same result). Units belong to 2 different groups, each group is collided with self and other group - so they won't walk through each other. What I want is that units would be standing still and no one could move them, not to mention these weird jumps. Is there some common techinque for handling this, do I miss something? Thank you in advance.
  10. Sprite body anchor

    Hello, there is a small difference between the sprite body anchor between phaser 2.6 and older versions. In previous versions the body will anchor with the sprite anchor, meaning that if you set the sprite anchor to 0.5 in both axis the body stayed in the center of the sprite, changing the body size would keep it in centre, in the newer version the body is always anchored to the top left of the sprite regardless the anchor of the sprite. Is this behaviour intended? Just wondering if I should re-center my sprites bodies or if this will change to the old behaviour. Thanks.
  11. Hey guys, I am developing this draft game demo and I need some advice/ feedback on some tips to make the collision a bit better. I'm using loadPolygon to load a custom body shapes for this sprite object and responding to collisions using onBeginContact to applyImpulse to the ball on a SPACEKEY.onDown The following is the code player.body.collides(ballCollisonGroup, this.headerBall, player) headerBall(bodyA, bodyB, shapeA, shapeB, equation) { let duration = 10; let localX = equation[0].contactPointA[0]; let localY = equation[0].contactPointA[1]; let forceX = 0.12 * this.headMass; let forceY = 0.8 * this.headMass; if(this.headerKey.isDown) // only if see is down apply additional force { duration = Math.min(this.headerKey.duration, 500); // apply time based on how long key pressed forceY = (1 * this.headMass).toFixed(2); // apply force of 1 velocity x mass of head (.53) forceX = (1 * this.headMass).toFixed(2); let impulse = [(forceX * duration), (forceY * duration )]; // calculate impulse bodyA.applyImpulse(impulse, localX, localY ); // apply it to ball } } I'm not sure if I am doing it right as I am not verse in Math Physics but i would like some feedback on the following: - Is my formula accuarate? Can I set varying impulses based on the contact shape? There is a sort of glitch if the ball comes into contact with his shoes and the ball ends up in the middle of his body which gets stuck. How can I avoid this? The key down condition seems to be glitchy is there anyway to make this a bit more "safe" to detect and capture? I need to apply some force to the ball ONLY when the space key is pressed. Thank you in advance for your feedback.
  12. Hey. Me again. I'm trying to figure out why my randomly placed platforms for my platform game won't be immovable. I've included the physics and enableBody to the group.. this._platforms =;this._platforms.enableBody = true;game.physics.enable(this._platforms, Phaser.Physics.ARCADE);this._platforms.body.immovable = true; The player lands on the platform and the platform goes down with the player, both top/bottom and left/right. I get this error: Uncaught TypeError: Cannot set property 'immovable' of undefined Thanks in advance!
  13. [P2] Collision between player, bounds and layer

    I'm trying to make a prototype for a RPG game, I managed to make the drive, but I can't do the collision, can help? I have the ' background ' layer, that would be my floor, the 'colisao', where I keep all objects that the player will collide, as walls, and finally the 'coletaveis', where the items that the player can interact. Follow my code level 1: Not even the collision with the edge of the screen is working, can anyone help me?
  14. Hey everyone, I stepped upon an interesting thing or self induced bug that seems to be happening whilst using Arcade Physics for an infinite runner. It's pretty rough around the edges, more of a proof of concept than anything else, but basically in the update function I'm doing a couple of things. First of all, the ground is a group of child sprites, each ones velocity gets nudged left per update cycle: this.ground.children.forEach(function(c) { c.body.velocity.x = -this.RUN_SPEED; }, this); Then, I check to see if any of those children have gone off screen to the left (child.body.right < 0) for example. Once that's done, I then reset that child back to the right hand side of the screen like so: child.reset(, child.y); In between all that I just do a couple of checks to make sure none of them overlap, by using this (it also makes sure we don't try to place anything else whilst this particular piece is still leaving the right-hand area: this.ground.children.find(function(child){ return child.x < && child.x + child.width > || child.x >=; }, this); Now the main problem I'm having is that there seems to be a gap between each one of the sprites when they've been resetted and are following the one that came before hand. What I find interesting is that if I set the velocity to 256, the gap between each sprite seems to be exactly 12 pixels in width. If I drop it to 128, then it drops to 6 pixels in width. I'm curious as to how the numbers might correlate, or, is there something that happens in the physics step that's making the gap outside of the main update loop? It's a bit of a weird problem, and as said earlier, it's probably just down to poor implementation. I've attached the script file if you'd fancy a perusal also. Thanks for your time everyone, take care! IFPlay.js
  15. Draw a body?

    Hello. I was curious about the system implemented in some games, in this case applied to 2d only. I am talking about the creation a character body by drawing. Can that be applied to Phaser? An simple example would be something like simply drawing a 2D polygon with a "virtual marker" and then that draw would become a phyics body ( probably getting the borders of the draw and setting making a sprite out of it). I suppose I had to implement a way for the user to draw, then get the draw as image, somehow set its borders as I previously said and then load the sprite to the game. Am I thinking correctly? Can someone clarify me?
  16. Sprite body position

    Hi, just upgraded from phaser 2.4.4 to 2.6.2 and I'm having trouble with sprites bodies. My sprites are set to an anchor of x 0.5 and y 0.5, the body was also being set at that position on 2.4.4 version but after updating the body doesn't change position when changing the anchor. Is there any way to move the sprite body to the center of the sprite? Thanks.
  17. I've noticed that "this.player.anchor.setTo(0.5);" will create a bounding box centered on the player.body in Phaser v2.2.2 when ";" is used, but in the latest Phaser v2.6.2, ";" shows a bounding box anchored at top left even if "this.player.anchor.setTo(0.5);" is previously applied. Was this an intentional change or a bug in the new version?
  18. I have a sprite with an anchor of 0.5, 0.5, so the middle of the sprite. How would I add a circle body to the sprite with the center of the circle on the anchor of the sprite, so that if I scaled the sprite, the circle would scale from the middle of the sprite and not from the top left? Seems simple but setCircle (and setSize) seems to be messed up as I've been trying to get them to work all day... - Circle body size doesn't seem to respect the scale of the parent sprite or its anchor.
  19. I was trying to change the mass of a Box2d body in a PostsolveCollisionCallback, but it was not working as I intended. I checked the behavior in a debugger, and I found out that any of properties of Box2d body (e.g. mass, velocity) could not be changed inside a callback function. I guess this is because those parameters are necessary for some physical calculation, but I would like to know if the is any workaround for this. For now I just created a time event to modify the parameters. I went through the documentation but nothing was found. Shouldn't this be mentioned somewhere?
  20. Hi everyone, I'm extending an sprite with the following code: Monster = function (game, x, y) {, game, x, y, 'monster01');, Phaser.Physics.ARCADE); //graphics this.anchor.set(.5, 1); this.body.setSize(290, 670, 330, 110); }; Monster.prototype = Object.create(Phaser.Sprite.prototype); Monster.prototype.constructor = Monster; Monster.prototype.update = function() { //input if( { if(Phaser.Rectangle.contains(this.body,, { BasicGame.PPGPlayer.clickOnMonster(this); } } }; I'm adding this sprite to the main state using: = new Monster(, * .5 + 400, 990); this.add.existing(; Then, I'm killing it with and the sprite disappears but the body is still on the state. If I render the body I can still see it: render: function (){; }, Why is this happening and what is the best way to solve it? Thanks!
  21. Hi everyone, I have an animated sprite of a meteorite with it's tail. I need that the collisions are only for the rock and to be able to rotate the sprite with the movement direction. If I setup the body size like this: this.anchor.set(.55, .55); this.body.setSize(110, 110, 400, 350); The graphic and body collision is fine if the angle of rotation is 0. But I need to rotate the sprite around the anchor point and then the body is not on the desired position of the sprite. How can I fix this?
  22. I am attempting to recycle sprites, and upon recycling I change their size. Unfortunately the body's setSize method is not functioning as hoped. In the picture, the important thing to look at is the orange-ish ship in the middle right whose green bounding box is only covering his top left. The red ship's bounding box is in the top left (I think), and I am not sure why it is not following him (but it works fine). I move Mr Red Ship around via, this.speed); Anyways, the console statements in the picture log the sprite's width, height and then the body's width, height. Even though they match in the console, they do not match in the game world. The code below is the parent of the sprites that does all the heavy lifting. I use the reset(...) function to revive sprites that have had kill() called on them. The reset function calls setAreaMaintainAspectRatio, which does the resizing. I've tried removing the setSize call in it, replacing it with a reset(), etc but nothing I've done has gotten those crisp bounding boxes back. /* * ParentSprite * ==== * */ export default class ParentSprite extends Phaser.Sprite { constructor(game){ super(game);; } reset(x, y, health, width = 50, key, frame){ super.reset(x, y, health); //this.body.reset(); this.loadTexture(key, frame); this.setAreaMaintainAspectRatio(width); this.body.velocity.x = 20 } update(){,'rgba(0,255,0,0.4)'); //, this.x, this.y); } //give the sprite a new size while maintaining aspect ratio setAreaMaintainAspectRatio(width){ const newWidth = ParentSprite.dp(width); this.width = newWidth; this.scale.y = Math.abs(this.scale.x); //set body to new sprite size, otherwise collisions (and other physics actions) will be messed up if(this.body) { this.body.setSize(this.width,this.height); } console.log(this.width, this.height, this.body.width, this.body.height); } //density independent pixels static dp(length, heightOrWidth, parent){ return length * window.devicePixelRatio; } } Any and all help is much appreciated!! I have found this topic saying that I should just reset the body after changing width/height, but that doesn't work for me.
  23. I'm using sprite.body.setCircle, which works as expected with respect to collision and overlap. But the circular body doesn't scale with my sprite. I found this issue from 2014, which fixed a problem that sounds exactly like the one I'm having. That was in body.updateBounds. I looked at the function in the most recent code, Phaser v2.6.1, and nothing jumps out as obviously wrong, but then, it's the first time I've ever looked inside the lib. Anyone have any thoughts?
  24. So I've just learned, from the example on, that you can set your sprite body to be a circle instead of a rectangle. This is exactly what I need. But when I tried it in my own code, I get an exception, and the Chrome debugger tells me that setCircle is not a function. The example on works, so I figure I'll paste it into a js file on my own machine, and play with it to figure out why it works while mine fails. But the example won't run on my machine either, for the same reason: setCircle is not a function, at least according to Chrome. I forked my phaser lib from github, and I see setCircle there in the code, so I don't get it. And I did a git pull, so I'm up to date. I'm at a loss. Any ideas?
  25. Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite =, 200, 'net');; //Add hoop children markers this.leftMarker =, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker =, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?