OakTreePeter Posted April 15, 2017 Share Posted April 15, 2017 (edited) Hi everybody, Going straight to the point - I've designed a tiled map using Tiled. When I have my game use it, it is rendered incorrectly, with tiles being placed in places I don't want to. I've tried everything I could, with my limited knowledge (I've started using Phaser about a month ago). Needless to say, I've been failing miserably. Any ideas as to what's making this happen? My many thanks! <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 9</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); // We bring Phaser to life by creating a 'Phaser.Game' object and assigning it to a local variable called 'game'. /* In 'Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update })' ... - The first two parameters, '800' and '600', are the width and the height of our game canvas. - The third parameter, 'Phaser.AUTO', automatically chooses the game's rendering method - either WebGL ('Phaser.WEBGL') or Canvas ('Phaser.CANVAS'). - The fourth parameter, '', is the ID of the DOM element where our game's canvas is to be located. If this parameter is left blank, our game's canvas will be located in our HTML's 'body' element. - The fifth and final parameter, '{ preload: preload, create: create, update: update }', is an object that references some of Phaser's essential functions ... 1) 'preload': Loads all assets used by our game (images, sounds, ...); 2) 'create': Creates our game's world using the assets loaded by 'preload' (background, characters, music, ...); 3) 'update': Handles game logic (player movement, object collision, ...); 4) 'render': Calls post-render effects (blur, color correction, ...). That's it! */ function preload() { // Loads all assets used by our game. // Level game.load.tilemap('level', 'assets/mapa_3.json', null, Phaser.Tilemap.TILED_JSON); // Loads our level's architecture. The first parameter, 'level', is how we'll refer to the 'mapa.json' asset and the second parameter, 'assets/mapa.json', is the location of our asset. game.load.image('tiles', 'assets/tiles - plataformas2.png'); // Loads our level's tileset. The first parameter, 'tiles', is how we'll refer to the 'tiles.png' asset and the second parameter, 'assets/tiles.png', is the location of our asset. // Characters game.load.spritesheet('dude', 'assets/dude.png', 32, 48); // The first parameter, 'dude', is how we'll refer to the 'dude.png' asset and the second parameter, 'assets/dude.png', is the location of our asset. Sprite sheets contain animation frames (more at 'http://phaser.io/tutorials/making-your-first-phaser-game/part4'). game.load.image('enemy', 'assets/baddie.png', 128, 32); // The first parameter, 'enemy', is how we'll refer to the 'baddie.png' asset and the second parameter, 'assets/baddie.png', is the location of our asset. Sprite sheets contain animation frames (more at 'http://phaser.io/tutorials/making-your-first-phaser-game/part4'). // Objects game.load.image('star', 'assets/energy.png'); // The first parameter, 'star', is how we'll refer to the 'star.png' asset and the second parameter, 'assets/star.png', is the location of our asset. // Sound game.load.audio('music', 'assets/music.ogg'); // The first parameter, 'music', is how we'll refer to the 'music.ogg' asset and the second parameter, 'assets/music.ogg', is the location of our asset. } var player; // Declares the global variable 'player' for later use. var enemy; // Declares the global variable 'enemy' for later use. var cursors; // Declares the global variable 'cursors' for later use. var stars; // Declares the global variable 'stars' for later use. var score = 0; // Declares the global variable 'score' for later use. var scoreText; // Declares the global variable 'scoreText' for later use. var music; // Declares the global variable 'music' for later use. var map; // Declares the global variable 'map' for later use. var bg_layer; // Declares the global variable 'bg_layer' for later use. var fg_layer; // Declares the global variable 'fg_layer' for later use. var edges_layer; // Declares the global variable 'edges_layer' for later use. function create() { // Creates our game's world using the assets loaded by 'preload'. // General game.physics.startSystem(Phaser.Physics.ARCADE); // Enables our physics system. map = game.add.tilemap('level'); // Gives shape to our game level. map.addTilesetImage('tiles'); // Fills our level's shape using the tiles in the 'tiles' tileset. bg_layer = map.createLayer('Background'); // Creates a background using the 'Background' layer in 'mapa.json'. fg_layer = map.createLayer('Foreground'); // Creates a foreground using the 'Foreground' layer in 'mapa.json'. edges_layer = map.createLayer('Edges'); // Creates invisible walls around platform edges using the 'Edges' layer in 'mapa.json'. front_layer = map.createLayer('Front'); // Adds some extras to the background using the 'Front' layer in 'mapa.json'. map.setCollisionBetween(1, 10000, true, fg_layer); // Allows our characters to collide with the foreground layer. map.setCollisionBetween(1, 10000, true, edges_layer); // Allows our characters to collide with the invisible walls around platform edges. bg_layer.resizeWorld(); // Matches layer dimensions with game world dimensions ('800' by '600' pixels). // Player player = game.add.sprite(128, 64, 'dude'); // Adds a character to our game. The first two parameters, '128' and '64', are the X and Y coordinates we want to position our asset at and the third parameter, 'dude', is the asset itself. game.physics.arcade.enable(player); // Enables physics for our character. player.body.bounce.y = 0.2; // Gives our character some bounce. player.body.gravity.y = 400; // Applies gravity to our character. player.body.collideWorldBounds = true; // Allows our character to collide with the game world bounds. player.animations.add('left', [0, 1, 2, 3], 10, true); // Gives our character some animation whenever he moves to the left. The first parameter, 'left', is the movement that triggers the frames '[0, 1, 2, 3]' in the second parameter. The third parameter, '10', tells the animation to run at 10 frames per second while 'true', the fourth and final parameter, tells the animation to loop. player.animations.add('right', [5, 6, 7, 8], 10, true); // Gives our character some animation whenever he moves to the right. The first parameter, 'right', is the movement that triggers the frames '[5, 6, 7, 8]' in the second parameter. The third parameter, '10', tells the animation to run at 10 frames per second while 'true', the fourth and final parameter, tells the animation to loop. game.camera.follow(player); // Follows our character around the game world. // Enemy enemy = game.add.sprite(250, 150, 'enemy'); // Adds an enemy to our game. The first two parameters, '32' and 'game.world.height - 150', are the X and Y coordinates we want to position our asset at and the third parameter, 'dude', is the asset itself. game.physics.arcade.enable(enemy); // Enables physics for our character. enemy.body.bounce.setTo(1, 1); // Allows our enemy to bounce off walls (visible or not) and off the ground. enemy.body.gravity.y = 400; // Applies gravity to our enemy. enemy.body.collideWorldBounds = true; // Allows our enemy to collide with the game world bounds. enemy.body.velocity.x = 50; // Allows our enemy to move. // Collectibles stars = game.add.group(); // Creates a 'stars' group that will allow us to manipulate all star collectibles in our game simultaneously. stars.enableBody = true; // Enables physics for any star collectible in the 'stars' group. for (var i = 0; i < 12; i++) // Creates 12 star collectibles, all of them evenly spaced apart. { var star = stars.create(i * 70, 0, 'star'); // Creates a star collectible. The first two parameters, 'i * 70' and '0', are the X and Y coordinates we want to position our asset at and the third parameter, 'star', is the asset itself. star.body.gravity.y = 300; // Applies gravity to our star collectible. star.body.bounce.y = 0.7 + Math.random() * 0.2; // Gives our star collectible some bounce. } // Score scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#fff' }); // Creates a score text. The first two parameters, '16' and '16', are the X and Y coordinates we want to position our default text, 'score: 0', at and the fourth and final parameter, '{ fontSize: '32px', fill: '#000' }', is the size and color of the text itself. // Player input cursors = game.input.keyboard.createCursorKeys(); // Enables our game controls. // Sound music = game.add.audio('music'); // Adds a music to our game. music.loop = true; // Loops our game's music. music.play(); // Plays the music. } function update() { // Handles game logic (player movement, object collision, ...). // Collision detection game.physics.arcade.collide(player, fg_layer); // Allows our character to collide with platforms. game.physics.arcade.collide(enemy, fg_layer); // Allows our enemies to collide with platforms. game.physics.arcade.collide(enemy, edges_layer); // Allows our enemies to collide with the invisible walls around platform edges. game.physics.arcade.collide(stars, fg_layer); // Allows our character to collide with star collectibles. // Touch detection game.physics.arcade.overlap(player, stars, collectStar, null, this); // Checks if our character overlaps with any of the star collectibles and, if he does, calls the 'collectStar' function. game.physics.arcade.overlap(player, enemy, gameOver, null, this); // Checks if our character overlaps with any of our enemies and, if he does, calls the 'gameOver' function. // Player movement player.body.velocity.x = 0; // Resets our character's horizontal movement. if (cursors.left.isDown) // If the 'left' key on our keyboard is pressed ... { player.body.velocity.x = -150; // ... we move our character to the left ... player.animations.play('left'); // ... and play the 'left' animation. } else if (cursors.right.isDown) // If the 'right' key on our keyboard is pressed ... { player.body.velocity.x = 150; // ... we move our character to the right ... player.animations.play('right'); // ... and play the 'right' animation. } else // If no key on our keyboard is pressed ... { player.animations.stop(); // ... we play no animation whatsoever ... player.frame = 4; // ... we display our character on its frame 4 position. } if (cursors.up.isDown && (player.body.blocked.down || player.body.touching.down)) // If the 'up' key on our keyboard is pressed and our character is touching a surface ... { player.body.velocity.y = -350; // ... we allow our character to jump. } } function collectStar (player, star) { // This function is called if our character overlaps with any of the star collectibles. star.kill(); // If our character overlaps with any of the star collectibles, that star collectible is removed from the screen ... score += 10; // ... the score is incremented ... scoreText.text = 'Score: ' + score; // ... and the score is updated. } function gameOver (player, enemy) { // This function is called if our character overlaps with any of the enemies. player.kill(); // If our character overlaps with any of the enemies, our player dies. } </script> </body> </html> Edited April 15, 2017 by OakTreePeter Forgot to include 2 images. Link to comment Share on other sites More sharing options...
Recommended Posts