8 ms·
MicropolisJS: A JavaScript clone of the original SimCity
- shikhardevgupta 5y agoLooks super cool!
- rijieli 5y agoAny framework used in this project?
- jenscow 5y agojQuery
- good8675309 5y agoDuring 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.
- cxr 5y agojQuery is overly complex.
- sdoering 5y agoOh 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.
- blackoil 5y agodocument.getElementById('wrapper').style.filter = 'grayscale(100%)';
- jmkni 5y agodocument.getElementById('hnmain').style.filter = 'grayscale(100%)' // for Hacker News :)
- BeefWellington 5y agoWhy 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.
- tiborsaas 5y agoGreen monochrome emulation: sepia(1) hue-rotate(54deg) saturate(3)
- Mezzie 5y agoSim 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.
- yosito 5y agoI really wish I could play SimAnt on my iPhone.
- Mezzie 5y agoI do and I don't. Maxis has stolen many more hours of my life than any Big Tech company; mobile Maxis games are dangerous.
- DonHopkins 5y agoI'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!
- goda90 5y agoI 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.
- MisterTea 5y agoA friend and I played a lot of adventure games on a 486 Compaq laptop with grayscale.
- DonHopkins 5y agoI'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/MicropolisCore/src/images/micropolisEngine/tiles.png 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/SimCityReverseDiagrams.pdf 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.
- rmbyrro 5y agoSuper cool dude, thanks for building and sharing this!
- AnnikaL 5y agoThe credit for building it goes to graememcc (https://github.com/graememcc https://github.com/graememcc), but it _is_ super cool!
- willcipriano 5y ago> 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.
- bradrn 5y agoAmazing, it even warned me after I spent half an hour on the game! I wish more programs would do that.
- jonwinstanley 5y agoThe ask for a donation at this point was a great touch too. He knew we’d had some fun by this point.
- DonHopkins 5y agoGraham'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-announcement.html 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 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!
- 5y ago
- jacobkg 5y agoI 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.
- salmo 5y agoThis 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 :).
- DonHopkins 5y agoHere 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/MicropolisCore/documentation https://github.com/SimHacker/micropolis/tree/master/Micropol... Introduction: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/documentation/intro.html https://github.com/SimHacker/micropolis/blob/master/Micropol... Tutorial: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/documentation/tutorial.html https://github.com/SimHacker/micropolis/blob/master/Micropol... Reference: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/documentation/reference.html https://github.com/SimHacker/micropolis/blob/master/Micropol... Inside the Simulator: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/documentation/inside.html https://github.com/SimHacker/micropolis/blob/master/Micropol... History Of Cities And City Planning by Cliff Ellis: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/documentation/history.html https://github.com/SimHacker/micropolis/blob/master/Micropol... Bibliography: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/documentation/bibliography.html 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 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-transcript-constructionist-educational-open-source-simcity-by-don-3a9e010bf305 https://donhopkins.medium.com/har-2009-lightning-talk-transc...
- omarhaneef 5y agoSo, 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.
- onlyrealcuzzo 5y agoAFAIK, 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.
- bragr 5y agoThe 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.
- dragonwriter 5y ago> 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.
- bragr 5y agoLooking 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 https://github.com/SimHacker/micropolis/blob/wiki/Assets.md
- eastbayjake 5y agoNext stop: JavaScript clone of Civilization 2...
- dylan604 5y agobeen 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
- bawolff 5y agoAlso, for those who don't know archive.org lets you play original simcity in emulator in browser - https://archive.org/details/msdos_SimCity_1989 https://archive.org/details/msdos_SimCity_1989
- blurker 5y agoOoh, 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
- roschdal 5y agohttps://github.com/graememcc/micropolisJS https://github.com/graememcc/micropolisJS
- lopis 5y agoDoes 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.
- jonwinstanley 5y agoTry spreading out the Industry units and keep them away from Residentials
- jcpst 5y agoPleasantly surprised at the source code for this.
- smallerfish 5y agoIt'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.
- JKCalhoun 5y agoOriginal Sim City had the same issue?
- AnnikaL 5y agoI'm not the creator of this (https://github.com/graememcc 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.
- DonHopkins 5y agoI 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/MicropolisCore/src/MicropolisEngine/src/tool.cpp#L1508 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/MicropolisCore/src/pyMicropolis/micropolisEngine/micropolistool.py#L79 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/micropolis/classes/appview.lzx#L1811 https://github.com/SimHacker/micropolis/blob/master/laszlo/m... Python Micropolis Session handleMessage_drawToolStart/Move/Stop: https://github.com/SimHacker/micropolis/blob/master/MicropolisCore/src/pyMicropolis/micropolisEngine/micropolisturbogearsengine.py#L1107 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/micropolis-activity/res/micropolis.tcl#L2508 https://github.com/SimHacker/micropolis/blob/master/micropol... https://github.com/SimHacker/micropolis/blob/master/micropolis-activity/src/sim/w_editor.c#L216 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.
- rootusrootus 5y agoPretty 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)
- wesleytodd 5y agohttps://github.com/graememcc/micropolisJS/issues/34 https://github.com/graememcc/micropolisJS/issues/34
- wesleytodd 5y agohttps://github.com/graememcc/micropolisJS/issues/34#issuecomment-1061153596 https://github.com/graememcc/micropolisJS/issues/34#issuecom... quickly fixed and a lesson learned!
- jcuenod 5y agosame for me
- jcuenod 5y agoAnyone know of an open equivalent to Caesar II? I feel like this is just before these SIM games became enjoyable for me.
- pierreyoda 5y agoThis 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 https://github.com/SimHacker/micropolis [2] https://github.com/pierreyoda/micropolis-rs https://github.com/pierreyoda/micropolis-rs
- Beldin 5y agoDoes the FUNDS trick work in this version as well? And, if so, does it cause an earthquake the 4th time you use it?
- HWR_14 5y agoAre the graphics intentionally weird, or am I experiencing a bug?