A kids traffic mat in Elm

https://matiasklemola.com/liikennematto-devlog-five

by eliasson • 2 years ago

178 16 2 years ago

Like SimCity.

MisterTea• 2 years ago

More like SimTown: https://en.wikipedia.org/wiki/SimTown I played it long ago and was pretty simple and fun. More kid friendly for sure but it didn't have traffic from memory.

actuallyalys• 2 years ago

There wasn’t traffic in the sense of sums complaining about heavy traffic, but I believe the game had car animations. I definitely remember pedestrians and cyclists.

klemola2• 2 years ago

Whoa, didn’t expect to make it here. Thanks, OP!

This has been a fun (and rather long) project. I craved for a simple city builder that a toddler could play and understand. You might want to start from the first devlog entry to see where Liikennematto came from.

You can play Liikennematto in your browser on itch.io[1] (the link is buried at the end of the article).

[1] https://yourmagicisworking.itch.io/liikennematto

eliasson• 2 years ago

Thank you for building an writing about it, I have enjoyed reading about your progress over the years!

tetris11• 2 years ago

It plays pretty well on my 8 year old phone (hint to others: make adjacent dots, don't drag)

airstrike• 2 years ago

Pretty cool! Sounds like a fun project to try to port over to Rust using iced if anyone is looking for ideas ;-)

https://github.com/iced-rs/iced

grumpyprole• 2 years ago

Well done to the author on this project. A beautiful architecture and code base with not an "object" in sight. Projects such as this demonstrate how complex interactive applications can be built without pervasive mutable state. Pure functions are everywhere, which makes it much easier to reason about, test and reuse this code

klemola2• 2 years ago

Thank you! Using a pure functional programming language in a game project has been suprisingly easy. I find an event driven, completely asynchoronus architecture well suited for a simulation game such as Liikennematto. Some events are big (a road tile was placed - this will update the tilemap as well as the road network graph), and some are small (UI events). Everything boils down to how an event will transform the game state.

Though many games have been built with Elm, I've had to implement lots of "game engine" code myself. For example, the collision system, physics (acceleration etc.), and path finding are custom code. It's worth mentioning that this is my fist gamedev project, and I've had to read up a quite a bit on the topic. Still the difficult was not in Elm itself, but in math and data structures, as it would be on any language.

Elm's lack of runtime exceptions and mutable state makes any game quite robust. Most of the bugs in Liikennematto have been of omissions (forgot to update something) and in math formulas. 3rd party Elm libraries are often excellent with great docs and have helped along the way.

Lastly Elm is quite performant (pure functions can be inlined and easily optimized) and I can create a single .js file that contains the game code, UI and the assets (which are still SVG in Elm). The whole game is still about 1 megabyte minimized! I think that's amazing, despite not shipping the runtime enviroment (the browser).

hombre_fatal• 2 years ago

This is really polished. It's one thing to make cars drive around a city, but really cool to also make them go into and exit parking.

I've done some basic game dev in Elm and was surprised how nice it was. In one game, I had melee fighters moving around a map fighting each other. Much later I came back to add a projectile class.

Having not touched the game code in months, adding an archer was a matter of adding an `Archer` model (with archer specific state) to an enum and then following the errors until I'd handled the archer at every switch site in the code. It blew my mind that I had a working archer system without even running the code once and without having to reload the whole code base into my head.

spicyusername• 2 years ago

Elm is a fun language to work with.

tmountain• 2 years ago

Beautiful write up, thank you!

falcor84• 2 years ago

An amazing project, kudos!

I wonder if there is some reasonably priced flexible display I could use to make this into an actual "mat" for kids to play on.

EDIT: I just found this; anyone here with experience with this kind of tech? https://www.aliexpress.com/item/1005006497423497.html

trenchgun• 2 years ago

I could use to make this into an actual "mat" for kids to play on.

Ok so what I actually would for something like this, is having the traditional play mat, and in addition to that, have a digital-physical hybrid traffic simulation with programmable physical cars driving around, and remotely steerable toy car that your kid could drive around the traffic.

k99x55• 2 years ago

Good intention but car-centric infra is the worst example we can give to our children.

You should teach how to build those streets for people first, bicycles second, public transportation third, cars last.

Build for people not for machines.

Bicycle are all age inclusive, all ability inclusive. Cars is the most discriminatory mode of transport.

Those crosswalks should be continuous: https://www.youtube.com/watch?v=9OfBpQgLXUc

euroderf• 2 years ago

It reminds a bit of the classic phone game Centipede, which I guess could make it "Liikenne-Mato".

A kids traffic mat in Elm

Related Stories