Jump to content

Render World with tilemap (JSON)


Raicon
 Share

Recommended Posts

Hello guys,

i got a little problem with the rendering of my "blocks" from my tilemap...
They are just getting rendered as small stripes. 82af82f661.png


And i dont know why it doesnt render the full blocks...
Here are my code snippets

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Tamashii</title>
        <script src="phaser.min.js"></script>
    </head>
    <body>

    <script type="text/javascript">

    window.onload = function() {
		//Get windosize
		var Width = 0, Height = 0;
		Width = window.innerWidth - 20;
		Height = window.innerHeight - 20;
		
		//Create GameWindow
        var game = new Phaser.Game(Width, Height, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
		
		//Game variables
		var map
		var layer
		
		var cursor
		var player

        function preload () {
			game.load.spritesheet('player', 'resources/sprites/character.png', 64, 64);
			game.load.tilemap('citySylia', 'resources/level/stadt_tamashii.json', null, Phaser.Tilemap.TILED_JSON);
			game.load.image('tileWorld', 'resources/background/world.png');
        }

        function create () {
			//General
			game.physics.startSystem(Phaser.Physics.ARCADE);

			//World
			game.stage.backgroundColor = '#787878';
			map = game.add.tilemap('citySylia');
			map.addTilesetImage('Overworld', 'tileWorld');
			layer = map.createLayer('Sylia');
			//layer.resizeWorld();
			
			//Player
			player = game.add.sprite(64, game.world.height - 150, 'player');
			game.physics.arcade.enable(player);
			player.body.collideWorldBounds = true;

			player.animations.add('up', [105, 106, 107, 108, 109, 110, 111, 112], 10, true);
			player.animations.add('left', [118, 119, 120, 121, 122, 123, 124, 125], 10, true);
			player.animations.add('right', [144, 145, 146, 147, 148, 149, 150, 151], 10, true);
			player.animations.add('down', [131, 132, 133, 134, 135, 136, 137, 138], 10, true);
			
			cursor = game.input.keyboard.createCursorKeys();
        }
		
		function update () {
			player.body.velocity.x = 0;
			player.body.velocity.y = 0;
			if (cursor.left.isDown)
			{
				player.body.velocity.x = -150;
				player.animations.play('left');
			}
			else if (cursor.right.isDown)
			{
				player.body.velocity.x = 150;
				player.animations.play('right');
			}
			else if (cursor.up.isDown)
			{
				player.body.velocity.y = -150;
				player.animations.play('up');
			}
			else if (cursor.down.isDown)
			{
				player.body.velocity.y = 150;
				player.animations.play('down');
			}
			else
			{
				player.animations.stop();
				player.frame = 130;
			}
		}
		
		function render() {
		}
    };

    </script>

    </body>
</html>



And my json_map_tile...

{
	"height":7,
	"layers":[
	{
		"data":[20, 15, 3, 3, 3, 3,
				19, 11, 3, 3, 3, 3,
				18, 3, 3, 3, 3, 3,
				17, 3, 3, 3, 3, 3,
				3, 3, 3, 3, 3, 3,
				3, 3, 3, 3, 3, 3,
				3, 3, 3, 3, 3, 3],
		"height":7,
		"name":"Sylia",
		"opacity":1,
		"type":"tilelayer",
		"visible":true,
		"width":6,
		"x":0,
		"y":0
	}],
	"orientation":"orthogonal",
	"properties": { },
	"tilesets":[
	{
		"firstgid":0,
		"image":"..\/background\/world.png",
		"imageheight":288,
		"imagewidth":432,
		"margin":1,
		"padding":1,
		"name":"Overworld",
		"properties": { },
		"spacing":0,
		"tileheight":16,
		"tilewidth":16
	}],
	"tilewidth":16,
	"tileheight":16,
	"version":1,
	"width":6
}



I hope someone can help me with my problem.
And sorry for my bad english :/

greetings Raicon

Link to comment
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...
 Share

  • Recently Browsing   0 members

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