Jump to content

Remove Distance Joint (Box2D Tutorial)


Schludi
 Share

Recommended Posts

Hi! 

 

I am new to phaser.io and Box2D. 

 

I need s.th. like the Angry Birds Catapult, so i decided to use Box2Ds Distance Joint.

 

My questions:

 

1.) Is it possible to draw a texture over the Joint itself? I need an arm that througs s.th.

2.) In the sample below, i want to remove the Joint by detecting the collision between spriteA and spriteB. Do i have to use the following method? 

setFixtureContactCallback(fixture, callback, callbackContext)

Can s.o. explain me what the "fixture" is? In my example there is a hex number instead of s.th. 

 
// A callback to match world boundary contactsship.body.setCategoryPostsolveCallback(0x8000, callback, this);

 

3.) I want the camera to follow Sprite B until it hits the bottom.

 

Can so. help me with that?

 

<!doctype html><html>    <head>        <meta charset="UTF-8" />        <title>Phaser Box2D Example</title>        <script src="js/phaser-arcade-physics.min.js" type="text/javascript"></script>        <script src="js/box2d-plugin-full.min.js" type="text/javascript"></script>    </head>    <body>        <script type="text/javascript">/*** @author       Chris Campbell <iforce2d@gmail.com>* @author       Richard Davey <rich@photonstorm.com>* @copyright    2015 Photon Storm Ltd.* @license      {@link http://choosealicense.com/licenses/no-license/|No License}* * @description  This example requires the Phaser Box2D Plugin to run.*               For more details please see http://phaser.io/shop/plugins/box2d*/var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() {    game.load.image('a', 'assets/sprites/a.png');    game.load.image('b', 'assets/sprites/b.png');}var codeCaption;var bodyAs = [];function create() {        game.stage.backgroundColor = '#124184';    // Enable Box2D physics    game.physics.startSystem(Phaser.Physics.BOX2D);    game.physics.box2d.debugDraw.joints = true;    game.physics.box2d.gravity.y = 500;    // Simple case with joint anchors at the center of each sprite, and    // using the position of the sprites to determine the joint length.    // This case uses all parameters. The joint anchor is offset in each body.    {        // Static box        var spriteA = game.add.sprite(200, 200, 'a');        game.physics.box2d.enable(spriteA);        spriteA.body.static = true;                        // Dynamic box        var spriteB = game.add.sprite(300, 200, 'b');        game.physics.box2d.enable(spriteB);                //bodyA, bodyB, length, ax, ay, bx, by, frequency, damping        game.physics.box2d.distanceJoint(spriteA, spriteB, 20, 0, 0, 20, 20, 2, 0.01);                bodyAs.push(spriteA.body);    }    // Set up handlers for mouse events    game.input.onDown.add(mouseDragStart, this);    game.input.addMoveCallback(mouseDragMove, this);    game.input.onUp.add(mouseDragEnd, this);        game.add.text(5, 5, 'Distance joint. Click to start.', { fill: '#ffffff', font: '14pt Arial' });    game.add.text(5, 25, 'Mouse over bodyA to see the code used to create the joint.', { fill: '#ffffff', font: '14pt Arial' });    codeCaption = game.add.text(5, 50, 'Parameters: bodyA, bodyB, length, ax, ay, bx, by, frequency, damping', { fill: '#dddddd', font: '10pt Arial' });    codeCaption = game.add.text(5, 65, '', { fill: '#ccffcc', font: '14pt Arial' });        // Start paused so user can see how the joints start out    game.paused = true;    game.input.onDown.add(function(){game.paused = false;}, this);}function mouseDragStart() { game.physics.box2d.mouseDragStart(game.input.mousePointer); }function mouseDragMove() {  game.physics.box2d.mouseDragMove(game.input.mousePointer); }function mouseDragEnd() {   game.physics.box2d.mouseDragEnd(); }function update() {        if (bodyAs[0].containsPoint(game.input.mousePointer))    {        codeCaption.text = 'game.physics.box2d.distanceJoint(spriteA, spriteB)';    }    else    {        codeCaption.text = '';    }    }function render() {        // update will not be called while paused, but we want to change the caption on mouse-over    if (game.paused)    {        update();    }        game.debug.box2dWorld();    }        </script>    </body></html>
Link to comment
Share on other sites

Don't overthink this. Just don't use any kind of joint for the catapult.

 

Calculating: It's just a simple constrain you can calculate yourself. You need to define a max length for the rubber from a center point then calculate the distance (and therefore the magnitude) and angle of your mouse from that point. And voilà, you have everything to fire your bullet or bird.

No need to enable or disable any joint. You can take the bullet out of the world physics with gravityScale to drag it around.

 

Drawing: You have a start position, an end position and the calculated magnitude to draw everything between your mouse and the center point of your catapult.

 

Regards

George

Link to comment
Share on other sites

Hi George! 

 

Thank you very much for your answer. I can get it to work to detect the Start and Endpositions of the sprite i added,

With this i could calculate the distance, and the angel like below

   var distance= Math.sqrt((endX-startX)*(endX-startX)+(endY-startY)*(endY-startY));   var angel = Math.atan2(endY-startY, endX-startX) * 180 / Math.PI;   headline.text='Start Point: (' + startX + ','+ startY +') / End Point: (' + endX + ','+ endY +') / Distance: '+distance+' / Angel: '+angel;

Finally the game should look like this:

 

 

post-14919-0-00630000-1433612829.png
 
The person should through a beer to the right side.

 

Drawing: How do i prevent the sprite leaving a circle with radius 60px around my start point (shoulder of the person)? 

 

A arm of the throughing character should be pinned from the througher to the sprite onDrag and on MouseRelease it should follow the sprite/beer until it leaves a radius. Can you give me some hints how to realize this?

 

Here is the current full code:

 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });var sprite;var cursors;var headline;// Start and End of Mouse Dragvar startX, startY, endX, endY;function preload() {    game.load.image('bier', 'images/Beer_klein.png');}function create() {    game.stage.backgroundColor = '#00BEF2';    //  Enable Box2d physics    game.physics.startSystem(Phaser.Physics.BOX2D);    //  Add a sprite    sprite = game.add.sprite(200, 400, 'bier');    //  Enable for physics. This creates a default rectangular body.    game.physics.box2d.enable(sprite);    //  Modify a few body properties    sprite.body.fixedRotation = true;    headline=game.add.text(5, 5, 'Drag Object.', { fill: '#ffffff', font: '14pt Arial' });    cursors = game.input.keyboard.createCursorKeys();    game.input.onDown.add(mouseDragStart, this);    game.input.addMoveCallback(mouseDragMove, this);    game.input.onUp.add(mouseDragEnd, this);}function mouseDragStart() {    game.physics.box2d.mouseDragStart(game.input.mousePointer);    startX=Math.round(sprite.x);    startY=Math.round(sprite.y);    headline.text='Start Point: (' + startX + ','+ startY +')';}function mouseDragMove() {    game.physics.box2d.mouseDragMove(game.input.mousePointer);}function mouseDragEnd() {        game.physics.box2d.mouseDragEnd();    endX=Math.round(sprite.x);    endY=Math.round(sprite.y);
    var distance= Math.sqrt((endX-startX)*(endX-startX)+(endY-startY)*(endY-startY));
    var angel = Math.atan2(endY-startY, endX-startX) * 180 / Math.PI;
    headline.text='Start Point: (' + startX + ','+ startY +') / End Point: (' + endX + ','+ endY +') / Distance: '+distance+' / Angel: '+angel;
}      function update() {     sprite.body.setZeroVelocity(); }
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...