Sign in to follow this  
OakTreePeter

Tiled map being rendered incorrectly

Recommended Posts

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>

 

Captura de Ecrã (654).png

Captura de Ecrã (655).png

Captura de Ecrã (656).png

Edited by OakTreePeter
Forgot to include 2 images.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.