Show HN: I made my personal website a Pokémon-style minigame using Phaser 3
arielroffe.questRepo here: https://github.com/ariroffe/personal-website 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: 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. Did a similar thing but made my flat. And it’s gen 1 :) https://herostrat.us/gary This is really nice! I like the combination of the aesthetics and the dialogs that combine mundanity with deepness. WOW super cool! Did you also used phaser 3? I didn’t — I made it from scratch and tried to get as close as I could to the original behaviour. But I bet I also lost a fair few more weekends than OP…! Very cool. I would suggest implementing pathfinding with A* or a similar algorithm so that the character can walk around obstacles on the way to the point you click with the mouse. This is delightful! I got stuck against the far right library wall after the research papers page and couldn't escape so I had to start over, but I adore the concept. That said, I'm glad I don't need to navigate a site like this every time I need to find any information at all, because fun as that would be it would take way too long lol. Brilliant and fun. Small bug when I go into the "room to the right/left", if I back out (via browser), the character will continue going in that direction without any button being pressed. Curious to know what "Metatheoretical Structuralism" is, I am having trouble understanding after looking it up. If someone could ELI5 I would appreciate it. I get that it is philosophical analysis of empirical science, but would like to understand it on a deeper level. Thanks for the bug report. Are you using Firefox? I knew this happens in FF and couldn't find a fix for it. As for structuralism, the general idea is that it is a way to axiomatize empirical theories using formal logic and set theory. More specifically it postualtes that scientific theories have a typical logical structure, that you should be able to find in theories of many different fields (from physics to biology to sociology). And people have "reconstructed" (i.e. axiomatized) theories from all those fields. So, in a sense, it is like a theory about theories and how they are structured. Hope this helps ;) Very cool! The bug also happens to me, but I’m on mobile on iOS Safari. I am indeed using FF. Thank you for the explanation! That is fascinating, always amazed with the diverse knowledge hiding around YC. Theory about the structure of theories? Why is "math" not a better word for this? Probably because it’s not math… incredible! Bruno Simon also has a similar website but in 3D Love it! Besides moving, can I perform any kind of action? That book on the church by the bottom right was asking to get grabbed/read but I couldn't find a way to interact with it. Also, I'd suggest making the bounding box of the player a bit smaller than the player itself, I keep slamming into everything when it's clear I should be able to move through, like this: https://www.youtube.com/watch?v=TQKXU7iSWUU This is LOVELY! A little suggestion. On mobile I touch the screen to navigate and the character moves roughly towards the finger. It would be better if there was a virtual navigation pad where the user first touches the screen and make the character move relative to that virtual pad. That would make navigation on mobile much easier without needing to move the finger all the way the screen (especially on larger phones) and without potentially obscuring the actual lovely game art and content if going up with finger. This is fucking cool. FYI: I experienced a bug where I was able to unmute the sound icon twice in a row while a "..." icon was displayed, causing two tracks to play out of sync. Thanks for the heads up. Right now I can't seem to replicate the bug, but I'll look into it. It happened for me walking out of the building to the left. I think I clicked unmute inside, walked back outside, and then clicked the "..." button. Firefox with only uBlock Origin for extensions. The chip tune selection, though unoriginal, make it an immediate 10/10 ;) Loved the wind waker track Love it. My personal site at one point was styled as a text adventure, but this is way cooler (and also way slower :P). I'd love to see more personal sites that explore creative (if arguably less pragmatic) ways of displaying information. This is awesome.
I've seen a similar concept before but way simpler than this (e.g. https://www.mariosaul.com/).
Great job! Very nice, though I'm slightly disappointed that there weren't more details. Namely, when the timer expires, nothing happens. The coin counter doesn't play a 1-up jingle or reset once it has reached 100. And the flag doesn't follow Mario down to the bottom when you scroll to the bottom of the page. These are all nitpicks, of course. It is quite an amusing and informative homepage. Pretty cool! Just one suggestion: WASD support. Other than that, fantastic! Added! Thanks for the suggestion! What would really take this to the next level is if multiple users could actually walk around on your site and see each other and even chat. Given that you probably wouldn’t expect more than a dozen or so people on at a time it shouldn’t be that difficult to implement a solution. Or at the very least, allow us to leave our own NPCs somewhere with a comment about your site. It’s probably better not to open up one’s website to real-time trolling. We are secretly building this at http://gather.town/ and planning to open the tech up as an SDK for others to build on. Love how fast it loads. I wasn't even sure it had loaded properly, had to refresh a few times (just kidding). Awesome. The mobile experience is great. Nice work! But your menu links are all '#' hrefs apart from the "home" select item. Fixed! Thanks for the report. Okay, my first name is Ariel as well, and I gotta say - This is awesome. You're an inspiration, bro. I found a bug too! How did the killer robots guy get Regigas without also first acquiring Regirock? :P Very cool! BTW who is your nemesis? (The character by the bottom right tree.) Ha, that's just a generic nemesis character. But, there are other characters based on real people (and inside jokes with them), like the girl who speaks of the mayo in the sample freezer or, weirdly, the guy with the killer robots :) Looks like that's Alder, the champion from Pokémon Black and White: https://bulbapedia.bulbagarden.net/wiki/Alder Oh my, I didn't actually know that lol. This is just awesome. Combining Pokemon art with Super Mario music is also an interesting choice that gave my brain a slight feeling of cognitive dissonance xD Very cool Ariel! Cheers from a fellow Argentinian awesome work! I am working on a small project which is kinda similar - i think these are the future of blogs and personal sites. Sure... in the same way that the 3d interface in the original Jurassic park movie is the future of Unix. I think a virtual dpad would be a bit better than touch to move for mobile I agree! I’d love to explore this but it’s a little awkward on my iPhone SE with my giant thumb in the way. rotate it This is awesome! Please add an optional bike too (outside only) outside only is the important bit xD not sure if "I will cefeat you, rival" was a typo or a pun I didn't get. Otherwise, was really cool! Absolutely brilliant! Love the ingenuity. I hope I could walk a bit faster. you did the pixel art ? For the most part, no. See the repo in the description for the credits and links. Brilliant. Awesome. this is dope. what did you use to make the art? Too amazing! Love this it plays like garbage amazing!