Comment by adamddev1
4 years ago
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?
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
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.
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.
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.
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/
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
even considering the trend of unique and super creative immersive sites, this one is just incredible.