hiloho

phaser tilemap layer and sprite collision

Recommended Posts

HI ,

i am trying to make a simple rpg stye game. i have created a map in tiled editor and exporting it to json. i can load and display the map in game but the colisons between my sprite and collision layer is not working. i have followed example from  here . i also do not see any error in console. it just dosent work.  here is my code. i am alsso attaching my level fileslevel2


<!doctype html> 
<html lang="en"> 
<head> 
    <style>

    canvas {cursor: url('/assets/sprites/cursors/Black.png'), default;}
</style>

    <meta charset="UTF-8" />
    <title>Phaser - Making your first game, part 1</title>
    <script type="text/javascript" src="js/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">


function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var __Player;
var map;
var xx;
var mainState = {

    preload: function(){


    game.load.tilemap('level', 'auxassets/level2', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('forest_tiles_image', 'forest_tiles.png');
    game.load.image('tiles', 'terrain_atlas.png');
    game.load.image('player', '/auxassets/cahracter.png');
    game.load.spritesheet('character', 'rpg_sprite_walk.png', 24, 32, 32);

    },


    create: function(){

   
        game.physics.startSystem(Phaser.Physics.P2JS);
        map = game.add.tilemap('level');

        map.addTilesetImage('grass', 'tiles');

        layer = map.createLayer('grass');
        xx = map.createLayer('obstacles');

        map.setCollision(373);
        game.physics.p2.convertTilemap(map, xx);


        __Player = game.add.sprite(100,1700,'character');
        __Player.animations.add('walk_right',[24,25,26,27,28,29,30,31]);
        __Player.animations.add('walk_left',[16,17,18,19,20,21,22,23]);
        __Player.animations.add('walk_up',[8,9,10,11,12,13,14,15]);
        __Player.animations.add('walk_down',[0,1,2,3,4,5,6,7]);

        game.physics.p2.enable(__Player);

        cursors = this.input.keyboard.createCursorKeys();
        game.camera.follow(__Player);


        layer.resizeWorld();


},
    update: function(){


         if(cursors.up.isDown){
            __Player.body.y -= 5;
            __Player.animations.play('walk_up', 20);
         }
         if (cursors.down.isDown){
           __Player.body.y += 5;
           __Player.animations.play('walk_down', 20);

         }
        if (cursors.left.isDown){
           __Player.animations.play('walk_left', 20);

         __Player.body.x -= 5;
        }
        if (cursors.right.isDown){
            __Player.animations.play('walk_right', 20);
             __Player.body.x += 5;
        }

    
 
     },
render: function() {

        // game.debug.cameraInfo(game.camera, 32, 32);

},
};

var game = new Phaser.Game(800,600);
game.state.add('main', mainState);
game.state.start('main');


</script>

</body>
</html>

 

rpg_sprite_walk.png

terrain_atlas.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.