Show HN: A tiny isometric city builder in JavaScript

https://github.com/victorqribeiro/isocity

by atum47 • 7 years ago

593 104 7 years ago

atum4724• 7 years ago

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.

sansnomme• 7 years ago

Would you mind adding support for touch devices?

atum4724• 7 years ago

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

quickthrower22• 7 years ago

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

z3t4• 7 years ago

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.

52-6F-62• 7 years ago

Caesar 3 was a fantastic game.

Also: plebs are needed.

billfruit• 7 years ago

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

Delameko• 7 years ago

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.

whatsmyusername2• 7 years ago

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

masukomi• 7 years ago

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

atum4724• 7 years ago

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

_nalply• 7 years ago

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

mysterydip• 7 years ago

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.

twic• 7 years ago

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

mutagen• 7 years ago

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

atum4724• 7 years ago

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

devadvance• 7 years ago

Nice, simple, and fun!

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

atum4724• 7 years ago

thank you

amelius2• 7 years ago

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

mdorazio• 7 years ago

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.

gherkinnn• 7 years ago

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

atum4724• 7 years ago

that's what I like to hear

Jaygles2• 7 years ago

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.

andai3• 7 years ago

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

Jaygles2• 7 years ago

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

sbussard2• 7 years ago

Nice work!

sbussard2• 7 years ago

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

atum4724• 7 years ago

thanks

hinkley• 7 years ago

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.

yissp2• 7 years ago

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

anonytrary• 7 years ago

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.

iod• 7 years ago

Reminds me of this shadertoy:

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

ogre_codes2• 7 years ago

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

yissp2• 7 years ago

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

atum4724• 7 years ago

yes, I made sure to link to his work

ogre_codes2• 7 years ago

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

leonardteo• 7 years ago

Really neat work! :)

atum4724• 7 years ago

thanks a lot

simonsarris• 7 years ago

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

atum4724• 7 years ago

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

Aperocky• 7 years ago

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

photon_lines• 7 years ago

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

cerberusss2• 7 years ago

Pretty fun bit of software!

atum4724• 7 years ago

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

ynniv3• 7 years ago

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

kfarr2• 7 years ago

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

atum4724• 7 years ago

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

krokicki• 7 years ago

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

jonbennett18• 7 years ago

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

atum4724• 7 years ago

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

atum4724• 7 years ago

of course that would need a UI

matthewhartmans• 7 years ago

Very cool OP!! Amazing work!

atum4724• 7 years ago

thank you

kfarr2• 7 years ago

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

atum4724• 7 years ago

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

ronilan• 7 years ago

It’s smooth.

eps• 7 years ago

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

DDR0• 7 years ago

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

hyperpallium2• 7 years ago

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

lwb2• 7 years ago

Thought this was a clever trick:

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

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

drusepth• 7 years ago

What does this trick do?

grardb• 7 years ago

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

andai3• 7 years ago

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

Btw, querySelectorAll() to match multiple elements.

* IE partial until 2011

mkoryak• 7 years ago

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.

rkuykendall-com• 7 years ago

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

lwb2• 7 years ago

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.

danlugo92• 7 years ago

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

ZeikJT• 7 years ago

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.

quickthrower22• 7 years ago

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

mLuby2• 7 years ago

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

jdauriemma• 7 years ago

Can you be more specific?

atum4724• 7 years ago

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

thinkingkong• 7 years ago

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

atum4724• 7 years ago

nice

bump-ladel• 7 years ago

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.

11235813213455• 7 years ago

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

gokhan• 7 years ago

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.

fit2rule• 7 years ago

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

cerberusss2• 7 years ago

Everything is better when you add Kaiju.

whatsmyusername2• 7 years ago

This is very cute.

atum4724• 7 years ago

glad you liked it

ykevinator• 7 years ago

Really neat.

atum4724• 7 years ago

thanks

lancesells• 7 years ago

Muito bom! This is a fun tool.

atum4724• 7 years ago

valeu

michelb• 7 years ago

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

Gigablah• 7 years ago

This could use a tileset for cloud architecture diagrams :)

blader_johny• 7 years ago

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

antman• 7 years ago

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

Show HN: A tiny isometric city builder in JavaScript

Related Stories