Tuesday, December 24, 2013

HTML5 Game #3: Tank Battle Field, new approach

Welcome to this new episode of HTML5 Tank Battle Field game. In this article a drastic restructuring of the game has been put in place.

In order to make the game more fit to new features and scenarios, some major concepts have been implemented:

1- World concept. The world concept is a simulation of how the tank battle occur in the real world. This is called the Model in the code.
The importance of the Model is that it abstracts away the real stuff from the graphic technicalities. So in theory, once the Model is ready, porting the game to different devices and/or different screen resolutions is a matter of adapting the graphics only.
It also ensures that the game play can vary by only touching the graphics without the need of rewriting the whole game.
A third important reason why the Model is crucial, is that the game could be transformed into multi-player one. So it will present a same world (Model) for all the players without caring about their graphic settings.

2- The Graphics, is what appears on the screen in front of the user. The graphic elements drawn on the screen will reflect what happens in the Model. However that does not mean that the mapping is one-to-one. Some transformations are required in order to render those elements appropriately.
Ideally the graphics coding structure will evolve separately from the Model, and the two can be linked by the "bridge design pattern". This will add great amount of flexibility.

3- Navigation view mode: As said in the first and second article, the game is about "first person vehicle" (as an analogy to the "first person shooter"). So despite the fact that this is a plain top view 2D game, the graphics are rendered to give the impression that the user is inside the tank. Which means that the tank is always fixed at the center of the screen and the objects move around it as it (the tank) moves.

However to keep things open for future navigation modes, this mode is used as part of the settings. In future releases, the user might be able to switch between navigation modes.

4- The game loop of course. It was not present in the previous article for simplicity purpose. However since the game is evolving, the game loop existence is extremely important. It has the role to keep the game together: It reads user input, updates the Model and renders the graphics and sounds.





The Model
As said the Model represents a simulation of the real world of the game which abstracts it from the graphics technical issues and constitutes a unique reference of what is happening in side the game for all players in a multi-player game.

As for this version of the game, the coordinates system of the Model is similar to the screen one, i.e. the origin (0,0) is at the top left of the screen, and the positive x-axis goes to the right, while the positive y-axis goes down.
The dimensions of the battle field, known as Field in the code, is 5000m x 5000m.
The angular system, is similar to the classic trigonometric one. So positive x-axis goes to the right, positive y-axis goes up and a positive angle is the one that goes from right to left.

There is no particular reason I have chosen this configuration, you can choose the one you want as long as you make the appropriate adaptation in your code.



The Graphics
The Graphics is to represent the objects of the Model on screen, by taking into consideration the screen resolution, the navigation settings, etc.
It is composed among other things of five layers:
The ground layer: To draw the background
The objects layer: Usually used to draw static objects such as buildings
The units layer: to draw the vehicles and big mobile objects
The projectiles layer: to draw the shells, rockets, missiles fired by the units
The flying layer: this is to draw any future flying object such as planes etc..
The widgets layer: this layer is for displaying extra features in the game such as mini-map, text messages etc..
As you can notice the existence of the layers determines the depth or z-index of the graphic elemnts. The rendering starts with the ground layer up to the widgets layer.

It is important to note that every object of the Model must be in one of these layers in order to appear on the screen.



The Navigation Mode
As already stated, the navigation mode in this version is about first person vehicle, or FixedCenter as referred to in the code. So the tank is fixed at the center of the screen, only its turret can turn. When trying to turn the chassis, the objects around the tank turns in the opposite direction to give the user the feeling that tank has turned.

So if the tank turns  towards a building on its left, what the user sees on the screen is that the building is turning to the right to come in front of the tank. When the tank moves forward, or backwards, the building approaches or moves away.

It is important to note that all of this is only graphical, in the Model only the tank moves foward and backwards or turns left or right. But when representing those movements on the screen, the impression is given that the tank is fixed and the buildings are moving.

Technically, when the tank moves towards a building the distance between the tank and the building is measured and on the screen the building is drawn closer to the center.

When the tank turns, the building appears to be turning in the opposite direction, in order to come in front of the tank. However there is a little catch in here. Because our tank is always positioned upwards, in practice  it is making 90° with the x-axis (according to our angular system). So when the tank moves left to position 120°, the building should rotate by 30° (120° - 90°) to the right (around the center of course).





Collision detection
For simplicity reason in this version the collision of the tank with any building is reduced to detecting whether the center point of the tank crosses the boundary of any building. Thus you will easily see half of the tank mounting the building.

Note that collision is detected in the Model and not graphically. So once the Model detects that the tank collided it cancel all movements towards the collision point, and this way the graphics on the screen keeps drawing the tank at the same position, giving the impression that it has stopped moving.



Demo
For the demo please go to the following http://tankbattlefield.eu.pn/tank6/index.html





No comments:

Post a Comment