Overview



This is an example of effective GDI+ programming in WinForms. The screenshot below shows a fairly extensive Form, but there is actually only a Panel, containing just four controls. All of the rest is GDI+ drawing, directly onto the Panel. The aim of the game is to crack the combination and open the lock. There are five sets of clues to assist you in cracking the lock. When you select the correct combination the lock picture changes showing an open lock. Simple animations are easily achieved with GDI+. Everything, from the rounded rectangle clue boxes to the padlock images is drawn directly to the Panel. DoubleBuffering the Panel makes the animations and the redrawing a seamless operation.
The rounded rectangles are probably the most difficult part of this application. Microsoft doesn't provide a rounded rectangle in the GDI+ toolbox, but it does provide a DrawPath method and a FillPath method. If you map out the shape required with a Drawing2D GraphicsPath, it's possible to draw any irregular shapes you need.
For the more experienced programmer, a simple but effective and still challenging game such as this can be written in a matter of hours. Using OOP Techniques when tackling a program such as this can save a lot of time and the resulting application is easy to maintain or modify/extend in the future.







Painting Code



There's some fairly extensive graphics code required to draw the game. This is the code that draws the padlock, and the top-left clues box with the text below the numbers, and the leftmost white digit box with a black border, and an example of writing a digit in that box...

protected override void  OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);
 
    StringFormat sf = new StringFormat();
    sf.Alignment = StringAlignment.Center;
    sf.LineAlignment = StringAlignment.Center;
 
    e.Graphics.DrawImage((isLocked ? Resources.locked : Resources.unlocked), 293, 30);
 
    // box 1
    GraphicsPath path = MakeRoundedRect(new Rectangle(12, 380, 250, 120), 20, 20);
    e.Graphics.FillPath(SystemBrushes.ControlDark, path);
    e.Graphics.DrawString("One number is correct and well placed", whiteFont, Brushes.White, new Rectangle(22, 440, 230, 50), sf);
 
    path = MakeRoundedRect(new Rectangle(64, 400, 35, 30), 5, 5);
    e.Graphics.FillPath(Brushes.White, path);
    e.Graphics.DrawPath(blackPen, path);
 
    e.Graphics.DrawString(array1[0], blackFont, Brushes.Black, new Rectangle(64, 400, 35, 30), sf);


All of the Panel (canvasPanel) drawing code is encapsulated in the extended Panel Class. There are two Public methods for passing information to the object, which affect the state of the game. These are setArrays that changes the five String arrays that hold the digits used in the clue boxes, and the changeImage method, used to control the locking and unlocking animation. The unlocked image signifies that you've successfully cracked the combination.
The core Game Class has a Public Function createClues, that compiles the random clues given below the padlock. This function returns an array of String arrays, which are passed on to the canvas Class, where they're drawn on the Panel. The main Form acts as a coordinator, requesting data from the Game Class, and passing commands to the canvas Class.



Conclusion 



Writing complex graphical applications in .Net can be challenging, but some research and persistence can make all the difference between creating an interesting and visually appealing program, and spending a long disappointing time trying. 
MSDN, TechNet and a variety of other sites available online these days can save you a lot of time, if you know exactly how to search for the information you need. This knowledge comes with experience. 



Download




Download here


Articles related to game programming



VB.Net - WordSearch
VB.Net - Vertex
VB.Net - Perspective
VB.Net - MasterMind
VB.Net - OOP BlackJack
VB.Net - Numbers Game
VB.Net - HangMan
Console BlackJack - VB.Net | C#
TicTacToe - VB.Net | C#
OOP Sudoku - VB.Net | C#
OctoWords VB.Net | C#
OOP Buttons Guessing Game VB.Net | C#
OOP Tangram Shapes Game VB.Net | C#
VB.Net - Three-card Monte
VB.Net - Pascal's Pyramid
VB.Net - Split Decisions
VB.Net - Random Maze Games
VB.Net - Event Driven Programming - LockWords Game
(Office) WordSearch Creator
VB.Net - Totris


See Also




Play the online javascript version...