Show HN: A Marble Madness-inspired WebGL game we built for Netlify

Nice! My favorite challenge was avoiding the glowing white dots along the path.

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 · a year ago

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 · a year ago

Should we be learning about the product or the company? Only one seems valuable, no?

appstorelottery · a year ago

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 · a year ago

I also went for 0% speedrun challenge.

guigui · a year ago

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 · a year ago

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 · a year ago

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.

dole · a year ago

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 · a year ago

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 · a year ago

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.

https://imgur.com/ZANb1cT

guigui · a year ago

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 · a year ago

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 · a year ago

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).

proee · a year ago

How many people worked on this project and how long did it take to develop? Nice job!

guigui · a year ago

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 · a year ago

How long till people start speed running this?

runnr_az · a year ago

That’s really lovely and polished. Nice job…

guigui · a year ago

Thanks for playing! Glad you enjoyed it.

DaviNunes · a year ago

Congrats on your work! You mentioned "using our custom render pipeline and shaders", can you please elaborate more on that?

jetbalsa · a year ago

add a built in timer and I bet people would speed run this thing

guigui · a year ago

Thanks for playing. Actually, your time is displayed once you finish the experience (there are 5 levels in total).

During the project, we discussed adding a speed-run mode but ultimately had to drop this feature due to time constraints. However, we intentionally included some shortcuts in the level design with that intent in mind.

itronitron · a year ago

There is a glitch on the momentum level, where the marble gets stuck behind a wall after dropping into a hole.

paol · a year ago

I got stuck in the spiral slide on the same level. I got the impression framerate glitches are affecting the collision detection (common physics implementation pitfall). I could be wrong though.

Still, very cool. Too cool to waste on marketing in fact :)

franck · a year ago

There is code in place to respawn the ball if we detect that it's stuck inside a block or wall, which can occur due to frame drops during the physics simulation. I'll try to reproduce this issue. Thanks for reporting it!

dyarosla · a year ago

Did you employ any specific practices to keep it running at framerate in JS?

ec109685 · a year ago

You might be interested in this nice write up: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-...

yossi_peti · a year ago

How is the gameplay related to the information? The connection seems pretty contrived to me.

franck · a year ago

The glowing line represents a timeline of Netlify's milestones that you have to follow in order to discover their journey. No particular reason for the physics-based gameplay except to have a bit of fun.

cowmix · a year ago

Made my day. No notes!

AndrewStephens · a year ago

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 · a year ago

> 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 · a year ago

Mobile control smooth as well

Retr0id · a year ago

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 · a year ago

Check out Ballance:

https://www.gog.com/en/game/ballance

bhaney · a year ago

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 · a year ago

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 · a year ago

do you have a technical writeup somewhere with tips and tricks like these?

pissflaps · a year ago

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 · a year ago

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)

vunderba · a year ago

I don't know if its still the case but 5+ years ago, Netlify was a pretty robust Jamstack host with built-in CI/CD deployment via git if you didn't want to manage your own VPS.

pipes · a year ago

Thanks

Conscat · a year ago

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 · a year ago

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 · a year ago

> 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 · a year ago

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.

[1]: https://en.wiktionary.org/wiki/yak_shaving

[2]: https://www.littleworkshop.fr/projects/5milliondevs/

solatic · a year ago

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.

guigui · a year ago

No plans to open-source at the moment, but we intend to share some behind-the-scenes info in the future.

Deleted Comment