Townscaper Running in the Browser | Hacker News Reader

Townscaper Running in the Browser

oskarstalberg.com

701 pointskrstffr97 comments

There is also another game/toy by Oskar Stålberg in which you can build a teeny, tiny block of house(s) on a 5x5 grid. Very cute, especially with all the well decorated balconies.

https://oskarstalberg.com/game/house/index.html

The author is on Twitter and sometimes tweets about development of his games and the techniques involved.

https://twitter.com/OskSta

looks like the precursor to Townscapper

Also wanted to pop in to recommend his Twitter. Watching these games get made has been a blast. Just the right mix of interesting math and creativity. I always dig into his blog posts and threads.

The house toy has a cute little easter egg: If you remove all the foundation pieces of the structure, the remaining structure above starts bobbing up and down slowly, hovering - very subtle way to acknowledge "yep, I did in fact think about that case too".

in Townscaper, doing the same can cause propellers to appear beneath your structures

Hmm, how? All I see is stilts (in the browser version, at least, which I imagine should be the same as the Steam version).

It only appears in certain rare configurations. You need a section of town with no exterior corners.

Ahh I see, thank you.

https://oskarstalberg.com/Townscaper/#MzJODmOgd6TMNh6DKtk6nH...

Ahaha jeez, he really did think of everything.

An arc through the middle can cause no stilts or propellers!

https://oskarstalberg.com/Townscaper/#MzJODmWAdn_ETTo_gSLput...

(and, for posterity's sake, the shape with propellers is a donut).

Huh. Adding one sea level block to the outside of that doughnut leads to all the propellers disappearing but no stilts. Resulting structure does not look very likely. :)

you can even stack them! https://oskarstalberg.com/Townscaper/#MzJODmugKVfngggBBBC_TM...

I highly recommend following indie devs on Twitter. It's always cool watching the game take shape over the years, and sometimes you also get behind-the-scenes details

This uses the "wave function collapse" algorithm. Oskar Stalberg also made a great demo of how it works[0], but it might not make sense just from that. Martin Donald made a really nice youtube video on how it works[1]. The name "wave function collapse" can be off putting but it's pretty straightforward, and an algorithm that can come in handy for many uses both in game development and just general software development.

I'm actually procrastinating on HN from working on a GPU parallelised version that can generate millions of positions every frame. In Townscaper you can actually see that the algorithm runs quite slow and lags behind the players input, there's just a bunch of animation to hide it. I'm hoping to eventually get a version that can run in log2(mapsize) time.

[0]http://oskarstalberg.com/game/wave/wave.html [1]https://www.youtube.com/watch?v=2SuvO4Gi7uY

What's the difference between "wave function collapse" and constraint propagation? As described in the youtube link, it looks like it's the same.

I didn't know that constraint propagation existed. Having a quick look it does look the same.

In the in the original WFC(wave function collapse)[0] versions it always used an example of a completed output and generated all valid tile combinations from that. For a game this means that the developer can use hand made maps as examples for it to create new plausible maps. In the common vernacular WFC doesn't use this step and just directly either generates what combinations work or the devs manually decide what tiles can be next to others. Perhaps only the combination of both steps should be considered WFC.

Just to guess I think this is probably a case of it being developed independently in different fields. It's good to have another name for it as I always hated it being called "wave function collapse" when that is a physics thing.

[0]https://github.com/mxgmn/WaveFunctionCollapse

The readme there refers to WFC as "constraint propagation with a saved stationary distribution" which makes sense; the goal is to have distributions of tiles similar to the sample image.

Wow, the entire town is URL encoded!! Example: http://oskarstalberg.com/Townscaper/#IzpjOEQ0ejP2X9w-b--c-X-...

I have the Steam game too, but I'm somehow enjoying the browser version much more. Perhaps because of (seemingly) light-weight nature

How do you imagine this is done? Hashing the town state and storing lookup key as URL params?

Couldn't it be as simple as a list of (color, x, y, z) (base64 encoded) in the fragment? URL fragments can get really long.

Not sure what you'd need a look up key for.

The lookup key would be if the backend stores all the generated towns, and you're just referencing them. But I think simple encoding as you say is more probable

And how exactly would you represent these hypothetical stored towns?

Probably with a simple encoding.

You have a fixed 3D grid, which appears to only need to store either a color or 'null' in every spot. You can encode this entire grid in any number of ways such that it creates a valid URL. Base64 most likely.

https://en.wikipedia.org/wiki/Base64

The URL is full of dashes and underscores, clearly not standard Base64.

I believe Oskar is bit packing the data into the string, somewhere in his twitter feed he explains it.

Edit: Found it: https://twitter.com/OskSta/status/1198958801363308544

He designed it so you can fit a saved town in a tweet.

"It's my own very context specific implementation. I know how many bits I need for each bit of data, so I just store it all in a big bit array. I then convert that bit array to my own custom base 64 format, based on 64 web safe characters."

Worth reading the whole thread, as will all of Oskars twitter feed its super interesting.

No need. It's barely any data.

It takes about 90 seconds to load for me, but once it does, it's buttery smooth on my M1 Pro. Unity's web story is still so bad for many reasons, but the initial load times are a huge one (~15MB of wasm for an empty scene last I checked). They were working on Project Tiny[0] to address exactly this, but they've now paused work on it indefinitely :( Someone please build tools to fix this!

[0] https://unity.com/solutions/instant-games

When did you last check? What packages were in use? On a toy project built from 2020.3 I have 2.2MB of WASM.

It's interesting I have a mid computer (3060/i9/80gb ram/ssd) and with gigabit fiber, it still takes a long time. What is taking a while? Maybe it's request load.

Once it loads though wow, the graphics are great, nice little physics effects. Wonder how many online games are like this. Light source/shadow also cool.

On subsequent loads it's fast like it's near 80-90% already.

It took 6 seconds for me (pretty similar computer and connection speed). I am however just 6 ms RTT away from its hosting location in Copenhagen, DK. (I'm in southern Sweden.)

Okay guess it is just a data transfer thing, I'm in the middle of US.

80gb of ram is now mid range???

I'd say 16 GB is mid range at the moment.

ah yeah mostly meant the graphics card, 3060 is lower tier of 30 series.

in terms of gaming yeah this is a mid-tier computer

I want to get a 3090FE just because, but I'm not dropping $4K on that

You are in top 1% in RAM, top 2% in processor, and top 2% in GPU. I would not call that mid range. Hell I am running a 980Ti and its still on the top 10%.

It's unrelenting ha with the new intel surpassing some Ryzen (at the expense of power/heat) and DDR5... crazy.

Yeah I know for dev work can scale down eg. pi zero on a keychain and use cloud resources.

I have a $300 laptop and a mobile (cell) Internet connection and it loaded quickly for me and is also butter-smooth. [Note: I also have 156 other tabs currently open in Chrome. And another 30 in Edge. Don't hate me!]

Its interesting in that perhaps if Unity gets it right it could fill the functional use case void that has been present ever since the demise of Adobe Flash - rich interactive user experiences within the browser.

And done natively with no need for the plugin mess and security holes of Flash. The key would be navigating the feature creep that led to the bulk and security holes of Flash.

Totally agree. Unity is definitely in the best position to become the new Flash, but so far, they seem completely uninterested in investing in that future. I can't totally blame them, because the vast majority of their revenue comes from mobile and their services business.

Unity already has the bulk, but the security holes shouldn't be as big of an issue given that it's "just a website" and runs in the browser sandbox.

> I can't totally blame them, because the vast majority of their revenue comes from mobile and their services business

Seems like they could make a whole new market though. It's more likely that browser support is being held back from Safari/Chrome to keep money flowing to app stores

Meanwhile, Godot 4 should be _editable_ in the browser.

Yes, but afaik, the experience of building for the browser as a runtime target for games in Godot is still not much better than Unity, just less bloated. I for one would love it if Godot made web a first-class focus, but it doesn't seem like they are yet.

Works just fine in Firefox on my aging Moto Z4. Took 45 seconds to load, but then was very smooth.

PlayCanvas[0] is the probably the closest "web-first" solution compared to Unity. Used by lots of Snap Games & Instant Games. It's written in JS which means that it's way smaller ~350kB for an empty scene if I recall.

[0] https://playcanvas.com

> It's written in JS which means that it's way smaller

There's nothing inherently large about WebAssembly, it's just that most practical wasm demos bundle emscripten (essentially an entire OS's standard library) or another very heavy layer in order to interop between the JS and WASM world.

As a bit of an experiment to see how small wasm could practically be with a minimal interop layer, I built this little project - the web demo is 90KB of JS + 70KB of wasm:

https://github.com/jordwest/cavernos

It was heavily inspired by this article which manages even smaller builds:

http://cliffle.com/blog/bare-metal-wasm/

There's a lot of room for improvement in terms of size optimisation in most projects, but it's still early days and for now most of them just bundle an OS compatibility layer to get things working quickly.

Have an 14" M1 Pro and it takes me about 5-7 second and I have about 250Mbit down. I think you're limited by DL speed.

edit The bottleneck is most likely distance too server and RTT

Here is a third party tool that lets you explore your Townscaper creations from a first person view.

https://meliharvey.github.io/threescaper/

Thank you for sharing it. That's the one thing I always wanted from Townscaper.

Not sure why, but whenever I'm presented with something like this, I always seem to want to build the least functional, least utilitarian, most maddening and stupidest structure I can.

http://oskarstalberg.com/Townscaper/#IzhCuCAJioFFB00CAajRAN2...

I dig it, very cool!

Here is a speech about Townscaper:

https://www.youtube.com/watch?v=APIdkBwwWJI

at 1:12

Interesting, according to Oskar it’s straight up exported from Unity for web:

https://twitter.com/OskSta/status/1466063657582931974

What is missing from this demo compared to the full game? I thought that even the full game was this minimalistic.

What makes you think it's a demo?

It's labeled "A demo of Townscaper" in the side panel.

Full game doesn't crash, doesn't give you the browser scroll function on middle click (the shortcut to pick a color of an existing building), ability to export as STL, no full game links, ability to create oversized screenshots, some settings. The full game isn't deterministically equal to the browser one (roofs slope in different directions sometimes, decorations in different places). It should also run slightly better, although both are pretty lightweight.

Notably, the export strings are the same.

Basically: you're not missing anything from the core experience, but the browser version is slightly inferior. And buying the full version helps Oskar make more neat stuff in the future.

Edit: it's also a smaller build area.

Here a very interesting talk by Oskar Stålberg where he explains how this works: https://youtu.be/1hqt8JkYRdI

And here's another, slightly more technical talk from him about the "wave function collapse" algorithm he uses for procedural generation in his games: https://www.youtube.com/watch?v=0bcZb-SsnrA

Ah thank you. I was in fact looking for that talk!

What I really like about this is that the base grid is not straight. Therefore the buildings are arranged in a very European style.

I feel like this is how the UX for developing software should be. Types and intellisense plus copilot somewhat bring us close to something like this. Where adding a new module somehow automatically adjust itself to the project instead of having to provide strict API interfaces. Just a thought.

Hey, this sounds like the goal of the low code industry. To deliver an authoring experience where you don't have to worry about the semantics of code do develop software. It works really well in certain contexts, but a word of warning - there are trade offs. For instance, putting constraints on how applications talk to each other using APIs may seem limiting, but it does provide a standard interface that can be relied on for software to connect with one another.

And runs into a familiar problem.

Because a real world requirement in software development is the equivalent of, "I want to model my town".

And in townscaper I can't, because the presets don't fit my real world town.

So you then need to hire in a specialist block customiser who can write custom blocks for you to use in the modeller.

And then you realise you've just pushed the problem one step deeper.

Works great on my Android phone in Chrome. Oddly there's a message on startup saying WebGL won't work on mobile.

EDIT ah, it's unity's fault apparently. According to caniuse WebGL is golden for all mobile browsers. They should get with the times ;)

One thing that the demo could improve on in the mobile department is that scrolling is too sensitive. Most attempts at tapping to modify the structure result in a totally random change of the camera.

Full version is available in Steam.

It is also available on GOG if for some reason you do not have or do not want to use Steam.

https://www.gog.com/game/townscaper

Also on iOS/Android

What does the full version have, compared to this web version?

Toggle grid, pick colour, save, screenshot, better performance?

This is awesome! I went to the App Store and bought it after playing w/ it for a couple of minutes! Brings me joy

Just got blown away when I "turned off" the sun and the buildings started to turn on their lights.

I'm a big fan of Oskar.

Yeah, this is super nice. I remember seeing all over twitter back then. At the time the articles were focusing on the wave function collapse, which I find awesome. Thank you for publishing it to the web so we could play with it.

Impressive. Would be more impressive if it ran on mobile browser, though.

Edit: Scratch that it does run. I got scared away by the message about webgl builds not being supported on Mobile.

It is running in Firefox on mobile just fine while I don't have a high end smartphone.

If you want a easy to follow tutorial on doing something like this, I really enjoyed Eric's tutorial: https://www.youtube.com/watch?v=Pl72lxuBMWk&list=PLm9r3VWwsE...

The tutorial was about the previous web-based Brick Block by Oscar

This is incredible. How the heck does the algorithm work so well? It manages to produce beautiful looking things no matter what I do

The consistently beautiful looks comes from Oskar having handcrafted more than a hundred different puzzle piece models that together cover all the possible geometries. The models are not modified by the WFC algorithm, the algorithm just picks the right piece for every position. (However, the pieces, which are created square, are linearly deformed (skewed and scaled) to fit in the mostly non-square grid cells).

What determines which surfaces you can build on and which you can't? It seems random — I can keep clicking on an end wall to extend the building for a while, and then suddenly I can't anymore.

Are you at the edge of the grid? (Under settings check 'grid'.)

If you put some good audio headphones its amazing!

It runs perfectly for me on Chrome, but struggles on Safari (macOS, Monterey, MacBook Pro 2018). Does anyone know why?

Safari is pretty behind the times as browsers go, especially with WebGL. For instance, it doesn't support WebGL 2 (except maybe in beta?), which means you have to use WebGL 1. I'm guessing that's where some of the performance issues would come from.

Works pretty smoothly on my Android device running Firefox. Any details on how it was built?

it's just Unity's WebGL export

Cool demo, well polished. Now it only needs some gameplay! I could imagine a friendly MMO game where you trade resources with other sea villages.

Part of the fun for me is that it's kind of like a zen garden, but for buildings. I would love to see people start to populate and let the computer decide what they do and what the buildings are used for based on conditions created by the design of the city.

It's not a demo, it's a complete product already being sold. I think it's nice that it isn't a traditional game.

I'm not a casual gamer so I think it's too simple. One should not however underestimate the casual gaming market, as it is huge.

You could also take a look at Dorfromantik. It's a similar game with actual goals and difficulty, but still with similar zen and calm aesthetics.

> I'm not a casual gamer so I think it's too simple.

I think it's not really a game and maybe calling it that sets unrealistic expectations. A toy? An experience?

I love things like this and wish there were more. I'm not a casual gamer and I'm not often a non-casual gamer (long periods of addiction to Minecraft, Skyrim and a few others not withstanding)

Maybe it's why I love PC VR which many "true gamers" complain is lacking in games. It's full of crazy, weird stuff and I love it.

It is, in fact, a demo of that product.

In a way bad north is this technology with a gameplay https://www.badnorth.com/

This is a bit like saying that AoE is cool but could do with some lasers. Townscaper is v well established and has found quite a niche and fandom for itself.

Gorgeous.

And like super 'calming'? anyone else feel that just poking about

oh this is delightful!

Reply on news.ycombinator.com