mapmaps Posted April 11, 2014 Share Posted April 11, 2014 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> Link to comment Share on other sites More sharing options...
rich Posted April 11, 2014 Share Posted April 11, 2014 If you're checking for jumps off a tilemap then use this:if (jumpButton.isDown && player.body.onFloor()touching.down would be if the player is standing on another sprite for example. Link to comment Share on other sites More sharing options...
mapmaps Posted April 11, 2014 Author Share Posted April 11, 2014 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 5This 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 More sharing options...
Videlais Posted April 13, 2014 Share Posted April 13, 2014 Hi, mapmaps. Let me save you an e-mail. I'm the author and I plan to update it this week. I'm also going to write a new version for NetBeans 8.0 and Phaser 2.0.3. Link to comment Share on other sites More sharing options...
Videlais Posted May 3, 2014 Share Posted May 3, 2014 Hi, mapsmaps. I've finally updated my guide to match NetBeans 8.0 and Phaser 2.0.4. Everything should now be working correctly. If you are still having problems, let me know and I'll try to help. Link to comment Share on other sites More sharing options...
Recommended Posts