
Show HN: A tiny isometric city builder in JavaScript - atum47
https://github.com/victorqribeiro/isocity
======
atum47
Hi 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.

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

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

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

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

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

------
Jaygles
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/](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.

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

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

------
iod
Reminds me of this shadertoy:

[https://www.shadertoy.com/view/MljXzz](https://www.shadertoy.com/view/MljXzz)

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

------
lwb
Thought this was a clever trick:

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

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

~~~
mkoryak
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
Na, the beauty of jQ was writing JS once and being confident most of it would
work in most browsers. Everything else was sugar.

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

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

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

------
DDR0
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](http://ddr0.github.io/gallery)

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

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

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

~~~
atum47
really appreciate it. thanks

~~~
ynniv
Awesome!
[https://victorribeiro.com/isocity/#IjIqKioyIgoxKioqMQoKMRwZG...](https://victorribeiro.com/isocity/#IjIqKioyIgoxKioqMQoKMRwZGzEKCjEYARgxCgoxGhkdMQoKMSwsLDEKIzAsLCwwIw==)

~~~
ynniv
[https://victorribeiro.com/isocity/#AAAAAAYpAgA7Ny4EIwAHBQIHC...](https://victorribeiro.com/isocity/#AAAAAAYpAgA7Ny4EIwAHBQIHCQIHMhwZKwQiADEYARwVJgIxGhkdFBkfMAAAAAYALw==)

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

------
photon_lines
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](https://github.com/photonlines/Procedural-City-Generator)

~~~
cerberusss
Pretty fun bit of software!

------
michelb
I 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)

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

~~~
atum47
of course that would need a UI

------
blader_johny
Built 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

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

------
hyperpallium
live 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/mai...](https://github.com/victorqribeiro/isocity/blob/master/js/main.js)

------
Gigablah
This could use a tileset for cloud architecture diagrams :)

------
mLuby
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
Can you be more specific?

~~~
atum47
[https://victorribeiro.com/isocity/#AwMDAwMDAwMDAwMDAwMDAwMDA...](https://victorribeiro.com/isocity/#AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwEBAQMDAwMBAQEDAwMDAQEBAwMDAw==)

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

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

~~~
yissp
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](https://opengameart.org/content/isometric-dungeon-tiles-60)

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

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

~~~
atum47
that's what I like to hear

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

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

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

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

~~~
cerberusss
Everything is better when you add Kaiju.

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

------
lancesells
Muito bom! This is a fun tool.

~~~
atum47
valeu

------
matthewhartmans
Very cool OP!! Amazing work!

~~~
atum47
thank you

------
leonardteo
Really neat work! :)

~~~
atum47
thanks a lot

------
ykevinator
Really neat.

~~~
atum47
thanks

------
sbussard
Nice work!

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

------
whatsmyusername
This is very cute.

~~~
atum47
glad you liked it

