Game-development Log (6. Adding units and basic interaction)

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. Attacks and Explosions
8. Performance checkpoint
9. Bootstraping
10. Real-time with SignalR
11. Persistence and Authentication
12. Scaling up the loader process
13. Polishing the experience

Work-in-progress: https://site-win.azurewebsites.net

Time to make things more interesting by adding some interactive units to the map. Pretty beefy update that, although highly hardcoded on some places, should lay the foundation for what's to come.

Here's a small video showcasing what's currently deployed on Azure.

• Loading units

I've created an hardcoded WebAPI that returns game units. Currently its code is simply:

public IEnumerable<Unit> Get()
{
    return new[]
    {
        new Unit
        {
            Id = Guid.NewGuid(),
            Type = "TANK",
            U = 8295,
            V = 1643,
            UserId = Guid.NewGuid()
        },
        new Unit
        {
            Id = Guid.NewGuid(),
            Type = "TANK",
            U = 8291,
            V = 1640,
            UserId = Guid.NewGuid()
        },
        new Unit
        {
            Id = Guid.NewGuid(),
            Type = "HELICOPTER",
            U = 8296,
            V = 1641,
            UserId = Guid.NewGuid()
        },
    };
}

It returns three units: two tanks and one helicopter. I've created custom pushpins to represent both concepts.

My objective is to allow the user to drag these units on the map taking into account the surrounding terrain. Thus I'll have to load the hexagon vector data to the Javascript client.

• Loading Vector Data to the client

I simply need to load the vector tiles that I talked about so much on my previous posts. This way the vector tiles will serve two separate purposes:

• Used as the datasource for generating image-tiles in server-side
• Used as terrain info on client-side

This is implemented in a simple way. I created a dummy Bing Maps tile-layer that, instead of returning images, loads vector data from the tile-server and stores it in memory.

var tileSource = new MM.TileSource({

    uriConstructor:  function getTilePath(tile) {

        var z = tile.levelOfDetail;
        var x = tile.x;
        var y = tile.y;

        loadVectorTile(z,x,y);

    }
});

var vectorData = new MM.TileLayer({ mercator: tileSource});
map.entities.push(vectorData);

As I was requesting tiles from a different server that doesn't support CORS properly (in this case the CDN) the ajax request was failing, leading me to a cross-domain "duh" facepalm moment. So, JSONP for the rescue.

• Adding JSONP support

I've added a new option on the vector tiles routes. If a "callback" parameter is passed (and an optional type=jsonp just for verbosity) the response, instead of being a plain JSON, is returned as JSONP. That's basically wrapping the json inside a function call like:

function_call_name( {{ original json }})

ex (from the CDN):
http://az665126.vo.msecnd.net/?z=12&x=1945&y=1565&type=jsonp&callback=vector

In this particular case the data is wrapped on a "vector" function:

• Movement

Now that I have the vector information in client-side I simply register the Bing Maps event handlers on the units and add some lots of logic on them.

While dragging the unit I display the various movement alternatives and the path that's used to reach the destination.

Tanks and helicopters have different movement capabilities:

Tanks can move 4 hexagons on a road and 1 hexagon off-road

Helicopters have no movement restrictions and can move 6 hexagons on any direction.

Eventually the units will have a cooldown period after moving.

So, that's it for now. Next stop: probably attack-logic :)