Jump to content

Ninja physics


Recommended Posts

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.


Link to comment
Share on other sites

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:


Post the code you're trying, and we can probably give you a better answer.

Link to comment
Share on other sites

<!doctype html>
<html lang = "en">
    <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">
            margin: auto;
            margin: 0;
            background-color: black;

    <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.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;
    ledges.create(65,300, 'ledge');
    ledges.create(200,400, 'ledge');

    triangles = game.add.group();
    triangles.create(300,400, 'triangle');
    triangles.enableBody = true;

    donut = game.add.sprite(320, 75, '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.animations.add('blink', [0,1,2], 5, true);


/*function donutMove(){
donut.body.velocity.x = 100;

function update (){
//donut.angle += 3;
    game.physics.ninja.collide(donut, ledge);
    game.physics.ninja.collide(donut, triangles);

Link to comment
Share on other sites

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:



The second example, in particular, seems to be almost exactly what you're attempting to do.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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