Software & Programming Fundamentals

Unit Testing–Manual, Automatic & Choosing test cases

2011-08-01T18:07:00.001-07:00

We perform adhoc testing as we code. However, to properly test our smallest unit of code, we will need to perform unit testing.

Why border with unit testing?

Proper unit testing provides the following advantages:

Robustness
Productivity
Repeatability

Robustness: It ensure that your code works under error for abnormal inputs or values or etc.

Productivity: It makes it easier to perform testing at a higher level and later stage since we have tested the lower level codes thoroughly.

Repeatability: With proper documentation and creation of the test cases, we are able to repeat those tests again in the future. For bugs found, the test case ensures that the programmer during debugging will be able to repeat the test again to re-create the problem.

Automatic Creation of Unit Tests to use Data File

We go through the steps to use a *.csv file for testing.

For this project, imagine we are creating a new Math Library to be distributed.

Start VS2010 > New Project: Class Library > Name: “MathLibrary” and click [OK]:

Change the name of the class to "Calculator":

Add a new method:

Generate auto test

Now we will use the automatic generation of the unit tests.

Select the method “AddNumbers”, right-click and select “Create Unit Tests…”:

There is no need to change the default setting, just click [OK]:

Change the new test project name to “TestCalculator” and click [Create]:

The following new test project (TestCalculator) and class (CalculatorTest.cs) will be generated:

Look for the method that is performing the test:

Change the TODO to perform a test as follows:

Execute the test: File menu “Test” > Run > All Tests in Solution

The result will be as follows:

Create test cases

Create a text file on desktop, name the file “test.csv” and add the following test cases:

Save the above file.

To use the file as input for the test cases: File menu “Test” > Windows > Test View

Make sure that the “Properties” window is visible. Select “Data Connection String” and click on “…”

Select “CSV file” and click Next

Click on […] to select the “test.csv” file that we have created just now:

Check that the values in the table is correct (otherwise, need to check the test.csv file to correct the error) and click [Finish]:

Click “Yes” to copy the file into current project:

Notice that the test.csv file has been copied into the test project:

The following Attributes have been automatically generated.

Change the code to use the data in the csv file:

DataRow[nn] where nn is the column in each row. DataRow[0] contains the test, DataRow[1] containts n1 and so on.

Execute the test: File menu “Test” > Run > All Tests in Solution

The result will be as follows:

Double-click on the Failed result to see its details:

The above is a simple tutorial on how to use a data file and use the automatically generated test class. Since it is not possible for us to list down all test cases, how should we choose the test cases to ensure that they test our method completely?

How to choose test case?

We choose values for the test cases to test all statements, all branches, all path combinations and finally the boundary conditions:

Statement coverage - makes sure each statement is executed during the test.

Branch coverage - makes sure flow of control traverses each branch in the code.

Path coverage - makes sure each path through the code is traversed.

Boundary testing - makes sure boundaries are exercised .

That’s all for unit testing

Source Control

2011-07-31T21:45:00.001-07:00

According to Wikipedia Revision Control: Revision control, also known as version control or source control (and an aspect of software configuration management or SCM), is the management of changes to documents, programs, and other information stored as computer files. It is most commonly used in software development, where a team of people may change the same files. Changes are usually identified by a number or letter code, termed the "revision number" …

In its smallest scope, a Source Control System allows team to check in and out source code to edit. In its biggest scope, a Revision Control System allows the whole company to check in and out documents, digital assets on top of source code.

In our daily work, we may already have our own revision control practices, such as adding versions to file names:

There are 3 terms that we use in revision control: Trunk, Branch and Tag:

Extracted from “What do track, branch and tag mean?”:

Trunk would be the main body of development, originating from the the start of the project until the present.
Branch will be a copy of code derived from a certain point in the trunk that is used for applying major changes to the code while preserving the integrity of the code in the trunk. If the major changes work according to plan, they are usually merged back into the trunk.
Tag will be a point in time on the trunk or a branch that you wish to preserve. The two main reasons for preservation would be that either this is a major release of the software, whether alpha, beta, RC or RTM, or this is the most stable point of the software before major revisions on the trunk were applied.

Software

There are many Revision Control Software available in the market:

In this blog, we shall cover only Subversion (SVN) which is one of the more widely used open source Client-server software.

For the server, we shall install the OpenCollabNet Subversion Edge as not only it will install the Subversion server backend, it comes with a web based administration front.

For the client, we shall only cover the use of askh plugin which integrate into VS2010 for the source control. If you need more than source control, example to backup your documents and assets, then you should download the TortiseSVN client.

Server – Subversion Edge

Download the latest Subversion Edge installer and install on a win7 PC:

The installer will add two Windows services set to start automatically when
the system starts.

CollabNet Subversion Edge - a Java-based web application that provides a browser UI for configuring and managing your Apache Subversion server.
CollabNet Subversion Server - the actual Apache Subversion server that the management console manages for you, and that your Subversion users will access.

Login page:

The default administrator login is:

Address: http://localhost:3343/csvn
Username: admin
Password: admin

The server is by default “Down”, click on [Start]

Later, we shall create a new Repository and create new users to access the repository

Visual Studio Plugin – Ankh SVN

Download the latest AnkhSVN installer and install on a win7 PC:

Start up Visual Studio 2010 and check that the plugin has installed successfully:

Step 1: Server – create a new repository

Before you are able to add code into the server, you need to create a new repository.

For example, we have a VS2010 solution “WinFormsGraphics6HitTheMouse”.

Type in the name – all in small cap and click “Create”:

Click on “Repository List” and take note of the “Checkout command”:

Step 2: VS2010 – Add the solution and project

Open Visual Studio 2010 solution:

On the menu, select File > Subversion > Add Solution to Subversion…

Refer to the server repository checkout command and copy the location as highlighted:

Copy and paste into the Repository URL, then click on [OK]:

Type a message and click [OK]:

Confirm that the action has uploaded the solution and project:

You will be asked to key in the username and password for the first time accessing the repository:

But currently the solution folder if empty as we have yet to add the project into the repository.

Select the Project and right-click > Project > Commit:

Type a message and click [OK]:

Check that the project files has been uploaded:

Checkout from the repository to Edit

Checkout for the first time by another programmer

Another programmer need to check out the source from the server to edit and then commit the changes to add to the repository.

Menu: View > Repository Explorer

Select the solution folder, then click on ”Checkout from Subversion” icon:

You then open the solution as per normal for your editing.

For example, I added a comments below.

Confirm that the changes have been committed to the repository:

Checkout subsequent time by the same programmer

Just open the solution from local folder, then select the project, Right-click and select “Update Project to Latest Vrsion“:

Then continue editing follows by Committing the changes.

That’s all for an introduction to using a source control system with Visual Studio 2010.

Deployment

2011-07-31T21:26:00.001-07:00

There are a few ways to let your user setup and play your game, ie to distribute your game.

Copy exe file

If your program consists of only one exe file, then the easiest is to locate your exe file. Send the file to your user.

Locate your project folder, there will be a “bin” folder. your program will be either in the “debug” or “release” folder depends on your setting when you build your program:

Confirm that it works by copying the file onto your desktop and execute it.

Create install file

It looks more professional and also will check that the user has the required runtime file, we shall create a install file.

Select the project, right-click and select “Properties”:

Select the “Publish” tab:

In future, depending on your projects, you may need to set “Application Files…”, “Prerequisites…” and “Updates…”. For now, we shall only set the “Options…” as follows:

Then just click [Publish Now]:

The publish folder will open once the process is completed:

These are the files required to send to your users to install onto their PC.

Confirm by installing it yourself, by clicking on the setup.exe, the application will start once the installation is completed:

You will be able to locate the application in the windows start > program menu:

That’s all for deployment.

Adding sound to Graphics game

2011-07-17T21:10:00.001-07:00

In the previous blog on ball, paddle and blocks, we have left out displaying the score and playing the music sound track.

We have covered how to add score using DrawString(..) in the Hit the mouse blog. In this new blog, we shall show you how to add and play a MP3 music sound track.

First copy the project (WinFormsGraphics8PaddleBallRows) to another project: WinFormsGraphics9GameMusic. Refer to earlier blog on how to copy project.

Look for a suitable MP3 file and copy and paste it into the VS project folder:

No need to change the properties of the MP3 file:

Embed resource

Instead of copying the above file directly to the output folder and play it from there, we shall be adding the file into the project as resource.
Menu: Project > project Properties

Select the “Resources” tab on the left column and click on “Add Resource”:

Browse and find the mp3 file:

You will get the following result – name of the resource is just “music”:

Use Windows Media Player

We shall be using Windows Media Player to play the mp3. To do so, we need to add the reference to the project before we could access to the API.

Right click on References and select “Add Reference”

Select the “COM” tab, page down, select "”Windows Media Player – wmp.dll” and click [OK]. DLL stands for Dynamic-Link Library which is Microsoft way of providing shared libraries.

You will see that WMPLib is added into the References.

In Form1.cs, near the top, add the following object:

Add a new using statement so that later on we need not specify the full namespace for IO related classes – eg Stream, File, etc.
Create one instance of the Media Player object.
Set the filename to be used later.

In the Load() method, add the following code:

Use System.Reflection to read the file embedded as stream.
Then convert the file stream into a temporary file in the same directory as the executing program.
Set the Media Player parameters and settings. For details on setMode, refer to MSDN Settings.setMode.
Play the mp3 file.

If you build and execute now, the mp3 should play. But when the game is over, it will not stop. Hence we need to stop the media player:

We need to remove the temporary file, in case user closes the form before the game end

Select the form in deign view:

Go to Properties window, select events and add a new “FormClosing” event:

Add the code to check if the temporary file exits, then delete it:

Build and execute:

If you need to play a wav file, you may just use the SoundPlayer. Refer to MSDN on how to play wav file using SoundPlayer.

Abstract classes & Interfaces

2011-07-14T22:11:00.001-07:00

An abstract class is one that does not have complete implementation while an interface has no implementation at all.

We cannot instantiate an abstract class or an interface, they are useful only to be inherited.

Abstract class

An abstract class may contain fields, properties and methods. At least one of the member must be defined as abstract.

In the example below, only one method is abstract.

Another example, extracted from external site. It shows the derived classes using the “override” keyword to implement the abstract method:

Interface

An interface is not a class. It contains only methods without implementation.

It is a naming convention to start the name of an interface with a capital i as illustrated in the following example:

An interface only provides the behaviours of its derived classes – for the example above: must be able to get value, must be able to compare.

Basically we use abstract classes or interfaces to provide a structure or a contract that their derived classes must do or provide.

With this we have wrapped up the key features of OOP.

Access modifiers–private, public, protected and …

2011-07-14T06:27:00.001-07:00

In the earlier blog, we mentioned that OOP Encapsulation is achieved by using the keyword “private”. This keyword and a few others that control the access to the members are called Access Modifiers.

The more common ones are “private”, “public” and “protected”. The less common ones are “internal” and “protected internal”.

The least restrictive is “public” while the most restrictive is “private”.

Access Modifiers can be used on class and its members, but for simplicity, we shall focus on variables in this blog.

We shall use the project completed earlier in the previous blog on inheritance: ConsoleClassCharacter

Add the following 3 variables into Character class:

We will test their scope as follows:

1) we test them in Character class: all 3 variables are accessible.

2) We test them in one of the Derived classes – Alien class:

private variable: although inherited but it is not accessible
protected and public variables: accessible

3) We test them in another class – Program:

private and protected variables: not accessible
public variables: accessible via instance field

internal

To test “internal”, we need to have another project with a different namespace. Add a project: ConsoleClassCharacter2

To let the 2nd project to access the 1st project, we need to add reference:

Right click on “ConsoleClassCharacter2”:

We need to define the Character class as public and add the”internal” variable:

There is no difference in the main() for “public” and “internal” variable:

Add the using statements in ConsoleClassCharacter2 - there is no difference in the main() for “public” and “internal” variable:

The different?

“internal” variables can be used by different project but in the same solution but not outside the solution. “public” can be used outside of the solution.

internal protected

“internal protected” => “internal” and “protected”: that means it will be accessible in the same solution and also derived classes. Scope is more than just “internal”.

That’s all for Access Modifiers. Next we will cover Abstract class and Interface.

Static Classes and static members

2011-07-13T19:31:00.001-07:00

When a class is defined as static, it contains only static members (fields, properties and methods). A static class differ from normal class in one way – it cannot be instantiated => cannot use “new” keyword with instance constructors.

Since C# is purely OOP, there is no way to define utility functions to do simple calculation such as math’s functions. If we define these methods in a Math class, it is quite pointless to create an object of Math before using its methods. Hence we declare Math class as static:

C# class library already define this static Math class with all its static methods, such as Round(..) method.

How to use static class and its methods?

Just call the class name follows by a dot and then the method name:

Static members

A non-static class may contain static members (fields, properties or methods). Only one copy of the static members exists regardless of the number of instances of the class are created.

Static members may be access even before the first instance is created. Static members cannot access non-static members.

Use the Character class created in the previous blog to illustrate.

Define a static int variable count to keep track of the number of Character created. Define a constructor to add the count by one. A non-static constructor is also called instance constructor.

For the derived classes (Alien, Bandit, Cowboy & Pirate), since their constructors are not defined, a default constructor will be generated by the compiler.

For example, the default constructor generated for Alien class will be as follows. “: base()” means that the parent (base) class constructor will be called. In this case, Character() will be called.

Imagine “: base()” represent “: Character()”

The above is only for illustration, there is no need to define the constructors for the derived classes, the default ones will do. Next, we test it in main() method:

Build and execute:

The next section we shall discuss the Access Modifiers in details.

Inheritance & Polymorphism

2011-07-13T01:04:00.001-07:00

Another feature of OOP is inheritance. If you have the following classes for your new game. You will notice that there are common behaviours for these four classes. the code in one will be repeated in the rest. Is there a better to design these classes?

Yes, by using inheritance and define a common Parent class “Character”. Then inherit from the parents and define the unique behaviours for the four classes.

The phrase “Parent”, “Base” and “Super” are used inter-changeably while the phrase “Child”, “Derived”, “Sub” are used inter-changeably too.

From MSDN (Inheritance): When you define a class to derive from another class, the derived class implicitly gains all the members of the base class, except for its constructors.

But the derived class can only access to the inherited non-private members.

How do you inherit in C#?

For a “Character” class and its derived “Alien” class, the code will be:

Let’s try it out.

Create a Console Application: ConsoleClassCharacter

Add the structure for the two classes:

Add the Walk(), Talk() and Say() method into Character class:

Since “Alien” class derived from “Character”, it also inherits the public methods. Add the following code into the main() method to test:

Build and execute:

Now, define the specific methods: Teleport() and Hide() for Alien:

Test it out in the main() method:

Build and execute:

Polymorphism

Other than Encapsulation and Inheritance, the next important feature of OOP is Polymorphism. Polymorphism is a Greek word that means "many-shaped".

From MSDN (Polymorphism):

For example, suppose you have a drawing application that enables a user to create various kinds of shapes on a drawing surface. You do not know at compile time which specific types of shapes the user will create. However, the application has to keep track of all the various types of shapes that are created, and it has to update them in response to user mouse actions. You can use polymorphism to solve this problem in two basic steps:

Create a class hierarchy in which each specific shape class derives from a common base class.
Use a virtual method to invoke the appropriate method on any derived class through a single call to the base class method.

Let’s implement it using our Character class and its derived classes:

First complete the classes:

Now, we will be using Polymorphism.

Step 1: Create a virtual Draw() method in Character, then Create the override Draw() method in the derived classes (Alien, Bandit, Cowboy & Pirate):

These classes are ready to use Polymorphism to do the drawing. We shall test it in the main() method.

Create a list of Character to store objects of Alien, Bandit, Cowboy & Pirate. Although the list is for storing Character, derived classes may also be stored. Then loop through the list to call the Draw() method. The runtime know automatically which Draw() method to call, although they are stored as Character.

Build and execute:

In the next section, we shall cover static class and static members (fields, properties or methods).

Constructor and “this” keyword

2011-07-12T21:46:00.001-07:00

A class definition consists the following sections:

Fields
Properties
Methods
Constructors

A constructor is a class method that has the same name as the class. But it differs from method as it does not have any return type. Constructor/s are usually used to initialize values for class fields (data).

A constructor that takes no parameters is called a default constructor.

For example, in the Student class below, the default constructor is “public Student()”

When a class does not contain any constructor, the C# compiler will automatically add a hidden default constructor (that does nothing) for you:

Let’s try it out.

Create a Console Application: ConsoleClassStudent

Add a Student class with 2 fields and 2 properties. Then use the Student class in the main() method:

Build and run the above program:

Modify to add a default constructor:

Build and run:

Constructor Overloading

Constructor overloading is similar to method overloading. You may define a few constructor with different parameters.

For example, you may want the default value of age to be 10 and name to be “none. Prior to optional parameters in C# 4.0, you will need to use Constructor Overloading to define at least four constructors (we will talk about the keyword “this” in the next section):

Test it out by changing the parameters in the main() method:

Optional and named parameters

Similar to optional and named parameters for method, instead of using constructor overloading to allow different parameters, we may use optional parameters by defining their default values in the constructor:

Then we may use optional parameters in the main() method to use the constructor:

Build and run the above cases to see the results.

“this” keyword

The “this” keyword refers to the current object. It is usually used when there are two variables of the same name such as the example below.

“this.age” refers to age that belongs to current object while “age” refers to the parameter.

In the next blog, we will cover inheritance.

Object Oriented Programming (OOP)

2011-07-10T19:12:00.001-07:00

Why use OOP when we are already comfortable with what we have learnt?

We mentioned in “What is programming in a nutshell”: it is important for us to pick up problem solving skill before we use a programming language to apply the solution to a problem.

OOP provides another way of solving problems – analyse the problem and then apply objects to solve the problem.

For example, in designing a tile-based game, OOP design may be something like this:

In this blog, we shall cover how C# allows us to apply OOP concept, starting with a empty class.

Creating a class

Create a Console Application: ConsoleClassShape

There are two ways to add a new class:

1. Solution windows: Right-click the project > Add > Class

2. Add the class in the Program.cs file inself.

For simplicity,we will use the 2nd way in this blog. Add the following below the closing curly bracket that belongs to “class Program”.

Although this is just a empty class, we are able to use it already:

Notice that after you type “rect.”, there are a few methods already available.

Build and run:

In the above code, we have use the “new” keyword and also the default constructor “Rectangle()”:

The variable “rect” is also referred to as an instance or an object.

Encapsulation using accessors

We shall now define a few variables in the Rectangle class:

Then we shall access these variables from the main() method:

Notice that “rect.count” gives an error, since “count” is defined as “private” in the Rectangle class, “count” can only be accessed from inside the class but not outside. The private members (variables, methods and others) are used internally only.

Correct the error:

Build and run:

Use Properties instead of public variables

It is a bad practice to expose variables as public, since there is no way to stop users from setting invalid values into these variables and cause unwanted results.

We shall learn how to create Properties:

change width and height to “private”
create a property “Width”, then add its “set” and “get”
create a property “Height”, then add its “set” and “get”

Use these properties in the main() method:

It looks almost the same as before, except that for the capital W and H. We will cover the advantage of using properties later, for now, let’s play around by removing the “set” and/or “get” for the properties.

If you comment out the “set” and “get” for Width:

You will get the following errors:

If you just comment out one of them:

You will get only one error:

The above “fooling” around shows us the following relationships:

“rect.Width = 20;” ==> Width’s set

“Console.WriteLine(“Width is “ + rect.Width + …” ==> Width’s get

Now we shall set a break point and step into the program to have a better understanding. But first, we need to change the default option:

Tool > Options

Debugging > General > Uncheck “Step over properties …”

Set a break point at “rect.Width = 20;”

Start Debugging, then click on “Step Into” or F11:

When the step through reach the Width property, hover over “value” and you will see the value “20”. That means “value” is like a input parameter that is automatically filled by the compiler with a value, from the right side of the equal sign.

So for “rect.Width = 20;” “value” will be given a value of 20.

When the step through reach the following line, it will enter the “get” code:

Similarly, for “rect.Height”, it will jump to Height property “get” code.

So far there is no checking of the validity of value in the “get” code for these Properties. There is a short cut way to define Properties that do not need to check its private corresponding variables (Width with width, Height with height):

We will undo and revert to the full version and add validity check:

We may also add checking into the “get” code to do processing before returning the result.

As an exercise, try it yourself to define two more Properties – Area and Perimeter (both with no “set” code, only “get” code). Implement the logic to make use of the width and height given above. Use the main() method to test the additional code.

Methods

In a class, on top of Fields and Properties, we may also define Methods.

We may define private methods to be used internally.

Then modify the Properties to call the method:

The Area and Perimeter properties no longer need to perform the calculation.

We may also define public methods to be used by external:

And test the method in the main() method:

We may also have a few methods with the same name and return type, but take in different parameters – this is called Method Overloading and it is covered in an earlier blog (Methods: Overloading, optional parameter & default value and named parameter)

Makeup lessons

2011-07-04T20:23:00.001-07:00

Going through the following material:

Learn C# Programming Tutorial Lesson 2 - Variables and Constants

Learn C# Programming Tutorial Lesson 3 - Decisions

Learn C# Programming Tutorial Lesson 4 - Loops

Learn C# Programming Tutorial Lesson 5 - Arrays

Learn C# Programming Tutorial Lesson 6 - Methods

Learn C# Programming Tutorial Lesson 7 - Working with Strings

Timetable from Jul to Sep 2011

2011-07-04T16:54:00.001-07:00

Paddle, ball and blocks

2011-06-09T08:08:00.001-07:00

This tutorial is built on: Ball and Paddle.

Copy the project into a new project in Windows File Explorer. Steps listed here. Rename the folder, solution and project name to: WinFormsGraphics9PaddleBallBlocks

Add new class level variables for the blocks:

Array to store the blocks location: Point[]
Size for the blocks – just one will do, as we assume all the blocks are of the same size
List of rectangles for the blocks – we could use ArrayList as well since these two can be use to add and remove items flexibly. But List is recommended because it is TYPE-safe (meaning you can only put in one type of object – for this case, only Rectangle – as indicated in the < … >)

Modify Form1_Load():

Define the blocks size
Calculate the number of blocks possible, then subtract 2 to give more space on both size. If you want more space, just subtract more
Calculate the offset on both sides

Declare and assign values for the blocks location and rects

Modify timer1_Tick() – to draw the blocks rects by using foreach loop:

Build and execute – to check if the blocks are drawn correctly:

Finally, modify timer1_Tick() to add the collision processing:

Use reverse looping (from the back to the front) and check if there is any collision between the ball and the blocks. When there is collision, remove the block collided. The List automatically renumber the blocks after one block is removed. Using reverse looping will not be affected after the renumbering.
Check for end of game when all blocks are removed (Count == 0)

Build and execute:

That is all for now on graphics related games. We shall be moving onto classes and objects, before we return to use the new concepts on simple games.

Mouse, Cat and Dogs

2011-06-08T04:15:00.001-07:00

This tutorial is built on the previous one: Ball and Big Square Paddle.

Copy the project into a new project in Windows File Explorer. Steps listed here. Rename the folder, solution and project name to: WinFormsGraphics8MouseCatDogs

In this tutorial, we shall convert the ball into a mouse and the square paddle into a cat. Then we will change the processing for collision between the cat and mouse, instead of bouncing off, the mouse will be transported to another location.

Rename ball to mouse and paddle to cat

In Form1.cs, move the cursor to the top of the page. Menu – Edit > Find and Replace > Quick Replace

Find what: ball, Replace with: mouse, Then click on “Find Next” follows by “Replace”

Click on “Replace” until all variable names or comments are replaced.

Do NOT change the namespace:

Repeat the above steps to replace “paddle” by “cat”:

Build and execute to confirm that everything runs as before:

Add Images

Google for suitable images of mouse, cat and dog. Copy these images into the project.

Change the “Copy to Output Directory” property of these images to “Copy Always”:

Add new class level variables:

Modify Form1_Load() to load the images of mouse and cat:

*** You need to use the name of your images instead of “mouse.jpg” and “cat.jpg” ***

Modify timer1_Tick() to draw the images:

Build and execute:

Transport the mouse

Now we shall change the collision processing to transport the mouse to another location. We shall use a simple logic here.

Modify timer1_Tick():

Remove the existing processing for collision between mouse and cat
Add new processing

Build and execute:

What we provided here is a very simple logic and it has a critical loop hole (when the cat catches the mouse very near the centre of the form). We shall leave it to the reader to use a better logic to transport the mouse.

As an exercise, we shall leave it to the reader to add score and time limit. (refer to the Hit the Mouse tutorial)

We shall also leave it to the reader to add two dogs to move (randomly) in the space. Once done, add AI into one of the dog to move towards the cat.

Ball and Big Square Paddle

2011-06-07T07:16:00.001-07:00

This tutorial is built on the previous one: Paddle and Ball

Copy the project into a new project in Windows File Explorer. Steps listed here. Rename the folder, solution and project name to: WinFormsGraphics7PaddleBall2.

In the previous tutorial, the paddle is short and wide, hence we use only one engulfing bounding rectangle to detect collision.

In this tutorial, we will change the paddle to be a square with 4 bounding rectangles at its sides:

Modify the class level variables:

Add paddleSpeedY since now the square paddle is able to move in Y direction. Set the initial default value to zero (stationary)
Rename the original bounding Location, Size and Rect to bounding Top Location, Size and Rect
Add bounding Bottom, Left and Right Location Size and Rect

Modify the Form1_Load():

Rename the original bounding Location, Size and Rect to bounding Top Location, Size and Rect
Add bounding Bottom, Left and Right Location Size and Rect to something like the picture below:

Modify the Form1_KeyDown() and KeyUp():

Add Keys.W and Keys.S processing to change the paddleSpeedY
When Key is up, set the paddleSpeedY to zero

Modify timer1_Tick():

Modify the collision between ball and bounding rect, to check all 4 bounding rects. Different from the earlier flat paddle that does not get reflected, this time, both the ball and the square paddle will reflect each other
Moves all 4 bounding rects
For debugging purpose, draw all 4 bounding rects

Build and execute:

Happy that it works as it should be? We shall move to another tutorial by changing the ball to a mouse and the square paddle to a cat, for a game of cat catches mouse.

Paddle and Ball

2011-06-07T02:27:00.001-07:00

This tutorial is built on the previous tutorial: Bouncing ball.

Copy the project into a new project in Windows File Explorer. Steps listed here. Rename the folder, solution and project name to: WinFormsGraphics7PaddleBall.

Change the default interval for the timer1 to 5 ms:

Draws Paddle and Bounding Rectangle

Modify the class level variables:

Add paddleSpeedX (since paddle only move in horizontal direction, no need Speed in Y direction). Set it to default zero for the start to be stationary
Add paddle Location, Size and Rect
Add bounding rectangle Location, Size and Rect. This bounding rectangle is to be used to check collision around the boundary of the paddle to avoid scenario whereby the speed is too fast and the ball get into the paddle before the collision is detected.

Modify the Form1_Load():

Define the paddle Rect using its Location and Size
Define the bounding Rect using its Location and Size. Notice the calculation of the location and size to based on that of the paddle so that this bounding rect surround the paddle

Modify the timer1_Tick():

Draw the paddle rect and the bounding rect

Build and execute – observe the bounding rect surrounding the paddle

Moves the Paddle and Bounding Rectangle

From the Properties Window, create the Form1_KeyDown()

add the following code:

When user press A: set paddleSpeedX to –2 (move to the left)
When user press D: set paddleSpeedX to 2 (move to the right)

If you want the paddle to stop when you leave the keys, add the Form1_KeyUp():

Set the paddleSpeedX to zero (stop moving)

In the Properties Window, remember to set KeyPreview to True:

Modify the timer_Tick():

Check collision of paddle with left and right walls and change the direction (by multiplying its speed with –1)
Move the paddle by adding its location with the distance travelled (assume time equals to 1, then distance travelled = speed x time, distance travelled = speed)
Move the bounding rect by the same distance.

Build and execute – press the A and D keys to move the paddle:

Checks Collision between ball and paddle

Modify the timer1_Tick():

Using the IntersectWith() method, check the collision between ball and paddle. Since Paddle has very thin height, we assume that the collision is only from the top of the bottom and change the ballSpeedY for the ball and not the ballSpeedX.

Build and execute – test out the collision between the ball and the paddle:

That is all for this tutorial. In the next one, we shall change the paddle to a square shape and made changes from one engulfing bounding rect to 4 small bounding rects on its 4 sides.

VS 2010 starts very slowly and need a reset

2011-06-07T00:17:00.001-07:00

After working on many projects in VS2010, if you notice that it takes a long time to open an existing project, try the following steps to reset the user data:

1. Windows > Start > All Program > Microsoft Visual Studio 2010 > Visual Studio Tools: Select Visual Studio Command Prompt

2. Type “devenv /resetuserdata” and enter

That’s all. Restart the VS2010 to confirm the speed improvement.

Another blog points to VMware addon to VS2010 as the culprit:

http://www.devtopics.com/visual-studio-2010-slowdown-vmdebugger-is-the-culprit/

Hit the Mouse–expand with Arrays

2011-06-02T22:47:00.001-07:00

In the previous tutorial, we managed to get one mouse on the screen. The game will be more fun if we have more mouse on the screen. Of course we could add the more mice by manually adding code at all places for the one mouse we did earlier. But to be more efficient, we will explore the use of Arrays to expand the game.

First copy the project to another project: WinFormsGraphics6HitTheMouseArray. Refer to earlier blog on how to copy project.

Move the various code to the top and make the following changes:

Add a new variable to indicate the number of mouse: int numMouse
Create a Point Array: Point[] pts <= take note of the “s” at the end of the variable name, this is to indicate that this variable consists of a list of items
Create a Rectangle Array: Rectangle[] rects
Create a random num Array: int[] selectedNums

Update the fromHTM_Load():

Define the Points in the Point Array
Determine the number of mouse from the Points in the above array
Create the Rectangle Array
Define the Rectangles in the Rectangle Array
Create the random number Array

Update the frmHTM_Paint():

Loop through the number of mouse, check for each random number: if 0, draw the mouse at the particular location; otherwise, draw the rectangle

Update the timer1_Tick():

Loop through the number of mouse, generate a new random number for each mouse

Update the frmHTM_MouseDown():

Loop through the number of mouse, check if the mouse click is within the rectangle and that the particular mouse is drawn on the screen (random number is zero)

Build and execute – click on the mouse to get score.

Now to add a new mouse, we only need to change one place – by adding a new location for the mouse:

Build and execute:

In this tutorial, we learn how to use a simple prototype with one mouse and change it to use Arrays so as to scale for expansion to many more mice.

Hit the Mouse Game

2011-06-02T19:56:00.001-07:00

This is the all time favourite game in Arcade games centre. Mouse coming out of holes at random timing and you score by hitting on it.

Create a new project: WinFormsGraphics6HitTheMouse. Add a timer to the form and name the form as frmHTM.

Look for a suitable 50x50 mouse graphics, eg mouse.jpg.

Copy and paste into the project:

Change the property of the newly added mouse.jpg to “Copy to Output Directory”:

From the Properties window, add the following methods: frmHTM_Load(), frmHTM_Paint(), timer1_Tick() and frmHTM_MouseDown().

Add the following class level variables:

Add code into frmHTM_Load():

create a new bitmap with the mouse.jpg
set the location where the mouse will appear
start the timer

Add code into frmHTM_Paint():

get the surface to draw on
clear the surface to white
draw the score onto the surface
for selectedNum = 0, draw the mouse; otherwise, draw a blank rectangle

Add code into timer1_Tick():

get a random number from 0 to 4
invalidate to get the form to call the frmHTM_Paint() to redraw itself

Add code into frmHTM_MouseDown():

get the mouse location
check that the mouse is within the rectangle and selectedNum is zero (meaning a mouse is drawn on the screen now at that location) => the mouse has been hit and hence update the score by 1

Build and execute – Hit the mouse to see the score updated.

That is all for now. For the next tutorial, we will improve on this project to use Array and add more mice.

Rectangle swopping

2011-06-02T07:34:00.001-07:00

This blog will show you how to use C# graphics to create two rectangles with different colours. A button upon clicked will swop the two rectangles. For extra, we will learn how to draw a rectangle that move with the mouse and how to detect one rectangle inside another.

Create a new project: WinFormsGraphics5RectRect. Add a button. Name the form: frmRectRect and the button: btnSwop.

Add the frmRectRect_Load(), frmRectRect_Paint() and btnSwop_Click().

Add class level variables:

Add code into frmRectRect_Load():

get the width and height of the form surface
set the location, width and height for the two rectangles
set the two pens

Add code into frmRectRect_Paint():

draw the two rectangles

Add code into btnSwop_Click():

Swop the two rectangles
invalidate to inform the form to call _Paint() method to redraw itself

Build and execute – click on the “Swop” button.

Now for the extra.

Add code into frmRectRect_MouseMove():

detect the location of the mouse
set the location and size of the rectangle to follow the mouse
set the colour of pen1 based on the condition whether rect1 contains mouseRect, if true, set to penBlack, if false, set to penBlue. The long form will be as follow:

set the colour of pen2 based on the condition whether rect2 contains mouseRect, if true, set to penBlack, if false, set to penRed

Also modify the frmRectRect_Paint():

draw the mouse rectangle

Build and execute:

In this tutorial, we learnt how to swop two rectangles, draw a moving rectangle and check when a rectangle is inside another one.

Bouncing ball

2011-06-02T07:05:00.001-07:00

In this blog, we shall go through a simple C# tutorial to create a bouncing ball. For extra, we add the interaction with the Mouse to give the swipe effect.

Create a new project: WinFormsGraphics4ball. Add a timer to the Form:

Using the Properties windows, add the following methods: Form1_Load(), Form1_Paint() and timer1_Tick().

Add the following class level variables:

Add the following codes into the Form1_Load():

w and h: width and height of the form surface
create a bitmap image of the same size as the form surface
set the location, size and rectangle for the ball
draw the ball onto the bitmap surface
start the timer

Add code into Form1_Paint():

draw the bitmap image into the form surface

Add code into the timer1_Tick():

using (… ) { } will let the runtime knows that the object created in the using statement no longer required after the ending “}”
check the location of ball, change its speed at the edges. Since the reference is the top left corner, we need to take care of the right and bottom edge by subtracting the offset
change the location of ball by adding the distance travelled. (distance = speed x time, assuming time is “1”, then distance travelled will be equal to speed)
clear the bitmap image
draw the ball onto the bitmap image
invalidate to inform the form to call the Form1_Paint() to re-draw

Build and execute:

Extra: add interaction with mouse to give the swipe effect. Add the Form1_MouseDown() and Form1_MouseUP().

Add code for Form1_MouseDown():

check that it is the first time when the mouse down is detected
get this location (X and Y) where mouse just click down

Add code for Form1_MouseUp():

get the location when the mouse is released
use the start and end location in a simple formula (by trial and error) to set the speed of the ball

Build and execute – click the mouse, hold as you swipe for a distance and release:

For those more adventurous, you may try out the following code in timer1_Tick(), to give the gravity effect to the ball:

This is a simple ball bouncing exercise. We shall add on in another later blog to 1) add paddle and 2) add blocks to be hit and scored.

Draw to Image before updating form surface

2011-05-31T22:36:00.001-07:00

In the previous blog, we draw directly onto the form surface:

When we resize, the drawing is affected. The way to keep the drawing is to draw to a bitmap image (in the memory) and then draw this bitmap image to the surface. Since the bitmap image contains the drawing and will not be affected by the form resizing:

Create a new WinForms app: WinFormsGraphics3bmp.

Add the Form1_Load and _Paint methods as follows:

The init() method can be re-used later to re-draw the grids after clearing.

Continue this exercise by adding the Form1_MouseDown, _MouseUp, _MouseMove and _KeyDown methods to make it works as per previous blog.

Drawing App using Graphics

2011-05-31T02:27:00.001-07:00

We will made use of what we just learnt on drawing lines, rectangles and filling the shapes with colour. We shall create a drawing application that listen to mouse down, move and up as well as Keys.A, B and C.

Create a new program: WindowsApplicationGraphics2drawing.

Use the Solution Window Events to create the Form1_Load and _Paint method, then add the following code:

Build and execute the partially completed program and you will get the following grids being drawn.

Continue to add the code for Form1_MouseDown, _MouseMove and _MouseUp:

Build and execute – use the mouse to draw on the surface:

Continue to add code for Form1_KeyDown:

(Remember to set the “KeyPreview” property to true)

Build and execute, use Keys A, B and C to change colour.

You will notice some odd behaviours when you minimize or re-size the form. We will solve the problem by drawing on a bitmap and use it to output to the surface.

Exercise using ArrayList

2011-05-24T21:14:00.001-07:00

Use the following for the exercise 15.

Another Collection Class: Dictionary

2011-05-24T20:40:00.001-07:00

When we need to have constant lookup of key to value, Dictionary class is what we need.

For example:

When you look up “mistak”, the value you will get “mistake” and so on.

The syntax is Dictionary<type,type> where type is int, char, string, etc.

How you declare:

or a shorter way using “var”:

A full example is listed below: