I’m currently working on Angular city builder app for my Honours project at Abertay Univeristy. Over the Christmas period, I implemented the UI for proximity check between buildings.

Each building has an “occupied area” as part of the sprite. When you drag a new building, it moves with the mouse until you click and place it. During that movement if the building overlaps with something on the map the “occupied area” is highlighted in red. When there is no overlap and everything is ok, the circle around the new building is highlighted in blue.

The building palette and the map are separate Angular components. I used the @Output event to signal to the map when a building has been selected on the palette to start dragging it. When the building has been dropped on the map, I notify the palette UI that the action is completed.

Also, I’m starting to work on the road network connecting buildings in the city. There are 11 road elements depending on adjacent tiles. There is also a 12^th ‘null case’ of a completely isolated road element, but I will just default to a horizontal road for this special case.

This is a web game, so I have to pack them together, or the game will make separate HTTP Get request for each piece of road. I’m exporting the pieces as image sequence from Photoshop and using kritaSpritesheetManger to pack them together. This is the best export plug-in that I know.

The road tile is implemented as TypeScript class that knows which element in the tile-set to display based on context of the 8 surrounding tiles. This is calculated on the fly when rendering the Angular template. I could pre-compute it, but it’s not really slow. I actually have to re-focus on artwork soon, instead of optimizing, my idea is to paint a background in acrylics inspired by Yves Tanguy.