This part is pretty easy, but it is essential for the kind of game we want to make. If you've ever played an isometric game before, you already know exactly what tiles are. In an isometric game, the world is setup as a two-dimensional grid, almost as if you were playing on a large piece of graph paper. This means that an object can only exist in one of the squares on the grid. This property makes everything look neat and tidy in the game, makes the programmer's job a lot easier, and makes it easier for the player to place objects in the world with precision.
In our isometric game, we are obviously going to need some tiles. But first we must decide on the size of these tiles. The size I have chosen is shown in Figure 3.1:
FIGURE 3.1
You can see that I have chosen the size of 64 by 64 quants (or 4 by 4 boxes from the Top view in WED). The blue box shows the tile's size. The red model is the fish, added in the last part of this tutorial.
Let's create a variable to store this size in. We only need one variable because a tile must always be square, so the variable is equal to both the tile's width and length. We of course want to use the unit of quants, since its the unit the engine uses for x and y position variables.
var TileSize = 64;
That was simple enough! This variable will come in handy later on.
Now we must decide how many tiles we want to start with. Let's start small, with a 20 by 20 tile grid, like this:
FIGURE 3.2
And we will of course want to create two new variables to store the dimensions of our grid:
var GridLength = 20;
var GridWidth = 20;
We're done programming the tiles! That's all we really need to do. We do not need to add anything to our level in WED. All we are going to end up doing is creating the illusion that our world is made of tiles based on these variables. But we'll get to that later.
Now, what exactly is a 'node'? The word actually has many different meanings depending on what you're talking about, but for our purposes, a node is simply a variable that contains information about a tile. Therefore, each tile must have its own node. Our world has 20 * 20 tiles, or 400 tiles, which means we need 400 nodes. Since there are so many nodes we need to create, we can use the power of arrays. We can declare our node array like this:
var Nodes[400];
It would be nice if we could use a multi-dimensional array for this, but alas, I think that feature is still in beta-testing. We will survive without it!
Now each node in the array refers to a certain tile. For example:
FIGURE 3.3
We will be using this array to store various information about what is located on each tile. We had better write a function that initializes all the values of the array to zero. Here it is, a very simple function to write:
function Node_Init()
{
var InitLoop = 0;
while (InitLoop < (GridLength * GridWidth))
{
Nodes[InitLoop] = 0;
InitLoop += 1;
}
}
We call this function from the main() function in the main script, right before we call Camera_Init(). And if we ever need to reset the all the node array values back to zero, now we have a function that will do it.
That's all it takes to setup our tiles and nodes! You'll see how we can use them as the tutorial progresses. Next, it's time to do some mouse programming!