Friday, January 10, 2014

Tank Battle Field, HTML5 Game #6: First enemy unit

Despite that the Flak 88 was a fearsome German anti-tank gun, it is not its historical reputation that made it through to be the first enemy unit in Tank Battle Field game.

As a matter of fact two reasons make it appealing:
- Easiness of animation
- Cheap artificial intelligence (AI) requirement

The animation

Flak88 animation is rather simple. The canon itself is composed of the base and the gun. The base is symmetric and fixed, while the gun can rotate 360°

It is easy to see a similarity with the tank chassis and its turret.
Notice that the gun orientation is horizontal and to the right (towards the increasing x-axis). This is important in case we don't have to worry about the initial angle. Otherwise we should subtract the initial angle each time the gun rotates.
Here's an example:
Suppose the sprite of the gun is upwards like in this picture.

Since the angular system is like the trigonometric one, this gun makes 90° with the x-axis. We are speaking visually wise. However the code does not know that! What it knows is that everything starts at 0°. So if you tell the gun to rotate 90°, the graphic engine will rotate the above sprite by 90° which makes it look like this.
Sadly enough, this is not our intention because visually speaking it is equivalent to 180°. To solve this we subtract 90° from the rotation angle to obtain the desired visual effect.
In order to avoid all this fuss, we draw (from the start) the gun horizontally and oriented to the right.

It is important to differentiate what your eyes see and what data is supplied to the code.

The artificial intelligence (AI)

Probably Flak88 has the easiest AI to implement in any war game!
Even in real life, the Flak88 mission is to track a tank until it has a good shot, then fires.
Same thing happens in the game. Flak88 calculates the angle that separates its gun from the center of the tank. Then starts closing this gap by rotating the gun until the gap reaches 2° or less. At this moment it fires.




There are times when the center of the tank is hidden behind a building. In such cases the Flak88 searches of any of the tank border points to which it has a clear line of fire, if it finds ones it closes in on it and fires.

Time now for some maths calculations:
The angle between the Flak88 and the tank is given by the calculating the arc-tangent of the slope of the line passing by the tank and the Flak88. The arc-tangent returns an angle within the range [-180, 180]. But on the other hand the angle of the gun is expressed in the range [- 360, 360].
So to be able to compute the difference between the two angles, we convert the gun angle to the range  [-180, 180]. This is done like the following:

if gunAngle > 180  then gunAngle2 = gunAngle  - 360 (ex: if gunAngle =   270° => gunAngle2 = -90°)
if gunAngle < -180 then gunAngle2 = gunAngle + 360 (ex: if gunAngle = -270° => gunAngle2 =   90°)

Now we calculate the deltaAngle which is the difference between the angle of the tank and the Flak88 and the Flak88 gun.

if tankFlakAngle and  gunAngle2 have the same signs (both positive or negative) then
deltaAngle = tankFlakAngle - gunAngle2

However if tankFlakAngle and  gunAngle2 have opposing signs (one is positive and the other is negative) then we have to be careful how to compute deltaAngle .
Suppose tankFlakAngle  is 178° and gunAngle2 is -178°

Computing deltaAngle as tankFlakAngle - gunAngle2 will result in an angle of 356° which is not logical since as you can see on the picture above the real difference is 4°.
We can reach this result by doing the following:
if gunAngle2 < 0  then the gun is moving clockwise so deltaAngle must be negative:
deltaAngle = - ( (180 - tankFlakAngle ) + (180 + gunAngle2 ) )

if gunAngle2 > 0 then the gun is moving anti clockwise so the delta must be positive
deltaAngle =  ( (tankFlakAngle + 180 ) + (180 - gunAngle2 ) )

Knowing the deltaAngle, now we can tell the gun to move to close the gap formed by this deltaAngle.

The demo


That's it for today, as always you can check the latest demo by going to http://tankbattlefield.eu.pn

No comments:

Post a Comment