Search the Community

Showing results for tags 'tiled'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 160 results

  1. Phaser

    Hey everyone, I have noob questions. I'm creating a platformer game with Phaser, as well as Tiled to create a layered JSON map. So far one of my tile layers is handling all of the inanimate object collisions via this.map.setCollisionBetween(0, 600, true, this.collisionLayer, false) to which I've passed indices to my entire tileset (only using one). Given that I've done this, does the number of tiles I actually create in that layer via Tiled affect performance? Would it be advisable for me to just use setCollision() or setCollisionBetween and pass only the necessary tiles that I plan on passing to that layer? My tileset is about 1/3 tiles I want to use for collision, and they're not totally organized but I can reasonable get that done if necessary. Also, what's better for performance, bigger tilesets or more, smaller tilesets. What would you consider a sweet spot for this in terms of size and number of tilesets? Note that I've already compressed my images etc and not having any performance issues so far, just taking preventative measures. Thanks for any help in advance.
  2. Hi everyone, I'm actually making a simple 2d platformer with arcade physic and I recently implemented a tiled tilemap which contain an "object layer". In this object layer I draw collision zone with the polyline tool. Now I want thoses "collision zones" to be recognized by phaser. Which mean : if the player overlap "object layer"'s content, it will blocked as if it was a wall. I just want to know if this is possible or if I must set collision "on" for my tile layers in which I may put all my walls tiles. Also, If I must use the 2nd solution, if my tile sprite is smaller than my 24x24 tile square (I attached an example), will the hitbox fit the sprite size or the 24x24 square ? Thanks beforehand.
  3. Hi Everyone, I need guidance on how can I approach this problem: Would like to apply a tiled texture to complex polygons. I'm using P2 for the physics and tiled for the level editor. I would like to get something similar to worms where the terrain has a tiled texture, the top has grass and the bottom is darker. These are some examples of what I would like to achieve: I don't care at all about destructible terrain. This is how my level looks now with polygons from tiled: http://puu.sh/wMwsg/28b1609d74.jpg
  4. Hi!, I need some help doing new maps for my game: https://multionline.herokuapp.com/ Check this post to know more about the game: http://www.html5gamedevs.com/topic/29477-multiplayer-game-with-items-levels-monster-and-pvp/ I leave all you need to build the map in the zip file of this post! (you need to use tiled to edit it) If I uses the map your name will appear in the game Map Set.zip Thanks!.
  5. Tilemap zoom in and out

    Hey there, I've ran into an issue which I really can't get my head around. I've made a tilemap in Tiled and I've successfully rendered it with Phaser. I can move the map around using arrow keys and mouse and the next I wanted to do is to add a zoom in and zoom out feature (and that's where I'm lost). In the first screenshot the tilemap is shown 100%. The pink area is just a filled polygon that I mapped out in Tiled. In other words, it doesn't fill any purpose for what I'm trying to accomplish with the zoom what so ever. In the second screenshot I've changed the view to 50%. My intention is to make the map zoom out, but still use the entire canvas. Right now, I see the same piece of map as in screenshot 1. Just smaller. I wish to see more of the map. How can this be accomplished? Any help and/or advice is much appriciated. Here's what I've got. var game = new Phaser.Game(800, 600, Phaser.WebGL, 'my-map', { preload: preload, create: create, update : update, render : render }); function preload() { game.load.tilemap('mymap', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('My Map', 'assets/vala_map.jpg'); } var map; var layer; var cursors; function create() { game.stage.backgroundColor = '#787878'; map = game.add.tilemap('mymap'); map.addTilesetImage('My Map', 'My Map'); layer = map.createLayer('mymap'); layer.resizeWorld(); cursors = game.input.keyboard.createCursorKeys(); poly = new Phaser.Polygon(map.objects.storelayer[4].polyline); graphics = game.add.graphics(map.objects.storelayer[4].x, map.objects.storelayer[4].y); graphics.alpha = 0.2; graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill(); } function update() { if(this.game.input.activePointer.isDown) { if (this.game.origDragPoint) { // move the camera by the amount the mouse has moved since last update this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x; this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y; } // set new drag origin to current position this.game.origDragPoint = this.game.input.activePointer.position.clone(); } else { this.game.origDragPoint = null; } //this.game.world.scale.setTo(0.5, 0.5); // zoom if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) { this.game.world.scale.setTo(1, 1); } else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) { this.game.world.scale.setTo(0.5, 0.5); } if(cursors.up.isDown){ game.camera.y -= 4; } else if(cursors.down.isDown){ game.camera.y += 4; } if(cursors.left.isDown){ game.camera.x -= 4; } else if(cursors.right.isDown){ game.camera.x += 4; } } function render() { game.debug.cameraInfo(game.camera, 32, 32); } Regards, entiendoNull
  6. I've been having a look through the phaser tutorials for json tiled maps and I've noticed that it's not clear on how to create a json tiled map that is 'phaser ready'. After creating a tiled map in tiled and following the code examples I've been unable to get passed the following error. Cannot read property '2' of undefined line phaser.js:98679 // find the relevant tileset sid = map.tiles[tile.index][2]; set = map.tilesets[sid]; version: 2.6.2 Is there anything obviously wrong with the code or the exported json tile map? Maybe there is a special way to export maps from tiled? Help would be appreciated. Thanks. game = new Phaser.Game(600, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tmw_desert_spacing', 'assets/tmw_desert_spacing.png'); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('tmw_desert_spacing'); layer = map.createLayer('Tile Layer 1'); } { "height":14, "layers":[ { "data":[0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 0, 0, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 0, 40, 40, 0, 0, 0, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 0, 40, 40, 40, 40, 40, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 40, 40, 0, 40, 0, 40, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 40, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 40, 40, 40], "height":14, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", "visible":true, "width":14, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.0.1", "tileheight":32, "tilesets":[ { "firstgid":1, "source": { "columns":8, "image":"tmw_desert_spacing.png", "imageheight":199, "imagewidth":265, "margin":0, "name":"tmw_desert_spacing", "spacing":0, "tilecount":48, "tileheight":32, "tilewidth":32, "type":"tileset" } }], "tilewidth":32, "type":"map", "version":1, "width":14 }
  7. I have a graphics issue that I cannot pinpoint. My sprite appears more blurry at some positions of the map. Does anyone have an idea what this kind of problem can depend on? Both of these pictures shows the sprite when idle on different positions - so no animation is playing - and at the first picture the sprite looks more clear than it does on the second one. I don't know what more information I can give on this that is relevant.
  8. Hi. I'm using tiled to create maps for my game. I want to create polygons in the tile collisions editor so when I place a certain tile, lets say a curve with a fence I always want a collision poly along the fence. Currently my curve is made of 6x6 tiles so I load the curve as a tile map in tiled. The tile collisions editor only allow me to add objects per tile. I want a object on the entire tile map instead so whenever I place a curve I get the collision part too. If I would make my tile map into a single tile the problem is that I have to draw 6x tile columns and rows outside the camera or track pieces will popup when the top left 64 x 64 tile enters the camera. (This is my own drawing function created before I found phaser, will phaser drawing do it different?) So basically I want to treat my tile map as 64 x 64 tiles that my game draw while I want collision objects to be active as soon as part of the tile map is drawn. I would prefer if I don't have to create my collision polys as a separate layer after creating the map. Any tips on how to solve this problem?
  9. help me pls, tilemaps collision

    Hello everyone, I am beginner with phaser, i am French and my english is not very nice. I need your help, i am blocked on a collide function. I want my character to collide with my second layer (tree, montain, statue..). (i use tiled map editor and export in json). my code : function preload: game.load.tilemap('map', 'assets/tilemaps/maps/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'assets/tiles/tiles.png'); game.load.spritesheet('perso', 'assets/sprite/spritetest.png', 32, 47); function create : game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('map'); map.addTilesetImage('tiles'); layer = map.createLayer('layer1'); layer2 = map.createLayer('layer2'); layer2.resizeWorld(); map.setCollisionBetween(0,2000); //PLAYER // ajout player et parametre player = game.add.sprite(250, 50, 'perso'); // We need to enable physics on the player game.physics.arcade.enable(player, Phaser.Physics.ARCADE); function update : game.physics.arcade.collide(player, layer2); i show an image for understand my problem. Thx to read my message
  10. tilemap not displaying properly

    So I'm having an issue trying to get a tilemap working properly. I made my tilemap in Tiled. JSON: http://intheexpanse.com/rpg/levels/level4.json Image: http://intheexpanse.com/rpg/images//base_out_atlas.png Code: http://intheexpanse.com/rpg/js/main.js Any ideas what I'm doing wrong? I've used multiple tilemaps from different sources and they all have similar display errors. Thank you.
  11. /** * Takes the collision data defined in the collision editor of Tiled and applies it to * and exisiting tilemap for use with P2 physics bodies. * * Tilemap json data MUST be loaded in the Preload state/function using game.load.json() before this function is called * map must only have ONE tileset * each tile can only have ONE polyline set for it's collision * the polyline MUST be a complete shape (the last point is indentical to the first) * * @param {Phaser.Tilemap} map - this is the map which you want polylines added to * @param {string} key - this is the key for the raw json tilemap data loaded in the preload state * @param {bool} [roundValues=true] - Will round the x,y coordinates for the polylines to nearest integer */ addPolylineCollision: function (map, key, roundValues) { if (roundValues === undefined) { roundValues = true; } // json with the collision data that was omitted by phaser let data = this.game.cache.getJSON(key); //console.log(data); let collisionData = data.tilesets[0].tiles; // array of the collision polygons that will get added to the tilemap var polygons = []; // tiles in the Collision Layer that will help define the polygons let mapData = map.layers[map.getLayer('Collision Layer')].data; for (let row in mapData) { for (let col in mapData[row]) { var wall = collisionData[mapData[row][col].index - 1]; if (wall !== undefined) { for (let i in wall.objectgroup.objects) { let poly = { height: 0, name: "", polyline: [], properties: undefined, type: "", visible: true, width: 0, x: mapData[row][col].x * map.tileWidth, y: mapData[row][col].y * map.tileHeight }; for (let j in wall.objectgroup.objects[i].polyline) { var coords = [wall.objectgroup.objects[i].polyline[j].x, wall.objectgroup.objects[i].polyline[j].y]; if (roundValues) { coords[0] = Math.round(coords[0]); coords[1] = Math.round(coords[1]); } poly.polyline.push(coords); } polygons.push(poly); } } } } console.log(polygons); map.collision['Collision Layer'] = polygons; } I'm writing a function to support Tiled's Collision editor and P2 physics. Everything seems fine but the values for all the polygons I defined get mangled to the same values. I thought it was a scope issue but nothing seems to work: pic: https://gyazo.com/17006a8d49e451a7d7010c77c31a7765 (Links to an external site.)Links to an external site. paste: https://pastebin.com/fv9sJpPc (Links to an external site.)Links to an external site. By the time execution reaches line 57, the console.log call, all the values in the polyline arrays are totally messed up, they're set to values between -1 and 1, and are always set to the same values every time. At every other previous point in this functions lifetime everything works exactly as expected.
  12. Draw a curve with texture

    I started working on a game similar to Curve Fever (https://www.youtube.com/watch?v=ojqBnYcxl0c). I’m new to Phaser and Pixijs, so I need advice on how to render a curve on the field. Right now i have two Graphics objects: head (circle using drawCircle()) with arcade physics enabled (to be able to move it around the map tail - static graphics copying head x and y on update drawing a line (lineTo(head.x, head.y) The problem is as you see in the video the grey curve has a texture background. Assuming i have a repeatable PNG with background, how could i map it within the curve that is being drawn? Other question is should I use BitmapData instead of Graphics? I would prefer a lightweight option that would run on older computers. I would also need to be able to detect collisions, I think it's possible to enable it for Graphics but not sure about bitmap.
  13. Hi, I loaded my tiles with game.physics.p2.convertTilemap() and it works. However, each tile is a square block and my "player" is floating on slanted tiles (similer to problem mentioned in here). Using Tiled editor's "Tile Collision Editor", i defined the polygon I want but Phaser does not seem to pick it up. Part of the exported JSON looks like this (tells me that the polyline was created): "tilesets":[ { "firstgid":1, "image":"tiles.png", "imageheight":374, "imagewidth":374, "margin":0, "name":"tiles", "properties": { }, "spacing":2, "tileheight":32, "tiles": { "57": { "objectgroup": { "draworder":"index", "height":0, "name":"", "objects":[ { "height":0, "name":"", "polyline":[ { "x":0, "y":0 }, { "x":32, "y":-32 }], "properties": { }, "rotation":0, "type":"", "visible":true, "width":0, "x":0, "y":32 }], "opacity":1, "type":"objectgroup", "visible":true, "width":0, "x":0, "y":0 } } }, "tilewidth":32 }, { "firstgid":122, "image":"items.png", "imageheight":270, "imagewidth":270, "margin":0, "name":"items", "properties": { }, "spacing":2, "tileheight":32, "tilewidth":32 }, { "firstgid":186, "image":"sprites.png", "imageheight":100, "imagewidth":238, "margin":0, "name":"sprites", "properties": { }, "spacing":2, "tileheight":32, "tilewidth":32 }]How do I load the tile's collision polyline/polygon in Phaser when loading the tiled layer?
  14. TileMap doesn't show correctly

    Hi!, i use tiled for create a map, but when i try show the map in the game, this doesn't show correctly (the map in tiled) And the map in the game: The main file: class Main extends Phaser.State { create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.add.sprite(0, 0, 'Sky'); this.map = this.game.add.tilemap('Tilemap'); this.map.addTilesetImage('Tiles', 'Tileset'); this.layer = this.map.createLayer('Platforms'); this.layer.resizeWorld(); this.wrap = true; this.cursors = this.game.input.keyboard.createCursorKeys(); } update() { if (this.cursors.left.isDown) { this.game.camera.x -= 8; } else if (this.cursors.right.isDown) { this.game.camera.x += 8; } if (this.cursors.up.isDown) { this.game.camera.y -= 8; } else if (this.cursors.down.isDown) { this.game.camera.y += 8; } } } export default Main; Any idea or solution?(sorry for my bad english)
  15. Animated Tileset

    Hi, I'm building a map using Tiled for my game and I'm wondering what's the best method to implement an animated tileset in my game. For example in the game, I have some static tiles such as ground, but I also have some animated tilesets like waterfalls. Is there a best method for parsing the TMX file and then rendering all the static and animated tiles? Perhaps there's a library I can use that would provide a simple implementation for that? Thanks
  16. Tiled map being rendered incorrectly

    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>
  17. Drawing Offset

    Hello there! I've got a question regarding the "Drawing Offset" that the Tiled mapeditor has. In short, does Phaser supports it? The map that I am using has several layers. The general size of a tile is 32x32px, but some sprites are twice as big. Even though it looks good in "Tiled" I noticed that the positions of my "trees" below had moved when I run the game. I've been trying to track the Tiled property "tileoffset" down... and thought it might be located in the Phaser.Tileset object within the drawCoords array. But, that does not seem to the trick..? I've attached a few images below to illustrate what I mean. Edit: Just read that Phaser v. 2.7.5 might have this feature implemented. Will be trying in a few hours. I will get back with the results of that test in case others have similar issues in future. Tiled Mapeditor Tileset settings Within Tiled Mapeditor When the game has rendered In my Tiled JSON file I've got the following: { "columns":1, "firstgid":41, "image":"..\/sprites\/tree.gif", "imageheight":64, "imagewidth":64, "margin":0, "name":"tree", "spacing":0, "tilecount":1, "tileheight":64, "tileoffset": { "x":-32, "y":0 }, "tilewidth":64 } Any help or clarification is much appriciated. Best regards!
  18. Size of platform in Layer

    Very sorry if someone has asked this before, but I searched the internet for two days now and I have yet to find the answer to this. So, what I want to know is how can I tell the size (width, height) of the platform that a player/enemy is standing on, with platforms that are based on a tilemap/layer? Take for example this game phase example starstruck: https://phaser.io/examples/v2/games/starstruck How can I tell the size of that platform the mascot falls on first? Why do I want to know this? I want to know so that I can place enemies on the map, have them go back and worth without falling off a platform. I have seen this be done when platforms are created as a group, but not with platforms in a layer. Thank you very much for any help.
  19. Hi, I have tilest 16x16. It is exported to json format. I used Tiled app. It works fine until using scaling function. After that colission is not working. Here's my code: create: function() { this.map = this.game.add.tilemap('tiled'); this.map.addTilesetImage('tiled', 'tiles'); this.layer = this.map.createLayer('background'); this.layer.scale.setTo(3, 3); //It disables collissions this.layer.resizeWorld(); this.walls = this.map.createLayer('walls'); this.walls.scale.setTo(3, 3); //It disables collissions this.layer.resizeWorld(); .... this.map.setCollisionBetween(1, 2000, true, 'walls'); this.sprite = this.game.add.sprite(70, 70, 'soldier'); this.sprite.anchor.setTo(0.5, 0.5); this.game.physics.enable(this.sprite); this.sprite.body.setSize(8, 8, 4, 4); this.sprite.scale.setTo(3, 3); } update: function() { this.game.physics.arcade.collide(this.sprite, this.walls); ... }
  20. Hello, I am working on a game using tilemap and phaser framework. I want select the multiple coordinates on tilemap using phaser (cursor) and then can be able to store into an array. Is this possible using phaser? suggest me some solution for this.
  21. Hello devs, I am working on one game where I have created function to save onclicked coordinates into an array. function update() { marker.x = layer.getTileX(game.input.activePointer.pageX ) * 15; marker.y = layer.getTileY(game.input.activePointer.pageY ) * 15; var arrayData = []; if (game.input.mousePointer.isDown && map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)) != currentTile) { arrayData.push(layer.getTileX(marker.x),layer.getTileY(marker.y)); arrayData.toString(); document.getElementById('test').innerHTML = " Data: " + arrayData; console.log("Data:"+arrayData); } In this function I have declared array var arrayData = []; inside update() function and the output is, it showing only showing on set of coordinates and second click that value is updating . So, coordinate values are added into array but only single pair and on every click that pair value is updating. Secondly, If I am declaring array outside the update function ,the result is totally different. On-clicked, the value are coming in high quantity. If I am clicking on (1,3) coordinates then the array result is (1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3) and on second click on the coordinates (4,6) the array result is like (1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6,4,6) Please suggest me some solution , so that I can add these coordinate pairs properly into an array. Thank you
  22. If I hard code an enemy... var enemyData = { health: 20, attack: 40, animationFrames: [1, 2, 3, 4, 3, 2, 1] } ... it animates fine through the enemy prefab. But if I load an object with the same properties from a Tiled map - IT WONT WORK! I know to convert the strings to numbers with: this.data.attack = +this.data.attack; But when I have an array, it doesn't seem to work
  23. Curious About Tiled Syntax Error

    I get a syntax error Uncaught SyntaxError: Unexpected token : in the console when I load my tiled json maps. Everything runs fine, my maps are loaded correctly, but why does it give this error? json looks like: { "height":32, "layers":[ { "data":"AAAAAAAAAA" etc. I understand that there's no var declared at the beginning of the object, but it's saved as a json file and loaded as a json file. Why give this error? Just wondering. Thanks,
  24. I had a few questions about Tilemap's implementation and some general questions about having a player walk around a top-down 2d "overworld" and having enemies hundreds of pixels offscreen that the player would eventually walk near. Question 1: Using Tiled to generate a tilemap, is there a maximum size that you can generate using Phaser.Tilemap? I've read 2048x2048 are limits for some mobile devices for an actual "tilesheet" or images, but is there any max size for the map you can generate in Tiled and use in Phaser? Question 2: Does the Tilemap implementation render tiles only in the viewport or maybe a tile or two "offscreen" as a buffer? It doesn't render the entire map and layers? Are offscreen tiles receiving update events (ex: if a tile had its own water animation) or are only the in-viewport tiles receiving update calls? Question 3: Assuming my "Enemy" class on update just walks back and forth until it "spots" the Player, when initializing the tilemap, should I be creating/adding my Enemy classes and placing them way offscreen outside the viewport at initialization and they wont take update/moving/rendering until they're in the viewport? Or should I be listening to viewport xy changes and "spawn" enemies as they walk into the viewport? While the player is moving, are the Enemies actually moving around or do they not start getting those update events until they're inside the viewport? Basically, do Sprites added to a tilemap layer but off screen exist and are able to do things or do they have to be in the viewport for the tilemap to update them? I've found several examples of how to build Tilemap levels platforming and such, but when it's used in this context with other actors existing as children of a tilemap layer, I haven't found much. Anyone know of any good examples of this? Thanks!