Search the Community
Showing results for tags 'tile map'.
Found 8 results
-
Hi, I'm prototyping a turn-based strategy game and I would need the display a the world map as tiles (orthogonal, isometric, hexagonal, I don't care at the moment, I will go the easier way...) The main requirement is that I would need to easily change the texture on a tile depending on the player actions. What is the best (simplest) framework for this? I see phaser, pixi or melon could do it, but which one has as the simplest API for tile maps? Thanks you for your advice!
-
Hi! I am fairly new to Phaser 3 and I have 1 very simple game under my belt (a bulldozer moving rocks around). I am now trying my hand a tile maps so I downloaded Tile and made my map following a few tutorials and now I have my map I have everything set but I keep getting "Uncaught TypeError: Cannot read property 'TILED_JSON' of undefined". I have done alot of reading and I can't seem to find anything helping me with problem. This is all the code I have for right now I am just trying to get my head around tile maps. I have been trying to figure this out for about 2 hours now and I am starting to get a headache, also not asking for anyone to code it for me but pointing me in a direction would be AMAZING! function preload () { this.load.tilemap('store1', 'assets/images/untitled.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('tileS','assets/images/spriteSbuild.png'); } function create () { this.map = this.add.tilemap('store1', 32, 32, 64, 32 ); this.map.addTilesetImage('tileS','assets/images/spriteSbuild.png'); this.map.createLayer('Tile Layer 1').resizeWorld(); }
-
instead of loading the tiledmap from resources.js using src, how can i load it directly from database?can someone help me here??
-
I am building a game using a Tile Map. The Map loads and all appears fine. I can move the player right and left with no issues. Unfortunately, I have been unable to get movement up and down. I have scoured web with no success. I am not looking for 'Pac Man" auto movement. I want the player to move on keyboard input. Here is the relevant sections of code: this.physics.arcade.gravity.y = 200; // The player and its settings player = this.add.sprite(200, this.world.height - 250, 'dave'); // We need to enable physics on the player this.physics.arcade.enable(player); // Player physics properties. player.body.bounce.y = 0.2; player.body.gravity.y = 300; player.body.collideWorldBounds = true; // Our animations of walking player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); player.animations.add('up', [0, 1, 2, 3], 10, true); player.animations.add('down', [5, 6, 7, 8], 10, true); // Keyboard Controls cursors = this.input.keyboard.createCursorKeys();// 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 if (cursors.up.isDown) { // Move to the Up player.body.velocity.y = 150; player.animations.play('up'); } else if (cursors.down.isDown) { // Move to the Down player.body.velocity.y = 150; player.animations.play('down'); }Any guidance would be greatly appreciated.
-
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>
-
I'm trying to follow the starstruck tutorial in typescript, but for some reason when i add the line this.game.load.tilemap('level1', 'assets/level1.json', null, Phaser.Tilemap.TILED_JSON)my game wont run passed the preload method. The file path is definitely correct - and i know this because the other files in the same folder are loading fine (tested). Chrome is giving me the error: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:16322/assets/level1.jsonUncaught SyntaxError: Unexpected token < localhost/:1 what could be causing this? 'assets/level1.json' is definitely it's location (look at screen shot below).
-
I have created a loader for tiled in the JSON format for my JavaScript game. The game is based on a 2048 x 1280 map and my canvas size is 704 x 608. So my predicament is how would i create a viewport/camera when the player approaches the edge of the canvas ,so that the map will move? In my situation, it is a little more difficult, because im not using a standard 2D array like most of the tutorials, so it is confusing me very much. The code for loading my map is like so: function Level (){var data;this.tileset = null;var returned;var t = this;this.load = function(name){$.ajax({type:"POST",url: "maps/" + name + ".json",dataType: 'JSON',async: false,success: function(success){returned = loadTileset(success);}});return returned;};function loadTileset(json){data = json;Level.tileset = $("<img />", { src: json.tilesets[0].image })[0]Level.tileset.onload = done = true;if(done){return data;}elsereturn 0;}this.draw_layer = function(layer){if (layer.type !== "tilelayer" || !layer.opacity) { return; }// if (layer.properties && layer.properties.collision) {// return;// }var size = data.tilewidth;layer.data.forEach(function(tile_idx, i) {if (!tile_idx) { return; }var img_x, img_y, s_x, s_y,tile = data.tilesets[0];tile_idx--;img_x = (tile_idx % (tile.imagewidth / size)) * size;img_y = ~~(tile_idx / (tile.imagewidth / size)) * size;s_x = (i % layer.width) * size;s_y = ~~(i / layer.width) * size;ctx.drawImage(Level.tileset, img_x, img_y, size, size,s_x, s_y, size, size);});};this.collisionLayer = function(layer){var row = [];t.solids = [];layer.data.forEach(function(idx, i) {var s_x,s_y,size = 32;s_x = (i % layer.width) * size;s_y = ~~(i / layer.width) * size;if (i % layer.width === 0 && i) {t.solids.push(row);row = [];}row.push([idx,s_x,s_y]);});t.solids.push(row);};return t.solids;} And this Level class is called from my main javascript file like this: layer = scene.load("level_"+level);layer = $.isArray(layer) ? layer : layer.layers;layer.forEach(function(layer){if(layer.name == "v.bottom" && layer.type == "tilelayer"){b_layer = layer;}else if(layer.type == "tilelayer" && !layer.properties){t_layer.push(layer);}else if (layer.type == "objectgroup"){$.each(layer.objects, function(i, value){coll_layer.push([value.x,value.y,value.width,value.height,"dialogue"]);});}}); And then scene.draw_layer() is called from my update function lower in my main javascript function. My map holds different layers and you can see in the code above there is and if statement determining where the layer is the bottom layer, top layer or and object layer and storing it in the specific array. This is just so the player is shown between layers. So to clarify, for my game, how would i create a view port/camera according to my map loader? Also do i move the map or the player? And should i keep the player centered? if the player is centered then what happens when the edge of the map is visible? Here is a live version of the game so you can see how it works etc: http://upbeatevents.co.uk/dis Use guest as the username and password Thankyou very much
