BACK TO THE VB DOODLE GAME


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.

Designing the Game

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.

Table 10.3: Form Controls for the VB Doodle Game

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

Step 1: Creating a New Visual Basic Project

The first step in creating the VB Doodle game is to open up Visual Basic and create a new project as outlined below.

  1. 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.

  2. Select the Windows Application template.

  3. Type VB Doodle as the name of your new application in the Name field located at the bottom of the New Project window.

  4. 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.

Step 2: Creating the 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.

image from book
Figure 10.12: Completing the interface design for the VB Doodle game.

  1. Resize Form1 by setting its Size property to 586, 458.

  2. 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.

  3. Add and center a Label control on the top of the Panel control.

  4. Add six Button controls under the Label control.

  5. Add a second Label control beneath the last button that you added to the Panel control.

  6. Add a ComboBox control just under the second Label control.

  7. 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.

Step 3: 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.

Table 10.4: Property Changes for Form I

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.

Table 10.5: Property Changes for 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.

Table 10.6: Property Changes for 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.

Table 10.7: Property Changes for 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.

Table 10.8: Property Changes for 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.

Step 4: Adding a Little Programming Logic

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.

image from book
DEFINITION

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.

image from book

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.

image from book
DEFINITION

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.

image from book

 '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 

Step 5: Testing the Execution of the VB Doodle Game

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.




Microsoft Visual Basic 2005 Express Edition Programming for the Absolute Beginner
Microsoft Visual Basic 2005 Express Edition Programming for the Absolute Beginner
ISBN: 1592008143
EAN: 2147483647
Year: 2006
Pages: 126

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net