Schludi Posted June 8, 2015 Share Posted June 8, 2015 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 <[email protected]>* @author Richard Davey <[email protected]>* @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 More sharing options...
george Posted June 9, 2015 Share Posted June 9, 2015 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. RegardsGeorge Schludi 1 Link to comment Share on other sites More sharing options...
Schludi Posted June 9, 2015 Author Share Posted June 9, 2015 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: 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 More sharing options...
Recommended Posts