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 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 96 results

  1. The canvas doesn't fit tight in the body. Is there a way to remove the margin? = Phaser.ScaleManager.SHOW_ALL; = true; Not sure if these setting make a difference.
  2. Hey guys, I'm new to phaser and I'm not quite sure if this is a bug or a mistake of myself. In this code if the player has a circle as his body and if he is colliding with one of this obstacles he won't get separated as it is described in the phaser documentation. So if you move up and collide with the obstacle the console starts printing out true even if you stop moving. In addition to that if you walk against an edge of the obstacle the player gets stuck on it and can't get away of that. I'm confused because this doesn't happen if the players body is an rectangle. Does anybody have an idea? var game = new Phaser.Game(600, 600, Phaser.AUTO, "", {preload: preload, create: create, update: update}); var player; var cursors; var obstacles; function preload(){ game.load.image("robot", "player.png", 32, 48); game.load.image("obstacle", "box.png"); } function create(){ player = game.add.sprite(, + 200, "robot", 5); game.stage.backgroundColor = 'rgb(239, 228, 176)'; game.physics.arcade.enable(player); player.body.setCircle(player.width/2);// player don`t get seperated in the collide function //player.body.setSize(player.width * 0.8, player.height*0.8,player.width * 0.1, player.height*0.1 ); //player get seperated in the collide function player.anchor.set(0.5); player.angle = -90; cursors = game.input.keyboard.createCursorKeys(); obstacles =; game.physics.arcade.enable(obstacles); obstacles.enableBody = true; obstacles.create(, - 200, 'obstacle'); obstacles.create( - 190, - 200, 'obstacle'); obstacles.create( + 150, - 100, 'obstacle'); obstacles.create( - 130,, 'obstacle'); obstacles.create( - 230,, 'obstacle'); obstacles.setAll('body.immovable', 'true'); obstacles.setAll('anchor.x', '0.5'); obstacles.setAll('anchor.y', '0.5'); } function update(){ game.debug.body(player); obstacles.forEach(function(item) { game.debug.body(item); }); if (cursors.up.isDown) { game.physics.arcade.velocityFromAngle(player.angle, 200, player.body.velocity); } else { player.body.velocity.set(0); } if (cursors.left.isDown) { player.body.angularVelocity = -300; } else { if (cursors.right.isDown) { player.body.angularVelocity = 300; } else { player.body.angularVelocity = 0; } } game.physics.arcade.collide(player,obstacles,(p1,en)=>{ console.log(true); }, null, this); } cheers landa
  3. I just upgraded to Phaser 2.9.3, since then I get a strange behavior. 1. I press Left / Right to change the Sprite's velocity (x). // See update method 2. Sprite has enabled Physics, World.gravity is 2000 // See in create method 3. But the Sprite instead of moving left (negative velocity.x) moves upwards // See attached gif What I figured out till yet: - velocity.y turn to NaN by colliding with a collisionGroup . - velocity.y stays NaN, even if the character moves into the air. (whyever it moves into air..) There is nothing else going on. I tested this as a test-case, not inside my game, to be sure I'm not messing something up. create method: super(, x, y, 'minions'); this.level = state; this.anchor.setTo(0.5);;; this.body.bounce.set(0.5); this.body.setSize(45, 110, 80, 45) update method: if(this.controls.on("left")) { this.body.velocity.x = -500;'walk'); } else if(this.controls.on("right")) { this.body.velocity.x = 500;'walk'); } Anyone have a clue why this happens? Thanks in advance.
  4. Hello, i am again... i have a realy noob question but cant find an answer. Since i playing with this Playground i try to figure out how i can get the position of the car (mesh = carBody ?) Im not successful. Line 42 - 44 scene.registerBeforeRender(function(){ console.log("Poisition", carBody.position); }); The only thing that changes is when i turning the steering wheel. Nothing about the position on the ground... I tought the carBody "merge" all meshes into one and move them around with them. So that the positions property on child meshes a relative to the parent mesh. I dont get it...
  5. 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.
  6. 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?
  7. 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.
  8. 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?
  9. 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?
  10. 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.
  11. 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.
  12. 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
  13. 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.
  14. 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.
  15. [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?
  16. 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
  17. 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?
  18. 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.
  19. 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?
  20. 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.
  21. 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!
  22. 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?
  23. 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.
  24. 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?
  25. 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?