One of the artists behind this, Vicente Lucendo, has a case study here explaining how they made a previous project (Summer Afternoon):
https://www.awwwards.com/summer-afternoon.html
And a talk here on the same project:
https://www.youtube.com/watch?v=KSIxyyEaPr0
It's full of tips that likely informed this new project. In short, seems like:
- No game engine
- Three.js plus https://github.com/gkjohnson/three-mesh-bvh
- Houdini and Blender for modelling
- Substance for texturing
- Figma and Affinity Photo for UI
- GSAP and vanilla JS for animation
- Davinci Resolve for sound
- WebSocket/Node.js for multiplayer
Plus a lot of experience, creativity, and artistry to solve other challenges (e.g. shaders, shadows) and wire everything together into this pretty performant piece of art.
The studio also has a case study here of another project they made, with other hints about their tooling and process:
https://www.awwwards.com/igloo-inc-case-study.html
Just for anyone like me who played this and spent the whole time thinking, "this is beautiful, who are you and how did you make this?" The author names are only revealed in the credits at the end:
https://x.com/michaelsungaila (nice work on the beach shader!)
https://www.kevincolombin.com/ (music)
On that subject, and since the Summer Afternoon direct link was not provided, can anybody actually get the project to work? Apparently made it on to HN 2.5 years ago. https://news.ycombinator.com/item?id=34461808 Not sure if its just my system, yet I always start stuck in the ground unable to move.
https://summer-afternoon.vlucendo.com/
So there are - sloth on a tree - UFO in a forest - playground - alien on a beach
What's the 5th thing you have to find?
There's one of the houses with a platform...
Still plays fine for me. (Chrome, macOS.)
Ok, thanks. Firefox, Windows was what was tried. Seems to have issues. Try Chrome and see if it works better. EDIT: Yep, works on Chrome, Windows. Must be a Firefox specific issue / feature not supported.
I made a reply asking if anyone has some behind the scenes information on making games like this! Thanks for sharing!
Thank you so much for this post, excellent
what was the approach for the cell shading look do you know?
Custom tooling, mentioned briefly here:
https://www.youtube.com/watch?v=KSIxyyEaPr0&t=1177s
But this new game seems to make use more textures and cell shading.
This is impressive but I don't get it. All that work and you have a game written in JS of all things. Why not write it in a desktop language und port it to JS. Now this will always need a browser to run, feels like a waste of time to me.
Or, reframing:
- This will _only_ need a browser to run. No console. No PC rig. No Steam account. No account at all. You just need a link to play it.
- Why use a heavy game engine and all the baggage that can bring when you can make a lightweight prototype in JS, prove value in the browser, then port to desktop if you choose to.
Browser games are an underexplored art form.
First you make the money, then hire someone else to port it to native. That’s what Vampire Survivors did.
You're looking at it in the wrong way. It's written in the native language of the best content delivery platform we have available.
It’ll also run pretty well on pretty much any OS. If I had a BSD box with GPU acceleration laying around, I’d give it a spin.
> Now this will always need a browser to run, feels like a waste of time to me.
As opposed to creating binaries for every platform and be subject to every possible store scrutiny on Android, iOS, Windows, Mac?
That not a waste of time for sure.
What am I ever reading?
Can always use Electron or Tauri to turn it into a native app
Electron and native do not belong in the same sentence AFAIK unless you mean 'native to the browser (which happens to be included in the package)'. Tauri is the same, just bring your own 'browser' (webview, really).
We all build on top of something. Today’s browser will look like a native platform in another 20 years. Just like assembly does to our point of view today.