Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Phaser Converting tutorial to 2.0.2, no Jump, JSON tiled map loads strange


mapmaps
 Share

Recommended Posts

Hi everyone, I'm new to Phaser just trying to make a basic platformer right now.

I'm following this tutorial, I guess it uses an older version of Phaser:

http://videlais.com/2014/01/13/create-a-basic-platformer-game-in-phaser-using-netbeans-and-tiled/

I'm going to email the author with the new code if he wants to update it for other people

 

anyway here is my current problem, my character can't jump and the tiled map seems to load strangely even though it looks good in tiled...

 

Here is what it looks like on google drive, this link should work:

https://googledrive.com/host/0B6HI6VkLEwbnSDRUd2tPUlVhWnM/index.html

 

I've attached a picture of the differences in the tilemap,

Here is the code in which I made some small changes for 2.0.2

<!DOCTYPE html><html>    <head>        <title>Basic Platformer game</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width">        <script src="js/phaser.min.js"></script>    </head>    <body>        <div id="phaser-game"></div>        <script type="text/javascript">        (function() {        var game = new Phaser.Game(        240, 128, // The width and height of the game in pixels        Phaser.AUTO, // The type of graphic rendering to use        // (AUTO tells Phaser to detect if WebGL is supported.        // If not, it will default to Canvas.)        'phaser-game', // The parent element of the game        {preload: preload, // The preloading function        create: create, // The creation function        update: update}); // The update (game-loop) function        function preload() {        // Load the 'map.json' file using the TILDED_JSON special flag        game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);        // Load the tileset 'level.png', telling Phaser each frame is 16x16        game.load.image('tiles', 'assets/level.png');        // Load the spritesheet 'character.png', telling Phaser each frame is 10x16        game.load.spritesheet('character', 'assets/character.png', 10, 16);        }        var map; // The tilemap        //var tileset; // A specific tileset        var layer; // A layer within a tileset        var player; // The player-controller sprite        var facing = "left"; // Which direction the character is facing (default is 'left')        var cursors; // A reference to the keys to use for input detection        var jumpButton; // A reference to the button used for jumping        var hozMove = 60; // The amount to move horizontally        var vertMove = -90; // The amount to move vertically (when 'jumping')        var jumpTimer = 0; // The initial value of the timer        function create() {        game.physics.startSystem(Phaser.Physics.ARCADE);        // Make the background color of the game's stage be white (#FFFFFF)        game.stage.backgroundColor = '#FFFFFF';        // Add the tilemap 'map' to the game        map = game.add.tilemap('map');        // tiles to the map        map.addTilesetImage('tiles');                //map.setCollision(0);        map.setCollision(1);        //map.setCollision(2);        //map.setCollision(3);        //Layer is named Stage in Tiles        layer = map.createLayer('Stage');        // Tell the layer to resize the game 'world' to match its size        layer.resizeWorld();        // Create and add a sprite to the game at the position (2*16 x 6 *16)        // and using, in this case, the spritesheet 'character'        player = game.add.sprite(2 * 16, 6 * 16, 'character');                game.physics.enable(player);        // Set the amount of bounce on the physics body of the 'player' sprite        player.body.bounce.y = 0.1;        // Set the amount of gravity to apply to the physics body of the 'player' sprite        player.body.gravity.y = 6;        // Tell the game's camera to follow the 'player' sprite        game.camera.follow(player);        // Have the game create cursor keys (usually arrow keys)        // and save the reference to 'cursors'        cursors = game.input.keyboard.createCursorKeys();        // Add a specifically named key to the input checked for.        // In this case, it is the Keyboard.SPACEBAR        jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        }        function update() {        // Using the physics system, check if 'player' is colliding        // with any tiles within 'layer'. If so, seperate them.        game.physics.arcade.collide(player, layer);                // Reset the x (horizontal) velocity        player.body.velocity.x = 0;        // Check if the left arrow key is being pressed        if (cursors.left.isDown)        {        // Set the 'player' sprite's x velocity to a negative number:        // have it move left on the screen.        player.body.velocity.x = -hozMove;        // Check if 'facing' is not "left"        if (facing !== "left")        {        // Set 'facing' to "left"        facing = "left";        }        }        // Check if the right arrow key is being pressed        else if (cursors.right.isDown)        {        // Set the 'player' sprite's x velocity to a positive number:        // have it move right on the screen.        player.body.velocity.x = hozMove;        // Check if 'facing' is not "right"        if (facing !== "right")        {        // Set 'facing' to "right"        facing = "right";        }        }        // Check if the jumpButton (SPACEBAR) is down AND        // if the 'player' physics body is touching another sprite or tile AND        // if the current game.time is greater than the value of 'jumpTimer'        // (Here, we need to make sure the player cannot jump while alreay in the air        // AND that jumping takes place while the sprite is colliding with        // something else in order to jump off it.)        if (jumpButton.isDown && player.body.touching.down && game.time.now > jumpTimer)        {        // Set the 'player' sprite's y velocity to a negative number        // (vertMove is -90) and thus have it move up on the screen.        player.body.velocity.y = vertMove;        // Add 650 and the current time together and set that value to 'jumpTimer'        // (The 'jumpTimer' is how long in milliseconds between jumps.        // Here, that is 650 ms.)        jumpTimer = game.time.now + 650;        }        // Check if 'facing' is "left"        if (facing === "left") {        // Set the 'player' to the second (1) frame        // ('facing' is "left")        player.frame = 1;        } else {        // Set the 'player' to the first (0) frame        // ('facing' is "right").        player.frame = 0;        }        }        }());        </script>    </body></html>

post-8105-0-13760000-1397178148_thumb.pn

Link to comment
Share on other sites

Hi rich, thanks for your help. any ideas on the json or do you think it's a problem with tiled?

 

I think the tileset includes tiles 0,1,2,3,4 but for some reason tiled appends a no tile at tile 0 making that 0 to 5

This is shifting all the correct values for the tiles over by one... is there just a setting in tiled I'm missing?

{ "height":8, "layers":[        {         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 1, 1, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],         "height":8,         "name":"Stage",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":15,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "tileheight":16, "tilesets":[        {         "firstgid":1,         "image":"level.png",         "imageheight":16,         "imagewidth":80,         "margin":0,         "name":"level",         "properties":            {            },         "spacing":0,         "tileheight":16,         "tilewidth":16        }], "tilewidth":16, "version":1, "width":15}
Link to comment
Share on other sites

  • 3 weeks later...
 Share

  • Recently Browsing   0 members

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