Game Development Tutorials
A Blog with step-by-step game development and programming tutorials. Even a total newbie can make a game following this blog!
Articles
24. Preparing the show-off
2009-05-22 04:37:00
Right, before we add all that fancy graphics, we have to prepare our form first. We'll add some additional picture boxes to hold our images. Like the one to hold the firefighter dalmatian doggy, etc… So, add the controls, and modify their properties as shown in the following tables.PictureBox(name):picDoggyBackColor: Web > TransparentImage: [Load firefighter doggy image]Location: 477; 186Size: 131; 201PictureBox(name):picSplashAnchor:RightBackColor: Web > TransparentImage: [Load water splash image]Location: 45; 81Size: 407; 50SizeMode: StretchImageVisible: FalseAnd now, adjust your form's properties so it'll show the background image:Form - frmMainBackgroundImage: [Load background image]If you did everything correctly, you should get your game looking quite similar to the one I'v
2009-05-22 04:37:00
Right, before we add all that fancy graphics, we have to prepare our form first. We'll add some additional picture boxes to hold our images. Like the one to hold the firefighter dalmatian doggy, etc… So, add the controls, and modify their properties as shown in the following tables.PictureBox(name):picDoggyBackColor: Web > TransparentImage: [Load firefighter doggy image]Location: 477; 186Size: 131; 201PictureBox(name):picSplashAnchor:RightBackColor: Web > TransparentImage: [Load water splash image]Location: 45; 81Size: 407; 50SizeMode: StretchImageVisible: FalseAnd now, adjust your form's properties so it'll show the background image:Form - frmMainBackgroundImage: [Load background image]If you did everything correctly, you should get your game looking quite similar to the one I'v
22. Hall of fame
2009-05-06 05:07:00
There's nothing better than prooving to everybody that you're the best! And you certanly can't do that if your score isn't saved. We are now going to make a high score list. For it to work, we'll need a file, that we'll write the scores into. The scores will be consisted of the following: Score, Level, and Player Name. We'll need a new command button to show the list, and a new label to display the results in it. Add them to your game's form, and apply the next properties to them: Button(name): butHighScoresLocation: 144; 6Size: 126; 53Text: High ScoresLabel(name):lblHighScoreListAutoSize: TrueBackColor: Web > TransparentFont: Courier New; 14,25pt; style=BoldForeColor: Web > OrangeRedLocation: 17; 81Size: 0; 22Text: [BLANK]Visible: FalseOk, and now the code for the button:// If
2009-05-06 05:07:00
There's nothing better than prooving to everybody that you're the best! And you certanly can't do that if your score isn't saved. We are now going to make a high score list. For it to work, we'll need a file, that we'll write the scores into. The scores will be consisted of the following: Score, Level, and Player Name. We'll need a new command button to show the list, and a new label to display the results in it. Add them to your game's form, and apply the next properties to them: Button(name): butHighScoresLocation: 144; 6Size: 126; 53Text: High ScoresLabel(name):lblHighScoreListAutoSize: TrueBackColor: Web > TransparentFont: Courier New; 14,25pt; style=BoldForeColor: Web > OrangeRedLocation: 17; 81Size: 0; 22Text: [BLANK]Visible: FalseOk, and now the code for the button:// If
22. Time for a coffe break
2009-04-30 03:22:00
Ok, we programmed almost everything that I wanted to see in our gameplay. But this tutorial is far from over. You remember the game screenshot from the first chapter? Our game doesn't look anything like that... In the next few chapters we'll add some practical functions to our game, like 'Pause' button, 'High Score' list, and then we'll move on to the decoration!Almos every game has a 'Pause' button. It's almost normal that you can't play any game without interuption. Maybe your wife sends you to the store to fetch some ingredients for lunch, or your two-year-old starts pulling the mouse out of your hand, or something else comes in your way... In every case, you don't want your game to go on... So, to satisfy our players, we'll add a pause button. Well, not actualy add - we'll just use our
2009-04-30 03:22:00
Ok, we programmed almost everything that I wanted to see in our gameplay. But this tutorial is far from over. You remember the game screenshot from the first chapter? Our game doesn't look anything like that... In the next few chapters we'll add some practical functions to our game, like 'Pause' button, 'High Score' list, and then we'll move on to the decoration!Almos every game has a 'Pause' button. It's almost normal that you can't play any game without interuption. Maybe your wife sends you to the store to fetch some ingredients for lunch, or your two-year-old starts pulling the mouse out of your hand, or something else comes in your way... In every case, you don't want your game to go on... So, to satisfy our players, we'll add a pause button. Well, not actualy add - we'll just use our
20. How about a raise?
2009-04-24 02:30:00
To make things a little interesting, we'll give the player bonuses after he completes each level. I've thought of two bonuses: One that is awarded for empty columns, and one that is awarded on top, if there are no blocks left on the game field. To calculate the 'Empty Column Bonus' I used this formula: Level * # of Empty Columns * 100. For the second bonus, I used this formula: Level * 1000. So, If a player manages to clear all block in level 4, he would recieve (4*15*100) 6000 points from the Empty Column Bonus, and additional (4*1000) points from the Cleared Level Bonus. That's 10000 points! Nice! To show the player how many points he was awarded, we'll use our existing label (lblDisplay). And we'll pause the game for a few seconds between the levels. In the end, we'll create a method to
2009-04-24 02:30:00
To make things a little interesting, we'll give the player bonuses after he completes each level. I've thought of two bonuses: One that is awarded for empty columns, and one that is awarded on top, if there are no blocks left on the game field. To calculate the 'Empty Column Bonus' I used this formula: Level * # of Empty Columns * 100. For the second bonus, I used this formula: Level * 1000. So, If a player manages to clear all block in level 4, he would recieve (4*15*100) 6000 points from the Empty Column Bonus, and additional (4*1000) points from the Cleared Level Bonus. That's 10000 points! Nice! To show the player how many points he was awarded, we'll use our existing label (lblDisplay). And we'll pause the game for a few seconds between the levels. In the end, we'll create a method to
19. How to get a promotion
2009-04-22 02:30:00
Almost all games have levels. As the player advances, the game becomes more and more difficult. We'll do just that. We'll speed up our gameplay from level to level, and add a new color to the blocks every three or four levels... That should spice things up nicely... Uh! Oh! Another idea: let's increase the number of columns from level to level! So, that would mean that the player needs to survive 15 columns in the first level to move on, 16 in the second, and so on... Our game will not have a finall level. If the player is skilled enough, he could play trough an infinite number of levels. But hey, that's almost impossible. Reaching level 10 will be almost like winning in a lottery ;) Hehe...So, when the player starts a new game we should reset the level count, score, speed, colors.. So we'
2009-04-22 02:30:00
Almost all games have levels. As the player advances, the game becomes more and more difficult. We'll do just that. We'll speed up our gameplay from level to level, and add a new color to the blocks every three or four levels... That should spice things up nicely... Uh! Oh! Another idea: let's increase the number of columns from level to level! So, that would mean that the player needs to survive 15 columns in the first level to move on, 16 in the second, and so on... Our game will not have a finall level. If the player is skilled enough, he could play trough an infinite number of levels. But hey, that's almost impossible. Reaching level 10 will be almost like winning in a lottery ;) Hehe...So, when the player starts a new game we should reset the level count, score, speed, colors.. So we'
18. Keeping score
2009-04-21 03:00:00
Every game has a way to put a value to the player's effort. In racing games that's done with time (in most cases). In tycoon games, that would be done with money. In our game, we'll just use numbers. So how should we evaluate our players effort? First of all, we have to give him points for every block he destroys. We could make our game give him more points with every new level, and some extra points for the number of different block colors for that level. And some extra scoring math: We could make every block color more valuable... So, let's start with adding a new label to our form, so we could display the score to the player.The score label properties:Label(name): lblScoreBackgroundColor: Web > TransparentLocation: 555;65Font: Microsoft Sans Serif; 9,75pt; style=BoldText: 0Then, add th
2009-04-21 03:00:00
Every game has a way to put a value to the player's effort. In racing games that's done with time (in most cases). In tycoon games, that would be done with money. In our game, we'll just use numbers. So how should we evaluate our players effort? First of all, we have to give him points for every block he destroys. We could make our game give him more points with every new level, and some extra points for the number of different block colors for that level. And some extra scoring math: We could make every block color more valuable... So, let's start with adding a new label to our form, so we could display the score to the player.The score label properties:Label(name): lblScoreBackgroundColor: Web > TransparentLocation: 555;65Font: Microsoft Sans Serif; 9,75pt; style=BoldText: 0Then, add th
17. To help, or not to help
2009-04-20 02:12:00
So, our game is almost playable… Well, it is, but there's a lot of stuff to add… Like, random blocks appearing on the game field. The game I 'borrowed' the idea from, had these blocks apearing at radnom time intervals and random places on the game field… And those fields were cool, because, sometimes, they helped to clear you some additional blocks, and sometimes, they filled that valuable empty columns… Ok, back to the drawing board. Litteraly. Here are two examples, first one that shows when the block is helpful, and another one wich shows when it's not that helpful.Take a look at the picture. The player has only two empty columns left. Let's think about the next situaion: a) Let's imagine that in this moment, our game 'spawns' a red field at [4,5]. That would help the player,
2009-04-20 02:12:00
So, our game is almost playable… Well, it is, but there's a lot of stuff to add… Like, random blocks appearing on the game field. The game I 'borrowed' the idea from, had these blocks apearing at radnom time intervals and random places on the game field… And those fields were cool, because, sometimes, they helped to clear you some additional blocks, and sometimes, they filled that valuable empty columns… Ok, back to the drawing board. Litteraly. Here are two examples, first one that shows when the block is helpful, and another one wich shows when it's not that helpful.Take a look at the picture. The player has only two empty columns left. Let's think about the next situaion: a) Let's imagine that in this moment, our game 'spawns' a red field at [4,5]. That would help the player,
16. Thing that makes apples fall
2009-04-17 01:42:00
Uhm, I admit – I lost a whole day to figure this stupid stuff out. And in the end, i ended up with just a few lines of code. It's true that simplicity is the best way. And after writing, like, fifty lines of code that didn't work, i decided to delete it, and to start over. Basically, I took every single block in the game, and checked if it's floating. If it was, I moved it down… This would be the result:This is the code that goes in the GoGravity() method:// So, bassicaly, i just use // a couple of loops to go trough // all the fields.// Looping through columns:for (int s = 0; s < iWidth; s++){ // Looping through rows: for (int l = 0; l < iHeight; l++) { for (int v = iHeight - 1; v > 0; v--) { // In every column, I start // checking from
2009-04-17 01:42:00
Uhm, I admit – I lost a whole day to figure this stupid stuff out. And in the end, i ended up with just a few lines of code. It's true that simplicity is the best way. And after writing, like, fifty lines of code that didn't work, i decided to delete it, and to start over. Basically, I took every single block in the game, and checked if it's floating. If it was, I moved it down… This would be the result:This is the code that goes in the GoGravity() method:// So, bassicaly, i just use // a couple of loops to go trough // all the fields.// Looping through columns:for (int s = 0; s < iWidth; s++){ // Looping through rows: for (int l = 0; l < iHeight; l++) { for (int v = iHeight - 1; v > 0; v--) { // In every column, I start // checking from
15. Destroying the blocks
2009-04-16 01:35:00
Like I said, this is going to be pretty straight-forward chapter. To destroy the blocks, all we need to do is set their value to 0. And, since we have a list of blocks to destroy, we'll just use a simple FOR loop. The only thing we have to check is that the list contains more than one field. If not, the user clicked on a field that is not connected to any fields of the same color. Nothing fancy here. Here's the code (put it in your DestroyBlocks() method!):// First, we'll check if the// List contains more than// one block. If it does, we// destroy all the fields in// it by setting their value// to 0.if (ConnectedList.Count > 1){ for (int d = 0; d < ConnectedList.Count; d++) { Field[ConnectedList[d].iXcoordinate, ConnectedList[d].iYcoordinate] = 0; }}Simple, right? So,
2009-04-16 01:35:00
Like I said, this is going to be pretty straight-forward chapter. To destroy the blocks, all we need to do is set their value to 0. And, since we have a list of blocks to destroy, we'll just use a simple FOR loop. The only thing we have to check is that the list contains more than one field. If not, the user clicked on a field that is not connected to any fields of the same color. Nothing fancy here. Here's the code (put it in your DestroyBlocks() method!):// First, we'll check if the// List contains more than// one block. If it does, we// destroy all the fields in// it by setting their value// to 0.if (ConnectedList.Count > 1){ for (int d = 0; d < ConnectedList.Count; d++) { Field[ConnectedList[d].iXcoordinate, ConnectedList[d].iYcoordinate] = 0; }}Simple, right? So,
14. Connections make the world spin
2009-04-09 01:05:00
So, to explain what we need to do – I've drawn an image:Let's say that the player clicks on the Field[1,1]. Our game should detect that the [1,1] field is connected to two more blue fields (Field[2,1] and Field[2,0]). In our game, the rule will be that fields are connected horizontal and vertical, but not diagonal. How do we do this? First of all, we'll create a list of connected fields. We'll put in the field user clicked. And then, we'll check fields above it, below, to the right and to the left to see if they hold the same (color) value. If they do, we'll put them too in our list. And then we'll go trough our list, field by field, searching for connections for every field in our list. If we find any connections, we'll check if they are already in the list. If no, we'll add them. Sound
2009-04-09 01:05:00
So, to explain what we need to do – I've drawn an image:Let's say that the player clicks on the Field[1,1]. Our game should detect that the [1,1] field is connected to two more blue fields (Field[2,1] and Field[2,0]). In our game, the rule will be that fields are connected horizontal and vertical, but not diagonal. How do we do this? First of all, we'll create a list of connected fields. We'll put in the field user clicked. And then, we'll check fields above it, below, to the right and to the left to see if they hold the same (color) value. If they do, we'll put them too in our list. And then we'll go trough our list, field by field, searching for connections for every field in our list. If we find any connections, we'll check if they are already in the list. If no, we'll add them. Sound