11 ms·
Show HN: A tiny isometric city builder in JavaScript
- atum47 7y agoHi everyone. I've made a isometric tile map a while ago - http://jsfiddle.net/victorqribeiro/k3bazwnj/ http://jsfiddle.net/victorqribeiro/k3bazwnj/ - but yesterday I found this really cool tile set - free to use - so I decided to make a tiny city builder. Hope you like it.
- sansnomme 7y agoWould you mind adding support for touch devices?
- atum47 7y agowhat device you're on? cause it works on my phone
- quickthrower2 7y agoDont drag. Touch the piece and the touch the spot to drop it on.
- z3t4 7y agoYou can make some really nice looking games using isometric tiles, Ceasar 3 comes to mind. Which looks much better then Ceasar 4 IMHO, which is 3d AFAIK. And game-play also feels better in C3.
- 52-6F-62 7y agoCaesar 3 was a fantastic game. Also: plebs are needed.
- billfruit 7y agoSame with Age of Empires 2 vs 4. Also Brigador for example of a recent game which makes excellent use of isometric visuals.
- Delameko 7y agoI still play Transport Tycoon fairly often. The open version at https://www.openttd.org/ https://www.openttd.org/ is my goto. I've tried a lot of the newer city builders and the 3D just does not do it for me. I find it clunky and awkward.
- whatsmyusername 7y agoI played the f--- out of Ceasar 2 as a kid. That game was so good.
- masukomi 7y agoi like it. Having to scroll through long vertical list of tiles to find the one you want is kind-of a pain though. Other than that, nifty. :)
- atum47 7y agothat was the easiest most intuitive way I found to display the tiles. it's not great though
- zamadatix 7y agoNothing wrong with a scrolling layout, it's just a bit overrestricted: https://i.imgur.com/76BML6a.png https://i.imgur.com/76BML6a.png Filling some of the whitespace with scrollable grid of pieces would go a long way towards decreasing time for piece selection.
- lonelappde 7y agoA 2D array might be easier to scroll through. Also, I suggest highlighting the currently selected piece.
- andai 7y agoCame here to make both of these suggestions!
- _nalply 7y agoPerhaps make the list horizontal because of the highrises wasting space on the vertical list?
- mysterydip 7y agoLove it! Kenney makes some really nice assets. You might want to check out Raccoon Media https://racoon.media/ https://racoon.media/ and Quaternius http://quaternius.com/assets.html http://quaternius.com/assets.html for some expanded tiles that go with this set.
- mutagen 7y agoMy wife saw this on screen and said “Oh, is that a kitchen planner?” Hmm, MIT license, this could be a kitchen planner for her :)
- atum47 7y agoI'm planning on doing this in webgl. Then she would be able to fully navigate her virtual kitchen. =)
- abj 7y agoIf you make this I'd love to help out
- atum47 7y agoTo anyone interested in the webgl version, it would work something like this - https://victorribeiro.com/voxel/ https://victorribeiro.com/voxel/ - click to place a bloc, click and drag on the sides of the screen to rotate the view, keys 1 to 9 change the block.
- devadvance 7y agoNice, simple, and fun! I also appreciate that you're very open to contributions! :)
- atum47 7y agothank you
- amelius 7y agoSmall suggestion for UI improvement: while hovering over a tile, and pressing (say) the R key, you could rotate the tile by 90 degrees.
- mdorazio 7y agoThis generally doesn’t work for isometric tiles because flipping the tile on the y axis (what you’re suggesting by rotate 90) does not preserve the lighting being on the correct side, so the flipped tile looks wrong. In most cases you would need a whole new tile for the rotated piece.
- amelius 7y agoYes, I meant a newly rendered tile. Or just the corresponding rotated tile from the library if it exists.
- hyperpallium 7y agoYou could use two bits in each pixel to indicate horizontal, left or right, and post-process light/dark depending on orientation. (Assuming only those faces and senses... though this project also has sloping roofs). Or, couldn't you pretend the city rotated but the sun didn't (like a model under a lamp), so lighting is the same for all orientations?
- gherkinnn 7y agoI spent a good 20min building little towns. Nice post.
- atum47 7y agothat's what I like to hear
- Jaygles 7y agoKind of related - When I was learning webdev I built something similar (to the end result) from scratch using css animations. https://jaygles.github.io/city-block/ https://jaygles.github.io/city-block/ Garbage newbie code for it here - https://github.com/Jaygles/city-block https://github.com/Jaygles/city-block Seems like some recent browser updates sort of broke the main animation but if you really want to see something fun open it in IE.
- sbussard 7y agoNice work!
- hinkley 7y agoThis takes me back. One of the last projects I did in college was a terrain generator. After, I was learning a new programming language, so I picked it up again to experiment with some world building. I started trying to generate more realistic (and traverseable) terrain. I had worked out coastlines and rivers, made some headway on biomes, and gotten stuck on simulated erosion before I remembered that I like games a little too much and didn’t want to make them for a living. I was pretty bummed when No Man’s Sky was panned. Using generated terrain as a canvas and dropping a story into it still feels like the right long-term solution for exploration games.
- yissp 7y agoReally cool project! Small suggestion, some indication of which type of tile is currently selected might be nice (like maybe highlight it or something).
- anonytrary 7y agoI agree, really cool, also have a small suggestion -- it'd be nice if you could click and drag to "draw" tiles into the main board. Currently you can only click tile-by-tile.
- iod 7y agoReminds me of this shadertoy: https://www.shadertoy.com/view/MljXzz https://www.shadertoy.com/view/MljXzz
- ogre_codes 7y agoThis is rad, now I need to find some iso dungeon tiles.
- yissp 7y agokenney.nl (creator of the tiles from the OP) has got a whole bunch of similar sets with different themes. https://opengameart.org/content/isometric-dungeon-tiles-60 https://opengameart.org/content/isometric-dungeon-tiles-60
- atum47 7y agoyes, I made sure to link to his work
- ogre_codes 7y agoAfter posting the above I did a quick search and wound up on that exact page, some of those tiles are damned nice looking.
- leonardteo 7y agoReally neat work! :)
- atum47 7y agothanks a lot
- simonsarris 7y agoVery neat. Do you want people to contribute to this project? I just made a pull request that allows right click to clear tiles.
- atum47 7y agoI have answered you. if you remove click event it would stop working on touch devices, cause touch also trigger click, but not mousedown.
- Aperocky 7y agoNice, was planning something similar with map simulations: http://aperocky.com/prehistoric http://aperocky.com/prehistoric (Warn: bad on mobile)
- photon_lines 7y agoCool! I built a toy procedural city / city block generator earlier this year...in case anyone wants to check it out, you can find it here: https://github.com/photonlines/Procedural-City-Generator https://github.com/photonlines/Procedural-City-Generator
- cerberusss 7y agoPretty fun bit of software!
- atum47 7y agoI can't upload the live version for now, cause I'm on a family event. I'll enable the GitHub version so everyone making pull requests can see the changes live
- ynniv 7y agoIt would be great if this stored the city as data in the URL so we could share them.
- kfarr 7y agoI was just looking at the source code, it appears `map` is a global variable that is a 7x7 grid representing your current city (49 arrays of `[0,0]` by default). This could be serialized to a URL hash that could be shared. source: https://github.com/victorqribeiro/isocity/blob/master/js/main.js#L17 https://github.com/victorqribeiro/isocity/blob/master/js/mai...
- atum47 7y agoopen an issue as suggestion, if no one does it, I'll do it later. I'm on a party now
- krokicki 7y agoThis is definitely a fun little project to hack on! I created a pull request to keep the current state in the URL. Here's something I made with it: #IjIqKioyIgoxKioqMQoKMRwZGzEKCjEYARgxCgoxGhkdMQoKMSwsLDEKIzAsLCwwIw==
- atum47 7y agoreally appreciate it. thanks
- ynniv 7y agoAwesome! https://victorribeiro.com/isocity/#IjIqKioyIgoxKioqMQoKMRwZGzEKCjEYARgxCgoxGhkdMQoKMSwsLDEKIzAsLCwwIw== https://victorribeiro.com/isocity/#IjIqKioyIgoxKioqMQoKMRwZG...
- ynniv 7y agohttps://victorribeiro.com/isocity/#AAAAAAYpAgA7Ny4EIwAHBQIHCQIHMhwZKwQiADEYARwVJgIxGhkdFBkfMAAAAAYALw== https://victorribeiro.com/isocity/#AAAAAAYpAgA7Ny4EIwAHBQIHC...
- jonbennett18 7y agoFantastic. Like a mini sim city. Probably works better than the original PS version.
- atum47 7y agoeveryone wanting to contribute: I thought about adding a print screen button a save button that keeps the map on a localStorage would also be great
- atum47 7y agoof course that would need a UI
- matthewhartmans 7y agoVery cool OP!! Amazing work!
- atum47 7y agothank you
- kfarr 7y agoThis is a super fun app and I'm also very impressed by the elegant simplicity and readable code of this project! The tools you provided are perfect -- they offer just enough options to open up fun original creations while providing practical limitations to stay productive. PS. Love your github tagline "I'm a Brazilian times better than your average coder." :)
- DDR0 7y agoOh cool! I made something similar for my website gallery[1], it was an easter egg that you could play with if you pulled the pull-cord at the bottom of the page. In the middle of the page. Scrolling is a bit broken it seems now, though, so you have to find it yourself. (I really need to revisit it, I know so much more now.) [1] http://ddr0.github.io/gallery http://ddr0.github.io/gallery
- hyperpallium 7y agolive demo works on mobile, looks very nice, but not seeing rotate controls https://victorribeiro.com/isocity/ https://victorribeiro.com/isocity/ Doesn't seem to implement rotation - it can reveal obscured objects. https://github.com/victorqribeiro/isocity/blob/master/js/main.js https://github.com/victorqribeiro/isocity/blob/master/js/mai...
- lwb 7y agoThought this was a clever trick: const $ = _ => document.querySelector(_) Pretty well sums up the state of jQuery in 2019 (almost 2020!)
- drusepth 7y agoWhat does this trick do?
- grardb 7y agoWritten in older JS, it would look like this: $ = function(_) { return document.querySelector(_) } It basically turns `$` into an alias for `document.querySelector`. I'm not sure that it's any different from: $ = document.querySelector
- iudqnolq 7y agoSadly it is different because of the magic of this. If you set something equal to document.querySelector and then call it this will no longer refer to document. There are fancier ways with Function.prototype.bind, but wrapping in a function is the easiest conceptually. https://www.taniarascia.com/this-bind-call-apply-javascript/ https://www.taniarascia.com/this-bind-call-apply-javascript/ For this specific case, you can see this at https://stackoverflow.com/q/13383886/8334056 https://stackoverflow.com/q/13383886/8334056
- andai 7y agoJust checked on CanIUse, querySelector() actually has full support* since 2009! Btw, querySelectorAll() to match multiple elements. * IE partial until 2011
- mLuby 7y agoSuper cool! Anyone recognize what this makes? map=Array(7).fill(Array(7).fill(3)).map((a,i)=>a.map((x,n)=>[0,i>3&&n<3?1:3]));drawMap()
- jdauriemma 7y agoCan you be more specific?
- thinkingkong 7y agoThat creates a pre-filled two dimensional array as a one-liner.
- atum47 7y agonice
- bump-ladel 7y agoThis is beautiful. I think that the success of games like Transport Tycoon is in large part down to an undefined satisfaction that comes from the graphic style.
- deleted 7y ago[deleted]
- 11235813213455 7y agoYou need to make the scrollable sidebar on the left much more compact, it's not very usable currently
- gokhan 7y agoRemembers me the Isle of Tune, part of the forgotten flash based past of the Internet. https://isleoftune.com/ https://isleoftune.com/ Edit: Seems like there's an app for that.
- fit2rule 7y agoNeat! Now all it needs is 3 or 4 massive animal/human hybrid monsters to smash it all to rubble... ;)
- cerberusss 7y agoEverything is better when you add Kaiju.
- whatsmyusername 7y agoThis is very cute.
- atum47 7y agoglad you liked it
- ykevinator 7y agoReally neat.
- atum47 7y agothanks
- lancesells 7y agoMuito bom! This is a fun tool.
- atum47 7y agovaleu
- michelb 7y agoI love these city builders. Here is something I can't wait to play with: https://twitter.com/OskSta/status/1205416648397721601 https://twitter.com/OskSta/status/1205416648397721601
- Gigablah 7y agoThis could use a tileset for cloud architecture diagrams :)
- blader_johny 7y agoBuilt a similar builder prototype here: http://e2s-game.surge.sh/ http://e2s-game.surge.sh/ Suppose it should contain a mission where you need to answer a set of questions to proceed
- antman 7y agoVery cool. Some icons for network infrastructure and it could also be a network visualisation tool