Show HN: Build your own isometric city | Hacker News Reader

Show HN: Build your own isometric city

victorribeiro.com

127 pointsatum4744 comments

Hi everyone, I've been working on this tile map editor for quite a while now.

I shared it here the other day, with no much success. Someone in the comments suggested to me that I would provide an example (a map and a texture) right out of the box, so people could try the tool.

Well, here is it.

click with the right button of the mouse and drag to pan

left click place a texture

paint bucket (b) - fills a whole area

eraser (e) - delete tile

eye dropper (d) - select a tile from the map

sava - saves the map as json

export - exports the map as PNG

please watch the videos if you're interested in learning more about the tool:

https://www.youtube.com/playlist?list=PL3pnEx5_eGm88UxHH2Olz...

Also please remember this is a work in progress.

source code here - https://github.com/victorqribeiro/tileEditor

textures adapted from here - https://opengameart.org/content/simple-iso-city-work-in-prog...

This is pretty cool!

thanks

Undo/redo would be super useful as I keep drawing the wrong tile every 10 seconds. (Or I need to be more patient)

yeah, great suggestion. I was going to do that and end up forgetting. I'll add to the to do list right now.

Nice! May I suggest making the right click on a tile to erase the tile? Played with it for a while and I think that would add to a better flow.

I'm still figuring things out. I needed a way to pan the map, so I attached it to the right click. in the future I could change that to the middle scroll button and use the right click to erase (isocity does that)

It does not seem to work with Safari 13 on macOS 10.14: is this on purpose or by accident? (Clicking on Map > New does nothing.)

Which browser(s) are you testing with?

I was having some trouble with safari cause it disabled canvas applications

you need to disable prevent cross site tracking in order to work.

tested with chrome and firefox

well, let me take a minute to explain: you can use canvas to generate a finger print of the browser, that (with lots of other stuff) can be used to track the user on the internet.

so, if your safari browser is setted to "prevent cross site tracking" canvas applications will not work.

this canvas application (and everything I do) don't track people or data.

https://i.imgur.com/zcfhCEm.jpeg

This is my city. There are many like it but this is mine.

love this line, your city is very beautiful also

you can export just the city as a PNG under map / export.

I suggest turning the grid off before doing it

This is super cool, and really intuitive.

Not going to lie, I've put a few hundred hours into playing Cities:Skylines and have never finished a city. One night with this and I've actually made something I'm proud of.

Check my city out!: https://i.imgur.com/10nCtrO.png

haha, thats really cool. glad you liked it

Following the link to other tilesets, tiles appear to be distributed with no meaningful metadata at all...? For instance look at https://opengameart.org/content/lpc-tile-atlas2 – it's on a grid, but just a total mishmash of sizes, with some intended to line up. And that doesn't even include the orientation or the real-world physical size they are intended to represent.

It's a ton of awesome art in there, and seems like a huge effort to make use of it!

there's not a single day that I visit open art I get inspired to design a new game. really gorgeous art that people distribute for free. I thought it was only fair that my tool was also distribute for free, so people could use with this kind of art

by the way, if you read the source code you'll notice that I was design this to be used with multiple textures (when creating a new brush you still have to specify the tile size). I totally gave up on that by now.

This is about all I see about metadata, which is just someone asking about it and someone proposing some metadata, 10 years ago: https://opengameart.org/forumtopic/standard-metadata-for-til... – how time flies!

Instantly blasted with SimCity 2000 nostalgia

welcome to the team

This got immediately stuck in my head as soon as I started dropping tiles onto the grid: https://www.youtube.com/watch?v=DDQY3zGEbQU&t=123s

truly a master piece. I played the first sim city and I thought it was awesome. so you could imagine my reaction when I first played sc2000

This is pretty neat! Here are a bunch of things that I would consider high priority to implement if I were making this myself, many of which you have maybe thought of:

- Undo! I accidentally clobbered my carefully planned roads while dragging to fill the area adjacent to the road with grass!

- Make it a more intelligent about laying roads when dragging (auto-choose the correct road piece to connect to adjacent road properly) to reduce the tedium of having to choose the tiles manually

- Likewise when flood-filling with something like the concrete-with-railings, it should flood fill the middle with non-railing pieces and the perimeter with the railing on the outside.

- selection mode, drag to select area, copy-paste

It was not clear what the brush menu did, the dialogs with numbers and no explanation were intimidating and nothing interesting happened when I accepted the numbers.

I cannon't implement smart road construction without telling the user that they need to describe which tile is what: a straight road from top to bottom, a left curve, a cross section... and was having trouble even with getting people to use it when they had to import their own textures (because you need to specify the tile measures - real ones and grid size).

I definitely thinks the UI needs better naming and maybe a total refactor, so I'll keep that in mind.

I think rather than having to upload and describe each tile independently, it would be better to come up with a system which allows related sets of related tiles to be uploaded as a group

Something like 9-slicing comest to mind (https://en.wikipedia.org/wiki/9-slice_scaling). If your road was represented by basically a single texture that has 9 equal size quadrants, then you could pull out the 4 corners and two straight sections out of this easily.

That would also lend itself well to the railing sections, where you could pull out the 8 railing pieces from the perimeter, and the one non-railing piece from the centre.

By specifying it as one texture in a coherent and standardized way, you would both avoid both needing to painstakingly declare all the texture metadata, and have a clear system where the similar directional sets can be defined and used in the same way to either flood fill or to make road-like things. (e.g. fences, railroads)

I do use this in other projects, like in my tower defense game (https://github.com/victorqribeiro/towerDefense), but I was only working with one texture.

this project is not a city builder, it's a tile map editor, and should be generic enough to acomodate any type of tiles (I talk about that a lot on my videos).

this is something I would really like to do, I think I just need a better way for the user to specify these corners tile.

or, define a standard the texture must follow so it could be imported.

This makes me feel warm and fuzzy with SimCity Nostalgia.

What a lovely playground indeed, nice work. Played pretty long with it

What does changing the layer do?

I used it with regular tiles. to place item tiles on top of background

Hmmm... That didn't work for me -- at least not in the way I would expect it to work...

see how I use layers here.

https://www.youtube.com/watch?v=iZzxaNkQPCw&t=80

Thanks!

Have you considered the default state being all grass/tree tiles?

That seems like a funner place to start to build the city around.

That might be a helpful option (if you think other people are going to use it of course, don't waste the dev cycles otherwise.

not really. every time I build a city I start with the concrete tile.

True, it is a city builder.

you can use the paint bucket tool to make a layer of grass

Instantly blasted with Starcraft/Broodwar map editor nostalgia.

It's neat! What do you imagine the use cases being?

I was using it to design a city for a game. Now I don't even know anymore. I find it very relaxing to place blocks and build stuff.

> Now I don't even know anymore. I find it very relaxing to place blocks and build stuff.

Seems like a pretty good use case to me.

very cool. I struggled to find a good tile editor a few years ago, Tiled didn't seem to make the grade.

I would like to suggest a JSON export option.

under map / save it will save as a JSON file

Amazing!

Reply on news.ycombinator.com