Search the Community

Showing results for tags 'Physics'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 661 results

  1. Hey! I'm using NullEngine on a server to check for certain conditions in a physics-enabled scene (using deterministic lockstep). As a simple example, I'm trying to find the specific step ID where a specific ball's y position falls below 0. My question is this: how should I set up the engine/scene/etc. in order to run these server-side simulations at the highest possible fps? Keep in mind that I want to be able to derive a list of step IDs on the server that correspond with specific events (re: ball.position.y < 0), and then have that same exact scene play in a browser with the same exact events matching the same exact step IDs.
  2. Hi guys! Jus wanted to update regarding a new feature that was pushed today. Until today any mesh with a parent couldn't have its own physics impostor and was considered to be a part of a compound along with the parent. This behavior can now be controlled using a new flag in the impostor options (part of the constructor. The behavior can be best seen in this simple playground: . The right sphere is a simple mesh and has no impostor. the left sphere has its parent set to the right sphere, and the impostor is set with the ignoreParent flag. The right sphere's position is still updated when the parent mesh is moving, but it is also being controlled by the physics engine. Fun times!! Another flag that I added has the amazing long name disableBidirectionalTransformation (a boolean). This flag will disable the bidirection transofmration between the physics engine and babylon, meaning - changing the mesh's position in babylon will practically do nothing. The object will be controlled solely by the impostor. This is done to add a performance boost, as the transformation step is being skipped. I am here for any questions! The playground is not fully updated, so this feature will be there pretty soon. Until then you can think what you can do with it
  3. Version 2.9.1 (phaser-ce) I'm seeing some unexpected behavior with the physics body of child sprites lagging behind when accelerating the parent. So when debugging the bodies, they appear slightly offset in the opposite direction of the movement: This is the code for an example I made to illustrate my problem: var game = new Phaser.Game({ state: { preload: function() { this.load.baseURL = ''; this.load.crossOrigin = 'anonymous'; this.load.atlas('spritesheet', 'atlas/megasetHD-1.png', 'atlas/megasetHD-1.json'); }, create: function() { this.physics.startSystem(Phaser.Physics.ARCADE); this.createVegetables(); }, update: function() { this.vegContainer.body.acceleration.y = 50 * this.time.physicsElapsedMS; }, render: function() {;; }, createVegetables: function() { // Create veg groups. this.melons =; this.mushrooms =; // Container. this.vegContainer =; this.vegContainer.addChild(this.melons); this.vegContainer.addChild(this.mushrooms); const height = 120; const x = 350; for (let y = 0; y > -1000; y--) { let sprite; let isMelon = Math.random() > .5; if (isMelon) { sprite = this.melons.create(x, height * y, 'spritesheet', 'melon'); } else { sprite = this.mushrooms.create(x, height * y, 'spritesheet', 'mushroom'); } sprite.scale.set(3); } // Enable physics on container and all children. this.physics.arcade.enable(this.vegContainer); this.vegContainer.body.maxVelocity.y = 800; } } }); and this is the code pen link. It will work as expected if I accelerate the groups individually but this is not ideal as there are quite a lot of groups in the game. Is this a bug or is it working as expected?
  4. Hello, the game I'm currently working on will be multi-player and needs to show replays. Instead of snapshotting complete game states, I would like to have a deterministic engine, so supplying the same initial state and the same inputs should result in same state evolutions over time. To achieve this, I need physics and animations to be frame-rate independent and to be in sync with each other. The idea is quantize the state execution time, by updating the game state at a fixed frequency, keeping an accumulator so to carry over exceeding time to the next frame update (the code would be similar to the one featured by CannonJS in its step function. The amount of internalStep can be capped to a maximum value, to avoid accumulating delay into the so-called spiral of death. I would be patching BABYLON.Scene.render() code, which is where animations and physics steps are triggered, by adding a conditional change if BABYLON.Engine is constructed with deterministicLockstep flag set to true, defaulting to false to keep compatibility with today code. I would add even a couple of observable events like onBeforeInternalStepObservable and onAfterInternalStepObservable so to be able to plug game logic code to execute before and after each internal discrete step. So, particularly to @Deltakosh would a pull request matching the criteria above be accepted? Thank you in advance, santarcade
  5. I'm trying to create simple physics impostors for relatively complex models (to create CPU-friendly yet fairly accurate hitboxes). I noticed the scene.createCompoundImpostor method would likely work nicely for this sort of thing, but it was dropped in v3.0. What is the recommended strategy for v3.0? As an example, I'd like to create a hitbox for something like this: ...using an array of primitives, like this: edit: here's another example...
  6. Hey guys, I was profiling my game and it seems like I could save some cpu time if I could bypass this function call in my objects' postUpdate : postUpdate: function() { ... if (this.components.PhysicsBody) {; } ... } My question is, since my game doesn't use any physics at all, do I have to rebuild phaser without physic support? Or is there a simpler way to simply disable the creation of physics body on all my game objects? Thanks for any input!
  7. I'm a newbie to the 3d dev world... WOW, the learning curve is HUGE! At any rate, I thought I would give Babylon.js a shot... I watched the learning series on Microsoft Virtual Academy with the two David's... In the materials example they show an example of creating 10 spheres in a circle surrounding a single sphere... That was the start of a simple idea I wanted to implement on a home page... I would like to create a wheel of objects that a user could spin... and a random object would stop center screen showing the result of the spin... I want a vertical spinning series of objects... Not like a money wheel or vertical roulette wheel, but more like a slot machine wheel, or think "the price is right wheel", where players spin the wheel to get closest to $1... My layout is very basic, and I simply need some assistance with how to go about animating something with physics... i.e. make the wheel look random and look realistic. Most of the examples I find show creation of scenes and objects, and perhaps some basic animation, but to create a game seems like it would be a huge undertaking. Assets (meshes) not withstanding, game logic seems like... well... formidable! I would also like some assistance with game code organization... Is there documentation on a logical order to store scripts and assets? * things I've determined from trial an error... The number of points should be evenly divisible by 360 in order for an object to be centered center screen... In this example the number of objects is 24, and the radius is 3... This centers an object center screen... If I use 16, and a radius of two this will also work for my needs... Now I would like to animate the spinning of this "wheel of objects", and have some sort of physics working to make the experience realistic... var createScene = function () { var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0, 0, 0); var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, -6), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, false); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 0, 0), scene); var points = 24; var radius = 3; var slice = (2 * Math.PI) / points; for (var i = 0; i < points; i++) { angle = slice * i; var obj = BABYLON.Mesh.CreateBox("box" + i, .65, scene); obj.position.y = (0 + radius * Math.cos(angle)); obj.position.x = -1; obj.position.z = (0 + radius * Math.sin(angle)); } return scene }
  8. So, which one to choose? Which one is more performant? Which one has most features? Which one is better documented?
  9. Greetings from a newbie in Phaser. In a 2d car game, how do you imagine a car ramp? Is there any way to draw a diagonal object and when the car object hits that start decreasing the angle and increasing the position.y? Progress! I started with Phaser.Physics.P2JS ( had to quit using Phaser.Physics.ARCADE ) Then make an sprite and assigned a Polygon: preload(){ this.load.physics('physicsData', '/app/dist/sprites.json'); } create(){ game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 50; game.physics.p2.defaultRestitution = 0.01; ramp = game.add.sprite(100, 100, 200, 100, "block"); game.physics.p2.enable(ramp); ramp.body.clearShapes(); ramp.body.loadPolygon('physicsData', 'ramp'); } My sprites.json is: { "ramp": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 200, 0 , 200, 100 , 0, 100 ] } ] } I think I got it. Any advice is good
  10. Just checking if anybody .. Maybe @Sebavan or @Deltakosh or @davrous have ANY info on the new physics engine... Engery.js I think it was called. A C++ ported physics engine
  11. We published this game over a year ago, but I entirely forgot about posting it here. It's a cute physics removal puzzler. Created using Flambe in Haxe with Nape physics. Art made using Flash. Save the Ice Cubes in this physics puzzler with unique twist. [puzzle, removal, physics]. Play Here Feel free to ask about anything about this game. The game is also available for non-exclusive licensing. Please contact me if you are interested.
  12. Hello! I am new to these forums and I just have to say Babylon.js is now one of my favorite libraries for webGL. I have finally switched over from three.js and have to say this has been so much fun to play with. Just recently I am trying to make a physics-based environment where you can pick up and drop objects similar to the old source engine and garry's mod. I created this playground to show an example of what I am trying to create but some of the bugs are shown in the gyazo link. The object, when held and looking downfalls through the floor. Sometimes when dropped it becomes at a sliding state where it will not stop sliding and on pickup, it will fall through the floor. So my question is, how can I stop the object from going through the floor?
  13. Hello Phasers, I'm new to Phaser and I'm starting to have fun with it. But I have an issue with collision using Arcade physics. The problem is that when a collision happens between two bodies, the collision make them overlap a little bit and at some point the bodies pass through each other as you can see in this example. Adding the property bounce = 0 to the line body solve part of the problem. But their is style a slight overlap. Can somebody explain me what's happening and give me a solution to the problem ? Thanks.
  14. Hello everybody I write my first application, add physics for my player, add cursors , input keyboards. En error you will see on the screenshots. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'gameDiv'); var spacefield; var backgroundv; var player; var cursors; var mainState = { preload: function(){ game.load.image('starfield', "assets/starfield.png"); game.load.image('player', "assets/player.png"); }, create: function(){ spacefield = game.add.tileSprite(0, 0, 800, 600, 'starfield'); backgroundv = 5; game.add.sprite(, + 200, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); }, update: function(){ spacefield.tilePosition.y += backgroundv; if(cursors.left.isDown){ player.body.velocity.x = -350; } if(cursors.right.isDown){ player.body.velocity.x = 350; } } }; game.state.add('mainState', mainState); game.state.start('mainState'); Whats wrong?
  15. What is the BEST or PREFERRED way to move your character with physics so it should respect the surface walking on ... If I use mesh.imposter.setLinearVelocity(moveVector) it is NOWHERE as precise when moving diagonally using something like: mesh.position.addInPlace(moveVector)... I was having a problem with the direction and moving EXACTLY forward from what the character is currently facing... And when that angle was more like 0, 45, 90 etc... it worked good with setLinearVelocity... But if was point at something like a 30 degree angle it would NOT MOVE EXACTLY forward... but I I use that same moveVector and ADD TO my current position (so using translation to move and not setting the physics linear velocity) it moves PERFECT... All Angles of rotation are then respected... what ever angle I am at and I res the up arrow key... It goes exactly forward... Now is there something wrong with setLinearVelocity or is it just not PRESICE enough to handle angles in between 45 degrees ??? PROS AND CONS from what I see. Using mesh.position to move a character with physics state enabled (mesh.checkCollision = false ... Dunno if that matters but I thought if we are using physics collision we should turn off mesh.checkCollision as that is for camera collision... I think) =================================================================== PROS: 1... Exact precise movement 2... Respects collision with other objects that have a physics state... so can walk up ramps and such 3... I image a bit faster just moving the position and letting the physics engine account for that actual 'Ending' Position... I guess that why I can walk up ramps based on just horizontal and vertical inputs. CONS: 1... No imposter.getLinearVelocity values that I was using to determine is falling (isFalling = mesh.imposter.getLinearVelocity() < 0.1) but can be switched to just movement vector I guess... Dunno 2... Gotta change how I apply gravity when jumping or falling from something ==================================================================== Using mesh.physicsImposter.setLinearVelocity to move a character with physics state enabled (mesh.checkCollision = false ... Dunno if that matters but I thought if we are using physics collision we should turn off mesh.checkCollision as that is for camera collision... I think) PROS: 1... Gravity code works from what I got using imposter.getKinearVelocity CONS: 1... Movement (at least for me) seems what to imprecise with angle not quite 45 degrees in between (say I'm point at 30 degrees and press forward does not go exactly that way... at least for me it does not) So if you were making a THIRD PERSON CONTROLLER for your REAL GAME (not just a quick snippet in a playground that moves you around with something like mesh.position.z += 0.1... but making a real game) What do use use to moving your guy around respecting physics and what not... being to move and run and jump and what not... A full character controller... What do you use for the actual movement of a game object with physics state enabled ??? mesh.position or mesh.physicsImposter.setLinearVelocity ??? Or am I way off and it should totally be something else Anyways... Pinging @Deltakosh and @davrousand @Sebavan and @JCPalmer (who looks like h changed his icon, I hope that him) and @adam and of course 'Wingy' @Wingnut... Yep... I'm asking the whole crew... What would you do when making a real game ???
  16. So.... to my great disappointment - yes, another one of those - it looks like parented meshes don't work with physics engine. Is there any workaround? I think it's impossible for me to unroll all parenting in the project, it would break animations and god knows what else... BTW it looks like @Wingnut is currently working on similar issues (poor physics support). thumbs up to you for all the great work
  17. I'm making a game using Phaser, P2 physics and webpack. When it comes to P2 I can not use custom physic shapes because they won't collide with world bounds. I'm using Phaser webpack example template ( Templates/Webpack) and an example from the website ( The point is that when using custom colision shapes, entities won't collide. But they do if I use the default squared shapes or the circle ones that Phaser provide. The game code is simple and you can check it here: /** * Import Phaser dependencies using `expose-loader`. * This makes then available globally and it's something required by Phaser. * The order matters since Phaser needs them available before it is imported. */ import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js'; import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js'; import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js'; var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('tetrisblock1', 'assets/sprites/tetrisblock1.png'); game.load.image('tetrisblock2', 'assets/sprites/tetrisblock2.png'); game.load.image('tetrisblock3', 'assets/sprites/tetrisblock3.png'); game.load.physics('physicsData', 'assets/physics/sprites.json'); } var tetris1; var tetris2; var tetris3; var mouseBody; var mouseConstraint; function create() { // Enable p2 physics game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.gravity.y = 1000; tetris1 = game.add.sprite(300, 100, 'tetrisblock1'); tetris2 = game.add.sprite(375, 200, 'tetrisblock2'); tetris3 = game.add.sprite(450, 300, 'tetrisblock3'); // Create collision group for the blocks var blockCollisionGroup = game.physics.p2.createCollisionGroup(); // This part is vital if you want the objects with their own collision groups to still collide with the world bounds // (which we do) - what this does is adjust the bounds to use its own collision group. game.physics.p2.updateBoundsCollisionGroup(); // Enable the physics bodies on all the sprites game.physics.p2.enable([ tetris1, tetris2, tetris3 ], false); tetris1.body.clearShapes(); tetris1.body.loadPolygon('physicsData', 'tetrisblock1'); tetris1.body.setCollisionGroup(blockCollisionGroup); tetris1.body.collides([blockCollisionGroup]); tetris2.body.clearShapes(); tetris2.body.loadPolygon('physicsData', 'tetrisblock2'); tetris2.body.setCollisionGroup(blockCollisionGroup); tetris2.body.collides([blockCollisionGroup]); tetris3.body.clearShapes(); tetris3.body.loadPolygon('physicsData', 'tetrisblock3'); tetris3.body.setCollisionGroup(blockCollisionGroup); tetris3.body.collides([blockCollisionGroup]); // create physics body for mouse which we will use for dragging clicked bodies mouseBody = new p2.Body();; // attach pointer events game.input.onDown.add(click, this); game.input.onUp.add(release, this); game.input.addMoveCallback(move, this); } function click(pointer) { var bodies = game.physics.p2.hitTest(pointer.position, [ tetris1.body, tetris2.body, tetris3.body ]); // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system var physicsPos = [game.physics.p2.pxmi(pointer.position.x), game.physics.p2.pxmi(pointer.position.y)]; if (bodies.length) { var clickedBody = bodies[0]; var localPointInBody = [0, 0]; // this function takes physicsPos and coverts it to the body's local coordinate system clickedBody.toLocalFrame(localPointInBody, physicsPos); // use a revoluteContraint to attach mouseBody to the clicked body mouseConstraint =, [0, 0], clickedBody, [game.physics.p2.mpxi(localPointInBody[0]), game.physics.p2.mpxi(localPointInBody[1]) ]); } } function release() { // remove constraint from object's body game.physics.p2.removeConstraint(mouseConstraint); } function move(pointer) { // p2 uses different coordinate system, so convert the pointer position to p2's coordinate system mouseBody.position[0] = game.physics.p2.pxmi(pointer.position.x); mouseBody.position[1] = game.physics.p2.pxmi(pointer.position.y); } function update() { } function render() { // game.debug.text(result, 32, 32); } If you need to have a look at the project, you can check it here: Any toughts about why the collisions are not working when using custom collision shapes? Thanks in advance, Alex
  18. So I am trying to make a platformer game using Phaser. The game contains a lot of blocks (tiles) which are loaded from the tilemap. Now what I want is that these blocks can be moved dynamically during the game (for ex. if the player bangs their head against it). The thing is, I don't know how? My first question is, is this possible? Because I tried changing the position, it didn't work (but I successfully changed its alpha). Moreover, I tried using Physics P2, but it has a null sprite value, so all the changes done are done to the body and the sprite still remains there. I can use any physics system, I am open to all. All I need is a way to work this out.
  19. Hi, i witnessed the weirdest behavior while following the make your own phaser game tutorial. At one point in the tutorial (between parts 5 and 6 ) it is explained how to make the player collide with the ground instead of going through it. Basically, the weird thing is that i copy/pasted the whole code from part 6 (not only the script, but the whole html page) in the part5.html file and the player still goes through the ground when i access part5.html, although it works as intended when i access part6.html. I wonder how can the exact same code produce different behaviors. This happened using vivaldi browser, and the code works as intended when i try it with chrome and firefox. I am very intrigued by this, can someone please explain ?
  20. Hi there, I´m a bit confused about some core concepts with Arcade Physics... I´ll try to explain it because actually it´s a little bit confusing even to understand what´s going on. The thing is that I have a game where the main character is falling like if he jumps from the top of a building and when I init that sprite, I just apply a gravity to him this.prota.body.gravity.y = 700 Then, on both sides of the game I have some mushrooms and some black-weird-plant-arms and when you hit them, I want the player to receive like an impulse, I mean, I want the player to "be launched like a rocket" and I make this with a callback of a collide() in the update() of the game //in the update() this.physics.arcade.collide(this.prota, this.grupoSetas, null, this.reboteSeta, this) //and the callback reboteSeta:function(prota, seta){ //some code this.prota.body.acceleration.y = 0; this.prota.body.acceleration.x = 0; this.prota.body.velocity.y = -1000; this.prota.body.velocity.x = this.rnd.between(-1000, 1000); //some other code }, The problem I have, is that the first time the player hits the mushroom, he rebounds only a little bit and then the rest of the times he rebounds properly and I´m really confused about this, I don´t know why this is hapenning... Can anyone let me know what and why this is hapenning? You can test it here
  21. 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.
  22. Hi Everyone! Hopefully someone can help with the issue I have faced. I am building a simple racing game and want to implement collision between car and other objects. I am using p2 physics. When I create primitive body objects (e.g. body.setRectangle) collision works fine, but when i use polygon (body.loadPolygon) i have created in PhysicsEditor the car just rides throw these objects without any collisions. I have tried building very simple objects to exclude "holes" in collide, creating collision groups but unfortunately any of these things helped. Attaching my code and a screenshot Car class: export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) game.physics.p2.enable(this, true) this.anchor.setTo(0.5) this.body.clearShapes() this.body.loadPolygon('physicsData', 'car') this.body.angle = -90 this.cursors = game.input.keyboard.createCursorKeys() this.velocity = 0 } Obstacle code: create () { = 0.8 =, 0, 2880, 1620, 'map'), 0, 8640, 4860), 3) this.mapAbove =, 0, 'race'), true) this.mapAbove.body.clearShapes() this.mapAbove.body.loadPolygon('physicsData', 'race') = new Car({ game:, x: 3800, y: 3750, asset: 'car' }) } Also i am using this stuff as skeleton - Could troubles be in incorrect packages? Looking forward for Your reply, Thanks!
  23. According to the documentation, "A Group is a container for display objects including Sprites and Images." I haven't been able to find a definition for collision groups, but it seems they're part of the P2 physics engine; somehow they control what an object can collide with. The canonical example for collision groups uses both. A regular group has all sorts of properties; a collision group only has one property called "mask". What is a collision group? What is it for? What happens to a sprite when it gets added to a collision group?
  24. I want to create a game where enemies spawn, fly toward the player's ship, and stick to the side of it. The player can then rotate the ship and the stuck enemies will rotate with it. The way I have this working now, the ship and the enemies are each part of a group and a collision group; when an enemy collides with the ship, it leaves its old group and collision group and joins those of the ship. The player is then able to rotate the ship's group, including the stuck enemies. But from there, things get weird. Try it. If you rotate the ship 90 degrees to the left and then stick an enemy to its right edge, the enemy vanishes and appears at the top edge of the ship. Try to stick another enemy to the same point on the right edge, and it too will teleport to the top of the circle, colliding with the other enemy there. Also, enemies that have been "stuck" won't collide with those that have not. If I move everything into one collision group, rotating the ship with enemies stuck to it will be reflected onscreen but not in the physics. You can spin the ship around all you like, and the enemies stuck to it will appear to rotate around it, but the non-stuck enemies will act as if they aren't moving. How can I get a group of physics bodies to act like one body, rotating together and colliding with other objects in the gameworld? You can play with what I've got here, and my code is here.
  25. Hi! I'm new to Babylon.js and Game Development in General. I've started a project on a dice simulation, where I generate a random dice roll result in JavaScript and visualize it as physics enabled dice being thrown and displaying the predefined result! Current status: I have a 6 sided dice object(Box) with BABYLON.DynamicTextures on them for the numbers. This object is instanced as often as needed and thrown from the same position and same rotation quaternion. My problem now is that I want to display the precalculated roll result on the dice, but as of right now it is "random". I thought I could solve this issue by rolling the dice invisible, determine with raycasts which side is up, put the textures on the right position and repeat the animation. But the problem is that as I repeat the animation the dice roll on different sides, so I can't really use this method... My question is now, is there a way to determine the outcome of a physics enabled dice movement, so I can apply the textures correctly? Thanks in advance!