Search the Community

Showing results for tags 'tiles'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 79 results

  1. Hi guys, How can I destroy tiles from TilemapLayer using an Array of indices? Regards, Nicholls
  2. Hey Guys, New to Phaser and need help in an issue I'm running into. I'm trying to randomly create a sprite (the coin) in my stage but want to check if it's overlapping with a particular tile before showing. If it does overlap, I want to kill it and create it in a new position. I don't even know if this is the best approach, but it's what I've been trying. So far, I can't get it to work. The sprite has no issues being created overlapping the tile I've been trying to have it avoid. Here's my code so far: window.onload = function() { var game = new Phaser.Game(640, 640, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var map; var heart; var backgroundLayer; var blocks; var player; var coin; var jumptimer = 0; var arrow; var arrows; var arrowTime = 0; var score_counter = 0; var remaining_arrows = 40; var score_text; var arrows_text; var last_clicked; var new_remaining_arrows; function preload () { game.load.tilemap('myMap', 'tilemaps/test_tilemap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('sheet', 'tilemaps/scifi_platformTiles_32x32.png'); game.load.spritesheet('dude', 'images/bear-dude.png', 36, 38); game.load.image('arrow', 'images/arrow.png'); game.load.image('heart', 'images/heart.png'); game.load.spritesheet('coin', 'images/coin-sprite-animation-sprite-sheet.png', 44, 40); } function create () { game.physics.startSystem(Phaser.Physics.ARCADE); //Tilemap map = game.add.tilemap('myMap'); map.addTilesetImage('scifi_platformTiles_32x32', 'sheet'); backgroundLayer = map.createLayer('Background'); blocks = map.createLayer('Blocks'); map.setCollision(317, true, blocks); backgroundLayer.resizeWorld(); //Heart game.add.sprite(20, 20, 'heart'); //Coin coin = game.add.sprite(Math.floor((Math.random() * + 1),Math.floor((Math.random() * + 1), 'coin'); coin.scale.setTo(.5,.5); game.physics.arcade.enable(coin); coin.enableBody = true; coin.body.collideWorldBounds = true; //Arrow arrows =; arrows.enableBody = true; arrows.physicsBodyType = Phaser.Physics.ARCADE; arrows.createMultiple(40,'arrow'); arrows.setAll('checkWorldBounds', true); arrows.setAll('outOfBoundsKill', true); // Player player = game.add.sprite(32, - 150, 'dude'); player.scale.setTo(1.2,1.2); game.physics.arcade.enable(player); player.body.bounce.y = 0.1; player.body.gravity.y = 300; player.body.collideWorldBounds = true; //Animations player.animations.add('left', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 12, true); player.animations.add('right', [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24], 12, true); player.animations.add('jump_left', [26], 12, true); player.animations.add('jump_right', [25], 12, true); coin.animations.add('spin', [0,1,2,3,4,5,6,7,8,9], 24, true); //Text Elements score_text = game.add.text(0, 0, "Score\n" + '0', { font: "18px Arial", fill: "#ffffff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" }); score_text.setTextBounds(0, 0, 640, 80); arrows_text = game.add.text(540, 20, "Arrows: " + (remaining_arrows), { font: "18px Arial", fill: "#ffffff" }); //Keyboard Elements cursor = game.input.keyboard.createCursorKeys(); game.input.keyboard.addKeyCapture([ Phaser.Keyboard.SPACEBAR ]); } function update() { game.physics.arcade.collide(player, blocks); game.physics.arcade.collide(arrows, blocks, stopArrow, null, this); game.physics.arcade.collide(coin, blocks, replaceCoin, null, this); game.physics.arcade.collide(arrows, coin, shootCoin, null, this); game.physics.arcade.overlap(player, coin, collectCoin, null, this); coin.visible = true;'spin'); player.body.velocity.x = 0; if (cursor.left.isDown){ // Move to the left player.body.velocity.x = -150; if(!player.body.blocked.down){'jump_left'); }else{'left'); } last_clicked = 'left'; }else if (cursor.right.isDown){ // Move to the right player.body.velocity.x = 150; if(!player.body.blocked.down){'jump_right'); }else{'right'); } last_clicked = 'right'; }else{ // Stand still player.animations.stop(); player.frame = 12; } // Allow the player to jump if they are touching the ground. if (cursor.up.isDown && player.body.blocked.down) { if(last_clicked == 'left'){'jump_left'); }else if(last_clicked == 'right'){'jump_right'); } player.body.velocity.y = -350; } // Fire Arrow if (game.input.activePointer.isDown){ fireArrow(); } } function fireArrow(){ //Fire Arrows if( > arrowTime){ arrow = arrows.getFirstExists(false); if(arrow){ arrow.reset(player.body.x + 16, player.body.y + 16); arrow.rotation = game.physics.arcade.angleToPointer(arrow); game.physics.arcade.moveToPointer(arrow, 300); arrowTime = + 100; new_remaining_arrows = remaining_arrows -; arrows_text.setText("Arrows: " + (new_remaining_arrows)); } } } function collectCoin (player, coin) { // Removes the coin from the screen coin.kill(); arrows.createMultiple(10,'arrow'); remaining_arrows = new_remaining_arrows + 10;; arrows_text.setText("Arrows: " + remaining_arrows); score_counter = score_counter + 500; score_text.setText("Score\n" + score_counter); addCoin(); } function shootCoin (coin, arrow) { // Removes the coin from the screen coin.kill(); arrows.createMultiple(5,'arrow'); remaining_arrows = new_remaining_arrows + 5; arrows_text.setText("Arrows: " + remaining_arrows); score_counter = score_counter + 100; score_text.setText("Score\n" + score_counter); addCoin(); } function stopArrow (arrow) { arrow.body.velocity = 0; } function addCoin(){ //Add coin coin = game.add.sprite(Math.floor((Math.random() * + 1),Math.floor((Math.random() * + 1), 'coin'); coin.visible = false; coin.scale.setTo(.5,.5); game.physics.arcade.enable(coin); coin.enableBody = true; coin.animations.add('spin', [0,1,2,3,4,5,6,7,8,9], 24, true); } function replaceCoin(){ alert('Test Collision.'); //coin.kill(); //addCoin(); } };
  3. Hi all, I've managed to do a very simple but not very flexible code to damage and destruct tiles when shooting at them. I have a Json map, one layer with an image for not destructible tiles and a second layer with a sprite-sheet with 4 frames for the 4 damage levels (see image). My problem is that one bullet collision result in one step in the damage progression. What I want is to have different damage thresholds for different weapons: a pistol has to shoot 10 bullets to move to the next damage level, a machine gun needs only 5, and a bomb destroys the tile immediately. Thank you for any help I'm pasting here only the relevant code, I've omitted stuff like moving the player or particle effects: (edited code formatting) create: function() { this.createWorld(); //OTHER CODE OMITTED... },update: function() {} update: function() { game.physics.arcade.collide(this.player, this.layerWorld); game.physics.arcade.collide(this.player, this.layerDirt); game.physics.arcade.overlap(this.bulletPool, this.layerDirt, this.destroyTerrain, null, this); this.shootBullet(); //OTHER CODE OMITTED... },//OTHER CODE OMITTED... createWorld: function(){ //create the tilemap = game.add.tilemap('level1'); //add tileset images to the map'worldBase');'worldDirt'); //crete layers from every json layer this.layerWorld ='worldBase'); this.layerDirt ='worldDirt'); //enable collisions for the first frame, true, this.layerWorld); //enable collision for all frames in sprite[26,27,28,29], true, this.layerDirt); //set the world size to match the size of the layer this.layerWorld.resizeWorld(); //set bounds to world,0,3200, 320); },//OTHER CODE OMITTED... destroyTerrain: function(bullet, tile) { //move the emitter at the bullet's point of contact with the tile this.dirtParticles.x = bullet.x; this.dirtParticles.y = bullet.y; //start emitting //start(explode, lifespan, frequency, quantity) this.dirtParticles.start(true, 2000, null, 15); //advance to the next tile's id tile.index += this.BULLET_DAMAGE; if(tile.index < 29) {, tile.x, tile.y, this.layerDirt); } else if (tile.index >= 29) {, tile.y, this.layerDirt); } bullet.kill();},
  4. Hello, I have created a simple top-down game with a tiled map for a frogger-like game where i can move my character arround. I now want to implement moving platforms for my character to advance, i want to spawn my platforms on a specific group of tiles, (since this is a frogger game, you could guess i want to spawn logs on water tiles) i have done some research and couldn't really find what i was looking for in the examples and the forum. I would like some advice on the way to proceed in my project, as i am kind of lost Is it possible to generate my platforms using the json data to identify the water tiles? Do my platforms have to be Tile objects or can i create them in the game so i can freely use them? I'll gladly take your advice
  5. I have a DisplayObjectContainer that has a map made out of individual pats of a texture atlas. When I scale the DOC to "zoom" in and out of the map, at certain points the tiles sprites will have a small gap between them. Oddly enough, it only seems to be horizontal gaps and never vertical ones. Does anyone know why this could be happening? Also of note is that I never noticed this happening when the sprite textures came from individual files instead of a texture atlas. Thank you. EDIT: example
  6. If I have a sprite standing on top of two tiles like this: The collision code will always return the one on the left as the collided tile even if most of the hitbox is standing on top of the one on the right. I want to make my character react differently based on what tile it bounces off, but players get confused when the character is bouncing mostly off a tile type A and the reaction corresponds to a tyle type B that it was barely touching.
  7. Hi, I am trying to layout some tiles in a tiled map and load them into phaser (2.3.0). I've tried some tilemaps from opengameart which are layed out in columns of 5-6 tiles per row. In this example, the map.setCollisionBetween(x,y) was not working (I had my main char passing like air), even using game.physics.arcade.collide(player, layer); I then created a simple map of one row with 6 tiles and set map.setCollisionBetween(1,6); and it worked. Now I want to show the Object Layer 1 of tiled. I am using the same tilemap for blocks and objects. I've added the following things in the create() function (after loading the tilesetImage / setCollisionBetween): ladders =; // new sprite group of objects map.createFromObjects('Object Layer 1',4,'objects',0,true,false,ladders); // map points to Tilemap objec, ladders is a group // Draw tile layer layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); Even though it should have been the third tile, it shows the first tile as an object. Is there any example relative to what I am trying to do?
  8. Hi, Is there a way to assign a tile to a button without the tile already on the tilelayer? Some examples deal with this, but it seems the tiles used to paint, fill, or swap are already on the tilemap/tilelayer. I have 2 buttons, and I would like for the user to be able to paint the tilelayer when the corresponding button is active. Thanks in advance!
  9. Hi, I have tiles layer and I'm trying to make minimap from my layer like this: var minimap = game.add.sprite(100, 100, layer_walls.generateTexture()); minimap.scale.setTo(0.2); minimap.fixedToCamera = true; layer should hold a sprite but this sprite contain only part that is displayed right now (nothing that is outside camera) . how to get whole layer texture? I tryed to add layer_walls.renderSettings.enableScrollDelta=false; before but it doesn't helped.
  10. Hi... I am very very new in phaser development, and already found it pretty cool.. I´m trying your example about the onion-head-jumping-dude on the space... and I changed some parts of the tile set png. Introducing new squares that works like Killer Spikes. So, i want now that my player dies when he hits that kind of ground. I´m trying 2 solutions for this, and bout of them have problems with tile index. First one: //Tile 68 and 69 are killer spikes, and if you are touching top face of the tile... if ((tile.index == 68 || tile.index == 69) && tile.faceTop) player.kill() ok, this kills the player, but for some reasson, he dies also when he is not hitting that kind of ground... like if tiles have some sort of bug... Second one: // Directly subscribe to callback of tileIndex 68 and 69... map.setTileIndexCallback([68, 69], this.spikeHitted, this); this doesn´t work at all.. So in conclusion... if i want to do a game (like mario bross) and i want to kill the player when he steps over spikes, how could i do that? Anybody know a cool example? thanks!
  11. Hi Guys, I am building a system where I load tiles of a terrain by demand. Depending of where the camera is, I create new GroudMeshes as needed and tile it on the terrain. My Tiles are a json object with altitude data and some other values. I am facing a problem after loading the grounds. I cannot see any error and the grounds are loaded but they are "not visible" and depending of the angle of the camera they appear in the scene and disappear. They should also be checking collisions but they are not. I have a running example of my system, for simplicity I am always loading the same json but the control of the tiles and the rest are the same. To see the problem just click on the link after loading try to move the camera arround (keep the same position) looking in a 20 degree down aprox. and You will see the ground, if you are lucky :S According with my testing, it seems to be something related with loading the meshes during the "before render" or "render" events. If I load all of them before start running the scene. It looks ok. I can also provide you with a zip file that includes the folder and all the files. Any ideas?
  12. My game is top-down with the player fixed in the middle. I do have a Tiled JSON data file loading fine in my game and I have a "player" sprite moving around and colliding with the tiles, but it's colliding with the clear areas around the walls, not the actual solid bits. Can someone point me to a tutorial that shows how to create collision polygons in Tiled Map Editor? I've been fiddling with an Object Layer and the Collision Editor but nothing actually happens. Meaning, I can "fiddle" with the collision editor but see no way to save the polygons I'm drawing around the tiles so I can export the data into a Tiled JSON file. Then how do I define a collision polygon for my player? It's not a square and has a lot of clear bits too. My searching has been pretty unproductive so far :-/ Thanks a lot for helping :-)
  13. Hello dear phaser community! so i recently started using phaser, and after getting used to github, i encountered the problem that the tiles i add wont be displayed correctly. i created a map using Toast editor using csv,and i also tryed Tiled editor loading json files, but the problem is that the tiles i use are not displayed correctly or at all. when i set it to 64x64 it sometimes doesnt load at all, and with json there are black tiles and tiles and the wrong tiles in the wrong place. to my question: how do i have to format the tilePicture, in order for phaser to load it correctly? the demo works just fine, so must be something with that... thx already!! Hasya
  14. I use tiled map editor to create maps json my game. I've done that the map is loaded and all good. Now, I've made ​​my character shoot. And I want those shots collide with the wall (and call a function to delete the shot with an animation). I can not do that from phaser to detect specific tile (tiles hard block) to treat this as a sprite tile. And put in the update () function to the group of bullets that hit my character collides with these tiles (sprites). Help please
  15. what im trying to do is create a bunch of different maps for a rouge like game and i want the game code to pick up where i place the player tile that will look like a normal tile with a different id and then place the player at that position instead of holding a bunch of position for each map just curious if its possible i assume it is but i could use some help guys
  16. I'm trying to understand how Phaser tilemaps work (with a map size much larger than the screen). When the camera moves, are the tiles that were off-screen painted instantly or were they already painted on a big bitmap (as large as the whole map), which is simply moved when the camera moves? If it's the second option, wouldn't this become very slow with a map of 10000x10000 tiles ?
  17. Hi, just wanted to know if there's already built-in support for creating a sprite that is made up from different tiles. I know TileSprite is used to give a sprite a texture, but that's not what I mean. I also don't mean a sprite from a spritesheet, for animations. I mean a sprite of let's say 128x128 pixels that is made from 4x4 tiles of 32x32 pixels. I'm now struggling to do this myself, by using a bitmapData object and copying tiles, but was just wondering if maybe I'm re-inventing the wheel here.
  18. I'm having a bit of an issue figuring out tile properties in 1.1.5. My understanding is that each tile in a map has an individual set of properties, which can be set in the tile map editor such as Tiled. Here's what I'm doing, screenshots are of Tiled and my game objects being output to the Chrome developer console. I set the properties for each tile in the tileset in Tiled In my game, I can then see the tile properties at the Phaser.TileSet.tileProperties object, which I did not find on the documentation. But the tile properties are not available for each Phaser.Tile object Are the tile properties from the tile set not supposed to transfer to each individual tile object? I would like to be able to change the values for the properties on each tile as the game is played, so if not I suppose I'll need to set this up myself. Thanks!
  19. I'm relatively new to Phaser (only a few months of experience with it), so it didn't come up until recently that I attempted using tilemaps (which in this case are JSON files generated with Tiled) that have multiple layers. My code works fine with a single layer, but all collision between a layer and anything else stops working when I modify the code to add a second layer. In addition, creating sprites from the object layer (createFromObject) doesn't seem to work either. In my simplest test, the only change was adding a second layer to the map file (both layers share a single tileset), and the only change in the code is adding: var layer2; layer2 = map.createLayer('Tile Layer 2'); Both layers display properly, but collision stops working. I thought I had read that Phaser could handle multiple tile layers now. Is there something I'm missing that I need to have to get this to work?
  20. Hi All, I've just started using Phaser over the last couple of days and am liking it very much. I've never attempted any serious programming with Javascript, but seem to be catching on quickly thanks to all the available Phaser documentation. My question concerns the performance hit of using "emitters" in place of "groups". I understand that the emitter functions are basically an extension to the groups functions. What I'm doing is creating an endless scroller/runner game format. As the screen scrolls, pre-composed "scene" sections are chosen randomly, then generated off screen and scroll by from right to left. These scenes are composed of platforms, coins, enemies, and various objects. I've been using an emitter for each type of scene object (i.e coin emitter, enemy emitter, platform emitter, etc). Each emitter will generate a scene that will then scroll by, after a certain time has elapsed, another scene will be chosen at random, then generated and allowed to scroll by. I've been using emitters instead of simple groups because it requires less coding on my part to generate each scene. This has been working just fine with no lag or noticable hit in performance so far. My concern is that as the game gets more complicated with more scene objects, will I eventually start to see a hit in performance? The reason I feel this way is that it seems that emitter particles get several physics properties automatically applied to them, some of which i'm not using. Will using emitters instead of groups for this eventually create a performance disadvantage? What would you use to continually generate scrolling scene content?
  21. Could you help me out with a problem that I have with the game im making. Between the menu and game state (witch has a button that sends me to the gam menu) and game state with tilemap (in witch if you press the enter key it sends me back to the menu). My problem consists in the fact that when I press the enter key in the game state to go back to the menu, the menu button disappears, I've tried to do it from the menu with a game state without tilemap and the button doesn't disappear. As a possible solution Ive thought about if while pressing the enter key apart from redirecting the user to the menu, it destroys the map with the method destroy(), which supposedly eliminates the map and its corresponding layers. As a conclusion, I think that the object map ends up getting deleted, but not its layers. Problem example Link: <--------------------- Github Assets Link: Full game: https://googledrive....Cd0E/index.html CODE State Menu (function() { 'use strict'; function Menu() { this.titleTxt = null; this.startTxt = null; } Menu.prototype = { create: function () { var x = / 2 , y = / 2; this.add.sprite(0, 0, 'menufondo'); this.text = this.add.text(, 500, "PRESS BUTTON PLAY TO GO TO THE GAME", { font: "65px Arial", fill: "#ff0044", align: "center" }); this.playbutton=this.add.button( - 90, 700, 'play', function () {'game'); }, this, 2, 1, 0); console.log(this.playbutton); }, update: function () { } }; window['button-problem'] = window['button-problem'] || {}; window['button-problem'].Menu = Menu; }()); State Game (function() { 'use strict'; function Game() { this.player = null;; this.layer; this.cursors;; this.moneytext; this.sounddeath; this.soundcoin; } Game.prototype = { create: function () { var x = / 2 , y = / 2; ='estomago');'tiles'); this.layer ='layer1'); this.layer.resizeWorld();;; this.text = this.add.text(4200, 4800, "PRESS ENTER to return to menu", { font: "65px Arial", fill: "#ff0044", align: "center" }); this.text.anchor.setTo(0.5, 0.5); }, update: function () { if (this.input.keyboard.isDown(Phaser.Keyboard.ENTER)) {'menu'); } }, }; window['button-problem'] = window['button-problem'] || {}; window['button-problem'].Game = Game; }());
  22. I am trying to swap 2 tiles (actually I just need to move a tile up/down/left/right, in place of an empty tile). I tried using tilemap.swap(tileA, tileB) but that only copies tileA over tileB, not the other way around too. The "swap tiles" example says it's supposed to really swap (copy A over B and B over A) but this doesn't happen there either. Is there any method that I am missing that can do this? And, since I am trying to move a tile over an empty place, is there a way to tween this move? Any help is greatly appreciated. Dan
  23. Hello, I'm trying to make a strategy tiled-based game, where each tile can be terrain or building (eg. road, meadow, forrest, road, farm, barracks, woodcutter hut etc.) I want to create a user interface, where player would have various tools e.g. "build", "bulldoze/destroy" so that he/she could change the landscape of the game and create buildings etc.. Technicaly - to put new tiles on map I'm using map.putTile. And this works OK. But... How can I remove a tile? The problem is I don't see in TileMap an option to remove tiles, so I started wondering: am I doing it wrong? Should I use TileMap to create objects like farm or road that can be destroyed during gameplay? Or maybe there is a way to remove an individual tile from map?
  24. Hi! I'm researching the Phaser Framework and my question is: To use Phaser it's required to buid my game is tilemaps? I can't use sprite based graphics? Example: Shank, Rayman, Braid, etc are sprite based. Or, i'll have to use tilemap, but only the invisible collision rectangles will be tile based? Thanks!
  25. Hello. I have seen several posts that talk about this topic. I do not understand what happens when the bullets hit platforms. Function when the collision occurs is not executed. This only happens when the bullet hits a group of platforms. This is my code create: this.bullets =; this.bullets.createMultiple(30, 'bullet'); this.bullets.forEach(utils.setupBullet, this); utils.setupBullet = function(bullet) { bullet.anchor.x = 0.5; bullet.anchor.y = 0.5; bullet.outOfBoundsKill = true; bullet.lifespan = 2300; bullet.body.setCircle(15); bullet.animations.add('default', [0, 1, 2, 1], 10, true);'default'); }; update:, this.layer, this.collisionBulletWall, null, this); collisionBulletWall: function(bullet, wall) { bullet.kill(); } any idea?