Search the Community
Showing results for tags 'tile set'.
Found 2 results
-
Hi guys, I need some help with this game I'm working on. I've created a platformer map with Tiled and I'm trying to get the game to work with phaser, but it just doesn't work. I get an error code saying: Phaser.Tileset - image tile area is not an even multiple of tile size and another error repeating 5 times saying Tilemap.createLayer: Invalid layer ID given: null The code (commented out codes are a little messy) is as follows. Please help. I also would like to make one of my tile maps solid and would like to know how. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>WeWork Game</title> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(/*2084, 1989*/1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, /*render: render*/ }); function preload() { // game.load.image('platform', './objects/platform.png') // game.load.image('background', './background/background.gif'); // game.load.image('ground', './objects/platform.png'); game.load.image('stars', './objects/energy.png'); game.load.spritesheet('zero', './characters/zero.png', 50, 50, 2); game.load.tilemap('myTilemap', './background/tilemaps/tilemap.json'); game.load.image('myTileset', './background/tilemaps/bg.png'); } var player; //var platform; var cursors; var map; var backgroundLayer; var blockLayer; var patches; var stars; var score = 0; var scoreText; function create() { map = game.add.tilemap('myTilemap'); map.addTilesetImage('bg.png', 'myTileset'); blockLayer = map.createLayer('solids'); backgroundLayer = map.createLayer('cosmetics'); patches = map.createLayer('backing'); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game // game.add.sprite(0, 0, 'bg'); // The platform group contains the ground and the 2 ledges we can jump on //platform = game.add.group(); // We will enable physics for any object that is created in this group //platform.enableBody = true; // Here we create the ground. //var ground = platform.create(0, game.world.height - 70, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(1, 1); // This stops it from falling away when you jump on it //ground.body.immovable = true; // Now let's create two ledges //var ledge = platform.create(500, 350, 'ground'); //ledge.body.immovable = true; //ledge = platform.create(-300, 270, 'ground'); //ledge.body.immovable = true; // The player and its settings player = game.add.sprite(55, game.world.height - 150, 'zero'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.gravity.y = 400; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [1, 2, 3, 4, 5], 5, true); player.animations.add('right', [0, 1, 2, 3, 4, 5], 30, true); // Finally some stars to collect stars = game.add.group(); // We will enable physics for any stars that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 12; i++) { // Create a stars inside of the 'stars' group var star = stars.create(i * 70, 0, 'stars'); // Let gravity do its thing star.body.gravity.y = 300; // This just gives each stars a slightly random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } // The score scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#FFFFFF' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); //Command that uses camera to follow player //game.camera.follow(player); } function update() { // Collide the player and the stars with the platform //game.physics.arcade.collide(player, platform); //game.physics.arcade.collide(stars, platform); // Checks to see if the player overlaps with any of the stars, if he does call the collectstars function game.physics.arcade.overlap(player, stars, collectstars, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.animations.add('stand', [0, 1, 2, 3], true); player.animations.add('stand', [0, 1, 2, 3], true); } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -450; } if (scoreText.text == 'Score: ' + 120) { //delete(scoreText.text); game.add.text(50, 50, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', { fontSize: '32px', fill: '#FFFFFF' }); //game.add.text(25, 25, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', {fontSize: '50px', fill: '#FFFFFF' }); } } function collectstars (player, stars) { // Removes the stars from the screen stars.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } /*function render() { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); }*/ </script> </body> </html>
-
Hi guys, I need some help with this game I'm working on. I've created a platformer map with Tiled and I'm trying to get the game to work with phaser, but it just doesn't work. I get an error code saying: Phaser.Tileset - image tile area is not an even multiple of tile size and another error repeating 5 times saying Tilemap.createLayer: Invalid layer ID given: null The code (commented out codes are a little messy) is as follows. Please help. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>WeWork Game</title> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style></head><body> <script type="text/javascript"> var game = new Phaser.Game(/*2084, 1989*/1200, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, /*render: render*/ }); function preload() { // game.load.image('platform', './objects/platform.png')// game.load.image('background', './background/background.gif');// game.load.image('ground', './objects/platform.png'); game.load.image('stars', './objects/energy.png'); game.load.spritesheet('zero', './characters/zero.png', 50, 50, 2); game.load.tilemap('myTilemap', './background/tilemaps/tilemap.json'); game.load.image('myTileset', './background/tilemaps/bg.png'); } var player;//var platform;var cursors; var map;var backgroundLayer;var blockLayer;var patches; var stars;var score = 0;var scoreText; function create() { map = game.add.tilemap('myTilemap'); map.addTilesetImage('bg.png', 'myTileset'); blockLayer = map.createLayer('solids'); backgroundLayer = map.createLayer('cosmetics'); patches = map.createLayer('backing'); // We're going to be using physics, so enable the Arcade Physics system game.physics.startSystem(Phaser.Physics.ARCADE); // A simple background for our game // game.add.sprite(0, 0, 'bg'); // The platform group contains the ground and the 2 ledges we can jump on //platform = game.add.group(); // We will enable physics for any object that is created in this group //platform.enableBody = true; // Here we create the ground. //var ground = platform.create(0, game.world.height - 70, 'ground'); // Scale it to fit the width of the game (the original sprite is 400x32 in size) //ground.scale.setTo(1, 1); // This stops it from falling away when you jump on it //ground.body.immovable = true; // Now let's create two ledges //var ledge = platform.create(500, 350, 'ground'); //ledge.body.immovable = true; //ledge = platform.create(-300, 270, 'ground'); //ledge.body.immovable = true; // The player and its settings player = game.add.sprite(55, game.world.height - 150, 'zero'); // We need to enable physics on the player game.physics.arcade.enable(player); // Player physics properties. Give the little guy a slight bounce. player.body.gravity.y = 400; player.body.collideWorldBounds = true; // Our two animations, walking left and right. player.animations.add('left', [1, 2, 3, 4, 5], 5, true); player.animations.add('right', [0, 1, 2, 3, 4, 5], 30, true); // Finally some stars to collect stars = game.add.group(); // We will enable physics for any stars that is created in this group stars.enableBody = true; // Here we'll create 12 of them evenly spaced apart for (var i = 0; i < 12; i++) { // Create a stars inside of the 'stars' group var star = stars.create(i * 70, 0, 'stars'); // Let gravity do its thing star.body.gravity.y = 300; // This just gives each stars a slightly random bounce value star.body.bounce.y = 0.7 + Math.random() * 0.2; } // The score scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#FFFFFF' }); // Our controls. cursors = game.input.keyboard.createCursorKeys(); //Command that uses camera to follow player //game.camera.follow(player); } function update() { // Collide the player and the stars with the platform //game.physics.arcade.collide(player, platform); //game.physics.arcade.collide(stars, platform); // Checks to see if the player overlaps with any of the stars, if he does call the collectstars function game.physics.arcade.overlap(player, stars, collectstars, null, this); // Reset the players velocity (movement) player.body.velocity.x = 0; if (cursors.left.isDown) { // Move to the left player.body.velocity.x = -150; player.animations.play('left'); } else if (cursors.right.isDown) { // Move to the right player.body.velocity.x = 150; player.animations.play('right'); } else { // Stand still player.animations.stop(); player.animations.add('stand', [0, 1, 2, 3], true); player.animations.add('stand', [0, 1, 2, 3], true); } // Allow the player to jump if they are touching the ground. if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -450; } if (scoreText.text == 'Score: ' + 120) { //delete(scoreText.text); game.add.text(50, 50, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', { fontSize: '32px', fill: '#FFFFFF' }); //game.add.text(25, 25, 'CONGRATULATIONS!!! You have collected ALL the Energy Orbs!', {fontSize: '50px', fill: '#FFFFFF' }); } } function collectstars (player, stars) { // Removes the stars from the screen stars.kill(); // Add and update the score score += 10; scoreText.text = 'Score: ' + score; } /*function render() { game.debug.cameraInfo(game.camera, 32, 32); game.debug.spriteCoords(player, 32, 500); }*/ </script> </body></html>
