Phaser is not loading the same map created in Tiled software

46 views

Skip to first unread message

Ashish Tupate

unread,

Feb 6, 2018, 1:57:51 AM2/6/18

to Phaser 3 Development

I have created a sample map using tiled software. Then tried to load the same u on webpage using phaser.js. But I am not getting the proper result. Is there any mistake in my code or something wrong with library.

	<!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>
		  <script src="js/phaser.js"></script>
		  
	   </head>
	   <body>
		  <div id="phaser-game"></div>
		  <script type="text/javascript">
			 (function() {

				var game = new Phaser.Game(
				800, 600, Phaser.CANVAS, 'phaser-example', 
				{ preload: preload, create: create, update: update, render: render });

				function preload() {
		game.load.tilemap('map', 'background.json', null, Phaser.Tilemap.TILED_JSON);
		game.load.image('tile2', 'floor2.png');
		game.load.image('player','bot2.png');

	}

	var map;
	var layer;
	var marker;
	var player;
	var currentTile;
	var cursors;
	var curser;


	function create() {
		game.stage.backgroundColor = '#787878';    
		game.physics.startSystem(Phaser.Physics.P2JS);

		map = game.add.tilemap('map');

		map.addTilesetImage('floor2','tile2');
		currentTile = map.getTile(0, 0);
		layer = map.createLayer('Tile Layer 1');
		

		player = game.add.sprite(20, 20, 'player');
		game.physics.p2.enable(player);
		player.body.fixedRotation = true;

		layer.resizeWorld();
		
		marker = game.add.graphics();
		marker.lineStyle(2, 0x000000, 1);
		marker.drawRect(0, 0, 20, 20);

		cursors = game.input.keyboard.createCursorKeys();    
		game.camera.follow(player, Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1);
		game.physics.arcade.enable(player);
		

		  </script>
	   </body>
	</html>

issue2.PNG

issue1.PNG

Reply all

Reply to author

Forward

0 new messages