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
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 72 results

  1. I am making a platformer game with Phaser 2.9.2 where the map is loaded from a JSON file and am having difficulty trying to make interactive tiles which are replaced by a new tile with a collision from a single-direction. I have found a function which allows me to control the direction of collision direction of tiles, so I am hoping to find out how to activate a function and replace individual tiles when there is the sprite and tile are overlapping. I have been thinking of adding the tiles individually in JSON with unique properties and using the .createFromObjects method, but I want every tile to have the same properties and the potential to make multiple stages. So I am hoping there is way to activate a function when the players sprite overlaps with the tile, and in the function it replaces that individual tile with another tile from the tilemap.
  2. Hi, my name is Anastasia and I'm open for new projects! Full time/part-time job. Rates are negotiable. Feel free to contact me - Skype - kozhko888 Check out my gallery: Thank you!!!
  3. Hello everybody. Need your help with Tiled Map Editor. I had a set of tiles, I updated it with another one in which there is a new tile, but when I add it to the map, another one is displayed instead, and so with some tiles. tried all tiles and a new one was not found Who faced the similar? how to fix the problem?
  4. I'm trying to get my tilemap to scale and I'm basically following the example here: However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:
  5. Hi, I'm trying to build a top-down 2d game. You can find the code for it here: Here is a screenshot of the game using "this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE ;" The game works, but there are a few issues I'm having: 1) The "viewport" always shows an area of 10 x 10 tiles. As the player moves the camera follows him and he appears to be moving around the map. However, the viewport is always 10 x x10. Is there a way to change this, for example, to where the viewport always showed an area of 20x20 tiles? 2) When I use "NO_SCALE" mode everything looks super tiny, but when I use any scale mode (such as SHOW_ALL) the text looks blurry and is completely unreadable... How can I have graphics that are large enough to see while still keeping nice, crisp fonts? thanks.
  6. Hi, I'm currently in the middle of setting up the base of my game with the use of Phaser game engine but I'm having issue with the sprite colliding with the world bounds. I've used Tiling to create the backdrop and the ground etc. But I need help understanding how to define what the sprite should be colliding with. How do I collide with the ground, which is part of the whole tile. Please see the attached 2 images, the sprite falls through the game as expected.,0, 400,300); console.log("in Game screen"); //sprite width - 180px, height 247.5px map = this.add.tilemap('level'); map.addTilesetImage('MyTile', 'tiles'); layer = map.createLayer('Tile Layer 1'); console.log("Json and sprite loaded"); sprite = this.add.sprite(,, 'character'); sprite.anchor.setTo(0.5,0.5); sprite.scale.setTo(0.2, 0.2); console.log("Character Loaded"); this.physics.startSystem(Phaser.Physics.ARCADE); this.physics.enable(sprite, Phaser.Physics.ARCADE); sprite.body.gravity.y = 500; console.log("Physics added to sprite"); The above code is in the create function, I am using state management, as you can see I've added set world bounds, when adding this the sprite dissapears, I've tried numerous different dimension but I've still not come to a solution. Any help would be much appreciated. Thanks
  7. Karate Burger | Salt Chef

    My new Phaser game Karate Burger | Salt Chef. Tap around character to control him. same Phaser game in webview, generated in Android Studio with Firebase addons
  8. Trying to tween tiles

    Hey. So I'm trying to fade an array of tiles in and out by tweening their alpha's: var tween = game.add.tween(tiles).to(properties, duration, easing, autoStart, delay, repeat, yoyo); tiles.layer.dirty = true; But this doesn't work. I think because layer.dirty is being set to false right after I set it to true. I've tried using map.createFromObjects ( and map.createFromTiles in an attempt to temporarily turn tiles into sprites as I guessed that maybe tweens only work with sprites but I'm not sure those methods were intended to be used for my purposes... Could someone point me in the right direction? Cheers
  9. I'm a newbie with Phaser tile maps. I've created a simple Mario-esque platform game where the player can jump around and land on platforms. This all works fine, but now I'm trying to add some "walls" to the level which the player should not be able to pass through horizontally, and can't figure out how to get this behavior working (see attached illustration for better explanation) Here's the code I'm using to read the tilemap data and set up collision: ='level2'); //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset'tiles_spritesheet', 'gameTiles'); //create layers pf.blockedLayer ='blockedLayer'); pf.walls ='walls'); //collision on blockedLayer, 5000, true, 'blockedLayer');, 5000, true, 'walls'); The "walls" layer should collide with the player on all sides, and the "blocked" layer should only collide on the top. Currently both the "walls" layer and the "blocked" layer are colliding with the player only on the top. Any help or advice very much appreciated!
  10. Wall tiles you can walk behind (2x1)?

    Heya, I'm trying to implement a scene similar to Party Hard house where the wall tiles height is twice their width. When you walk from the bottom you stand in front of the wall, but when you walk from the top you go behind it. It's like walls in isometric games, but from a straight perspective. Is there any way to implement this using Tilemaps? It seems I'd need to create each wall as a separate object and just define collision to half the height, anchored to the bottom. I am also using TILED Map editor and don't think I can really do it inside it either (so I'd have to "fake" it in-game with higher wall tiles). I played with square tiles and adding a foreground layer to display the upper half of the walls BUT it only works presuming that the object sprites approaching from bottom are never tall enough to overlap the top half of the wall (otherwise it would be rendered in front). I want characters as tall as the walls and I want them to be able to walk pretty close from the bottom, so this approach doesn't work. Any ideas aside from creating each wall as a separate object and manually sorting depth based on the y coord of the wall / character sprite?
  11. First of all, sorry for my english. I just started with Pixi and was studying tilemaps, but I'm having gaps between the tiles whenever I scale by the factor of 0.01. Yes, i'm using PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; Here's what I I've got: PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST; PIXI.loader .add('tileset', 'img/tileset.json') .load(setupMap); function setupMap() { var mapData = []; // Omitting bidimensional array with tiles for the sake of the example var map = new Container; var tilemap = new PIXI.tilemap.CompositeRectTileLayer(0, [], true); for(var coll = 0; coll < 100 * 48; coll++) { for(var row = 0; row < 100 * 48; row++) { if(mapData.hasOwnProperty(coll) && mapData[coll].hasOwnProperty(row)) { tilemap.addFrame(tileset.textures[mapData[coll][row]], coll*48, row*48); } else { break; } } } map.addChild(tilemap); stage.addChild(map); } // This fucks up everything document.addEventListener('mousewheel', mousewheel, false); document.addEventListener('DOMMouseScroll', mousewheel, false); function mousewheel(e) { var zoomOut = e.wheelDelta <= 0; map.scale.set(map.scale.x + (zoomOut ? -0.01 : 0.01)); }
  12. new Phaser game Koala Rumble

    I made a new "mini tile" game using Phaser
  13. Collision layer with P2

    Hi, I create a tilemap with 4 layers with one for collisions ( named : collisions ). The layer with pink tiles is my collisions layer, and the tile ID is 515. Then I add a player and active collisions. function preload() { game.load.tilemap('map', gamePath + 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', gamePath + 'assets/tiles.png'); game.load.spritesheet('cars', gamePath + 'assets/cars.png', 180 / 5, 73); } function create() { game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('tiles'); layer = map.createLayer('collisions'); console.log(layer); layer.resizeWorld(); map.setCollision(515,true); game.physics.p2.convertTilemap(map, layer); player = game.add.sprite(1100, 800, 'cars'); game.physics.p2.enable(player,true);; cursors = game.input.keyboard.createCursorKeys(); } I do not understant why there is not collisions between my player and my collisions layer. thx for your help.
  14. I can't understand why this is happening so please help me out. For some reason when i run this program at my home PC it will load a black screen. When I load the exact same files on a PC at my University it will run normally from using those exact files where it DID NOT work at my home PC. If anyone could shed some light into why this error is there and give a fix it would be great. Error: Uncaught TypeError: Cannot read property 'x' of undefined(…) P.s All files included in the ZIP. Test Game Phaser.rar
  15. Since my previous post I have been wondering on how I can map tiles myself within Phaser using the slopes plugin. If I wanted to include tiles such as "hills" or different sorts of slopes, are there any good tutorials out there that explains this? It would be very beneficial to the game I am creating. I am using 32x32 tiles with arcade physics. I've read in this file I downloaded about a "Arcade Slopes converter" which I'm unsure about. I've included the current tile sheet I created and using to test things out as well as the full code. Any help is appreciated! This is my current code for the mapping of my tiles.,{ 1: 'FULL', 2: 'FULL', 3: 'FULL', 4: 'FULL', 5: 'FULL', 6: 'FULL', 7: 'FULL', 8: 'FULL', 9: 'HALF_TOP', 10: 'FULL', 12: 'FULL', 13: 'HALF_BOTTOM_LEFT', 14: 'HALF_BOTTOM_RIGHT', 15: 'HALF_BOTTOM_LEFT', }); Test Game Phaser.rar
  16. I'm currently having this issue when I am trying to get a sprite to go up a slope within phaser using the phaser-arcade-slopes.min.js plugin. I am using a .csv tilemap also with a tile size of 32x32. I'm unsure if my names are just incorrect or I am using the wrong type of file for the tilemap itself. I have been getting errors such as - Tilemap.createLayer: Invalid layer ID given: null & Cannot read property 'resizeWorld' of undefined(…). Any help would be much appreciated. "snow_tiles_32.png" is the name of the tileset I created and I'm using "tiles.csv" the tilemap created inside Tiled. I've also included a .rar file of everything to do with the game if anyone decides to take a further look into this issue. HTML var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() {'tilemap', 'assets/tilemaps/csv/tiles.csv', null, Phaser.Tilemap.CSV);'tiles', 'assets/tilemaps/tiles/snow_tiles_32.png', 32,32);'player', 'assets/penguin.png', 32,48); } var player; var cursors; function create() {;; cursors = game.input.keyboard.createCursorKeys(); ='tilemap');'snow_tiles_32', 'tiles'); = '#80e3ff'; this.ground ='collision'); this.ground.resizeWorld();,{ 2: 'FULL', 3: 'HALF_BOTTOM_LEFT', 4: 'HALF_BOTTOM_RIGHT', 6: 'HALF_TOP_LEFT', 5: 'HALF_TOP_RIGHT', 15: 'QUARTER_BOTTOM_LEFT_LOW', 16: 'QUARTER_BOTTOM_RIGHT_LOW', 17: 'QUARTER_TOP_RIGHT_LOW', 18: 'QUARTER_TOP_LEFT_LOW', 19: 'QUARTER_BOTTOM_LEFT_HIGH', 20: 'QUARTER_BOTTOM_RIGHT_HIGH', 21: 'QUARTER_TOP_RIGHT_HIGH', 22: 'QUARTER_TOP_LEFT_HIGH', 23: 'QUARTER_LEFT_BOTTOM_HIGH', 24: 'QUARTER_RIGHT_BOTTOM_HIGH', 25: 'QUARTER_RIGHT_TOP_LOW', 26: 'QUARTER_LEFT_TOP_LOW', 27: 'QUARTER_LEFT_BOTTOM_LOW', 28: 'QUARTER_RIGHT_BOTTOM_LOW', 29: 'QUARTER_RIGHT_TOP_HIGH', 30: 'QUARTER_LEFT_TOP_HIGH', 31: 'HALF_BOTTOM', 32: 'HALF_RIGHT', 33: 'HALF_TOP', 34: 'HALF_LEFT' });,34, true, 'collision'); //player this.player =,50,'player');; this.player.body.bounce.y = 0.2; this.player.body.gravity.y = 2000; this.player.body.collideWorldBounds = true; this.player.animations.add('left', [0,1,2,3], 10, true); this.player.animations.add('right', [5,6,7,8], 10, true);;; } function update() {, this.ground); this.player.body.velocity.x = 0; if(cursors.left.isDown){ this.player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown){ this.player.body.velocity.x = 150;'right'); } else{ this.player.animations.stop(); this.player.frame = 4; } if(cursors.up.isDown && player.body.onFloor()){ this.player.body.velocity.y = -350; } } Test Game Phaser.rar
  17. I'm creating a tilemap game using both phaser and tiled. As shown in the printscreen, I create the tilemap in tiled and everything looks fine. I then feed the tilemap json to phaser and somehow it renders it with some gaps between objects. Any thoughts on where are these gaps coming from and how to eliminate them?
  18. How to render tiles only when needed

    Hello. I am using phaser and its isometric plugin. I have generated a tilemap using a for loop in order to render a single tile sprite multiple times. However when the map is too big the performace gets affected dramatically. I would like to know how can I render the tiles only when the camera that follows my character moves and goes another areas. Can someone explain the process of pooling? What commands should I use? Do I need to set a bound or something similar that matches my camera and use outOfBounds.kill? I have tryed lots and nothing seems to work. Thank you
  19. Drawing Tiles in a Tilemap

    I like the look of this library but all the abstractions confuse me. In fact, I remember finding pure WebGL simpler to work with than this. I have a spritesheet of tiles. I'd like to be able to group these tiles into meshes and as far as I understand, that involves just adding them as Sprite objects to a Container or ParticleContainer. I could create a Sprite object for every single instance of a tile but it seems like a terrible waste. (I store the tile IDs in an array, not that this should matter.) What's an efficient way of rendering a tile map? Thanks!
  20. How Camera works ?

    Hello ! I'm currently making a custom engine in JavaScript (canvas). I already did sprites, particles, events (touch, keyboard, mouse) and a basic script to render tilemaps (no scrolling yet) I want to code the scrolling, camera and world system. If I create a game with a world of 30,000 pixels width and 15,000 pixels height, and my camera is in 800x and 800y for exemple; should I: -Call render and update functions for every element in the world (even if they are outside the canvas) -Get elements who are in the camera to update and render them. - Should I do something else ? What is the best thing to do ? Thanks
  21. Hi there, guys, I have a question about arcade physics (I guess I´m missing something...) [9:09] I´m having a problem with my hero colliding with the tilemap. Everything works perfectly except if the hero is standing, then the collide simply "doesn´t happen", if the hero runs, she collides but if she´s standing on a platform (hero speed = 0 and platform speed = whatever) nothing happens. See attached gif for a better explanation
  22. Problem with loading tilemap

    Hello, I have a problem with loading JSON file on my game to make a world. This is a files: What is the problem??? How to fix this problem?
  23. I found this ^ for looping through all the map. However, I just want to count how many tiles are there at the moment. Any help will be helpful friends.
  24. Phaser Arcade Slopes Plugin

    Hello everyone! I thought I'd share something I've been working on for the past few weeks. A plugin for Phaser that provides collision handling for sloped tiles and half tiles, similar to Ninja Physics but somewhat more concisely. Check it out on GitHub, give it a whirl, let me know what you think! Github: Demo: It's still early days for this project, as I've only just released v0.1.0-alpha today, but I look forward to continuing fleshing it out. Why did I make this? I've been intending to make a 2D platformer with Phaser for ages, and I knew I wanted it to have sloped tiles to allow for a liberating way to traverse the Y axis, but I couldn't find anything that worked the way I want it to. I experimented with Ninja Physics, but it's deprecated and its limitations left me wanting. I tried P2, but it was too much in terms of physics for me, and I didn't want to tame a beast like that. I started searching these forums to see if anyone had managed to get sloped tiles working in Phaser, with some success, but not completely. The solutions wouldn't allow for completely free tile placement, and they just stuck physics bodies to the slopes and left it at that. So, with a somewhat limited understanding of the maths I'd need to learn to achieve what I wanted, I started reading tutorials about the Separating Axis Theorem (SAT), particularly the ones from Metanet and one I found magically through a Google search. After experimenting with SAT.js in Phaser, I decided that I could totally pull off my own plugin to solve this the way I wanted it to be. With lots of learning, but with a clear vision of how I wanted the plugin to work, this is what I've managed! I have lots more features planned, as you can see in the roadmap, but for now I'm just glad I've built something that can be plugged straight into any Arcade Physics project that just works. Screenshots
  25. top-down Tilemap terrain borders

    What is the smart way to do top-down tile terrain borders in Phaser? You can't see hard-line tile edges if you look at basically any top-down game with tiles (Sid Meier's Colonization, Rimworld, Civilization 2, Heroes of Might & Magic); there are a few pixels between the tiles that get merged which makes the image as a whole look more or less seamless. Using Phaser, it looks to me like manipulating and rendering a large tile-based game map/board should probably make use of Tilemaps. However, the examples all look like the tilemap tiles do not overlap at all. I can see how you could make a complete set of intermediate/edge/border tiles if your tileset only had a couple types of terrain on a single tilemap. Assuming that you rotate tiles when needed then such a tileset requires you needing something like a straight edge, an inner corner, an outer corner, and a pocket (bordered on 1, 2, 3, or 4 sides) for every terrain combination. For 2 terrains, that is only 4 border tiles. For 3 terrains, that is 12 border tiles. For 4 terrains, that is 24 border tiles. ... For 16 terrains, that is 480 border tiles! This is clearly unsustainable. So what is the solution? Is it possible to use a negative margin and positive spacing in the Tileset? Do you use a second TilemapLayer with partially transparent border tiles (so you only need some border tiles per terrain instead of per terrain combination)? Do you manually load images instead of using the Tilemap objects/functionality?