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):picDoggy
- BackColor: Web > Transparent
- Image: [Load firefighter doggy image]
- Location: 477; 186
- Size: 131; 201
PictureBox
- (name):picSplash
- Anchor:Right
- BackColor: Web > Transparent
- Image: [Load water splash image]
- Location: 45; 81
- Size: 407; 50
- SizeMode: StretchImage
- Visible: False
And now, adjust your form's properties so it'll show the background image:
Form - frmMain
- BackgroundImage: [Load background image]
If you did everything correctly, you should get your game looking quite similar to the one I've made. But we still have to replace our regular buttons with some fancy ones. If you're really going for the 'wow' effect, you can use pictureboxes combined with labels to replace the buttons. So, remove your buttons (select them and click 'Delete') add some more controls to your form:
Note: Our new picture boxes that'll replace the buttons will be called same as the buttons we're replacing. That way, we won't have to change our old code.
PictureBox
- (name):butGame
- BackColor: Web > Transparent
- Image: [Load cloud image]
- Location: 12; 6
- Size: 126; 53
- SizeMode: StretchImage
PictureBox
- (name):butHighScores
- BackColor: Web > Transparent
- Image: [Load cloud image]
- Location: 144; 6
- Size: 126; 53
- SizeMode: StretchImage
PictureBox
- (name):butNG
- BackColor: Web > Transparent
- Image: [Load cloud image]
- Location: 276; 6
- Size: 126; 53
- SizeMode: StretchImage
Now, we'll add some labels to our clouds:
Label
- (name): lblGameCloud
- BackColor: Web >White
- Location: 23; 26
- Size: 107; 20
- Text: New Game
- TextAlign: MiddleCenter
Label
- (name): lblHighScore
- BackColor: Web >White
- Location: 155; 26
- Size: 107; 20
- Text: High Scores
- TextAlign: MiddleCenter
Label
- (name): lblNG
- BackColor: Web >White
- Location: 286; 26
- Size: 107; 20
- Text: New Game
- TextAlign: MiddleCenter
It would be cool if the label inside the picture box would pop-up when the player moves the mouse over the picture box… Here's the code for all three buttons:
private void butGame_MouseEnter
(object sender, EventArgs e)
{
// Set label font to bold:
lblGameCloud.Font = new Font
(lblGameCloud.Font, FontStyle.Bold);
}
private void butGame_MouseLeave
(object sender, EventArgs e)
{
// Set label font to normal:
lblGameCloud.Font = new Font
(lblGameCloud.Font, FontStyle.Regular);
}
private void butHighScores_MouseEnter
(object sender, EventArgs e)
{
// Set label font to bold:
lblHighScore.Font = new Font
(lblHighScore.Font, FontStyle.Bold);
}
private void butHighScores_MouseLeave
(object sender, EventArgs e)
{
// Set label font to normal:
lblHighScore.Font = new Font
(lblHighScore.Font, FontStyle.Regular);
}
private void butNG_MouseEnter
(object sender, EventArgs e)
{
// Set label font to bold:
lblNG.Font = new Font
(lblNG.Font, FontStyle.Bold);
}
private void butNG_MouseLeave(
object sender, EventArgs e)
{
// Set label font to normal:
lblNG.Font = new Font
(lblNG.Font, FontStyle.Regular);
}
To make this code work, go to your form designer window, then go to your properties window, and click on the 'Events' icon (lightning) on the top of the box. Select your new controls, one by one and find events called MouseEnter and MouseLeave. Click on the little dropdown arrow and you'll see our new code method names in the list. I hope you can find and match the right ones… If not, here's a list that shows you how to match the righ stuff.
- Control - Event - EventName
- butGame - Click - butGame_Click
- butGame - MouseEnter - butGame_MouseEnter
- butGame - MouseLeave- butGame_MouseLeave
- butHighScores - Click - butHighScores_Click
- butHighScores - MouseEnter - butHighScores_MouseEnter
- butHighScores - MouseLeave- butHighScores_MouseLeave
- butNG - Click - butNG_Click
- butNG - MouseEnter - butNG_MouseEnter
- butNG- MouseLeave- butNG_MouseLeave
- lblGameCloud - Click - butGame_Click
- lblGameCloud- MouseEnter - butGame_MouseEnter
- lblGameCloud- MouseLeave- butGame_MouseLeave
- lblHighScore - Click - butHighScores_Click
- lblHighScore - MouseEnter - butHighScores_MouseEnter
- lblHighScore - MouseLeave- butHighScores_MouseLeave
- lblNG - Click - butNG_Click
- lblNG - MouseEnter - butNG_MouseEnter
- lblNG- MouseLeave- butNG_MouseLeave
You probably noticed in the table that we added the 'Click' event to our old button code… That's a nice touch in VS.net, that spares us from retyping the code… (or c/p-ing ;) Nice… Hope you did everything right… And one other cool thing is, that we added the same code to our labels and pictureboxes... Before you try the stuff, let's finally add some graphics.
