littlebuddy98 Posted February 18, 2016 Share Posted February 18, 2016 I am making a game which has png images as slopes and i was wondering if anyone knows how to create a collision between a ball and this slope, I am using NINJA physics. I have created a collision but it only collides with the transparent background not the actual slope, any help is much appreciated. Thanks Link to comment Share on other sites More sharing options...
fillmoreb Posted February 18, 2016 Share Posted February 18, 2016 It would be easier to help if you posted some sample code but I'll do my best. As I understand it, slopes in Ninja physics need to be tiles, and you have to set the slope type using the enableTile() function. Here's a decent tutorial explaining Ninja physics: http://www.joshmorony.com/building-a-running-platformer-in-phaser-with-ninja-physics/ Post the code you're trying, and we can probably give you a better answer. Link to comment Share on other sites More sharing options...
littlebuddy98 Posted February 18, 2016 Author Share Posted February 18, 2016 <!doctype html> <html lang = "en"> <head> <meta charset="UTF-8" /> <title>Candy Roll</title> <!--<script type="text/javascript" src="js/phaser.min.js"></script>--> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> canvas{ margin: auto; } body{ margin: 0; background-color: black; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, '', { preload: preload, create: create, update: update, /*render: render*/}); function preload (){ //game.load.atlas('triangle', 'assets/wooden triangle.png', 'assets/wooden triangle.json', Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); game.load.image ('ledge', 'assets/wooden block.png'); game.load.image ('background', 'assets/background3.png'); game.load.image ('donut', 'assets/donut.png'); game.load.spritesheet('om_nom', 'assets/om nom blinking.png', 56, 58); //only works when on server //game.load.tilemap('map', 'assets/wooden triangle.json', null, Phaser.tilemap); game.load.image ('triangle', 'assets/wooden triangle.png'); } function create (){ game.physics.startSystem(Phaser.Physics.NINJA); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //var donutCollisionGroup = game.physics.p2.createCollisionGroup(); //var ledgeCollisionGroup = game.physics.p2.createCollisionGroup(); background = game.add.tileSprite(0, 0, window.innerWidth, window.innerHeight, 'background'); ledges = game.add.group(); ledge = ledges.create(0,300, 'ledge'); ledges.enableBody = true; game.physics.ninja.enableAABB(ledges); ledges.create(65,300, 'ledge'); ledges.create(200,400, 'ledge'); triangles = game.add.group(); triangles.create(300,400, 'triangle'); triangles.enableBody = true; game.physics.ninja.enableAABB(triangles); donut = game.add.sprite(320, 75, 'donut'); donut.scale.setTo(0.03,0.03); game.physics.ninja.enable(donut); game.physics.ninja.gravity.y = 400; donut.body.collideWorldBounds = true; donut.body.fixedRotation = true; /* om_nom = game.add.sprite(450, 600, 'om_nom'); om_nom.anchor.setTo(0.5); om_nom.animations.add('blink', [0,1,2], 5, true); */ } /*function donutMove(){ donut.body.velocity.x = 100; }*/ function update (){ //donut.angle += 3; //om_nom.animations.play('blink'); game.physics.ninja.collide(donut, ledge); game.physics.ninja.collide(donut, triangles); } </script> </body> </html> Link to comment Share on other sites More sharing options...
fillmoreb Posted February 18, 2016 Share Posted February 18, 2016 Ninja Physics is designed for use with tiled games. Using the Ninja physics engine doesn't automatically add a slope to a tile that looks sloped, you have to tell it what the slop of that tile is. Here is a cheat sheet of the different slopes you can choose: You need to assign the appropriate slope to your tile using the enableTile() function, or you can do it for a large tileSet using the convertTileMap() function. See these sites for some examples: http://www.joshmorony.com/building-a-running-platformer-in-phaser-with-ninja-physics/ http://phaser.io/examples/v2/ninja-physics/ninja-aabb-vs-tile The second example, in particular, seems to be almost exactly what you're attempting to do. Zeterain 1 Link to comment Share on other sites More sharing options...
littlebuddy98 Posted February 20, 2016 Author Share Posted February 20, 2016 Yeah that seems to be what i need to do, but would you have an idea on how to create a circle for a collision? Link to comment Share on other sites More sharing options...
fillmoreb Posted February 20, 2016 Share Posted February 20, 2016 Yup, it's right in the documentation for Ninja Physics: http://phaser.io/docs/2.4.4/Phaser.Physics.Ninja.html#enableCircle Link to comment Share on other sites More sharing options...
Recommended Posts