Show HN: A tiny isometric city builder in JavaScript | Hacker News Reader

Show HN: A tiny isometric city builder in JavaScript

github.com

593 pointsatum47104 comments

Hi everyone. I've made a isometric tile map a while ago - 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.

Would you mind adding support for touch devices?

what device you're on? cause it works on my phone

Dont drag. Touch the piece and the touch the spot to drop it on.

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

Caesar 3 was a fantastic game.

Also: plebs are needed.

Same with Age of Empires 2 vs 4. Also Brigador for example of a recent game which makes excellent use of isometric visuals.

I still play Transport Tycoon fairly often. The open version at 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.

I played the f--- out of Ceasar 2 as a kid. That game was so good.

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

that was the easiest most intuitive way I found to display the tiles. it's not great though

Nothing wrong with a scrolling layout, it's just a bit overrestricted: 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.

A 2D array might be easier to scroll through.

Also, I suggest highlighting the currently selected piece.

Came here to make both of these suggestions!

Perhaps make the list horizontal because of the highrises wasting space on the vertical list?

Love it! Kenney makes some really nice assets. You might want to check out Raccoon Media https://racoon.media/ and Quaternius http://quaternius.com/assets.html for some expanded tiles that go with this set.

I can't find any tiles with railway tracks though :(

I think there's someone working on adding more tiles.

My wife saw this on screen and said “Oh, is that a kitchen planner?”

Hmm, MIT license, this could be a kitchen planner for her :)

I'm planning on doing this in webgl. Then she would be able to fully navigate her virtual kitchen. =)

If you make this I'd love to help out

To anyone interested in the webgl version, it would work something like this - 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.

Nice, simple, and fun!

I also appreciate that you're very open to contributions! :)

thank you

Small suggestion for UI improvement: while hovering over a tile, and pressing (say) the R key, you could rotate the tile by 90 degrees.

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

Yes, I meant a newly rendered tile. Or just the corresponding rotated tile from the library if it exists.

You 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?

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

thanks, I was afraid my tagline would make me look arrogant. glad you liked it.

It’s smooth.

"Brazilian" is of an undefined value, so it's fine.

Kind 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/

Garbage newbie code for it here - 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.

This is great! Did you generate this, or did you do it by hand?

I did it by hand as an exercise to learn css grid and css animations

Reminds me of this shadertoy:

https://www.shadertoy.com/view/MljXzz

Really cool project! Small suggestion, some indication of which type of tile is currently selected might be nice (like maybe highlight it or something).

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

Thought this was a clever trick:

const $ = _ => document.querySelector(_)

Pretty well sums up the state of jQuery in 2019 (almost 2020!)

What does this trick do?

Written 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

Sadly 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/

For this specific case, you can see this at https://stackoverflow.com/q/13383886/8334056

For posterity:

  $ = document.querySelector.bind(document);

Thank you

Just checked on CanIUse, querySelector() actually has full support* since 2009!

Btw, querySelectorAll() to match multiple elements.

* IE partial until 2011

This is written by someone who has never used jquery or forgot it. The beauty of jquery was not being able to use CSS selectors to find elements, but in being able to work with multiple selected elements as if it was a single one.

Ok, you will say, but you can always do

[... document.querySelectorAll('.foo .bar')].map(it => it.style.backgroundColor = 'corn');

instead of $('.foo .bar').css('backgroundColor', 'corn');

and it is clearly better because it does not use jQuery.

Don't get me wrong, jQuery has many issues that make it a very poor choice for big modern web applications, but please don't tell me that it can be replaced by querySelectorAll.

Na, the beauty of jQ was writing JS once and being confident most of it would work in most browsers. Everything else was sugar.

> please don't tell me that [jQuery] can be replaced by querySelectorAll.

I didn't, and it can't -- my comment was merely to suggest that jQuery is now a shell of its old self, thanks largely to the improvement of browser DOM APIs.

for (const node of document.querySelectorAll('.foo .bar')) { node.backgroundColor = 'corn' }

Not sure why someone would use map like that (which would unnecessarily generate and return a new array of 'corn's) instead of just forEach.

I'd also probably recommend using Array.from instead of a spread (for clarity) but less concerned about that part.

Hmm. Usually underscore as a function parameter should mean unused variable. Ok maybe I am too much of a fusspot.

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

I 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

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

Oh 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

It would be great if this stored the city as data in the URL so we could share them.

I 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/mai...

open an issue as suggestion, if no one does it, I'll do it later. I'm on a party now

This 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==

really appreciate it. thanks

Awesome! https://victorribeiro.com/isocity/#IjIqKioyIgoxKioqMQoKMRwZG...

https://victorribeiro.com/isocity/#AAAAAAYpAgA7Ny4EIwAHBQIHC...

Nice, was planning something similar with map simulations: http://aperocky.com/prehistoric (Warn: bad on mobile)

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

Pretty fun bit of software!

everyone 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

of course that would need a UI

I love these city builders. Here is something I can't wait to play with: https://twitter.com/OskSta/status/1205416648397721601

Built a similar builder prototype here: http://e2s-game.surge.sh/

Suppose it should contain a mission where you need to answer a set of questions to proceed

Remembers me the Isle of Tune, part of the forgotten flash based past of the Internet.

https://isleoftune.com/

Edit: Seems like there's an app for that.

live demo works on mobile, looks very nice, but not seeing rotate controls https://victorribeiro.com/isocity/

Doesn't seem to implement rotation - it can reveal obscured objects. https://github.com/victorqribeiro/isocity/blob/master/js/mai...

Super 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()

Can you be more specific?

https://victorribeiro.com/isocity/#AwMDAwMDAwMDAwMDAwMDAwMDA...

Oh awesome, the one-liner was because I didn't see how to save/share a design.

That creates a pre-filled two dimensional array as a one-liner.

nice

This could use a tileset for cloud architecture diagrams :)

This is rad, now I need to find some iso dungeon tiles.

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

yes, I made sure to link to his work

After posting the above I did a quick search and wound up on that exact page, some of those tiles are damned nice looking.

I spent a good 20min building little towns. Nice post.

that's what I like to hear

Very neat. Do you want people to contribute to this project? I just made a pull request that allows right click to clear tiles.

I have answered you. if you remove click event it would stop working on touch devices, cause touch also trigger click, but not mousedown.

You need to make the scrollable sidebar on the left much more compact, it's not very usable currently

Very cool. Some icons for network infrastructure and it could also be a network visualisation tool

Fantastic. Like a mini sim city. Probably works better than the original PS version.

Muito bom! This is a fun tool.

valeu

Very cool OP!! Amazing work!

thank you

Really neat work! :)

thanks a lot

Really neat.

thanks

Nice work!

It would be nice to be able to choose the orientation of the block independently of the type of block

thanks

This is very cute.

glad you liked it

Neat! Now all it needs is 3 or 4 massive animal/human hybrid monsters to smash it all to rubble... ;)

Everything is better when you add Kaiju.

Reply on news.ycombinator.com