Up to now, we displayed the blocks as squares filled with color. From now on, we'll display little icon images instead. If you remember, we used rectangles to define the size, and the position for each field. And that suits us just fine! So, here's a part of our code that we wrote in chapter 7:
(This is a part of the code from chapter 7, method DrawField())
switch (Field[v, s]){
case 0:
// Draw empty field...
break;
case 1:
// I've decided that color #1 is Blue. So, if
// the field holds a value of 1 – We'll color it
// blue. And we'll do the same for all
// other colors.
gField.FillRectangle (Brushes.Blue, rtgField);
break;
case 2:
// If the field contains value 2:
// we'll fill it red.
gField.FillRectangle (Brushes.Red, rtgField);
break;
case 3:
// If the field contains value 3:
// we'll fill it green.
gField.FillRectangle (Brushes.Green, rtgField);
break;
case 4:
// If the field contains value 4:
// we'll fill it yellow.
gField.FillRectangle (Brushes.Yellow, rtgField);
break; case 5:
// If the field contains value 5:
// we'll fill it purple.
gField.FillRectangle (Brushes.Purple, rtgField);
break;
case 6:
// If the field contains value 6:
// we'll fill it black.
gField.FillRectangle (Brushes.Black, rtgField);
break;
case 7:
// If the field contains value 7:
// we'll fill it orange.
gField.FillRectangle (Brushes.Orange, rtgField);
break;
case 8:
// If the field contains value 8:
// we'll fill it gray.
gField.FillRectangle (Brushes.Gray, rtgField);
break;
case 9:
// If the field contains value 9:
// we'll fill it dark blue.
gField.FillRectangle (Brushes.DarkBlue, rtgField);
break;
case 10:
// If the field contains value 10:
// we'll fill it pink.
gField.FillRectangle (Brushes.Pink, rtgField);
break;
default:
// If our program comes to this // point of the code,
// something's gone wrong! ;) XD
break;
}
We'll replace that FillRectangle statement with a new one: DrawImage. But before we do that, we have to store our images somewhere. And, lucky us, there is a control made just for that. Go to your toolbox, and find the Components group. In there you'll find the ImageList control. Double-click it, and it will apear next to your timers. Nice. Set the properties like this:
ImageList
- (name):ilTiles
- ColorDepth: Depth32Bit
- TransparencyColor: Web > Transparent
- Images: [Load 10 different bubble images]
- ImageSize: 32; 32
Now, add add our bubble graphics files into the list. You can reorder them however you want. After all, we'll display the right picture by calling it's index number. Ready? Ok… Here is the revised code for the Switch in the 'DrawField()' method. See the difference? Nice… How about trying it out?
switch (Field[v, s])
{
case 0:
//Draw empty field...
break;
case 1:
gField.DrawImage (ilTiles.Images[0], rtgField);
break;
case 2:
gField.DrawImage (ilTiles.Images[1], rtgField);
break;
case 3:
gField.DrawImage (ilTiles.Images[2], rtgField);
break;
case 4:
gField.DrawImage (ilTiles.Images[3], rtgField);
break;
case 5:
gField.DrawImage (ilTiles.Images[4], rtgField);
break;
case 6:
gField.DrawImage (ilTiles.Images[5], rtgField);
break;
case 7:
gField.DrawImage (ilTiles.Images[6], rtgField);
break;
case 8:
gField.DrawImage (ilTiles.Images[7], rtgField);
break;
case 9:
gField.DrawImage (ilTiles.Images[8], rtgField);
break;
case 10:
gField.DrawImage (ilTiles.Images[9], rtgField);
break;
default:
break;
}
It looks a lot like the screenshot from chapter 1, doesn't it? Great! So, in the next chapter, we'll add one more extremly cool feature, to complete our game. We'll make our doggy splash water. And that's it. The game will be complete, and this tutorial will be almost over. As the last topc, I'll cover packaging and distribution of your game. And that's it… ;) Finally…
