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 3
    • Phaser 2
    • 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 75 results

  1. I'm making my levels with Tiled and my tiles are 32x32. I would like to use different size tiles in my game depending on the screen size but I can't get 64x64 tiles to line up. Is there a way to change the map's tile size in Phaser?
  2. Hi all, I need advice on which approach is best for my problem: Setup: 1. I'm using Tiled and tiles sets to create platforms for the player to jump on 2. Each platform is made of 32x32 tiles and can have any shape, like in tetris. (line-shaped, "L"-shaped, 2x2 block, and so on) 3. A level can have up to 50 platforms Desired outcome: I want is to know when the player has touched every tile of a platform. E.g. a platform has 5 tiles and after the player collided with all of them I want to call a function. What would be the best way of doing this? Solutions considered: 1. Have one layer per platform and get all tiles in each layer once the player touches the first tile. Then have a boolean on each tile, and substract the total touched tiles from the total tiles in the layer. When zero, call the function 2. Have some function that looks for adjacent tiles to the one touched by the player. Are there any better solutions? Thanks
  3. Hi! My name is Andrei and I am looking for a pixel artist to help with my hobby game project. The game I'm working on is called Feudal Tactics and it is a multiplayer turn-based wargame, similar to Advance Wars. You can find out more about Advance Wars on Wikipedia: Advance Wars - Wikipedia. Feudal Tactics will be a completely free browser game built on HTML5 & JavaScript, with asynchronous play mechanics. I am looking for a pixel artist that can draw low-res terrain tiles, military unit sprites (with animations), a logo for the game and a favicon for the website. The graphics must have an old, feudal period Japan look & feel. I can provide three sources of inspiration so that you can better understand what type of art I want: first, the pixel art of EyeCraft posted on the Pixelation forums, which is pretty much exactly what I'm looking for: GR#060 - Super Daimyo - Low Res Game Art; check his last posted images on the 4th page of the topic or open the following direct links: second, Toen's Medieval Strategy Sprite Pack: a lovely graphics pack which I'm actually using as a placeholder for now and last but not least, the original Advance Wars graphics: a quick search for the terms "advance wars gba screenshots" will get you plenty of results (you can also find the entire spritesheet ripped from the game) I am looking to pay around 30$ per hour or I can pay per asset. Please note that I am looking for just one person for this job and it will not be full-time employment. If you are interested please drop me a message: It would be great if you could provide me with a link to your portfolio and showcase some work in a style similar to what I'm looking for (low-res top-down tiles & sprites). If you can only work on the game graphics, or only on the logo, but not both, please state so in your email. Thanks for reading this and have a nice day!
  4. 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.
  5. 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!!!
  6. 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?
  7. 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:
  8. 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.
  9. 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
  10. 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
  11. 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
  12. 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!
  13. 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?
  14. 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)); }
  15. new Phaser game Koala Rumble

    I made a new "mini tile" game using Phaser
  16. 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.
  17. 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
  18. 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
  19. 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
  20. 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?
  21. 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
  22. 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!
  23. 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
  24. 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
  25. 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?