💾 Archived View for dioskouroi.xyz › thread › 29404447 captured on 2021-12-04 at 18:04:22. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Townscaper Running in the Browser

Author: krstffr

Score: 694

Comments: 97

Date: 2021-12-01 15:17:48

Web Link

________________________________________________________________________________

_Microft wrote at 2021-12-01 15:35:25:

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

m12k wrote at 2021-12-01 16:14:39:

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

adamrezich wrote at 2021-12-01 17:24:02:

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

stavros wrote at 2021-12-01 19:23:07:

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

ldite wrote at 2021-12-01 20:41:18:

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

coryrc wrote at 2021-12-02 03:35:57:

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

venthur wrote at 2021-12-02 14:44:52:

you can even stack them!

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

capitainenemo wrote at 2021-12-02 05:01:20:

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

stavros wrote at 2021-12-01 20:46:12:

Ahaha jeez, he really did think of everything.

BorisTheBrave wrote at 2021-12-01 19:40:05:

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

stavros wrote at 2021-12-01 19:42:49:

Ahh I see, thank you.

brundolf wrote at 2021-12-01 17:50:52:

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

and0 wrote at 2021-12-01 15:57:19:

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.

julius_deane wrote at 2021-12-01 15:37:18:

looks like the precursor to Townscapper

t8y wrote at 2021-12-01 23:52:42:

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

aidenn0 wrote at 2021-12-02 04:39:05:

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

t8y wrote at 2021-12-02 05:32:07:

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

aidenn0 wrote at 2021-12-02 06:32:17:

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.

raajg wrote at 2021-12-01 17:08:29:

Wow, the entire town is URL encoded!! Example:

http://oskarstalberg.com/Townscaper/#IzpjOEQ0ejP2X9w-b--c-X-...

raajg wrote at 2021-12-01 17:09:32:

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

JayStavis wrote at 2021-12-01 17:24:48:

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

samwillis wrote at 2021-12-01 19:29:23:

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.

jwolfe wrote at 2021-12-01 17:45:45:

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.

namdnay wrote at 2021-12-01 18:22:50:

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

slingnow wrote at 2021-12-01 18:59:51:

And how exactly would you represent these hypothetical stored towns?

Probably with a simple encoding.

slingnow wrote at 2021-12-01 19:02:50:

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

hoseja wrote at 2021-12-02 11:56:22:

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

IshKebab wrote at 2021-12-01 22:05:27:

No need. It's barely any data.

aroman wrote at 2021-12-01 17:05:19:

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

somethoughts wrote at 2021-12-01 18:09:32:

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.

aroman wrote at 2021-12-01 18:59:47:

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.

h0l0cube wrote at 2021-12-02 09:03:02:

> 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

daredevildave wrote at 2021-12-01 19:08:09:

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

jordwest wrote at 2021-12-01 23:17:03:

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

kingcharles wrote at 2021-12-01 17:31:33:

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!]

Andrew_nenakhov wrote at 2021-12-01 18:22:17:

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

jcun4128 wrote at 2021-12-01 17:21:36:

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.

londons_explore wrote at 2021-12-01 19:11:58:

80gb of ram is now mid range???

jcun4128 wrote at 2021-12-01 19:30:39:

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

BatFastard wrote at 2021-12-01 22:15:05:

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

jcun4128 wrote at 2021-12-01 22:35:51:

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.

tpmx wrote at 2021-12-01 19:25:23:

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

tpmx wrote at 2021-12-01 17:29:27:

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

jcun4128 wrote at 2021-12-01 18:17:33:

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

bathtub365 wrote at 2021-12-01 17:13:12:

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

Demcox wrote at 2021-12-01 21:42:42:

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

citizenkeen wrote at 2021-12-01 18:20:04:

Meanwhile, Godot 4 should be _editable_ in the browser.

aroman wrote at 2021-12-01 19:01:05:

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.

lupire wrote at 2021-12-01 21:38:41:

It's smooth, but it uses massive GPU resources even when idling.

_Microft wrote at 2021-12-01 15:40:02:

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

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

dunnevens wrote at 2021-12-01 23:08:38:

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

chriscjcj wrote at 2021-12-01 21:29:25:

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

ElijahLynn wrote at 2021-12-01 22:06:42:

I dig it, very cool!

bullen wrote at 2021-12-01 18:15:38:

Here is a speech about Townscaper:

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

at 1:12

evilhackerdude wrote at 2021-12-01 15:58:27:

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

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

Toutouxc wrote at 2021-12-01 17:56:50:

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

seaish wrote at 2021-12-01 18:54:28:

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.

citizenkeen wrote at 2021-12-01 18:53:02:

What makes you think it's a demo?

seaish wrote at 2021-12-01 18:55:15:

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

sktrdie wrote at 2021-12-01 17:43:12:

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.

eterm wrote at 2021-12-01 22:07:51:

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.

GabeIsko wrote at 2021-12-01 17:59:21:

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.

hoten wrote at 2021-12-02 06:31:47:

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.

tdrdt wrote at 2021-12-01 16:44:10:

Here a very interesting talk by Oskar Stålberg where he explains how this works:

https://youtu.be/1hqt8JkYRdI

btown wrote at 2021-12-01 16:50:43:

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

tdrdt wrote at 2021-12-01 16:53:43:

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.

kinduff wrote at 2021-12-01 21:28:37:

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.

julius_deane wrote at 2021-12-01 15:38:55:

Full version is available in Steam.

_Microft wrote at 2021-12-01 16:05:02:

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

simonebrunozzi wrote at 2021-12-01 19:10:59:

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

julius_deane wrote at 2021-12-02 03:24:14:

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

brundolf wrote at 2021-12-01 18:02:13:

Also on iOS/Android

atum47 wrote at 2021-12-01 17:51:59:

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.

d0100 wrote at 2021-12-02 13:02:50:

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

bobajeff wrote at 2021-12-01 16:39:26:

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.

tdrdt wrote at 2021-12-01 16:41:53:

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

aquir wrote at 2021-12-02 09:56:25:

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

Brings me joy

typon wrote at 2021-12-01 19:21:32:

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

mast4461 wrote at 2021-12-02 09:05:39:

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

zestyping wrote at 2021-12-02 02:24:17:

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.

jpindar wrote at 2021-12-02 02:33:37:

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

marcoslozada wrote at 2021-12-01 17:28:19:

If you put some good audio headphones its amazing!

braymundo wrote at 2021-12-01 19:17:26:

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

japhib wrote at 2021-12-01 21:54:26:

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.

sagivo wrote at 2021-12-01 20:33:04:

Works pretty smoothly on my Android device running Firefox.

Any details on how it was built?

japhib wrote at 2021-12-01 21:53:29:

it's just Unity's WebGL export

z3t4 wrote at 2021-12-01 17:20:27:

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.

totololo wrote at 2021-12-01 18:22:45:

In a way bad north is this technology with a gameplay

https://www.badnorth.com/

brundolf wrote at 2021-12-01 18:01:17:

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.

z3t4 wrote at 2021-12-01 20:06:16:

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.

andybak wrote at 2021-12-02 01:28:23:

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

govg wrote at 2021-12-01 23:58:00:

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.

user-the-name wrote at 2021-12-01 23:15:08:

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

skuthus wrote at 2021-12-01 17:47:56:

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.

padolsey wrote at 2021-12-01 19:16:06:

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.

ChrisArchitect wrote at 2021-12-01 22:18:08:

Gorgeous.

ChrisArchitect wrote at 2021-12-01 22:18:36:

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

dusted wrote at 2021-12-01 19:39:10:

oh this is delightful!

kyahsworld wrote at 2021-12-03 05:46:27:

Search Left

new line

kyahsworld wrote at 2021-12-03 05:43:45:

See full history on Wednesday, December 1, 2021

new line