[adamddev1]

This is so great. Thanks for sharing your code and your collections of tilesets etc, as well as where you got them from. I've been wanting to make a learning app into pokemon style quest adventure for quite some time now but I don't know anything about game development/engines out there. Your repo is a great introduction to exactly this kind of thing.

I wanted to do something with javascript/HTML5 that let me switch between this kind of map and little exercises that would switch over to React/DOM stuff. Seems like Phaser 3 would be a good (the best?) tool to do this? Any thoughts or suggestions? I mean like I would love to have a little world just like this you could walk around in but then when I walk up to a certain section in the library it would jump into an exercise which would involve Q&A with the questions and promps using React and the DOM. Then when the person finishes the challenge it would jump back out to this tiled world.

I see people embedding Phaser games inside React apps, but is it possible to embed interactive React DOM components inside Phaser games? Or does everything have to stay in Canvas/WebGL mode?

[cartucho1]

I'm glad it helped. I don't know anyhthing about React, but here are some more resources I found useful on the Phaser side:

- I started out with this guide: https://medium.com/@michaelwesthadley/modular-game-worlds-in...

- The Pokemon Revolution Online discord has a channel with mapping introductions that is pretty nice.

- The Phaser 3 website has a good documentation and lots of examples, and I also found the "Notes of Phaser 3" site by RexRainbow very useful: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/

- This little tile extruder will help avoid tile bleeding: https://github.com/sporadic-labs/tile-extruder

[adamddev1]

Great, thanks so much! After I was inspired by your project and I came across that Michael Westhadley guide but didn't know you used that specifically. Thanks for sharing your work because it really helps other figure out how to do similar things.

[biellls]

Maybe the easiest thing is not to embed but to show a dialog on top with all the DOM inputs you need and close it when you're done with it.

[adamddev1]

Ya that sounds best. I wasn't sure if you could show a dialog with DOM/React stuff in it over top of the Phaser 3 canvas space, (why not w/ some CSS) But ya I'd just have to look into how to do that.

[jimmySixDOF]

Could also look at Three.js with React-Three-Fiber. Babalyon.js is also popular but since you mentioned React the R3F route might work.

Edit: for a sample check out this guy made his portfolio site as an Immersive Web Ramen Shop:

[1] https://jesse-zhou.com/

[d13]

Stay away from React bindings! It looks nice when you first start but you’ll soon enter memory leak hell forever. Biggest rookie mistake there is. Just stick to a dead simple framework-free UI, HTML+CSS

[hirako2000]

even considering the trend of unique and super creative immersive sites, this one is just incredible.