Mahjong Game – The Layout

In the previous post we created most of the graphics needed for the mahjong game. Now, it is time to create the board itself.

Since we are dealing with a lot of elements here (at least 144 objects for the tiles alone), it is better to build the layout on the server side. To do this, we will use PHP. We already know some of the code since we used it in the Memory game but we have a lot of new additions here.

1. We know we only have one graphic file
2. The board does not have a quadrangular (square-like) shape.
3. The board is made up of several layers

Before we start, remember: today we’re only going to create the logic for the creation of the game board; we’re not going to touch the gameplay logic just yet. Let’s start by creating a layout file. There are number of ways to create a layout file. The one I’m about to show here is used mainly for its simplicity and is probably not the most efficient way, but it will do for now. We are going to use Excel, or any other application that can generate a csv from a table. I guess I could spend the time to build a layout builder for the game, but as I don’t have much time to spare, the csv will do for now.

What I did was to create a “table” with 30 columns and 16 rows in order to draw the first layout. Each tile will span 2 cells horizontally and vertically (a 4-cell square), but we will only use the top left cell to represent the tile. In this table we will fill in the first layer of the layout, but before we do that we first need to understand the limitations of our game client. The game is for a web browser, so in order to put one element on top of another element in a browser, we need to make use of positioning and z-index. Positioning allows us to say where we want each element to be, and the z-index allows us to tell the browser which element is higher than another. This wouldn’t be an issue for us if we were using 2D tiles, but because in the last post we created 3-dimensional tiles, adjacent tiles will by necessity overlap one another, and we will need to avoid situations like this one:

If we left the z-index out of the picture, the browser would render the layout with the default behavior of placing each element on top of the previously created element, but that would leave us little room for adjustment if we needed to place a certain tile on top of another. Such a situation would give us quite a headache, even with the basic layout.

So now that we know that the z-index is a factor, we can start filling our table. In our table, each cell will contain one of the following: If the cell is not the top left cell of a tile, it will contain a 0; otherwise, it will contain the tile’s z-index. For the first layout, we’ll use incrementing z-index values to make it easy to understand; for the second, we will generally use the same small number and only use others when we need to change the default behavior, to make it quicker :). Getting back to our table for the first layer, go ahead and fill out the cells as in this image.

As you can see, the filled blocks kind of look like a turtle, which is the classic layout for mahjong. If you take a closer look at the table, you will notice the value of cell A8 is inconsistent with the rest, since in this position the default behavior is not what we want (we want the tile in A8 to be “lower” than the tile in C7, even though it is created after it), and so we use a lower z-index. The same is true for cells AA8 and AC8, except in these cells we will use a higher z-index rather than a lower one (because we want them to be higher than the tile in cell Y9, even though they are created before it). Generally speaking, we only need to tweak the z-index values in situations where the tiles are not flush with each other, like in the picture above.

Now that we have our first layer, the second is even easier to build. Because each layer’s tiles are always placed on top of existing tiles in the previous layer(literally on top, not just overlapping like the situations we’ve had so far), we are limited in where we can place the tiles. Create another table below the first one with the same number of rows and columns and then fill it like in this image.

Now that you’ve seen how to build the first and second layers, the rest are really easy, but in case you want to see how they’re done, you can view them in level 3, level 4 and level 5.

Now that we have all the layers in our spreadsheet, we need to convert them to a format that PHP can work with quickly. To do so, we will use a middle man in the form of a csv (comma-separated values) file. Let’s create a directory called layout under our mahjong directory. In it we will put all the layout files. Create a new file called classic.inc.php to be included in our php script, and open this file for editing. In the beginning of the file we will have some details about our layout: the number of columns and rows and an array of levels for the layout, like so:

To keep the example short I left out some of the levels, but adding them is a simple matter of copying and pasting from your csv file and adding a comma to the end of each line (except for the last line in each layer). What we did here was create a layout array, which holds each layer as an array. Our array is one-dimensional, but since we know how many rows and columns comprise it, we can use that information to “divide” the array and build our layout.
Now that we have the php file we are finally ready to read and process it, and this is what we will do in our next post.

If you want to see another example of a layout, I created another layout in the shape of a cat. You can download all the relevant files here.

So until next time, have fun

Adi Gabai