1. Introduction + WebAPI for map tiles
2. Visual Studio Online
3. Loading data to Vector Tiles
4. Rendering image tiles
5. CDN Caching for map tiles
6. Adding Units and Basic Interaction
7. Attack and Explosions
8. Performance Checkpoint
9. Bootstraping
10. Real-time with SignalR
11. Persistency and Authentication
12. Scalling up the loader process
13. Polishing the experience
2. Visual Studio Online
3. Loading data to Vector Tiles
4. Rendering image tiles
5. CDN Caching for map tiles
6. Adding Units and Basic Interaction
7. Attack and Explosions
8. Performance Checkpoint
9. Bootstraping
10. Real-time with SignalR
11. Persistency and Authentication
12. Scalling up the loader process
13. Polishing the experience
Although I haven't been really active on my blog I've been playing a lot with this project adding tons of new stuff. I'm going to detail the various elements that I've updated/implemented during the last month:
- Pre-Generating additional Zoom Level images
- Representing Altitude
- Unit Energy
- Unit Direction
- Unit LOD Icons
- Infantry Unit Type
- Movement Restriction
- Coordinate display on higher zoom levels
Currently my map-tiles are always generated in server-side. Some of these tiles, from zoom level 7 to 10, are pre-generated and stored on Azure's blob storage.
Zoom Level 7 (static) |
Zoom Level 10 (static) |
Zoom Level 12 (dynamic) |
So, two additional options here:
- Draw the map-tiles in client-side (WebGL/Canvas), having the clients fetch the vector data.
- Pre-generate the other zoom levels
Regarding the WebGL approach, I did spend some time making a couple of experiments (resulting on some of my last posts), but in the end I wasn't fully satisfied with the approach, nor its performance (although I might pick up on this latter on).
I've decided to keep the server-side approach I've been using so far, but pre-generating more zoom levels. But, in order to do so, I had to improve my loader tool, including tons of changes/refactors and segregating the image generation process so that I can, for instance, use Azure Web Jobs to offload the image-tile generation.
Currently, on my laptop, it takes around 15 minutes to generate an area such as the United Kingdom. Not incredibly fast but completely parallelizable and I'm able to load separate areas simultaneously.
Currently on Azure I've imported the following region:
I'll soon import the rest of the world.
Representing Altitude
I was already representing the altitude on the land hexagons. Thus, according to their height, the hexagons would be slightly brightened.
I've kept that cosmetic subtle effect but added a whole new thing that also affects gameplay: slopes. Thus, I detect if there's any altitude change between two hexagons and if so, I create a slope. The end-result is something like this:
This will impact movement (already does for tanks) and line-of-sight (planned).
Multiple levels can also be stacked. In this image I have 6 different height levels:
Unit Energy
I've added the concept of energy to the units. This includes a typical visual representation with a green bar that turns to yellow and finally to red when there's just a little bit of energy left.
Currently units may attack other units, removing their energy, without any restriction on friendly fire whatsoever. When the unit reaches zero energy it's removed.
Unit Direction
Previously the icon was always facing north, regardless of the direction they had moved. Now the icon is updated to reflect the last movement it did.
Unit LOD icons
The engine now supports representing different Level-of-Detail (LOD) icons for the units according to the zoom level. Currently I've only setup 2 levels but could use additional levels if required. This transition is also used to represent the zoom level on which interaction is not longer possible.
Infantry Unit Type
I've also added a new unit type: infantry. It doesn't have any terrain restriction and can only move one hexagon at a time.
Unit Movement Restriction for tanks
I've added a couple of movement restrictions for the tanks and now they can't:
- Enter forests
- Climb slopes (except using a road)
I'll soon import the rest of the world.
Representing Altitude
I was already representing the altitude on the land hexagons. Thus, according to their height, the hexagons would be slightly brightened.
A couple of areas with a lighter green, representing some hills (old version) |
The effect is now much less subtle (new version) |
Multiple levels can also be stacked. In this image I have 6 different height levels:
Unit Energy
I've added the concept of energy to the units. This includes a typical visual representation with a green bar that turns to yellow and finally to red when there's just a little bit of energy left.
Currently units may attack other units, removing their energy, without any restriction on friendly fire whatsoever. When the unit reaches zero energy it's removed.
Unit Direction
Previously the icon was always facing north, regardless of the direction they had moved. Now the icon is updated to reflect the last movement it did.
Unit LOD icons
The engine now supports representing different Level-of-Detail (LOD) icons for the units according to the zoom level. Currently I've only setup 2 levels but could use additional levels if required. This transition is also used to represent the zoom level on which interaction is not longer possible.
Infantry Unit Type
I've also added a new unit type: infantry. It doesn't have any terrain restriction and can only move one hexagon at a time.
Unit Movement Restriction for tanks
I've added a couple of movement restrictions for the tanks and now they can't:
- Enter forests
- Climb slopes (except using a road)
Coordinate display on higher zoom levels
The maximum zoom level (13) now displays the U,V coordinates for the hexagons. This could eventually have a great strategic value, particularly for team-play. Will allow stuff like: "rally with me at 8310 788" or "enemy spotted at 8719 667", etc.
Also, it's quite useful for debugging/development purposes :)
Anyway, you can see this work-in-progress live at: https://site-win.azurewebsites.net
Next steps:
Next steps:
- Generate tiles for the rest of the world
- Cool-down time after moving/attacking
- Line-of-sight
- Unit visibility (ex: an infantry unit inside an hexagon forest will be hidden from other players)
Yep, excellent update.
ReplyDelete