It is time to turn your attention back to the development of this chapter's game project, the VB Doodle game. The VB Doodle game is a drawing program. You will create it by following the five basic development steps that have been used in the creation of all the previous chapter game projects.
The VB Doodle game is executed using a single window and is made up of one form and the 11 controls listed in Table 10.3.
Control Type | Control Name | Description |
---|---|---|
Panel1 | pnlControl | Panel control located on the left-hand side of the user interface where game controls are displayed |
Label1 | lblControls | Identifies the location of the controls for the VB Doodle application |
Label2 | lblColor | Identifies the ComboBox control where the player makes color selections |
Button1 | btnRectangle | Initiates the process of drawing a rectangle |
Button2 | btnLine | Initiates the process of drawing a line |
Button3 | btnCircle | Initiates the process of drawing an ellipse |
Button4 | btnFillRectangle | Initiates the process of drawing a filled-in rectangle |
Button5 | btnFillCircle | Initiates the process of drawing a filled-in ellipse |
Button6 | btnDraw | Initiates the process of making a freehand drawing |
Button7 | btnClear | Initiates the clearing of the drawing area |
ComboBox1 | cbxColor | Lists the available color choices provided by the application |
The first step in creating the VB Doodle game is to open up Visual Basic and create a new project as outlined below.
If you have not already done so, start up Visual Basic 2005 Express and then click on File and select New Project. The New Project dialog will appear.
Select the Windows Application template.
Type VB Doodle as the name of your new application in the Name field located at the bottom of the New Project window.
Click on OK to close the New Project dialog.
Visual Basic will now create a new project for you and display a new form upon which you will design the game's user interface.
The first step in designing the game's user interface is to add the appropriate controls to the form and then move and resize them to the right locations. Use Figure 10.12 as a reference as you go through each of the following steps to make sure that you know where each control should be placed and their approximate sizes.
Figure 10.12: Completing the interface design for the VB Doodle game.
Resize Form1 by setting its Size property to 586, 458.
Add a Panel control to the left-hand side of the form and resize it until it takes up approximately 25 percent of the available form space.
Add and center a Label control on the top of the Panel control.
Add six Button controls under the Label control.
Add a second Label control beneath the last button that you added to the Panel control.
Add a ComboBox control just under the second Label control.
Finally, add one more Button control on the Panel control.
The overall layout of the VB Doodle game's user interface is complete. You are now ready to start customizing form and control properties.
Now let's start customizing the properties associated with the form and its controls. Start by changing the form properties listed in Table 10.4.
Property | Value |
---|---|
Name | frmMain |
BackColor | White |
FormBorderStyle | Fixed3D |
Size | 586, 458 |
StartPosition | CenterScreen |
Text | VB Doodle |
Next, modify the properties listed in Table 10.5 for the Panel control.
Property | Value |
---|---|
Name | pnlControl |
Anchor | Top, Bottom, Left |
BackColor | LightGray |
BorderStyle | FixedSingle |
Trick | Take special note of the Anchor property setting. It has been set so that the panel control will automatically resize itself if the form is resized. This provides the player with the flexibility to change the size of the drawing area by maximizing the form without affecting the size and appearance of the Panel control. |
Next, modify the properties listed in Table 10.6 for the two Label controls.
Control | Property | Value |
---|---|---|
Label1 | Name | lblControls |
Font.Bold | True | |
Text | Controls | |
Label2 | Name | lblColor |
Font.Bold | True | |
Text | Select Color: |
Now modify the properties listed in Table 10.7 for the seven Button controls.
Control | Property | Value |
---|---|---|
Button1 | Name | btnRectangle |
Text | Rectangle | |
Button2 | Name | btnLine |
Text | Line | |
Button3 | Name | btnCircle |
Text | Circle | |
Button4 | Name | btnFillRectangle |
Text | Fill Rectangle | |
Button5 | Name | btnFillCircle |
Text | Fill Circle | |
Button6 | Name | btnDraw |
Text | Draw | |
Button7 | Name | btnClear |
Text | Clear |
Now modify the properties listed in Table 10.8 for the ComboBox control.
Property | Value | |
---|---|---|
Name | cbxColor | |
Items | Red | |
Green | ||
Blue | ||
Black | ||
Yellow | ||
Purple | ||
Text | Red |
That is it. You have finished making all the design-time property changes to the VB Doodle application's form and control properties.
The first step in writing the code for the VB Doodle game is to define class-level variables that the application will need in order to run, as shown below.
Public Class frmMain 'Declare a variable representing the System.Drawing.Graphics class Private FormGraphic As Graphics 'Declare variables representing the Point class Private StartPoint As Point Private EndPoint As Point 'Declare a variable that will be used to store and track the drawing 'option selected by the player Private strCurrentAction As String = "Line" 'Declare a variable to be used as a counter Private intCounter As Integer = 0 'Declare an array Private apntArray() As Point End Class
The first declaration statement defines an object variable that will be used to represent the Graphics class. The second and third statements define object variables that will be used to represent the Point class. The third statement defines a string variable name, strCurrentAction, that will be used by the application to keep track of the currently selected drawing option. The last two statements are used to define a variable that will be used to keep track of the number of elements stored in an array named apntArray.
One of the procedures within the application allows the player to make a freehand drawing. This is accomplished by storing coordinates representing the location of the pointer in the apntArray as the player moves the mouse around when drawing freehand and then passing these coordinates to the DrawLines method.
A Point class is a member of the System.Drawing namespace. The Point class can be used as a mechanism for storing sets of coordinates.
The next thing to do is to set up the application so that it associates the FormGraphic object variable with its drawing surface (the form), which you can do by modifying the frmMain_Load procedure as shown below.
'This procedure executes when the VB Doodle game loads Private Sub frmMain_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load 'Create an instance of the Graphics class objFormGraphic = Me.CreateGraphics End Sub
Regardless of which type of drawing operation the player wishes to make, such as drawing a line, a rectangle, or a freehand image, everything begins when the player clicks on the mouse button in order to set the starting point for whatever shape is being drawn. Therefore, you will need to modify the frmMain_MouseDown procedure as shown below in order to capture this initial set of coordinates and assign it to the StartPoint variable.
'This procedure captures the coordinates used to draw shapes Private Sub frmMain MouseDown(ByVal sender As Object, _ ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseDown 'Create an instance of the point class and assign coordinates StartPoint = New Point(e.X, e.Y) End Sub
The next procedure to set up is the frmMain_MouseMove Sub procedure, shown below.
'This procedure captures coordinates for freehand drawings Private Sub frmMain_MouseMove(ByVal sender As Object, _ ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseMove 'The button labeled Draw was clicked If strCurrentAction = "Draw" Then 'The player must press and hold down the left mouse button If e.Button = Windows.Forms.MouseButtons.Left Then 'Create an instance of the Point class and assign a set 'of coordinates Dim DrawPoint As New Point(e.X, e.Y) 'Resize the array and keep all existing data ReDim Preserve apntArray(intCounter) 'Add the most recently collected set of coordinates apntArray(intCounter) = objPoint intCounter += 1 'Increment the counter 'A minimum of 2 sets of coordinates is required to draw If intCounter >= 2 Then 'Call procedure that does the actual drawing SelectAndDraw("Draw", apntArray) End If End If End If End Sub
This procedure is responsible for collecting the coordinates of the mouse as the player moves it around the form when creating a freehand image (when the value of strCurrentAction is equal to "Draw"). However, coordinates are only recorded if the player is holding down the left mouse button when the mouse is being moved (if e. Button = Windows.Forms.MouseButtons.Left Then). Individual coordinates are stored as object variables named DrawPoint and then assigned to the apntArray. The intCounter variable, which is incremented by one with the addition of every new set of coordinates, it used to assign the index number of each new array entry.
The coordinates stored in the apntArray are then passed on to the SelectAndDraw procedure, where the Graphics class's DrawLines method will be used to draw the image on the form. The DrawLines method requires a minimum of two sets of coordinates in order to execute. Therefore, the SelectAndDraw procedure is only called if the value of intCounter is greater than or equal to 2.
The player can release the left mouse button at any time when making a freehand drawing in order to change colors or to reposition the pointer to a new location to add another freehand drawing to the form. Therefore, whenever the player releases the mouse button, the application will need to reset the intCounter variable to 0 and reinitialize the apntArray array. In addition, the application will need to capture the location of the last set of coordinates for the freehand image. You can set all this up by modifying the frmMain_MouseUp procedures as shown below.
'This procedure runs when the player releases the left mouse button Private Sub frmMain_MouseUp(ByVal sender As Object, _ ByVal e As System.Windows.Forms.MouseEventArgs) Handles Me.MouseUp intCounter = 0 'Reset the counter to zero ReDim apntArray(intCounter) 'Reset the array EndPoint = New Point(e.X, e.Y) 'Capture last set of coordinates DrawGraphic() 'Call procedure that draws the shape End Sub
As you can see, the apntArray is reset using the ReDim keyword (without using the Preserve keyword). Once the coordinates of the pointer's last location (when the left mouse button was released) have been captured, a procedure named DrawGraphic is called.
The DrawGraphic procedure, shown below, is responsible for laying out the required coordinates for a drawing based on the value assigned to the strCurrentAction variable.
'This procedure assembles the coordinates required to draw shapes Private Sub DrawGraphic() 'Assemble coordinates for a rectangle drawing If strCurrentAction = "Rectangle" Then 'Declare variable representing a rectangle Dim ShapeCoordinates As Rectangle 'Instantiate a rectangle object and assign its coordinates ShapeCoordinates = _ New Rectangle(Math.Min(EndPoint.X, StartPoint.X), _ Math.Min(EndPoint.Y, StartPoint.Y), _ Math.Abs(EndPoint.X - StartPoint.X), _ Math.Abs(EndPoint.Y - StartPoint.Y)) 'Call procedure to draw shape SelectAndDraw("Rectangle", ShapeCoordinates) End If 'Call procedure to draw a line If strCurrentAction = "Line" Then SelectAndDraw("Line") End If 'Assemble coordinates for a circle drawing If strCurrentAction = "Circle" Then 'Declare variable representing a rectangle Dim ShapeCoordinates As Rectangle 'Instantiate a rectangle object and assign its coordinates ShapeCoordinates = _ New Rectangle(Math.Min(EndPoint.X, StartPoint.X), _ Math.Min(EndPoint.Y, StartPoint.Y), _ Math.Abs(EndPoint.X - StartPoint.X), _ Math.Abs(EndPoint.Y - StartPoint.Y)) 'Call procedure to draw shape SelectAndDraw("Ellipse", ShapeCoordinates) End If 'Assemble coordinates for a filled rectangle drawing If strCurrentAction = "FillRectangle" Then 'Declare variable representing a rectangle Dim ShapeCoordinates As Rectangle 'Instantiate a rectangle object and assign its coordinates ShapeCoordinates = _ New Rectangle(Math.Min(EndPoint.X, StartPoint.X), _ Math.Min(EndPoint.Y, StartPoint.Y),_ Math.Abs(EndPoint.X - StartPoint.X), _ Math.Abs(EndPoint.Y - StartPoint.Y)) 'Call procedure to draw shape SelectAndDraw("FillRectangle", ShapeCoordinates) End If 'Assemble coordinates for a filled circle drawing If strCurrentAction = "FillCircle" Then 'Declare variable representing a rectangle Dim ShapeCoordinates As Rectangle 'Instantiate a rectangle object and assign its coordinates ShapeCoordinates = _ New Rectangle(Math.Min(EndPoint.X, StartPoint.X), _ Math.Min(EndPoint.Y, StartPoint.Y), _ Math.Abs(EndPoint.X - StartPoint.X), _ Math.Abs(EndPoint.Y - StartPoint.Y)) 'Call procedure to draw shape SelectAndDraw("FillCircle", ShapeCoordinates) End If End Sub
For example, if strCurrentAction is equal to Rectangle, an object variable named ShapeCoordinates is declared representing the Rectangle class. The coordinates for the drawing are then laid out and the SelectAndDraw procedure is called and passed a string representing the shape to be drawn and the coordinates required to draw it.
Trick | The way that the coordinates are assembled for a rectangle shape requires a little extra examination. As you can see, both the Math class's Min and Abs methods are used. To understand what is going on here, you must first remember that the rectangle will be drawn from Left to right, and that the point in its upper-left corner is determined based on its relationship to the (0,0) coordinates. This is true even if the player decides to draw the rectangle right to Left. The first use of Math.Min determines whether the EndPoint.X or StartPoint.X coordinates is the leftmost coordinate by returning a value representing the lower of the two coordinates. Likewise, the second use of Math.Min determines whether the EndPoint.Y or the StartPoint.Y coordinates is the topmost coordinate. Once the coordinate of the top Left corner is identified, the first Math.Abs method is used to retrieve an absolute number representing the length of the rectangle along the X axis by subtracting the difference between EndPoint.X and StartPoint.X. Likewise, the Length of the rectangle's Y axis is determined by returning the absolute value of EndPoint.Y minus StartPoint.Y. |
Now it is time to begin adding code to the Click event for each of the game's Button controls. The code for the btnRectangle_Click procedure is shown below. When selected, it sets the value of strCurrentAction equal to "Rectangle" in order to allow the player to indicate what type of drawing to make.
An absolute number is a non-negative number. For example, the absolute value of -9 is 9. By the same token, the absolute value of 9 is also 9.
'This procedure runs when the button labeled Rectangle is clicked Private Sub btnRectangle_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnRectangle.Click strCurrentAction = "Rectangle" End Sub
The code for the btnLine_Click procedure is shown below.
'This procedure runs when the button labeled Line is clicked Private Sub btnLine_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnLine.Click strCurrentAction = "Line" End Sub
The code for the btnCircle_Click procedure is shown below.
'This procedure runs when the button labeled Circle is clicked Private Sub btnCircle_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnCircle.Click strCurrentAction = "Circle" End Sub
The code for the btnFillRectangle_Click procedure is shown below.
'This procedure runs when the button labeled Fill Rectangle is clicked Private Sub btnFillRectangle_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnFillRectangle.Click strCurrentAction = "FillRectangle" End Sub
The code for the btnFillCircle_Click procedure is shown below.
'This procedure runs when the button labeled Fill Circle is clicked Private Sub btnFillCircle_Click(ByVal sender As System.Object,_ ByVal e As System.EventArgs) Handles btnFillCircle.Click strCurrentAction = "FillCircle" End Sub
The code for the btnDraw_Click procedure is shown below.
'This procedure runs when the button labeled Draw is clicked Private Sub btnDraw_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnDraw.Click strCurrentAction = "Draw" End Sub
The code for the btnClear_Click procedure is shown below. Instead of setting a variable as was done in the other Button object Click event procedures, this procedure executes the Graphics object's Clear method, passing it Me.BackColor in order to clear out the drawing area (the form's background).
'This procedure runs when the button labeled Clear is clicked Private Sub btnClear_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles btnClear.Click FormGraphic.Clear(Me.BackColor) End Sub
The last procedure thatyou'll need to set up for the VB Doodle game is the SelectAndDraw Sub procedure, which is shown below. This procedure uses a Select Case block to process the strShapeargument that is passed to it. Then, based on the appropriate match, a call is made to the appropriate Graphics object method.
'This procedure draws the selected shape Private Sub SelectAndDraw(ByVal strShape As String, _ Optional ByVal Coordinates As Object = "") 'Declare and instantiate a Pen object and assign its color Dim Penl As New Pen(Color.FromName(cbxColor.Text)) 'Declare and instantiate a SolidBrush object and assign its color Dim Brushl As New SolidBrush(Color.FromName(cbxColor.Text)) 'Process the procedure arguments and draw Select Case strShape Case "Line" FormGraphic.DrawLine(Pen1, StartPoint, EndPoint) Case "Rectangle" FormGraphic.DrawRectangle(Pen1, Coordinates) Case "Ellipse" FormGraphic.DrawEllipse(Pen1, Coordinates) Case "FillRectangle" FormGraphic.FillRectangle(Brush1, Coordinates) Case "FillCircle" FormGraphic.FillEllipse(Brush1, Coordinates) Case "Draw" FormGraphic.DrawLines(Pen1, Coordinates) End Select End Sub
OK. That's it. The VB Doodle game is now ready to run. Go ahead and run the game by pressing F5, and make sure that everything works like it is supposed to. If you run into any problems, go back and double-check your typing.