Basic Game Tutorial 8: Customise!

Now that we've got our completed game, it's high time you added your own features. In this final tutorial we'll cover how to add parts to the level, along with how to create more items and enemies.

The code we have written will handle everything we throw at it. This means all we need to do is add information to our arrays and we should see everything happen.

Customise the Level

Let's first take a look at how to add more parts to the level:

 35. tiles = [ 121, 138, 128, 129, 130 ]

Take a look at this line in your program. This small array holds all the tiles we want to use to design our level.

The level is defined here:

 37. level = [
 38.     [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
 39.     [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
 40.     [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  2,  3,  4, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
 41.     [  1,  1,  1,  1, -1, -1,  1,  1,  1,  1,  1,  1, -1, -1, -1, -1, -1,  1,  1,  1,  1,  1,  1,  1,  1,  1 ],
 42.     [  0,  0,  0,  0, -1, -1,  0,  0,  0,  0,  0,  0, -1, -1, -1, -1, -1,  0,  0,  0,  0,  0,  0,  0,  0,  0 ],
 43.     [  0,  0,  0,  0, -1, -1,  0,  0,  0,  0,  0,  0, -1, -1, -1, -1, -1,  0,  0,  0,  0,  0,  0,  0,  0,  0 ]
 44. ]

As mentioned in the earlier tutorials, these numbers are used as indexes into the tiles array. When the code reads a 1 in the level array, it finds the tile number found in tiles[1] to put on screen.

We can freely add numbers into our level array and the for loops which draw the level will handle the drawing for us. Let's add another platform to jump on. Take a look at the edited level array below:

 37. level = [
 38.     [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1 ],
 39.     [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  1,  1 ],
 40.     [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  2,  3,  4, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  2,  3,  4, -1,  0,  0 ],
 41.     [  1,  1,  1,  1, -1, -1,  1,  1,  1,  1,  1,  1, -1, -1, -1, -1, -1,  1,  1,  1,  1,  1,  1,  1,  1,  1, -1, -1, -1, -1, -1,  0,  0 ],
 42.     [  0,  0,  0,  0, -1, -1,  0,  0,  0,  0,  0,  0, -1, -1, -1, -1, -1,  0,  0,  0,  0,  0,  0,  0,  0,  0, -1, -1, -1, -1, -1,  0,  0 ],
 43.     [  0,  0,  0,  0, -1, -1,  0,  0,  0,  0,  0,  0, -1, -1, -1, -1, -1,  0,  0,  0,  0,  0,  0,  0,  0,  0, -1, -1, -1, -1, -1,  0,  0 ]
 44. ]

Here we have added 7 numbers to the end of each row in the level array. The numbers we have added create a floating platform and a tall platform to jump on. We must put -1 in every empty tile.

Run the program to see the new section of the level we built. Try and build your own section! Add numbers to the end of each row in the array, putting -1 in the tiles you want to leave empty.

Why not add some more tiles to draw too? All we need to do is add a couple more to the tiles array:

 35. tiles = [ 121, 138, 128, 129, 130, 78, 95 ]

Here we've added two more tiles to our array. Since they are the 5 and 6 elements of the array, if we use the numbers 5 and 6 in our level array, we'll be using our new tiles!

Feel free to completely re-design the level from scratch! No need to stick with what we've used. You might want a totally different design for your game.

Adding Items

Before we go about adding completely new items to our game, let's begin with adding another coin, since the code is already in place for this.

This part will take place in the items array:

 55. coin = 0
 56.
 57. items = [
 58.     [ .type = coin, .x =  7, .y = 1, .state = active ],
 59.     [ .type = coin, .x =  8, .y = 0, .state = active ],
 60.     [ .type = coin, .x =  9, .y = 0, .state = active ],
 61.     [ .type = coin, .x = 10, .y = 1, .state = active ] 
 62. ]

Here we have the items array which stores all the information about the items we have in the game. If we want to add a coin, we simply need to create another entry in this array:

 55. coin = 0
 56.
 57. items = [
 58.     [ .type = coin, .x =  7, .y = 1, .state = active ],
 59.     [ .type = coin, .x =  8, .y = 0, .state = active ],
 60.     [ .type = coin, .x =  9, .y = 0, .state = active ],
 61.     [ .type = coin, .x = 10, .y = 1, .state = active ], 
 62.     [ .type = coin, .x = 14, .y = 0, .state = active ] 
 63. ]

Line 62 contains our new coin, we have set an x position of 14. Remember, the x and y positions here are in level coordinates rather than pixel coordinates. The 14 really means column number 14. Experiment with different numbers here to see the effects. For the y position, we use a lower number to move the item higher. You can put negative numbers here to make the items even higher!

Let's create a whole new kind of item. A mushroom for exmaple!

First we'll need to create a new item type. This will be used as an index into the itemAnim array:

 55. coin = 0
 56. mush = 1

Done. We now have a label for the mushroom item type. Now let's create an entry into the items array which contains the location and state of the item:

 55. coin = 0
 56. mush = 1
 57.
 58. items = [
 59.     [ .type = coin, .x =  7, .y = 1, .state = active ],
 60.     [ .type = coin, .x =  8, .y = 0, .state = active ],
 61.     [ .type = coin, .x =  9, .y = 0, .state = active ],
 62.     [ .type = coin, .x = 10, .y = 1, .state = active ], 
 63.     [ .type = coin, .x = 14, .y = 0, .state = active ],
 64.     [ .type = mush, .x =  3, .y = 2, .state = active ]
 65. ]

We're not done yet! Now that we have a new item in our items array the for loop which draws them will attempt to use the mush variable as an index into the itemAnim array. The only problem is, we don't have an entry for it in the itemAnim array!

Creating one is very easy. We just need the tile number of the item:

 67. itemAnim = [
 68.     [ .start = 154, .length = 1 ],
 69.     [ .start = 245, .length = 1 ]
 70. ]

As you can see, we've added an entry into the array above. Line 69 now contains an structure which is element [1] of the itemAnim array. The .start property contains the tile of the item to put on screen.

Try to add some more items!

Adding Enemies

Adding enemies is almost exactly the same process as adding items. Let's go to the enemy array:

 74. slime = 0
 75. 
 76. enemies = [
 77.     [ .type = slime, .x = 20, .y = 1, .state = active, .frame = 0, .velocity = 0, .dir = 0.05 ]
 78. ]

You know how it goes! First, let's create a new enemy type variable. We'll use a spider this time:

 74. slime = 0
 75. spider = 1

Next, we need to create the entry into the enemies array:

 77. enemies = [
 78.     [ .type = slime, .x = 20, .y = 1, .state = active, .frame = 0, .velocity = 0, .dir = 0.05 ],
 79.     [ .type = spider, .x = 8, .y = 1, .state = active, .frame = 0, .dir = 0.05 ]
 80. ]

Done! Now we just need to put the animation information into the enemyAnim array:

 82. enemyAnim = [
 83.     [ .start = 165, .length = 2 ],
 84.     [ .start = 190, .length = 2 ]
 85. ]

On line 84 we create the new entry for the spider. The tile number is 190 and lasts for two frames of animation. Once this information is in the array, our job is done!

Taking it Further

Of course, even if we add lots of new items to our game, they will only ever behave in the same way as the coins as things are currently.

If you wanted specific things to happen when we pick up various items, you will have to write this code yourself! Since we know what type of item is being drawn with the .type property, you can add some if statements to make different things happen depending on the item type.

It's a good idea to create copies of your program just in case things go wrong. You can always find a completed copy of the program in the tutorial.

You deserve a huge congratulations for making it through this project!

Keep practicing and keep improving!