JavaScript Game Development With Phaser - Tile Maps & Plugins

Recorded virtual presentation to the Fredericksburg Developers Group.
Links to slides, source code & playable demo are available here: greenzeta.com/update/javascri...
Join presenter Matt Wilber for a step-by-step walk through of the Plug-In and Tile Map features of the Phaser framework and develop a clone of the classic game "The Legend of Zelda". We’ll look at the tile map generating app, Tiled, and create game levels without any programming. We'll also look at Phaser's plug-in system and create a reusable character dialog module.

[@UnderArea51]

After posted 3 years ago - Tutorial is extremely fun! You build something really cool! Still holds strong! Try it!!!

[@gameovergaming239]

We need more of this my friend. BRAVO, and thank you for getting straight to the points.

[@gryg666]

This is kind of summary I needed. Thank you very much!

[@user-mi5pl5sm1k]

That lesson of yours is so fun and I learn a lot from it. Thank you very much!

[@Xactant]

Great demo - thank you! I liked the explanations of the important sections of code and real-time demo of creating the tile map.

[@alacris110]

This is just incredible what you've done! I enjoyed every minute of this video. Thanks for sharing your knowledge!

[@MasterOfMisc]

This was an awesome tutorial into using Tiled and Phaser. Just what I was looking for. I hope to see more content from you.

[@GreenZeta]

Thank you! I'm planning to do at least three presentations next year. One will be a reprise of my original Phaser presentation that was never recorded and the other two will involve NFTs and pixel art.

[@Brrrrr_]

Waiting for your awesome content which filled out hearts! 💙

[@StrengthFromGiving]

What an absolutely fantastic video! I'm a full stack newbie, and I've recently found phaser and needed some help on Tilemaps... this is a god send. Thanks so much!!

[@GreenZeta]

Thank you! I'm glad it was helpful.

[@_abrar_shahriar_]

Need more of this...you are awesome sir

[@omlish]

Fantastic demo! you're a saint

[@DocDrowsy]

Great tutorial man much appreciated!

[@tonyfisher6379]

THIS - just, WOW. THank you so much!

[@Philippe275]

This is really the best tutorial I could find, thank you so much! hiding the character depending on a z value for element on an isometric view is giving me a hard time though... I Wish it was as simple as in your exemple.

[@lsutoob]

Great video! I hope you make more!

[@cwirz]

Wow nice tutorial! Thanks a lot!

[@NelsonRgutierrez]

Thank you

[@foreach1]

Thanks you!

[@theweebdev]

I did exactly this but there is no collision between the player and the layer. I made debug to true to check the hitboxes and the layer has no hitboxes that's why there is no collision. Please help.

[@GreenZeta]

It's difficult to offer any advice without seeing what you did. Is your project on a public repo where I can see the source?

[@Brrrrr_]

Bro, can you make part 3 please? You are awesome!!!

[@GreenZeta]

I'm working on it. First I'm going to redo Part 1 for KZbin.

[@Brrrrr_]

@@GreenZeta cool bro! I love your videos and pretty sure I will share about my friends and community interested in gave development

[@ardinhelios5677]

Where is part 1?

[@GreenZeta]

I did part 1 in person so there isn't a recording but I wrote the whole thing in a medium article: greenzeta.medium.com/html5-game-development-with-phaser-aeddcd793cc4

[@ardinhelios5677]

@@GreenZeta Gotcha! Thank you so much !!

[@daowiz001]

Is this phaser 2 or 3?

[@GreenZeta]

It's Phaser 3. v3.22 is what I used for the demo. There were some big changes with the plugin api with v3 so if you need v2 it's going to require some work.

[@daowiz001]

@@GreenZeta thanks very much, I'm learning v3 so just didn't want to confuse myself lol 😉

[@zentree9932]

:)

[@Ddd-nnn]

Hello, Matt Wilber! Great tutorial. appreciate that very much

[@GreenZeta]

Thanks for catching that bug! When exiting a scene, Phaser destroys all graphics. I should have been drawing the dialog on start instead of on boot. The issue is fixed in the repo. I moved the two draw calls to their own function and added a start event handler. I also upgraded the project to the latest version of Phaser, there is one breaking change. You can see all of the changes in this PR github.com/mwilber/the-legend-of-zeta/pull/37/files#diff-06bba6b45309b966c092a3a149c6acd11aeb2d1730938096ecd60c9e91a784fa Changes specific to the bug you found are all in the GzDialog.js file.

[@Ddd-nnn]

​@@GreenZeta I've spent almost 2 days trying to solve that. Eventually put "this._drawBackground()" and "this._drawText()" functions at the beginning of "setText()" function. But your decision is way better organized. I will use it. Actually your code is so well orginized. The best what i found on youtube and elsewhere. Your explanation is also short and clear! Thanks dude! Keep it up!

[@GreenZeta]

@@Ddd-nnn I think your solution might be better. Create and destroy the graphics with each use rather than toggle visibility. Just remember to clear the graphic elements when closing the dialog. Normally there's a performance hit when doing it this way but, in this case, since the dialog stops all action, it doesn't matter.