Search the Community
Showing results for tags 'box2D'.
-
Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview GitHub: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js glMatrix is just a bonus: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to set up Box2D-WASM with importmap and Rollup for JavaScript</title> </head> <body> <!-- Since import maps are not yet supported by all browsers, it is necessary to add the polyfill es-module-shims.js Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation --> <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "box2d-wasm": "https://unpkg.com/[email protected]/dist/es/Box2D.js", "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/+esm" } } </script> <script type="module" src="./js/index.js"></script> </body> </html> init-box2d.js import Box2DLib from "box2d-wasm"; export let box2d = null; export function initBox2D() { return new Promise(resolve => { Box2DLib().then((re) => { box2d = re; resolve(); }); }); } index.js import { box2d, initBox2D } from "./init-box2d.js"; import { mat4, glMatrix } from "gl-matrix"; async function init() { await initBox2D(); const { b2Vec2 } = box2d; const vec = new b2Vec2(1, 2); console.log(`vec = (x: ${vec.x}, y: ${vec.y})`); const mat = mat4.create(); console.log(mat); console.log(glMatrix.toRadian(45)); } init(); Instructions for building and running the project in debug and release: - Download and unzip this example: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js - Go to the example folder in the console: `cd how-to-set-up-box2dwasm-with-importmap-rollup-js` - Install these packages globally with the command: > npm i -g http-server rollup uglify-js - Add the Rollup bin folder to the Path. Type this command to know where npm was installed `npm config get prefix`. This command will show you the npm location. You will find the "node_modules" folder there. Go to the "rollup/bin" folder and copy this path, for example for me: `C:\Users\8Observer8\AppData\Roaming\npm\node_modules\rollup\dist\bin`. Add this folder to the path variable. - Run http-server in the project directory: > http-server -c-1 Note. The `-c-1` key allows you to disable caching. - Start development mode with the following command: > npm run dev Note. Rollup will automatically keep track of saving changes to files and build a new index.js file ready for debugging. You can debug your project step by step in the browser by setting breakpoints. - Go to the browser and type the address: localhost:8080/index.html - Create a compressed file ready for publishing. Stop development mode, for example, with this command Ctrl + C in CMD, if it was launched before and enter the command: > npm run release Note. After this command, Rollup will create a compressed index.js file. Compression is done using the uglify-js package.
-
https://letterfall-test.herokuapp.com/ *Made with PixiJS V4.7 and Box2D library* This is a solo project which was initially done to help grow my knowledge (self taught) but has slowly grown into more. I have done pieces in my spare time over the years. I was drawn in by the liquid-fun library/demo and wanted to create a small game with it. So what is this? A daily word game with physics and water! Some basic points (Also found in Help tutorial on site): - Every day a new word is loaded (midnight est) - The word will be incomplete - Top left shows a hint (not always) then below a partial Answer - There’s a pointer under the character space of the Answer to show the next character that needs to be chosen - Each space in Answer is color coordinated: orange being a consonant, green is vowel, and purple is a number. - Clicking on the letters on left or numbers on right will drop it in middle of screen where water is coming down (water helps makes the fall more random … letterFall.. WaterFall.. yea 😅) - The letter or number will hit the diamond shape below near where it falls, which will trigger a color: Red is wrong letter, Green is correct-however, needs to land on platform near bottom of screen - Clicking the directional keys on bottom will ‘nudge’ the last letter falling in given direction - Ultimately, the goal is to get the correct Letter to Fall onto the platform at bottom of screen for 3 seconds… doing so will confirm and then onto next letter until word is complete. - Scores are based on times to complete - I’ve tested on a lot of devices, and layouts should work on most platforms, however it does hammer on battery some until I further optimize… lower battery (sub 20%) will hinder performance unfortunately. Other notes: - This is still very early, pre-alpha!! Changes/features/etc are planned - There are leaderboards for each stage - Your score and attempts are tracked, and can replay stages up to the current day - Each day/word will have a set of RANDOM modifiers that get determined with the Word —then saved so when replay, the modifiers will remain same (so leaderboards are accurate using same modifiers for all) - Can login as a Guest, however, Guest scores will get deleted after two days - Planned for future: a modifier for possible horizontal ‘bullets’ (forewarnings on screen), seasons, and would like to have custom avatars solely based on personal career stats —> score/attempts/etc - It’s completely free now (no ads or slimy monetization) but I did put a lot of work into this so eventually maybe a donation page to keep it free of intrusive monetization will happen Known issues/bugs: - Can sign up with whatever name and password (There is a naughty word filter)… But need to remember (case sensitive) as I do not have a recovery process implemented. I do plan to use email as login credentials eventually. But for now, signing up requires no other info other then your login/pass. I know this is a way to circumnavigate the attempts tracking and will be addressing this in later updates. Also Guests will only be able to see first 5 questions of a season. I don’t want to require a long signup process or requiring personal info, etc. - It’s a pretty heavy game with the physics / water. As mentioned earlier, it will drain battery faster than most lighter apps. I’m constantly learning and improving this - ^^^ The coding is not professional 😐 but continuing to revamp it to be better and optimized. - No news link, plan to add this later so can stay up to date with my plans Phew… that is a lot but it’s a relatively simple web app game ! Hope some will enjoy LetterFall-Daily. Feedback and discussion always welcomed. Cheers
-
Ninja.io is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to ninja.io - Play as Guest - Enter a username - Join CTF or Deathmatch. - Select primary and/or secondary weapon Press H to display table of controls. Decrease the size of the browser window in case it runs slow. I've noticed that some laptops and older systems have trouble maintaining adequate fps. It is currently not possible to register a username, but I've been making progress on an account and highscore system. The game server is currently located in Europe. I plan on running additional servers on other continents and for the site to serve as a gateway to the nearest game server when players join in order to minimize latency. 2 European and 3 North American servers are available. Any thoughts, feedback or suggestions would be much appreciated! Thanks. Edit - 15-12-2017: New version! Sound effects have finally been added, weapons & items have been updated & tweaked, libraries have been updated and many improvements have been made along with numerous bugfixes. Edit - 15-05-2019: Several versions later: lots of new stuff! Running in Pixi.js v5 now. Party mode has been added, several new maps, new weapons, new sounds, new UI, new account/profile management (WIP), new FX! More to come! I'm currently finishing the implementation of the account system and I'm working on several new maps. More updates will follow soon!
-
I tried to set up a test demo to see if Box2D physics are working. It works, but I have one small problem: I cannot seem to get the dynamic b2Body to fall faster. I tried modifying and setting the gravity and its gravityScale, its fixture, the density. I also tried applyForce and setLinearVelocity in a constant loop. I tried passing different values for the b2World.Step() function, by giving it different dt, velocityIterations and positionIterations. I know it has nothing to do with it, but I also tried modifying the mass of the body. By changing the gravity, I only managed to decrease its falling speed. This is currently the falling speed. I managed to find a way to increase the falling speed of the dynamic body, but only because I performed a b2World.Step() function multiple times per loop. I do not want to use that method to increase the falling speed. This is the falling speed with multiple b2World.Step()-calls. Do you have any suggestions what I could use to increase the falling speed of the dynamic body?
-
hi guys, How can I disable distanceJoint from a created sprite ?? I need to create a game similar to Tower Bloxx, Help Please.
-
actually I have done this, but with the unit transformation issue, I need to find a best way to refactor my existing code. as you know box2d unit is meter, game unit is pixel, so when you create box2d Bodies you need to use a fixed factor you specified for example 100px = 1meter, so they are in the game world is really small for example a basketball is 0.3meter (30cm), the corresponding pixel should be 330px but if you don't scale your game world up it will be displayed as 0.3px , to scale game world bigger is very easy in Phaser3, there are a few ways to do that, like directly set camera.zoom etc. now another problem comes, I don't need my basketball in the game looks so big, if in pure GL code I can use gluOrtho2D to fix my display proper. so how can I achieve this in Phaser 3?
-
in some box2d c++ examples the values are small, for example gravity is 9.8, friction is 0.98 etc.... but in Phaser I have to set a very big value for the objects to get things look natural, for example scale the gravity to 500. so I wonder what is the equation to convert between them? and why?
-
I have a problem with relocating a sprite in the game. In practice dragging an object, if this collides with another, I'd like it to position it with certain coordinates. I use Box2D physic. When sprite collides with another I set its coordinates in this way: sprite.body.x = 100; sprite.body.y = 100; but when I reclick on the object this, in a first moment, appears with coordinates 100,100 and then returns to the coordinates at the time of the collision. Can anybody help me? I've been struggling with this problem for several days and I can not find a solution! Thanks in advance, Vittorio
-
Hi all, I've a problem with Phaser and Box2D Physic. I created a game where I load sprites and apply a polygonal body to them through a series of coordinates. When I resize the sprite I send the coordinates to a function that recalculates them based on the scaling factor. The coordinate array returned to me is correct, but when I redraw the body I have the effect shown in the attachment image. In other words, a square is always drawn in the same position and with the same dimensions. The coordinates of the square AREN'T present in my array. I realized that this occurs when there are very close coordinates 'cause if the scaling factor isn't so small the problem doesn't occur. Can someone help me? Thanks in advance, Vittorio
-
I am using Phaser with Box2d and my system allows the user to enable/disable the properties "passthrough" and "collide with edges" for each body. "Passthrough" = pass through other bodies. "Collide with edges" = react to collisions with the walls. This setup generates 5 categories of bodies: 1 - walls (should collide with bodies of category 2 and 4) 2 - "passthrough" + "collide with edges" (should collide with bodies of category 1) 3 - "passthrough" + "not collide with edges" (should collide with nothing) 4 - "not passthrough" + "collide with edges" (should collide with bodies of category 1, 4 and 5) 5 - "not passthrough" + "not collide with edges" (should collide with bodies of category 4 and 5) I have set up collision filtering to meet these criteria. It works. My issue is that my system does not provide any collision information when one body passes through another. I would like to implement a function isTouching(instanceID) that allows me to determine if a body is touching another body, given their instance IDs. I have tried making these "passthrough" bodies sensors, but that makes them pass through all bodies, including walls. This doesn't work because, for example, bodies of category 2 should still collide with the walls. Any tips are greatly appreciated. Thanks.
-
Maybe this is an old subject but nowdays I'm trying implementation of box2d/pixijs HTML5 game to mobile. Everything was working okay until android 6+ appeard. Crosswalk was solving most problems but i had new releases and cordova 8.0 , crosswalk, android 7.0 and pixi just give poor performance. Game runs smoothly on desktop, and ok on mobile browser, but Native (cordova) runs @21 fps. Has anyone facing same problems? Is there a easy solution to replace cordova with some other framework ? How do you pack pixijs to Native ? Thanks, 3ojan
-
Hello, Can anybody please tell me how box2d collision filtering works in JavaScript(box2dweb). I need balls to collide with player but not with other balls. There are example out there but they are in c++ or other language. I am newbie in gaming hence a silly question. Thanks.
-
Hello, Is it possible to give a texture to box2d's rope or distance joint. I can see the joints in draw debug mode, but need something like an actual rope texture. Thanks
-
Hi All, I have been developing a box2D game in Phaser 2, it works fine in the Desktop browsers. When comes to the Mobiles the FPS drops. There are only three sprites in the stage, one static body and a dynamic body. Please kindly help. Thanks, Gideon
-
Made this for the SMU Hack-a-week (St Mary's University, Halifax, Canada) back in May of this year, won the open category with it. Game: http://www.blockshipwars.com/WhiteFish/ Github: https://github.com/chadams77/WhiteFish Development videos: https://www.youtube.com/user/probeapps Development screenshots: http://www.blockshipwars.com/wfscr/ WhiteFish is a physics based fishing game, with rod, line, and fish physics. Three different species of fish, three different rods, and three different lures. You buy better gear by earning money for catching fish, the goal is to enjoy yourself at times when you can't go fishing in RL. Some screenshots taken of the newest version:
-
Hello there, Is it possible to create destructible terrain in HTML5 and box2d Video examples : Box2d Destructable terrain.mov Box2d Destructable terrain 2.mov Any help in this direction would be much appreciated. Thanks Again
-
Helpp Me I want te execute my callback function only 1 time. But it won't -
Box2D always calls contact callback twice. Here's an example: 185.50.68.103 Ship with collision category 2 (ship at left) calls contact callback once while ship with collision category 1 (default) calls it twice. I've been trying to fix this for weeks but couldn't find any solution in web, i really need you guys to help me. function create() { game.physics.startSystem(Phaser.Physics.BOX2D); game.stage.backgroundColor = '#2d2d2d'; // User-controlled ship ship1 = game.add.sprite(250, 300, 'ship'); game.physics.box2d.enable(ship1); ship1.body.setCircle(14); // Ship with collision category 2 (triggers contact callback only once, it shouldn't even trigger it) ship2 = game.add.sprite(200, 200, 'ship'); game.physics.box2d.enable(ship2); ship2.body.setCircle(14); ship2.body.setCollisionCategory(2); // Ship with collision category 1 *default, i guess* (triggers contact callback TWICE) ship3 = game.add.sprite(300, 200, 'ship'); game.physics.box2d.enable(ship3); ship3.body.setCircle(14); game.physics.box2d.setBoundsToWorld(true, true, true, true, false); ship1.body.setCategoryContactCallback(1, function(b1,b2,f1,f2,begin){ if (begin){ total += 1; hitText.text = 'Contact callback called '+total+' times'; console.log("CONTACT: ", b2) } }, this); cursors = game.input.keyboard.createCursorKeys(); game.add.text(5, 5, 'Use arrow keys to move.', { fill: '#ffffff', font: '14pt Arial' }); total = 0; hitText = game.add.text(5, 30, 'Contact callback called 0 times', { fill: '#ffffff', font: '14pt Arial' }); } function update() { if (cursors.left.isDown) { ship1.body.rotateLeft(300); } else if (cursors.right.isDown) { ship1.body.rotateRight(300); } else { ship1.body.setZeroRotation(); } if (cursors.up.isDown) { ship1.body.thrust(300); } else if (cursors.down.isDown) { ship1.body.reverse(300); } } function render() { game.debug.box2dWorld(); }
-
Hi, Completely new to Phaser but love it. I've purchased and am using the Box2D plugin and have a simple question about the coordinate system. If I create a new game with dimensions width 800 and height 600 like so: var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {preload: preload, create: create, update: update, render: render}); With the following pixels to meter setting: game.physics.box2d.ptmRatio = 100; and create a new Box2D body with a 40 x 20 pixel rectangle fixture (centred on the body) like so: var rect = new Phaser.Physics.Box2D.Body(this.game, null, 400, 0); rect.static = true; rect.addRectangle(40, 20, 20, 10); See the image below: Why is the rectangle not positioned 400 pixels from the left? It looks like it's positioned 200 pixels from the left instead. Is there some scale factor I'm missing here? This is happening on my Retina MacBook Pro and on an external 1920 screen (not Retina). Many thanks in advance, -
Some times when leaving my game open or when one player leaves, I get a cryptic box2d error. Is this a bug? It's v102
-
Hi, I'm creating a game that player can walk over terrains with lots of slopes. How can I make my player rotate accordingly to the angle of the slope? This is how it's currently working: And this is how is must work (I've changed the angle manually): I'm using Box2D plugin to generate the terrain accordingly to an image. That's the reason of all these bodies. Thanks!!
-
Hi All, I have implemented planatary gravity using the below link http://www.emanueleferonato.com/2015/06/19/simulate-planet-gravity-with-phaser-box2d-as-seen-on-angry-birds-space/ Now i need the object just move over the planet with gravity . How to do it kindly help please ?????????????
-
I started working on a top down racing game as fun project a while back. I didn't use any game framework. Only node.js, express.js, socket.io and bunch of node modules and webpack. I got a working prototype where I can drive around and get real time sync between players that was good enough for now. The next thing I started on was collision detection. After a while I realised that I need some framework for it rather than create my own thing. After some research I started looking at phaser and finally bought box2d plugin for phaser which included a simple top down racing game as a example. I spent some time on tweaking parameters and got a result I was happy with. So I brought phaser into my project and got problems with pixi.js on the node server because there are no dom elements and pixi seems to be baked into phaser. After some googling it seems like running phaser on the server is a bad idea, but I only wanted box2d anyway. So I got a box2d version called box2dweb and tried to create the same thing that I had working in phaser + box2d. After getting errors I couldn't figure out it turns out after some googling that there is missing functionality (edgeChains) in box2dweb. So I try all the other implementations of box2d in JS that I can find and all of them reports errors (different errors with each version) and it's code that works fine in the box2dweb version. Sigh. I can not be the first person wanting to do a real time multiplayer game using node and box2d. Any advice how to move forward?
-
Hi I'm working on a top down racing game. Yesterday I decided to buy the box2d plugin for phaser to get collision physics. There is a simple top down racing game included as a tutorial which I tried out and the collision part was good enough for my needs. But the actual driving physics were not because it was more like a spaceship. If you would stop pressing forward the car would continue in current direction until slowed down. But when I turn during this sliding a car should go where the wheels point and not in its current direction like a spaceship. So I decided to add my own driving physics to the demo which makes the car go in the direction of the wheels and instead of activating car.body.thrust(power) on key UP I call my function that ultimately sets car.body.x and car.body.y so it moves correct. The problem is that now I'm not colliding with the walls anymore because the box2d simulation is just getting the coordinates and doesn't move the car any more. I would like to use box2d as much as possible but I couldn't figure out how to make the car not slide like a spaceship and if possible I want to avoid having to create my own collision detection. Any tips on how to approach this?
-
Hello! I am new in Webgl programming, and I am having trubel with moving the camera. I try to create a maze game, and I use three.js and box2D.js. The problem is that the camera is looking from above into the mazze, while I am trying to make it part of the maze (I mean looking like you are trying to escape from the maze). Could anyone, please, help me? I haven't found any ideeas on the web....
