Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Working with Tiled map editor - Map doesn't render correctly.

latheesan

By latheesan,
in Phaser 2

 Share

Recommended Posts

latheesan Newbie

latheesan

Posted
Posted

Hi,

 

I am trying to create a simple platformer using this pack : http://opengameart.org/content/platformer-art-deluxe

Using the Tiled map editor (http://www.mapeditor.org) I generated the following simple Map:

 

http://i.imgur.com/xDr2WSt.png

 

There are two layers on the map (Sea and Land) - as shown in the screenshot.

Once the map was created, I exported it to .json format. Here's the export: http://pastebin.com/raw.php?i=aD2vrKL2

 

I then followed this guide to set it up: http://videlais.com/2014/01/13/create-a-basic-platformer-game-in-phaser-using-netbeans-and-tiled/

 

This is my HTML so far:

<!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(                   1400, 700, // 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 image 'level.png' and associate it in the cache as 'level'             game.load.image('map', 'assets/map.png');                          // Load the spritesheet 'character.png', telling Phaser each frame is 30x48             game.load.spritesheet('character', 'assets/character.png', 30, 48);           }                    var map; // The tilemap           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 = 160; // The amount to move horizontally           var vertMove = -120; // The amount to move vertically (when 'jumping')           var jumpTimer = 0; // The initial value of the timer                    function create() {                          // Make the background color of the game's stage be white (#FFFFFF)             game.stage.backgroundColor = '#FFFFFF';                          // Start the physics system ARCADE             game.physics.startSystem(Phaser.Physics.ARCADE);                      // Add the tilemap 'map' to the game             map = game.add.tilemap('map');                          // Add the tileset image 'level' to the map             // (The name must match both an image in Phaser's cache             //  and the name of an image withi the 'map.json'             //  list of tilesets too.)             map.addTilesetImage('map');                          // Create a layer from the 'map.json' file             // based on 'Tile Layer 1' from the available tiles.             layer = map.createLayer('Land');                          // Set the collision range             //  Here, the range is from 0 (the first tile) to the fifth (last tile).             map.setCollisionBetween(1, 5);                          // 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*48 x 6 *48)             // and using, in this case, the spritesheet 'character'             player = game.add.sprite(2 * 48, 6 * 48, 'character');                          // By default, sprites do not have a physics 'body'             // Before we can adjust its physics properties,             // we need to add a 'body' by enabling             // (As a second argument, we can specify the             //  physics system to use too. However, since we             //  started the Arcade system already, it will             //  default to that.)             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 = 96;                      // 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.arcade 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 onFloor (touching a 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             //   a tile in order to jump off it.)             if (jumpButton.isDown && player.body.onFloor() && 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>

When this game renders, it looks like this:

 

yTnxpo2.png

 

So my question is:

 

  1. Why doesn't the tile map load correctly? the structure of the map appears to be same as my design, but different tiles are being used?
  2. How can I get the 2nd layer (Sea) to show up on my game?
  3. Why does the player character keeps falling through the tile objects? why doesn't the player collide?

Regards,

Latheesan

 

Link to comment
Share on other sites
xzereus Newbie

xzereus

Posted
Posted

Hi,

 

I am trying to create a simple platformer using this pack : http://opengameart.org/content/platformer-art-deluxe

Using the Tiled map editor (http://www.mapeditor.org) I generated the following simple Map:

 

http://i.imgur.com/xDr2WSt.png

 

There are two layers on the map (Sea and Land) - as shown in the screenshot.

Once the map was created, I exported it to .json format. Here's the export: http://pastebin.com/raw.php?i=aD2vrKL2

 

I then followed this guide to set it up: http://videlais.com/2014/01/13/create-a-basic-platformer-game-in-phaser-using-netbeans-and-tiled/

 

  1. Why doesn't the tile map load correctly? the structure of the map appears to be same as my design, but different tiles are being used?
  2. How can I get the 2nd layer (Sea) to show up on my game?
  3. Why does the player character keeps falling through the tile objects? why doesn't the player collide?

Regards,

Latheesan

 

2) Your sea layer isn't showing up because you need to create the layer in your code:

map.createLayer('Sea'); // You're missing thislayer = map.createLayer('Land');

3) Your collision isn't working because you only have collision set to a small range of tiles:

map.setCollisionBetween(1, 5);    // This is what you have, and it will cause collision only with tiles with gid 1 through 5map.setCollisionBetween(1, 153);  // This will cause collision with tiles from gid 1 to 153, which is probably what you want.                                   // You can look in the JSON for your map to see what the biggest gid you have in use is.
Link to comment
Share on other sites
TomFiveThumbs Newbie

TomFiveThumbs

Posted
Posted

There seems to be some differences between the JSON you posted, and the screenshot you've put here.

 

Your JSON is referring to a map.png as the tileset, your screenshot has the Kenney.nl spritesheet 'tiles_spritesheet' as the tileset

 

You've changed something between taking the screencap and posting the JSON.

Link to comment
Share on other sites
TomFiveThumbs Newbie

TomFiveThumbs

Posted
Posted

I found the problem with the tileset.

If you open your png you'll see on the far right is a smaller tile with a green hill type object.

That tile is too small.

Your code thinks it's a tile. But Tiled ignores it. Throwing out your indexing.

You need to crop that png to remove that last column of tiles. Edit:crop to 864 width

I'd do it myself but I'm on the train to work. If you haven't replied to this post by the time I arrive in 2.5 hours, I'll post a cropped map for you.

After that we can work on collision.

Link to comment
Share on other sites
latheesan Newbie

latheesan

Posted
  • Author
Posted

Batman! you are a star. Because the tile look correct in map editor, i assumed the tileset was fine.

 

I'll try this out and get back to you. I'm going to re-build the map and set the collision as per your suggestion and see what happens. I'll update this post if it's working.

Link to comment
Share on other sites
TomFiveThumbs Newbie

TomFiveThumbs

Posted
Posted

Hopefully you shouldn't need to rebuild the map. Just try copying the PNG I linked over your existing one. (make a backup first of course)

 

I used your JSON to rebuild the map in Tiled to find out the issue. So the map should retain all the same data as before. Instead it's just using a different map.PNG on the game end.

Link to comment
Share on other sites
latheesan Newbie

latheesan

Posted
  • Author
Posted

When ever I screw up, I always like to start from a clean slate. So I photoshopped the original tileset fixed the incorrect dimension.

 

Using the updated tileset, I created another map file from scratch, which now looks like this in editor: http://i.imgur.com/fbktprO.png

 

I've exported it to this JSON: http://pastebin.com/raw.php?i=ehh6jcPj (notice I've put the lava in it's own layer this time, contact with this will kill the player - for later).

 

Then I updated my HTML to be like so: http://pastebin.com/WtPj3SCi

 

Now the game renders the tiles correctly and the collision detection is working perfect also:

 

YpKCn7T.png

 

Notice that the sea layer doesn't show. That's because, I've commented out this line:

          // Create a seaLayer from the 'map.json' file          // based on 'Tile Layer 1' from the available tiles.          //seaLayer = map.createLayer('Sea');

If I uncomment this line, then the land layer doesn't show and all i can see is the Sea layer.

 

How do you show the two (or more) layers together as laid out on the map editor? or can you only show one layer at a time?

Link to comment
Share on other sites
latheesan Newbie

latheesan

Posted
  • Author
Posted

Ohhh I see how it works. The layering is done by the order in which you create these layers. Got it ;)

 

Thanks allot for your help so far.

 

Now I just got a figure out how to slide down the slope on the far right bottom corner of the map.

This looks promising: http://examples.phaser.io/_site/view_full.html?d=ninja%20physics&f=ninja+aabb+vs+tile.js&t=ninja%20aabb%20vs%20tile

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

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