Search the Community

Hello there I’ve built a map with Tiled with a tileset built from an images collection. So, I would to know how to load this tileset in my scene? Here where I am in my code work: export default class PreloadLevel1 extends Phaser.Scene { //... preload() { for (let i = 1; i < 101; i++) { const num = i.toString().padStart(3, '0'); this.load.image('objects' + num, 'assets/img/tiles/objects' + num + '.png'); this.load.image('tiles' + num, 'assets/img/tiles/tiles' + num + '.png'); } this.load.tilemapTiledJSON('tileset', 'assets/json/levels/level1.json'); } //... } export default class Level1 extends Phaser.Scene { //... create() { this.tilemap = this.make.tilemap({ key:'tileset' }); for (let i = 1; i < 101; i++) { const num = i.toString().padStart(3, '0'); this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'objects' + num)); this.tilesets.push(this.tilemap.addTilesetImage('tileset', 'tiles' + num)); } //... } //... } But I finish with the warning in my console: No data found for Tileset: tileset Here an extract of my level1.json file: "tilesets":[ { "columns":0, "firstgid":1, "grid": { "height":1, "orientation":"orthogonal", "width":1 }, "margin":0, "name":"tileset", // <----- there "spacing":0, "tilecount":173, "tileheight":64, As you can see, the name of my tileset is right. And another extract of this same file to see you how my tiles array is built: "tiles":[ { "id":404, "image":"..\/..\/img\/tiles\/objects001.png", "imageheight":17, "imagewidth":13 }, { "id":405, "image":"..\/..\/img\/tiles\/objects002.png", "imageheight":19, "imagewidth":20 }, { "id":406, "image":"..\/..\/img\/tiles\/objects003.png", "imageheight":35, "imagewidth":22 }, { "id":407, "image":"..\/..\/img\/tiles\/objects004.png", "imageheight":40, "imagewidth":43 Is somebody to help me?

Hi guys, I've been making a game project recently which I wanted to add some relatively basic lighting effects to. I really struggled with anything I found online and basically everything seems broken. After researching alpha masking and texture rendering at runtime I've come up with a demo which finally puts the entire piece together so people can use it. I really hope this makes a difference to peoples learning experience, their games and their appreciation for PixiJS. I welcome any mods to the pen as I'm not the best at writing super hot JS, I just want it to work. The demo includes moving a light cookie, changing its alpha, and overlaying a rectangle to emulate day/night - all which blend together nicely. The code can be found here: Thanks a lot guys, Some footage inside a working game demo can be seen here: And some more of my game concept can be seen here: This is the effect it has when used as lighting in my game, keeping in mind i have extra shadows on the tileset: Jammy.

Hi, I'm Lewis, a freelance pixel artist looking to work on your great project. I've worked on a wide variety of projects boasting pixel art styles, but also projects involving clean vector art and all including smooth animation. My skills are: Pixel art Vector art Animation GMS 2.3 platformer programming (2D) Video editing Projects I've worked on/am involved with include: Kyle & Lucy animating and creating environment art, Sonic Studio (a fan game made in GM), Sonic 2 HD (fan game) creating enemies and environment art, Freedom Planet 2 creating backgrounds and stage art, and more. I'm available for hire! Contact me at [email protected] or message me via a PM. Enjoy some examples of my pixel art below: If you are interested in my work, feel free to contact me at [email protected] or in a PM. Thanks for taking a look, Lewis.

Available Now! Over 90 items in one huge bundle (Character Sprite, GUI, Game Kit, Platformer) 2D Game Art Bundle – 2017 New Year Bundle Items that noted “Sold by Tokegameart” presented in one huge bundle “2D Game Art Bundle – 2017 New Year Bundle” Over 90 items are included. Character Sprite Alien Boss Sprite Android Boss Big Hands Robot Bob The Caveman Brock From The Metro Squad Castle Guard Sprite Chibi Knight 01 (The White Bull) Chibi Knight 02 (The Roman Knight) Chibi Knight 03 (The Golden Helmet) Chibi Knight 04 (The Gladiator) Chibi Muscular Viking Christopher The Police Dungeon Bosses Dungeon Guard Sprite Evil Bot Character Sprite Genki and Dragon Sword Sprite George From The Space Squad Sprite Ghost 01 Good Boy Jack The Thug Jake Adventurous Boy Jane Adventurous Girl Joana From The Metro Squad Joe From The Metro Squad Karen From The Metro Squad Micro Style Character – Arabian Executioner Micro Style Character – Chinese King Micro Style Character – Roman Knight Mike The Counter Terrorist Priest – Tiny Style Character Pumpkin Ghost Skull Knight Skull Warrior Super Black Cat Super Boy Super Cat Super Monkey The Executioner The Shaman Tiny Armored Samurai Tiny Army – Sam Tiny Australian Soldier Tiny Chinese Soldier Tiny Cowboy Tiny Crystal Monster Tiny Guy – Arnold Tiny Ice Monster Tiny Knight Tiny Lava Monster Tiny Mummy 01 Tiny Mummy 02 Tiny Rock Monster Tiny Style Character – Barbarian Tiny Style Character – King Tiny Style Character – Knight Tiny Style Character – Pirate Tiny Style Character – Skull Tiny Style Character – Witcher Tiny U.S Soldier Tom The Police Viking – Tiny Style Character Zombie 01 – Scar Forehead Zombie Zombie 02 – Anime Zombie Zombie 03 – Meat Clever Zombie Wife Zombie 04 – G.I. Joe Zombie Zombie 05 – Exposed Brain Zombie Warrior – Tiny Style Character Bad Piggy Fairy Tiny Stlye Character Goblin Tiny Style Character Wizard Tiny Style Character Archer Tiny Style Character Ogre Tiny Style Character Ninja Tiny Style Character Super Bunny Super Panda Cartoon Enemy Pack 01 Cyclop Tiny Style Character Gold Miner Tiny Style Character Game Kit Jetpack Buddy GUI Classic GUI Snowy GUI Stone Age Themed GUI Western Game UI Cartoon RPG GUI Tileset Cartoon Town Egyptian Tileset Fantasy Tileset Snowy Platformer Game Tileset Spaceship Game Platformer Top-Down Dungeon Platformer Tileset Top-Down Forest Tileset Top-Down Snowy Game Tileset DOWNLOAD NOW! Visit : http://tokegameart.net/ Facebook : https://www.facebook.com/tokegameart/ Contact : [email protected]

In Tiled (1.1.3) you can make a layer that includes multiple different embedded tilesets. The resulting JSON has an array in the tilesets property. See complete example https://pastebin.com/jYP4buQc . I can't get this to load in Phaser. I've tried several things, but anything after the first tileset throws an error one way or another. Here's the latest attempt: function preload() { this.load.tilemapTiledJSON('map', '/maps/phaserTest.json'); this.load.image('phaserTestImg', '/maps/phaserTest.png'); this.load.image('Door0', '/maps/Door0.png'); this.load.image('Floor', '/maps/Floor.png'); this.load.image('Wall', '/maps/Wall.png'); } function create() { var map = this.add.tilemap('map'); var tileset = map.addTilesetImage('Wall', undefined, 16, 16, 0, 0, 1); var tileset2 = map.addTilesetImage('Door0', undefined, 16, 16, 0, 0, 2); var tileset3 = map.addTilesetImage('Floor', undefined, 16, 16, 0, 0, 3); var layer = map.createStaticLayer(0, tileset); var layer2 = map.createStaticLayer(1, tileset2); var layer3 = map.createStaticLayer(2, tileset3); //debugger; var graphics = this.add.graphics(); //[...] (I've also tried using map.createStaticLayer with the string name of the layer from Tiled JSON, this is just the latest failed experiment.) My guess is this isn't supported and I have to create my maps differently in Tiled, but I am brand new to Phaser and I might just be missing something obvious. Back in 2013, Rich seemed to say it wasn't supported but 2013 is quite a long time ago and I know a lot has changed with tileset handling since then. So my questions: 1) Can you make a map in Tiled that has multiple (embedded) tilesets in a single layer, and use that JSON from Phaser successfully? If so, can I get a hint on how to do this correctly? 2) If this isn't supported, what is the best alternate approach in Phaser 3? Two things that occur to me are making a Tiled map that has a separate layer for each tileset, or combining lots of little tilesets together into a mechagodzilla tileset so I can lay out a whole bunch of features in a single layer. Or something different. Opinions?

Kaetram Kaetram is an open-source game-engine created to aid those interested in entering the game development realm. The codebase is simple, clean, and intuitive. This project is intended to be used as a learning tool. The original idea is based on Little Workshop's demo game – BrowserQuest (BQ). This game uses original BQ assets as well as custom-made ones. The entire code-base has been written from scratch, using more modern approaches. GitHub Repo – https://github.com/Veradictus/Kaetram-Open Live Version – https://kaetram.com Join us on Discord – https://discord.gg/MmbGAaw Patreon – https://www.patreon.com/kaetram Features BQ was intended as an experiment to showcase HTML5 capabilities, since then, technology has only served to advance. Kaetram contains a lot of ideas and features that builds on top of its predecesor, a couple are: Multiplayer using Socket.IO Enhanced rendering engine (includes dynamic lighting, overlays, animated tiles) Region system (client receives only necessary data and saves it) Questing and achievements system. Plugin-based combat system (for bosses/special enemies). Supports RESTful API. Discord server integration. Cross-server private messaging and interactions. And much more Regions The region system sends data to the client according to the map data of the server. The collisions are checked both server-side and client-side to avoid cheating. The region system makes use of dynamic tiles, which are unlocked according to a player's progress. Furthermore, there is integrated support for instancing, where we can use a section of the map (or clone it) and reuse it for certain groups of players. The instancing is perfect for activities such as minigames, where we will want to run multiple instances in parallel. Tilemap Kaetram is built with modularity in mind, as such, the client supports multiple tileset parsing. The tilemap can easily be constructed using Tiled Map Editor. Using our map parsing tool you can easily export your creation to both the client and the server. Kaetram Hub There is also support for a hub server. This can help connect servers across one another, allowing players to interact with their friends across them in a variety of ways (private messaging and guilds). Furthermore, the hub serves as a gateway for determining what server to place players in. If a server is full, it simply returns another server that has room for the player.

I am creating a platformer with Phaser3 and I am using Matter for my physics engine. I have loaded my tilemap/set into the world, however, I don't know if the collisions are working because since I have added in this code, my sprite has disappeared. Why is this? How do I get my sprite to appear again so that I can make sure he collides with the tiles? //Create tilemap const map = this.make.tilemap({key: 'map'}); //Create tileset const tileset = map.addTilesetImage('tiles'); const platforms = map.createDynamicLayer(0, tileset, 0, 0); map.setCollisionByExclusion([-1, 0]); this.matter.world.convertTilemapLayer(platforms); //Update the game at 30Hz this.matter.world.update30Hz(); //Get hitboxes this.shapes = this.cache.json.get('shapes'); //Set boundaries for physics this.matter.world.setBounds(0, 0, game.config.width, 750); //Player this.hero = this.matter.add.sprite(0, 0, 'sheet', 'run_right/0013', {shape: this.shapes.s0013}); //Don't want him rotating in the air this.hero.setFixedRotation(); //Set our variable to do calculations heroSize = this.hero.width;

Collision works with single Sprite and the Map, but it doesn't with objects created with function createFromObjects. The callback function never displays the console.log() message. The sprites move through the tiles, never colliding with the map. I'm new to phaser3, so maybe I'm missing something. Here's the code: preload() { this.load.image('tiles', 'assets/levels_tileset.png'); this.load.tilemapTiledJSON('level1', 'assets/maps/map1.json'); this.load.spritesheet('player', 'assets/dude.png', {frameWidth: 32, frameHeight: 48}); this.load.spritesheet('enemies', 'assets/spritesheet_enemies.png', {frameWidth: 47, frameHeight: 47}); } create() { var map = this.make.tilemap({ key: 'level1' }); var tiles = map.addTilesetImage('levels_tileset', 'tiles'); this.layer = map.createDynamicLayer('blocks', tiles, 0, 0); this.layer.setCollisionByExclusion([-1]); this.player = this.physics.add.sprite(100, 450, 'player'); this.player.setBounce(0.2); this.player.setCollideWorldBounds(true); this.player.body.setGravityY(300); this.physics.add.collider(this.layer, this.player); this.right = true; this.enemies = this.physics.add.group(); this.enemies = map.createFromObjects('enemies_objects', 'enemy1', { key: 'enemies' }); this.enemies.forEach((child) => { if(child instanceof Phaser.GameObjects.Sprite) { child.setFrame(4); } }); this.physics.add.collider(this.enemies, this.layer, this.bounce, null, this); } update() { this.enemies.forEach((enemy) => { if(enemy instanceof Phaser.GameObjects.Sprite) { if(this.right === true) { enemy.x += 1; } else { enemy.x -= 1; } } }); } bounce() { console.log("Collision!"); if(this.right === true) { this.right = false; } else { this.right = true; } } How can I fix this?

Hello, I made a script to draw map from dungeon keeper game. I use the tileset extract from the game to draw it. Just for fun =) To draw the full map i need a huge stage of 8160x8160. (85*3*32px) So i draw only a part of map. But CPU up to 100% when i move mouse or keyboard... I use chrome and the last release of pixijs 4.7 I don't unsterdand. Can you help me to optimize my script ? Sorry, i don't speak english very well... Project.zip

Hi, I want to ask how to collide sprite with a tile in layer on map created in tiled. So far I have this, but it doesnt work /* global demo, game, Phaser */ demo.stateMaze = function(){}; var ball; var playerSpeed = 3; var map; demo.stateMaze.prototype = { preload: function() { game.load.tilemap('map-maze', 'assets/maps/hole_in_a_park/maze/mapa.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tileset-maze', 'assets/maps/hole_in_a_park/maze/tileset.jpg'); game.load.image('ball','assets/imgs/gula.png'); }, create: function() { game.stage.backgroundColor = '#FFFFFF'; //Starting physics game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('map-maze'); map.addTilesetImage('tileset','tileset-maze'); //CallBACK map.setTileIndexCallback(15, this.collisionHandler(), this); normal = map.createLayer('normal'); normal.resizeWorld(); wall = map.createLayer("wall"); wall.resizeWorld(); normal.renderSettings.enableScrollDelta = true; wall.renderSettings.enableScrollDelta = true; ball = game.add.sprite(0, 80, 'ball'); ball.anchor.setTo(0.5, 0.5); //Enabling ball physics game.physics.enable(ball); game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; game.input.onDown.add(function(){ if (game.scale.isFullScreen) { game.scale.stopFullScreen(); } else { game.scale.startFullScreen(false); } }); }, update: function() { //Collide game.physics.arcade.collide(ball, wall); if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { ball.scale.setTo(1, 1); ball.x += playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { ball.scale.setTo(-1, 1); ball.x -= playerSpeed; } if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { ball.y -= playerSpeed; } if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { ball.y += playerSpeed; } }, collisionHandler: function() { console.log("COLLISION!!!"); } }; But it never write COLLISION!!! so can anyone tell me what to do ?

Thanks for your help, anyone who can spare the time. I've been digging around other threads and have found similar issues but not specifically what's happening to me, and I haven't found a solution yet. Basically Phaser is rendering the wrong tiles when I load my tilemap and tileset image. I'm using a tileset image that is 512/512, divided into a tileset with 16 rows and 16 columns of 32/32 tiles. My tilemap tiles are 32/32. I load the tilemap json object, and the image, as I'm supposed to, and then in the create function create the layers and add the sprite. My sprite is colliding with walls, but the tilemap looks like the tiles are simply a few tiles over from the index of the tiles I placed when I made my map. Everywhere I've read says this is a problem with the tileset not being divisible by the map tiles height/width but that's clearly not the case here. Other people say it's a problem with phaser's implementation of tilemaps, but I can't figure out how to fix the problem short if editing the json by hand which seems stupid. No discernible effect is observed when I change the firstgid in the json, either. Some code: function preload() { game.load.tilemap('map', 'maps/wintertest32.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('wintertest32', 'img/snowy.png'); game.load.image('player', 'img/singlebunny.png', 32, 32); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('wintertest32', 'wintertest32'); backgroundLayer = map.createLayer('backgroundLayer'); platformLayer = map.createLayer('platformLayer'); groundLayer = map.createLayer('groundLayer'); foregroundLayer = map.createLayer('foregroundLayer'); groundLayer.resizeWorld() map.setCollisionBetween(1,6000, true, groundLayer, true) player = game.add.sprite(32, 32, 'player'); player.frame = 1 and so on... }

I created a map/level in JSON with "tiled map editor" which uses a tileset. Fot the JSON file look in the attachment. Now in code loop through the JSON and try to create the level/map. Problem is that it renders the same tile and not the different ones. If I run per layer it's ok (l=1, l<2), If I add the layer loop it renders with only 1 tile...(see attached image, there should be different walls) I tried several things. It looks like pixi does create all sprites with same tile? Many thanks Raymond // load json var level = require('../map/level1.json'); var tileHeight = level.tileheight; var tileWidth = level.tilewidth; var layers = level.layers; var height = level.height; var width = level.width; var tileset = PIXI.utils.TextureCache["./images/terrain.png"]; for(var l = 1; l < 5; l++ ) { // Layer var data = layers[l].data; for(var i = 0; i < data.length; i++) { // Postition on screen var y = i / height | 0; var x = i % width | 0; // Which tile we should use if( data[i] != 0) { var tileRow = (data[i] / 32) | 0; var tileCol = (data[i] - (tileRow * 32))-1 | 0; console.log('texture -> row: ' + tileRow + ' col: ' + tileCol + ' width: '+tileWidth+ 'tileHeight: ' + tileHeight); var rectangle = new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight); // x, y, w, h tileset.frame = rectangle; var layer = new PIXI.Sprite(tileset); layer.x = x * tileHeight; layer.y = y * tileWidth; this._game.stage.addChild(layer); } } } level1.json

Hey guys, I'm having trouble swapping tiles in a Tilemap. In all the examples it seems like to get a tile object (to pass into map.putTile) it has be selected from an already instantiated tile that's part of the map. What I'd like to do is create a new tile from the map's tileset. Is this possible?

I am developing a game using phaser. I wanted to add a feature where user will get alert before any obstacle comes. I am planning to assign a property, "jump": true, to a tile or an object. Is there any way to read this property of the tile that user is passing by. I am following this tutorial for game development - https://software.intel.com/en-us/html5/hub/blogs/how-to-make-a-sidescroller-game-with-html5/. Is there any other better way to achieve this? Your suggestions/ code snippets will be helpful. Thanks

Hello everyone, I need help, i want display an element of a tileset, but i don't understand how to do that. function preload() this.game.load.image('stone', 'assets/tiles/tiless.png'); function create() this.stone = this.game.add.image(720, 78, 'stone'); i guess , i need a key or other but i don't understand how write and found this key. my tileset is 32*32

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)

Hello all, I am currently trying to make a simple platformer, but am having trouble detecting collision with a tile layer. After looking through many of the other forum posts here about this problem, none of the fixes seem to work for me. 'World 1' layer is the background and 'Collision' is the layer that contains the platforms. To my understanding, I should just be able to use map.setCollisionBetween() on the tiles that I want to use as the ground, which I think I did correctly. I also made sure to enable physics for the player and the collision layer. For some reason, though when I console.log(game.physics.arcade.collide(player, col)), it always returns false. When I run console.log(player.body.blocked), it only returns true when the player is on the window boundary (because of collideWorldBounds=true). Can anyone see what I'm doing wrong? var game = new Phaser.Game(800, 480, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('bgmap', 'assets/tilemaps/maps/superMarioBG.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('bgtiles', 'assets/tilemaps/tiles/super_mario.png'); game.load.image('player', 'assets/sprites/georgeRight.png'); } var map; var bg; var col; var player; var cursors; var jumpButton; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#787878'; map = game.add.tilemap('bgmap'); map.addTilesetImage('SuperMarioBros', 'bgtiles'); bg = map.createLayer('World1'); bg.scale.set(2); bg.resizeWorld(); col = map.createLayer('Collision'); col.scale.set(2); game.physics.arcade.enable(col); map.setCollisionBetween(1,40,true,col); col.resizeWorld(); player = game.add.sprite(0,game.world.height - 150,'player'); player.scale.set(1.5) ; player.anchor.setTo(.5,.5); cursors = game.input.keyboard.createCursorKeys(); jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); game.physics.arcade.enable(player); player.body.bounce.y = 0.2; player.body.gravity.y = 500; player.body.collideWorldBounds = true; } // function update() { game.physics.arcade.collide(player, col); player.body.velocity.x=0; game.camera.follow(player); if (cursors.left.isDown) { player.body.velocity.x -= 500; } else if (cursors.right.isDown) { player.body.velocity.x += 500; } if (jumpButton.isDown && player.body.onFloor()) { player.body.velocity.y = -550; } console.log(player.body.blocked); } function render() { } };

I am having trouble figuring out how to do a scrolling background using multiple background images. These images are not overlayed to create a parallax effect, but rather next to each other to create a changing background scene. My background is created using 20 different images who's order must be dynamically changed as the background scrolls. So I can start with A,B,C showing and as it moves I need to remove A and add D after C...and so forth. I tried using tweens, but it is almost impossible to to place the next image at the correct starting position without gaps forming between the images. I have tried using a tileSprite, but I can only figure out how to add a single texture to the tileSprite. I tried creating a texture dynamically using bitMapData and copying a image sequences to the texture and then scrolling the texture using a tileSprite, but that does not allow me to dynamically change the next image that should appear based on whatever is happening in the game. Also I have read that tileSprites have performance issues on mobile. In another post on this form Rich suggests doing the following: http://www.html5gamedevs.com/topic/3218-continuously-scrolling-background/ I have tried this by adding my stating ABC images next to each other in a group and then moving the group, but all that happens is that the group moves off the screen after a while. Could someone please explain to me how to implement what Rich suggests above? Or any other method to achieve my desired result?

Hi to you all. Hi have a question. I'm making a platformer game using phaser and , for now, arcade physics. I make my level in Tiled and export them in JSON. I noticed that since Tiled work with png tileset and that tiles are square. My character do not detect a slope or slante corner. It stands on a invisible cube border. What i was wondering is, is it possible for phaser to detect slanted slope using arcade or should i move to P2JS. Also how do I tell phaser to ignore the transparent part and collide only with the image? I tried making object layer coutouring all the platform for a more precise collision but it seems i'm not able to create a collision layer with a Tiled object layer. or maybe i'm doing it wrong. function create() { map = game.add.tilemap('niveau2'); map.addTilesetImage('tileset','background'); map.addTilesetImage('hints','hints'); backgroundLayer = map.createLayer('background'); collisionLayer = map.objects.evenement.find( o => o.name == 'platform'); collisionLayer.visible = false; console.log(collisionLayer); map.setCollisionByExclusion([],true,collisionLayer); collisionLayer.resizeWorld(); //map.setCollision(1) player = game.add.sprite(32, game.world.height - 150, 'star'); game.physics.arcade.enable(player); player.body.collideWorldBounds = true; player.body.gravity.y=10050; // Our controls. cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(player, collisionLayer); //more code }

Hello all! I was trying to trim the collision size of one tile in Tiled, but then in Phaser the body of that tile it's the same. Does anyone know if is it possible to use Arcade Physics from phaser to get the trimmed collision size of the grid? I am waiting for your response. Thank you so much tilemapAux.json tilemapAux.tmx

I've been creating a flying game in phaser yet I'm having issues with collision and any answers I've found online are of no use. My game js is this: window.onload = function() { var map; var layer; var sprite; var cursors; var game = new Phaser.Game(500, 160, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('tilemap', 'level.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'tilesheet.png'); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#a9f0ff"; //game.add.sprite(0, 0, 'sky'); map = game.add.tilemap('tilemap'); map.addTilesetImage('tiles', 'tiles'); groundLayer = map.createLayer('GroundLayer'); map.setCollisionBetween(1, 100); //backgroundlayer = map.createLayer('BackgroundLayer'); groundLayer.resizeWorld(); groundLayer.debug = true; sprite = game.add.sprite(0, 0, 'player'); sprite.anchor.set(0.5); // sprite.body.bounce.y = 0.1; // sprite.body.gravity.y = 2000; // sprite.body.gravity.x = 20; // sprite.body.velocity.x = 100; // TODO: add animations game.physics.enable(sprite); game.camera.follow(sprite); cursors = game.input.keyboard.createCursorKeys(); } function update() { game.physics.arcade.collide(sprite, groundLayer); game.physics.arcade.TILE_BIAS = 40; sprite.body.velocity.x = 0; sprite.body.velocity.y = 0; sprite.body.angularVelocity = 0; if (cursors.left.isDown) { sprite.body.angularVelocity = -200; } else if (cursors.right.isDown) { sprite.body.angularVelocity = 200; } if (cursors.up.isDown) { game.physics.arcade.velocityFromAngle(sprite.angle, 200, sprite.body.velocity); } } function render() { game.debug.body(sprite); } }; and my tilemap json is this: { "height":10, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"BackgroundLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }, { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 401, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"GroundLayer", "opacity":1, "type":"tilelayer", "visible":true, "width":100, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tileheight":16, "tilesets":[ { "columns":50, "firstgid":1, "image":"tilesheet.png", "imageheight":1280, "imagewidth":800, "margin":0, "name":"tiles", "spacing":0, "tilecount":4000, "tileheight":16, "tilewidth":16, "transparentcolor":"#5a5268" }], "tilewidth":16, "version":1, "width":100 } yet no matter what I try, the player just wont collide with ANY of the sprites. What could be the issue?

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?

Hi everyone, we're team of game designers and we created site with free game assets. You can to use for commercial projects as well as non-commercial ones. https://craftpix.net/freebies/ No attribution or link back to this site is required, however any credit will be much appreciated. We update a collection every week.

Hi there. I'm new to PIXI.js - started few days ago by reading whole step-by-step guide on the official github. Basically I tried to render my tiled map and got stuck. To specify my problem: I've got an image "tileset.png" that stores tiles (each 32x32 pixels, the whole image is 128x32 which probably doesn't matter). I've got an JSON file that stores information about each tile (coordinates where to take each tile from - x, y, width, height, and also some other properties). I've got a regular two-dimensional array that simulates the map. For example: var map = [ [2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 2, 2, 2, 2, 2], ]; I'll skip the init and assignments. Now I consider the main problem to be my approach (which I also consider very convenient and easy) - in a double "for" loop I read the map array and I add each tile to the stage. The code for that looks something like this: var texture = loader.resources["tileset"].texture; var s; for rows for cols // I frame the texture to get the tile I'm interested in // for example air (x: 0, y: 0) or the ground (x: 64, y: 0) texture.frame = new PIXI.Rectangle( 64, 0, 32, 32 ); // create sprite out of the framed texture s = new PIXI.Sprite( texture ); // add the sprite to the stage stage.addChild( s ); // Anakin vs Luke texture.frame = new PIXI.Rectangle( 32, 0, 32, 32 ); Now the struggle begins under "Anakin vs Luke" comment. The line is there just for explanations. It basically affects EVERY sprite in the stage. The result is that EVERY tile in the stage has the same sprite as the last tile. I get that it's caused by the sprites having all the same reference to the texture (which then I change, by framing, and affect them all in result). I also get that it's most likely an invalid approach. Here come the questions: 1. Is this approach any near to any solution to render the map? I want the map to be rendered using ONLY one image with my array and my json file. 2. If not, can it be easily done without any other libraries?

Hi guys, I've built one or two small, simple games with Phaser before but this is the first time I'm working with tilemaps. Hopefully someone can offer some advice. I'm working on a topdown game. I created a tilemap in Tiled with 3 layers. (floor, wall 1 and wall 2 ). The problem is I can get collisions to work on a single layer if I combine the wall layers into the same layer as the floor (so I just have one layer), but I can't get the player to collide with a second layer. TLDR: Is is possible to set up tilemap collisions with multiple layers? Thanks in advance. I've been stuck on this all day.