victorqribeiro / isocity

A isometric city builder in JavaScript

IsoCity

An isometric city builder in JavaScript

Live version

Alternative link

About

A simple JavaScript city builder with no simulation at all. No budget, no goals. Just build your tiny city. This would work on a phone, but it wasn't designed with phones in mind.

Texture Credits

Textures from - http://www.kenney.nl

---

isocity's Issues

Visual asset has not tidied up

I was playing around with this generator and found that for one of the asset was probably cropped a little off, so there is a red margin at the right bottom corner.

support click+drag for multiple tiles?

To place the same building on multiple adjacent tiles, support click+drag?

Feature request

I have been looking isometric map engines and this is really good. I would like to combine different objects on same tile. Could you add feature or tell how to add a feature where tiles would be (vertically) stackable. Eg adding streets lights and trees on same road tile.

Can it be done?

Inspecting the webpage issue

On Google chrome I failed to inspect the webpage - why is it so?

Better sizing for various screen sizes

On my laptop the screen is taken up mostly by the city with minimal space for tools:

The board and tools could be scaled to adjust to different screen sizes. Below I'm using transform: scale(); as an example of the effect, but I wonder if this could be implemented in a better way?

I'm willing to work on this if anybody could give tips on scaling the background image itself relative to the size of the board, rather than scaling the entire element itself.

Add the textures source file

Hi there!

I believe if you add the source file to this repo, some of us could help with adding more structures like swimming pools, lakes, bridges and more.

Modify tile width and number of tiles

Happy new year !
Nice work :)
I tried to modified Tilewidth, number of tiles but it doesn't work right.

I modified :

isocity/js/main.js

Line 160 in 97dbe43

c.drawImage(texture,j,i,130,230,-65,-130,130,230)

to allow tile size modifications,
c.drawImage(texture,j,i,130,230,-tileWidth/2-1,-tileHeight*2-2,tileWidth,tileHeight*230 / 66 );

Display works right but formulas for mouse event needs modification which reveal the logic bug in actual formula.

It probably still require some work to remove the remaining magic numbers and to make it pixel perfect. (There are currently some one pixel width lines between tiles for some tiles). There are probably some dark pixel magic needed to have it render pixel perfect without interpolation issues and texture sampling.

Similarly increase the number of tiles doesn't work.

Also by the way the lighting of the ground of the last tile is inverted with respect to all other tiles.

It looks really nice, well done !

enhancement: home textures

It would be nice if you can use home textures. Like sofa, bed, walls, lamps or kitchen.
The next enhancement is to connect it with MQTT Broker so you can control your smarthome devices at home.