oddskill Posted July 15, 2014 Share Posted July 15, 2014 Hello. Why does the rotating sprite in this little example http://oddskill.bplaced.net/bounce_rot_cow/index.html leave (laps over) the canvas boundaries ?How to avoid that ?Are there any possibilities to set a polygonal bounding box for the sprites boundaries ? Best regards and thanks in advance. Chris PS: sourcecode below index.html<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Bouncing Rotating Cow</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/phaser.min.js"></script> <script type="text/javascript" src="js/bounce_rot_cow.js"></script> </head> <body> <h1>BOUNCING ROTATING COW</h1> <div id="centerDiv"> <div id="container"> <!--Phaser Canvas Element in this example called "container" --> </div> <a id="zip" href="bounce_rot_cow.zip">sourcecode</a> </div> </body></html>bounce_rot_cow.jsvar game = new Phaser.Game(500, 500, Phaser.CANVAS, 'container', { preload: preload, create: create, update: update });var img;function preload() { game.load.image('cow', './assets/cow2_bg_white.png');}function create() { game.stage.backgroundColor = '#00ff00'; game.physics.startSystem(Phaser.Physics.ARCADE); img = game.add.sprite(20, 20, 'cow'); game.physics.enable(img, Phaser.Physics.ARCADE); img.body.velocity.x=100; img.body.velocity.y=100; img.body.collideWorldBounds = true; img.body.bounce.set(1); img.anchor.setTo(0.5, 0.5);}function update() { img.rotation += img.body.velocity.x / 5000;}style.cssbody { background: #000000;}h1{ color: #ffffff; text-align: center;}#centerDiv { width: 500px; margin: 0 auto; background-color:#dddddd; } Link to comment Share on other sites More sharing options...
Heppell08 Posted July 15, 2014 Share Posted July 15, 2014 You need to setBounds(x,y,width,height);in your case:game.world.setBounds(0,0,500,500); Link to comment Share on other sites More sharing options...
oddskill Posted July 15, 2014 Author Share Posted July 15, 2014 Thanks but that does not change that the corners of the sprite leave the boundaries whenthe sprite is rotating.I updated the sourcecode and it still behaves the same way.Have a look at http://oddskill.bplaced.net/bounce_rot_cow/ best regards Chris Link to comment Share on other sites More sharing options...
Dumtard Posted July 15, 2014 Share Posted July 15, 2014 Make these changes in your bounce_rot_cow.js and you should see the problem. change this line to:var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'container', { preload: preload, create: create, update: update, render: render });remove this line:game.stage.backgroundColor = '#00ff00';and add this: function render() { game.debug.body(img);} And this is what you are expecting:function render() { game.debug.spriteBounds(img);} oddskill 1 Link to comment Share on other sites More sharing options...
Heppell08 Posted July 15, 2014 Share Posted July 15, 2014 I don't think arcade physics would rotate the actual physical body. Have you tried P2 physics instead? in arcade the image will rotate but not the hit box itself, hence the cornets clipping out the world. Debug like the above post said and post results.also test with p2 physics. oddskill 1 Link to comment Share on other sites More sharing options...
oddskill Posted July 15, 2014 Author Share Posted July 15, 2014 Thanks Dumtard, i did the changes you and now i think one can see here http://oddskill.bplaced.net/bounce_rot_cow_debug/ whats going on.Is that a problem when doing a game with rotating sprites or is that no real problem with smaller spriteslike normally used in games ? Or is there another way around that using a diffrent Physics mode than ARCADE ? best regards Chris Link to comment Share on other sites More sharing options...
oddskill Posted July 15, 2014 Author Share Posted July 15, 2014 Thanks Hepell08, i will try P2 Physicsim totally new to Phaser so i will have a look at the documentation. best regards Chris Link to comment Share on other sites More sharing options...
oddskill Posted July 15, 2014 Author Share Posted July 15, 2014 Do you guys have a link to an example how to use P2 instead of ARCADE? I just changed the ARCADE to P2 in the code and now the canvas is not rendered anymore. Thanks and best regards Chris Link to comment Share on other sites More sharing options...
Dumtard Posted July 15, 2014 Share Posted July 15, 2014 Thanks Dumtard, i did the changes you and now i think one can see here http://oddskill.bplaced.net/bounce_rot_cow_debug/ whats going on.Is that a problem when doing a game with rotating sprites or is that no real problem with smaller spriteslike normally used in games ? Or is there another way around that using a diffrent Physics mode than ARCADE ? best regards Chris As I had mentioned previously, the img body information was incorrect, but the img bounds is what you had wanted. It is as simple as setting the img body to the img bounds.function update() { img.rotation += img.body.velocity.x / 5000; img.body.width = img.getBounds().width; img.body.height = img.getBounds().height;} Edit: Examples oddskill 1 Link to comment Share on other sites More sharing options...
oddskill Posted July 15, 2014 Author Share Posted July 15, 2014 Thank you all. I made it using p2.The changes by Dumtard to the code do also work with ARCADE. best regards Chris Link to comment Share on other sites More sharing options...
Recommended Posts