9 ms·
Show HN: I made my personal website a Pokémon-style minigame using Phaser 3
Repo here: https://github.com/ariroffe/personal-website https://github.com/ariroffe/personal-website
- neoeno 5y agoDid a similar thing but made my flat. And it’s gen 1 :) https://herostrat.us/gary https://herostrat.us/gary
- kurisukun 5y agoWOW super cool!
- realjhondoe 5y agoDid you also used phaser 3?
- neoeno 5y agoI 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…!
- maxmunzel 5y agoThis is really nice! I like the combination of the aesthetics and the dialogs that combine mundanity with deepness.
- nonliquidassets 5y agoAwesome. The mobile experience is great.
- notjulianjaynes 5y agoThis 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.
- cartucho1 5y agoThanks for the heads up. Right now I can't seem to replicate the bug, but I'll look into it.
- notjulianjaynes 5y agoIt 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.
- iamthirsty 5y agoPretty cool! Just one suggestion: WASD support. Other than that, fantastic!
- cartucho1 5y agoAdded! Thanks for the suggestion!
- mLuby 5y agoVery cool! BTW who is your nemesis? (The character by the bottom right tree.)
- j-james 5y agoLooks like that's Alder, the champion from Pokémon Black and White: https://bulbapedia.bulbagarden.net/wiki/Alder https://bulbapedia.bulbagarden.net/wiki/Alder
- cartucho1 5y agoOh my, I didn't actually know that lol.
- cartucho1 5y agoHa, 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 :)
- endisneigh 5y agoI think a virtual dpad would be a bit better than touch to move for mobile
- steve_adams_86 5y agoI agree! I’d love to explore this but it’s a little awkward on my iPhone SE with my giant thumb in the way.
- throwaway14356 5y agorotate it
- franciscop 5y agoLove 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 https://www.youtube.com/watch?v=TQKXU7iSWUU
- thescribbblr 5y agoToo amazing!
- xwdv 5y agoWhat 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.
- ceroxylon 5y agoBrilliant 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.
- cartucho1 5y agoThanks 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 ;)
- ushakov 5y agoincredible! Bruno Simon also has a similar website but in 3D https://bruno-simon.com https://bruno-simon.com
- screwgoth 5y agoBrilliant. Awesome.
- senkora 5y agoVery 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.
- findalex 5y agoamazing!
- danmur 5y agoLove how fast it loads. I wasn't even sure it had loaded properly, had to refresh a few times (just kidding).
- shermablanca 5y agoNice work! But your menu links are all '#' hrefs apart from the "home" select item.
- cartucho1 5y agoFixed! Thanks for the report.
- arrakis2021 5y agoLove this
- umen 5y agoyou did the pixel art ?
- cartucho1 5y agoFor the most part, no. See the repo in the description for the credits and links.
- kderbyma 5y agoawesome work! I am working on a small project which is kinda similar - i think these are the future of blogs and personal sites.
- throwaway675309 5y agoSure... in the same way that the 3d interface in the original Jurassic park movie is the future of Unix.
- aksgoel 5y agoAbsolutely brilliant! Love the ingenuity.
- AussieWog93 5y agoI found a bug too! How did the killer robots guy get Regigas without also first acquiring Regirock? :P
- indigochill 5y agoLove 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.
- changhanlee 5y agothis is dope. what did you use to make the art?
- adamddev1 5y agoThis 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?
- jimmySixDOF 5y agoCould 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/ https://jesse-zhou.com/
- d13 5y agoStay 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 5y agoeven considering the trend of unique and super creative immersive sites, this one is just incredible.
- biellls 5y agoMaybe 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.
- can16358p 5y agoThis 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.
- achenet 5y agoOkay, my first name is Ariel as well, and I gotta say - This is awesome. You're an inspiration, bro.
- lbotos 5y agonot sure if "I will cefeat you, rival" was a typo or a pun I didn't get. Otherwise, was really cool!
- informal007 5y ago
- deleted 5y ago[deleted]
- techtechtechx3 5y agoThis is awesome. I've seen a similar concept before but way simpler than this (e.g. https://www.mariosaul.com/ https://www.mariosaul.com/). Great job!
- Minor49er 5y agoVery 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.
- ZYinMD 5y agoI hope I could walk a bit faster.
- wilfredk 5y agoThis is awesome! Please add an optional bike too (outside only)
- hackerlink99 5y agooutside only is the important bit xD
- ascar 5y agoThis 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
- mromanuk 5y agoVery cool Ariel! Cheers from a fellow Argentinian
- jaqalopes 5y agoThis 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.
- farzher 5y agoit plays like garbage
- cdaringe 5y agoThe chip tune selection, though unoriginal, make it an immediate 10/10 ;) Loved the wind waker track