Get the top HN stories in your inbox every day.
iandanforth
Nice! My favorite challenge was avoiding the glowing white dots along the path.
doctorpangloss
It's really commendable these guys focused on making a fun game. The glowing dots are easy to avoid and even the story they tell is not intrusive. It's an understandable compromise!
CSMastermind
Yeah, they really should be some kind of powerup so you're incentivized to hit them.
Right now learning about the company feels like a penalty which I doubt was the intent.
Also for anyone who hits a dot and is confused how to get out of the information screen - you just press the arrows. I tried escape and clicking for longer than I would care to admit before I realized this.
Super cool idea though.
imglorp
Should we be learning about the product or the company? Only one seems valuable, no?
appstorelottery
Lol. Same for me, the game was avoid the white dots. It almost speaks to something deeper in terms of corporate-sponsored games, how does a "brand" form a relationship with me? Perhaps just calling the game "avoid the white dots" would have been a step in this direction?
I often get YouTube advertisements thrust upon me when I'm engaged in content and think "what are these brands thinking... bursting into my living room mid-content and trying to push tampons onto me?" I'll never buy your tampons again.
However, I digress, and apologies, because I love the game and also the studio that created it - but honest feedback - I still have no idea what the company does that sponsored this game. I don't feel an emotional connection, and the game didn't peak my interest enough to find out what they do.
In the past when I've encountered great "art" - it's inspired me to go deeper into what was behind the art; to learn more about the author, and perhaps if it's truly amazing, another step beyond this. Brands like Panic have made me do such a thing.
I remember that great commercial for (I think) it was Geiko insurance on YouTube that said "You can't skip this ad because it's already finished", it was wonderful IMHO because it empathised with the viewer. Perhaps calling the game "Avoid the dots" would do the same?
Just my opinion, insignificant such as it is.
[edit] After a moment on the balcony it occurred to me, what if the game began with a big white Super-hot title that said "Avoid the dots (Speedrun challenge)" and at the end of each level displays a high-score table? Perhaps that would even give it a chance of virality in the speed running community? (credit to the commenter that said he "speed ran" avoiding the dots for the idea)
hailpixel
I also went for 0% speedrun challenge.
guigui
I'm one of the developers who worked on this project. Happy to answer any questions.
More info on the project here: https://www.littleworkshop.fr/projects/5milliondevs/
ianbooker
Great work, it really captures the feeling of Marble Madness. Its maybe to deep of a thought, but I really fancy the spin of the marble, something that the original was not conveying as fancy as your version does.
guigui
Thank you. The physics engine we're using (Rapier) really does most of the work to make the spin of the marble look realistic. But we spent quite some time tweaking the controls to make them as enjoyable as we could.
forth_throwaway
The marble has the perfect amount of friction, I'm able to "drift" around corners which feels really nice.
worldsayshi
You did a great job. The physics seems about as enjoyable as those of Rocket League and they must've have spent a considerably larger effort.
sergiotapia
the "feel" is tremendous, S-tier for real.
dole
As a MM fan, I wanted to second this. Great work, engaging enough to make me finish it and wish there were more mechanics like the catapults and enemies.
purpleidea
Nice work! In level 5 there are three bounce green boxes and if you fall on one, it bounces you to second, which bounces to third and you "fall into the void" like noclip through the platform and you respawn under it and instantly die forever. Buggy and not going to start from beginning. Open source it!
nogridbag
This was really fun. Right before this little hole on the second level, my macbook started running a bit slow and the collision detection somehow sucked the marble into the floor.
guigui
Physics collision bugs are more likely to occur during frame rate drops. We’ve tried to address this by implementing an auto-respawn mechanism to handle cases where the ball gets stuck inside a collider, but it seems this sometimes fails. Anyway, thank you for playing!
suyash
Nice work, love to know more about the technical bits: what framework did you use for 3D scene, objects? how did you handle camera movements to track the ball? What library for sound as that was a nice touch. How did you do physics? Thanks!
guigui
Thanks. The WebGL rendering is based on Three.js. We're using Rapier for the physics simulation, and Howler for the audio. Our game engine is responsible for all the controls and updating things like the camera position (which follows the position of the ball at every frame).
doctorpangloss
Why did you choose to do things this way instead of using Unity WebGL?
It's okay if the reason is, "because we make websites and the programming we know is Javascript" or whatever. It doesn't have to be about some objective comparison, like optimization or whatever, which isn't going to be true or necessarily matter anyway.
proee
How many people worked on this project and how long did it take to develop? Nice job!
guigui
Besides people from the Netlify team who helped write the content and worked on some back-end aspects, the design and development of the game took around 8 weeks for a team of two.
khernandezrt
How long till people start speed running this?
DaviNunes
Congrats on your work! You mentioned "using our custom render pipeline and shaders", can you please elaborate more on that?
AndrewStephens
This game is way better than it needs to be for a quick burst of advertising. Not only is the implementation fantastic, with perfect controls, but the level design is also great. I really enjoyed the multiple routes and the fact you can skip most of the advertising displays.
It seems such a shame that this isn't a full game. Removing the advertising and adding more complex levels with puzzles would make for a perfect little distraction.
nonethewiser
> Not only is the implementation fantastic, with perfect controls, but the level design is also great.
I was surprised how well the WASD controls worked. Perfectly intuitive.
tomrod
Mobile control smooth as well
hunter2_
I even triggered a back gesture by accidentally swiping from the edge when I merely wanted to move the marble, bringing me back to this HN page, assumed state was lost, but found the browser's forward button and it was like it never happened! I've never seen that in a browser-based game.
Retr0id
I did spot one control bug, which is that if you start holding down a key while/before spawning in, it won't register.
wackget
Check out Ballance:
bhaney
I think this is the first time I've ever seen an online game correctly tell me to use WARS keys for movement. Big props for handling non-qwerty layouts.
Great job optimizing too. Runs totally smooth on my 2012 macbook and its decrepit HD 4000 iGPU, which is no small feat for web-games these days.
guigui
Thank you! As an azerty user, I know the pain of using websites that are only designed for US keyboards.
If anyone's wondering, the getLayoutMap method from the Keyboard API is what we're using to handle international keyboard layouts.
https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/ge...
swyx
do you have a technical writeup somewhere with tips and tricks like these?
pissflaps
That was enjoyable. I wasn't at all interested in any of the "Netlify facts" but it was fun to push the marble around and I'm impressed by how smooth the experience was. Well done!
pipes
I can't find anyone else mentioning this here, so interesting fact, marble madness was designed by mark cerny
https://en.m.wikipedia.org/wiki/Marble_Madness
https://en.m.wikipedia.org/wiki/Mark_Cerny
Who is better known for designing the PS4 and PS5.
Edit: can someone explain what netlify does? I visited the site, and while I appreciate it can be difficult to explain these things in marketing blurb, I really came away none the wiser (I work as a programmer so maybe I'm not quite the target market)
Conscat
Kind of off topic, but Marble Madness was a large part of what inspired me to start programming. My dad played it when he was a kid and it made an impression on him, so he had me play it on MAME as a kid. I was blown away by the fact that computers can simulate (fairly complex) falling objects in an isometric space, but I couldn't figure out for the life of me how to reproduce that in Game Maker 7 at the time. When I got better at math, it influenced a project in my teens that's on my resume to this day.
solatic
Any chance this could get open-sourced? This seems like a great example of a lot of stuff for which there are few tutorials currently.
diggan
> This seems like a great example of a lot of stuff for which there are few tutorials currently.
Not OP but, what exactly you feel like is missing tutorials? It's a nice little polished experience, but I don't think there is anything particularly innovative or difficult to build with the resources that exists today. Or is there something in particular that looks/seems difficult from what they shared?
thih9
I disagree, I think the "nice little polished experience" is the difficult part.
In practice building something like this with resources that exist today can still mean a stream of issues specific to a given platform, browser, library, programming language, IDE, issues related to a combination of any earlier two and a yak that needs shaving[1].
Meanwhile this project is described as[2]:
> fully optimized for both desktop and mobile browsers, with user controls and UI components tailored for each device, ensuring intuitive navigation and interaction across all platforms.
If this process was easy and well documented, Netlify wouldn't hire an external agency.
diggan
> I disagree, I think the "nice little polished experience" is the difficult part.
Right, I agree, most of the time will be spent in the polish. But is there really no resources out there on how to polish? Assuming there isn't, what would you want a tutorial to contain to make it apply to a wider audience, as polish is typically hyper-specific to the project.
> If this process was easy and well documented, Netlify wouldn't hire an external agency.
Companies don't typically hire external agencies because something is difficult for them to do per se, but more that it would be wasteful for them to spend the time building something like that instead of focusing on things core to the business.
FWIW: I'm asked parent about this in order to see if there are actual gaps in the available resources today for what parent wanted to do, hence the question to specify what exactly they're looking for. I guess "how to polish" is a valid answer, but again, there are resources out there to help understand how to approach that.
solatic
You can't really compare the depth of resources that exists for something like React versus something like Three, which has a bunch of toy examples but no fully coherent experiences.
Companies like Figma have shown that there is a huge appetite for solutions built on top of Canvas or WebGL, but if you don't have the privilege of working for one of these companies that built up lots of proprietary building blocks from scratch, it's much more difficult to get started.
deskr
Is there a page somewhere that tells me what netlify is on a technical level? All I see it marketing speak and I can't make sense of it.
6figurelenins
Turnkey web hosting. Drag and drop your build folder, get a URL. Or point it to your git repo.
hehehheh
Github pages for when you need >1 site.
wackget
I think you answered your own question. It looks an awful lot like a platform designed to lure non-technical people in with the promise of a magical, frictionless website building experience, ironically achieved by adding layers of abstraction and complexity into a regular web app.
cyberlimerence
Beautiful work, well done. It also made me remember a game I played a long time ago called Ballance[1]. Weird how memory works like that.
adzm
This was actually very fun, great work here! There was a PC game called hamsterball that I really enjoyed a long time ago; this brought back memories.
johtso
The controls don't seem to work for me. AWSD, only up and down work, unless I try to go diagonally, then it just gets "stuck" moving forever. Arrow keys no directions work unless I hold multiple keys down at once, then it also gets stuck moving.
M1 macbook pro, Arc browser
guigui
That's weird, the desktop controls are supposed to work regardless of your keyboard layout. Are you able to play with your arrow keys (which are also supported)?
johtso
Nope, arrow keys also misbehaving. Very vanilla keyboard layout. Let me know if I can provide something to help debug, maybe the key events
Get the top HN stories in your inbox every day.
Hello HN! We’re a small creative studio specializing in real-time 3D experiences. Netlify approached us to design and build an interactive experience to celebrate reaching 5 million developers.
Inspired by the classic game Marble Madness, we created a gamified experience where users control a ball through playful, interactive levels. The goal was to blend marketing content with the look and feel of a game to engage users.
The app is built with Three.js [1], using our custom render pipeline and shaders, and uses Rapier for physics simulation [2]. The 2D content is overlaid on the WebGL view using CSS 3D transforms for a seamless integration with the 3D view.
We’d love for you to try it out and share your thoughts!
[1] https://threejs.org
[2] https://rapier.rs
EDIT: More info on this project here: https://www.littleworkshop.fr/projects/5milliondevs/