MicropolisJS: A JavaScript clone of the original SimCity | Hacker News Reader

MicropolisJS: A JavaScript clone of the original SimCity

graememcc.co.uk

288 pointsAnnikaL54 comments

> Uh-oh!

> This screen is too small—I won't be able to fit in all the controls, buttons and gizmos! Sorry!

Most things like this say a vague "invalid browser" or try to let you play even though it's impossible. I like this approach better.

This is so much fun. I love the simplicity of the original feel of the game. No need for fancy graphics, etc. for it to be enjoyable.

And I'm amazed at 0 browser issues or weirdness. Takes me right back to my Tandy 1000.

My only wish it had the help stuff to remember how to resolve some of the problems in the city. I can't remember if that was in the game or in the book back in the day. I have housing and unemployment problems but have unpopulated residential, commercial, and industrial blocks. I know I'm missing something but my memory from the 80s/early 90s is failing me.

Instantly remembered to slow it down after a while to maintain roads and rail, get to nuclear power ASAP, keep industrial away from residential, build parks, and all of that.

Will need to start over again after a bit with better planning :).

Here is the html documentation from the Micropolis source code, which I typed in from the original SimCity manual (originally into FrameMaker, but then I converted it to HTML), that was released by EA under GPL:

https://github.com/SimHacker/micropolis/tree/master/Micropol...

Introduction:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Tutorial:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Reference:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Inside the Simulator:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

History Of Cities And City Planning by Cliff Ellis:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Bibliography:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Here is a pdf file of a scan of the HyperLook SimCity manual I made with the NeWS version of FrameMaker:

https://donhopkins.com/home/HyperLook-SimCity-Manual.pdf

And here's an illustrated transcript and video of the Hacking at Random talk I gave about Micropolis:

https://donhopkins.medium.com/har-2009-lightning-talk-transc...

Oh wow. Thanks!

I actually downloaded the TCL/Tk version because the railroad stopped dropping for me right on the web one and I was hooked again.

My 8yo daughter saw me playing and said “is that game like Minecraft”. I almost cracked up and told her it was a game I used to play when I was a little older than her. She sat with me a while and we played together.

It was so much fun. Just like when we’d huddle around a PC together pre-Internet. I was so glad to share that experience with her.

Thanks for all your work over the years on this breathing life into this.

Pretty fun! It crashes reliably for me right after I build a police station, however. Console says:

  micropolis.js?f750f1ad7f255ea64b6a:1 Uncaught TypeError: 
  A.Position is not a constructor
      at micropolis.js?f750f1ad7f255ea64b6a:1:242246
      at De.mapScan (micropolis.js? 
  f750f1ad7f255ea64b6a:1:243311)
      at Object.Wi [as _simulate] (micropolis.js? 
  f750f1ad7f255ea64b6a:1:272893)
      at Object.bi._simFrame (micropolis.js? 
  f750f1ad7f255ea64b6a:1:269927)
      at Object.bi.simTick (micropolis.js? 
  f750f1ad7f255ea64b6a:1:269535)
      at ys.Us (micropolis.js?f750f1ad7f255ea64b6a:1:350146)

https://github.com/graememcc/micropolisJS/issues/34

https://github.com/graememcc/micropolisJS/issues/34#issuecom...

quickly fixed and a lesson learned!

same for me

It's really fun. Please store state in localstorage if at all possible. I accidentally killed a tab and lost my city :(

The other issue I had was dragging with the road tool occasionally glitched and skipped squares. It'd be nice if you could allow users to drag fairly quickly and give them a nice straight road as an outcome.

Original Sim City had the same issue?

I'm not the creator of this (https://github.com/graememcc is), but using the "Save" button persists it across tabs for me (click the "Load Game" button on the homepage to load the state).

It seems to store game state in LocalStorage as JSON under the `micropolisJSGame` key.

I fixed that in the NeWS and X11 versions of SimCity, but probably that code didn't get ported to the JavaScript version, since it was in the user interface layer, which works a bit differently in MicropolisJS (and on every platform) of course.

The MicropolisEngine::toolDrag method does what you want, I think: it drags a tool from one tile to another, drawing all the tiles in-between without gaps.

It would be wonderful if somebody would port the "toolDrag" code to the JavaScript version. It's pretty brute force but straightforward. The mouse tracking code that calls it needs to pass in the previous mouse coordinates (in tile coordinates, independent of scrolling), of course.

(I'm sorry, but I haven't had time to work on Micropolis in a long time, but I'm delighted for other people to work on it and I love Graham's excellent work, and I'm happy to answer any questions.)

https://github.com/SimHacker/micropolis/blob/master/Micropol...

    /**
     * Drag a tool from (\a fromX, \a fromY) to (\a toX, \a toY).
     * @param tool Tool being dragged.
     * @param fromX Horizontal coordinate of the starting position.
     * @param fromY Vertical coordinate of the starting position.
     * @param toX Horizontal coordinate of the ending position.
     * @param toY Vertical coordinate of the ending position.
     */
    void Micropolis::toolDrag(EditingTool tool,
                                short fromX, short fromY, short toX, short toY)
    ...
        // Do not drag big tools.
    ...
        doTool(tool, fromX, fromY); // Ensure the start position is done.
    ...
        // Vertical line up or down
    ...
        // Horizontal line left/right
    ...
        // General case: both X and Y change.
    ...

Here's the Python code for the MicropolisTool class that calls it (via SWIG), in the PyGTK user interface:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

And here's the client/server version (OpenLaszlo/Flash client, Python/TurboGears server):

Laszlo appview.drawToolStart/Move/Start:

https://github.com/SimHacker/micropolis/blob/master/laszlo/m...

Python Micropolis Session handleMessage_drawToolStart/Move/Stop:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Looks like the old TCL/Tk/X11 version even let you hold down the control key to constrain the road/rail to vertical or horizontal lines -- that's a nice feature I totally forgot about:

https://github.com/SimHacker/micropolis/blob/master/micropol...

Make sure you call toolDrag on the initial and final mouse coordinate on mouse down and up, don't just call toolDrag on mouse move events (or animation ticks), or you might miss the initial source or final destination when the user draws quickly!

For extra credit, make sure the drawing tools work smoothly and reliably with auto-scroll! That makes drawing long roads and railroads easy. ;)

Some of the above user interface code is tricky because it supports multiple views, and each view must maintain its own independent track state. (TCL/Tk/X11 SimCity supported not only multiple views, but also multi-player mode with one X11 client connected to several X11 servers at once (which is rightfully considered a terribly unsafe practice these days), so several people could actually be drawing at once, and you don't want to get their tracking state mixed up! The Python/Flash networked version supported multiple views and users via multiple independent "Sessions" attached to the same simulator, and all the tracking state (like the last tile position to draw from) stayed on the client side.)

Nowadays it's second nature for user interface views to encapsulate all of the mouse tracking state, but the original SimCity code (and the original TCL/Tk UI tracking code) just had lots and lots of global variables! So all the mouse tracking and tool drawing stuff needed to be abstracted and implemented in a higher level platform specific layer, instead of inside MicropolisCore.

Amazing, it even warned me after I spent half an hour on the game! I wish more programs would do that.

The ask for a donation at this point was a great touch too. He knew we’d had some fun by this point.

Graham's great work deserves generous donations to his favorite charity (which helps refugees, very important these days)!

His approach is much less destructive and annoying than what the commercial version of Unix SimCity did before it was GPL, if you hadn't bought a license, which I called the "Akira Effect".

The free demo version (which could be unlocked by buying a license) would let you play for about 5 minutes, then it would abruptly and without warning melt your city with one of two different cellular automata effects, animating the cells using the SimCity tiles, while the editing tools would still work, and sprites like the monster and tornado would still run around the melting city!

https://www.donhopkins.com/home/catalog/simcity/simcity-anno...

>Multi Player SimCity is available directly from DUX Software, and via anonymous ftp from ftp.uu.net (192.48.96.9), in the directory "vendor/dux/SimCity". You may freely copy it, and play the fully functional game in "demo mode" on one display without a license, but the city melts every 5 minutes. If you enjoy SimCity, you can buy a license over the phone by credit card, without leaving your seat! A single player license lets you save and restore your cities, and play for as long as you like on one display; a multi player license lets you play SimCity with your friends over the net!

(You couldn't use credit cards over the internet in 1993 so we had to sell license codes over the phone.)

https://www.youtube.com/watch?v=P8KJ--drZO8

> Cellular SimCity: Cellular Automata in SimCityNet on Unix.

In retrospect, melting your city seems like a pretty mean and hostile way of intimidating prospective customers into forking over their money. I'm glad Graham's figured out a better approach, which helps a deserving charity, and also reminds you not to ruin you life by playing too much!

Same thing was in Anno. It warned me that i play too long way too many times.

This is incredibly cool, thanks to Don Hopkins for open-sourcing the original (C, C++ or Java implementations) micropolis codebase [1] !

As a shameless plug, I've been for the last few years re-implementing on and off this exact same project (based on the C++ codebase) in Rust, WebAssembly and Svelte! [2] Quite a bunch of buzzwords I know, but it's specifically made for me to have fun.

The map generation is working (or at least it was properly rendered when I was using React) and about ~50% of the codebase has been ported over to Rust, but there's still a lot of work to be done if anyone wants to help!

The end goal is notably to have tons of slick data visualisations with d3.js.

[1] https://github.com/SimHacker/micropolis [2] https://github.com/pierreyoda/micropolis-rs

Oh this brought back memories. I remember playing Sim Ant on my Macintosh Classic for hours on end. The same look and feel. Just that I had a b/w screen.

What a great way to have a throwback Monday.

document.getElementById('wrapper').style.filter = 'grayscale(100%)';

document.getElementById('hnmain').style.filter = 'grayscale(100%)' // for Hacker News :)

Why not just:

    document.body.style.filter = 'grayscale(100%)';

EDIT: Actually, neither of these approaches actually works for the game it seems. The map and any actual "tiles" are hidden when this is put in place, whether it's on the wrapper or the body.

Green monochrome emulation:

    sepia(1) hue-rotate(54deg) saturate(3)

Sim Ant was the first game I bought with my own money, back in the day, as my start to collect ALL the Maxis games after getting my hands on SimCity + SimEarth. This was an excellent thing to wake up to.

I really wish I could play SimAnt on my iPhone.

I do and I don't. Maxis has stolen many more hours of my life than any Big Tech company; mobile Maxis games are dangerous.

I've always wanted to do a mobile MMPORG version of SimAnt, in which every player is a unique ant (or villainous spider!), crawling around with the GPS, with waving and shaking and spinning gestures for digging and eating and fighting and dancing and communicating!

I grew up with color screens on everything but my GameBoy Pocket. But for some reason the B/W laptop my oldest sister had gotten for college in the early 90s made it's way home for me to mess with and I was surprised how well so many of my favorite DOS games worked in B/W.

A friend and I played a lot of adventure games on a 486 Compaq laptop with grayscale.

I've got the original black-and-white SimCity tile set kicking around somewhere, as well as all of the original color tile packs, too. (Medieval Village, Moon Base, etc.) It should be possible and straightforward to convert and reformat them into a single tile bitmap, and drop it in. If somebody wants to add them, ask me and I'll dig them up.

Original color tiles:

https://github.com/SimHacker/micropolis/blob/master/Micropol...

Chaim Gingold's SimCity Reverse Diagrams visually illustrate how all the tiles are organized, grouped, and animated, how the different phases of "Simulate()" perform different kinds of analysis over time, how the traffic and other simulations work, how data flows through the different map layers and models, and how different parts of the simulation interact with each other.

https://lively-web.org/users/Dan/uploads/SimCityReverseDiagr...

>SimCity reverse diagrams, by Chaim Gingold (2016).

>These reverse diagrams map and translate the rules of a complex simulation program into a form that is more easily digested, embedded, disseminated, and and discussed (Latour 1986).

>If we merge the reverse diagram with an interactive approach—e.g. Bret Victor’s Nile Visualization (Victor 2013), such diagrams could be used generatively, to describe programs, and interactively, to allow rich introspection and manipulation of software.

>Latour, Bruno (1986). “Visualization and cognition”. In: Knowledge and Society 6 (1986), pp. 1– 40.

>Librande, Stone (2010). “One-Page Designs”. Game Developers Conference. 2010.

>Victor, Bret (2013). “Media for Thinking the Unthinkable”. MIT Media Lab, Apr. 4, 2013.

Also, for those who don't know archive.org lets you play original simcity in emulator in browser - https://archive.org/details/msdos_SimCity_1989

So, when people make a clone like this, do they painstakingly recreate every piece: graphics, logic and so forth, or do they typically get access to some of the original code or graphics and transfer it over.

This thing looks like it was recreated from scratch.

edit: minor rewording.

AFAIK, they never recreate the graphics.

You write code that is able to read the assets (graphics, sound, etc) - like the original code is able to.

The short answer is it depends. In this case where you want to independently distribute a game in a playable state, you need to recreate everything from scratch in order to not violate copyright.

In other cases, they only implement the game code, and you need to source the maps, assets, etc from an original copy. The goal with this is usually to fix bugs and quality of life issues on modern systems, not to supplant the original game or any remaining sales of it. Good example of this IMHO is OpenRCT2 which provides an opensource client compatible with Rollercoaster Tycoon2.

> The short answer is it depends. In this case where you want to independently distribute a game in a playable state, you need to recreate everything from scratch in order to not violate copyright.

Unless the original is under a license which allows derivatives; e.g., the original SimCity specifically was released (as “Micropolis”, because of trademark issues) under GPLv3 in 2008, so GPLv3 downstream versions (like MicropolisJS) don't have to recreate anything from scratch to avoid copyright issues.

Looking at the docs for that, it looks like they had to redo most of the assets for exactly this reason. The person who put it on the web may not had to redo them, but someone did. https://github.com/SimHacker/micropolis/blob/wiki/Assets.md

The Micropolis name was used to avoid hitting EA trademark, but it came from the original game's porting team:

https://wiki.laptop.org/go/Micropolis#History_and_Future_of_...

https://donhopkins.medium.com/har-2009-lightning-talk-transc...

I have this strong memory of playing tons of SimCity on my dad’s mac and then it stopped working when he upgraded his computer from 16 to 256 colors. It was a sad day.

https://github.com/graememcc/micropolisJS

Super cool dude, thanks for building and sharing this!

The credit for building it goes to graememcc (https://github.com/graememcc), but it _is_ super cool!

Does anyone know how to prevent pollution? I have only nuclear power since day one, but my industry is very dirty. I guess the only way is killing off my industry, but then I suffer from unemployment.

Try spreading out the Industry units and keep them away from Residentials

Ooh, zero dependencies (not counting dev dependencies). Such a rare treat to see that in the JS ecosystem <3

edit: oh, there is also a manually included jquery dependency :P Still pretty minimal and impressive <3

Anyone know of an open equivalent to Caesar II? I feel like this is just before these SIM games became enjoyable for me.

Does the FUNDS trick work in this version as well? And, if so, does it cause an earthquake the 4th time you use it?

Are the graphics intentionally weird, or am I experiencing a bug?

Next stop: JavaScript clone of Civilization 2...

Pleasantly surprised at the source code for this.

Looks super cool!

Any framework used in this project?

jQuery

During my day job I use Vue and and Typescript. In my side projects I use Java to build web apps and to serve the pages and jQuery to add bits of dynamic interactivity. Love jQuery. I miss the old days, everything is so overly complex now.

jQuery is overly complex.

been playing this for a little while now, and using the about:performance I compared how this behaves. It uses less resources than a tab with Slack, Gmail, Trello, Stripe's documentation page, my CDN resource page, and the browser's task manager itself. Color me impressed

Reply on news.ycombinator.com