Add Tilemaps with Tiled - Dungeon Crawler in Phaser 3 - Part 1

This is a repost from the main ourcade channel: / ourcadehq
Want to learn more about using TypeScript with Phaser 3? We have a free book that teaches you how to create an Infinite Runner. Get it here: ourcade.co/books/infinite-run...
This is a series that shows you how to get started with making a dungeon crawler in #TypeScript and Phaser 3. We'll show you every step in real-time including any troubleshooting.
Have you wanted to use tilemaps but found them too complicated?
Maybe you've tried using tilemaps in Phaser but couldn't quite get it to work?
Part 1 will show you all the steps from creating a tilemap in Tiled to loading it in Phaser.
Full Series:
Part 1: • Add Tilemaps with Tile...
Part 2: • Add a Hero Character -...
Part 2.5: • Tile Bleeding Begone! ...
Part 3: • Add Enemies to Slay - ...
Part 4: • Add Damage Animation -...
Part 5: • Zelda style Health UI ...
Part 6: • Throw Knives to Attack...
Part 7: • Collect Coins from Che...
Part 8: • Place Enemies using Ti...
Tiled: www.mapeditor.org
Dungeon Tileset II: 0x72.itch.io/dungeontileset-ii
Legend of Faune: ansimuz.itch.io/legend-of-faune
Module Game Worlds in Phaser 3: / modular-game-worlds-in...
You can find the full source code here: github.com/ourcade/phaser3-du...
Ourcade is a playful #gamedev community for open-minded and optimistic learners and developers. 🎮🕹👾🤗 ourcade.co

[@fitnessball6906]

For the People where the createStaticLayer is making some issues, use createLayer but with the following syntax: const wallsLayer = map.createLayer('Walls',(tileset as Phaser.Tilemaps.Tileset), 0, 0) as Phaser.Tilemaps.TilemapLayer; this should fix the problem

[@babakush9757]

thank, you just saved me a lot of time!

[@bandito241]

I just put a ! after the tileset variable to make it nullable.

[@grigodoes]

Thanks for video. Your videos it best videos for Phaser 3 in YT

[@mortenskjoldager5057]

You can use the bucket fill tool to fill all tiles with your ground in one go :)

[@namaefumei]

This really helped man! Thanks a lot!

[@user-ee9wu1vd7p]

I like this tutorial, nice work , man

[@RafaelShepard]

nice work, man

[@TylerKusterWasHere]

Great tutorial! FWIW, there's a paint bucket in the toolbar that would let you fill in the ground all at once.

[@user-mq4mr8dt7l]

Thanks for video

[@lucasacevedo9236]

the property map.createStaticLayer don't exist , you can use this instead map.createLayer("toplayer",tileset,0,0) where "toplayer" is the name in Tiled of Tile layer 1 .... Sorry for my english 😣

[@matheusaraujo8617]

helped me a lot thanks

[@namaefumei]

adding collides to the tilesets increased the json filesize by 200kbs. is there a better way?

[@sigmareite]

I am having issues with getting the images to load, I am using the typescript-phaser template but I am getting a green square instead of the images in the tile/dungeon_tiles.png

[@unclechris]

I don't have access to map.createStaticLayer - also cannot find in the API. I did find map.createLayer which looks similar but since I still see no tiles on the screen am unsure if therein lies my problem.

[@unclechris]

I just saved it with map.createStaticLayer and the console told me that createStaticLayer is deprecated - use createLayer - so solved that issue here. Still looking for why not seeing tiles on the screen - maybe just need to go to bed and start fresh in the morning. Thanks very much for all your wonderful tutorials!

[@user-tp7ns3eb9v]

Sir I don't understand what is the use of super(' ') String inside super use for? sorry my grammer and thank you best tutorial

[@bandito241]

That’s the name of the scene. Whenever you use the name of a scene you use that instead of the class. So even though the name of class is Game, the name of the scene is called “game”. Notice the lower case. In Phaser, whenever you use a scene or call it you may use that name.

[@jhjhj2172]

till 18:40

[@Debianz]

Nice job making a course in 720p. Actually useless, I can barely read the code.

[@ghallium-jv]

I don't manage to load dungeon_tiles.png in preloader.ts, i tried to put it in the scenes folder to check if the path was incorrect but it won't show up in my browser.

[@soff8049]

You're probably not having this problem anymore since it's a year later, but if other people run into the same problem. 😆 Public or Public/Assets folders seem to be deprecated. I moved all the folders and their contents ('tiles/dungeon_tiles.png') to the 'dist' folder and everything worked.

[@CarlosFuentes-ps5ji]

✅✅SOLUTION FOR: Game.ts:47 Uncaught TypeError: map.createStaticLayer is not a function at Game.create (Game.ts:47:7) replace -> map.createStaticLayer('Ground', tileset) for: const groundLayer = map.createLayer('Ground', tileset) groundLayer.setCollisionByProperty({ collides: true })