Lesson 03.1 – Building the first screen

Lesson objectives

At the end of this lesson, you will know…

• How to add things (buttons, labels, etc.) to the user interface.
• How the user interface connects with the logic in the program.

 

How do the User Interface (UI) talk with the logic?

Now we have a running program, but it doesn’t do anything yet.

Let’s change that.

The first thing we need to do is make the form big enough to hold everything we’re going to show on it.

 

Preparing the form

 

Link to video on YouTube

 

Step 1: Start Visual Studio Express 2013 for Desktop.

 

Step 2: Open the SuperAdventure solution.

 

Step 3: In the Solution Explorer (upper-right corner of Visual Studio), double-click on the SuperAdventure.cs file, to open it.

 

Step 4: Select the whole form by clicking on it in the main editing window of Visual Studio (the center part of the screen). You’ll know it’s selected when you see the dashed line, with little boxes, along its edge. You’ll also see “SuperAdventure” listed in the Properties part of Visual Studio, in the lower-right corner.

Properties are the small pieces of information about the form – its name, size, color, etc. We’re only going to work with a few of those properties in these lessons.

 

Step 5: Scroll through the Properties list to find the “Text” property. Change its value from “Form1” to “My Game”. Notice that the top line of the form has changed to “My Game now.

 

Step 6: Scroll through the properties list to find “Size”, and expand it by clicking on the “+” sign to its left (if it isn’t already expanded). Change the “Width” to 735, and the “Height” to 690. Notice that the size of the form has changed.

 

Adding text (words) to the form

Now that the form is big enough to place everything we need on it, let’s add the first few pieces of information.

If you remember from the earlier lesson, the finished game has the player’s hit points, gold, experience, and level displayed in the upper-left corner of the form. That information is displayed with things called “controls”.

Controls are the things you see on a program’s, or a website’s, screen – text, boxes to enter values, buttons. In Visual Studio, when you’re working with a form, you’ll see a list of controls on the left side. We’re going to use some of the common controls.

The first controls we’re going to add are “labels”. These are used when you want to display a small piece of text.

To add a label to a form, click on “Label”, in the controls list (left-hand side of the screen), and drag it over onto the form. You can put it anywhere, since we are going to manually change its location in its properties.

You’ll need to add eight labels to the screen, and change their properties. You can see how to do this in the video.

Here’s a list of the values you need to change. It’s easiest if you change each one, right after you add it to the form.

Type	Name	Text	Location X	Location Y
Label	don't change	Hit Points:	18	20
Label	don't change	Gold:	18	46
Label	don't change	Experience:	18	74
Label	don't change	Level:	18	100
Label	lblHitPoints		110	19
Label	lblGold		110	45
Label	lblExperience		110	73
Label	lblLevel		110	99

 

NOTE: For the labels that will hold values that never change (for example, “Hit Points:”), leave them with whatever name they had when they were created. They don’t really need a better name, since we are never going to connect to them from the “logic” part of the program.

The labels that we will change need a good name. You’ll see why in a minute.

You probably also noticed that I added “lbl” to the front of each of the labels that I gave a name to. This is so it’s easier for me to find all my labels, when writing code in the logic part of the program (again, you’ll see why in a minute).

 

Add a button, to do something

Let’s see how the program can change the labels we have.

In a future lesson, we’ll fill in the labels with names that start with “lbl” with the values for the player’s hit points, experience, etc. For now, we’ll just do a little test.

Step 1: From the controls list on the left-hand side, drag a “button” onto an empty space on the form.

 

Step 2: Change its “Name” property to “btnTest” (I use the “btn” prefix for all my buttons). Change its text property to “Test”.

 

Step 3: Double-click on the btnTest button.

This will take you to the “logic” code for this form. You’ll see that the cursor is in the middle of something named “btnTest_Click”. We’ll talk about this more later, but for now, you just need to know that this is the logic that will run when the player clicks on the btnTest button.

 

Step 4: On line 22, in the middle of the btnTest_click section, type this line:

lblGold.Text = "123";

If you noticed, when you typed “lbl”, Visual Studio showed you all the labels we created earlier the start with “lbl”. That’s why I name them that way – it’s easy to find them when writing the logic code.

Remember how you cleared out the “Text” property, after creating the label? Now the logic code is going to fill it in. In this case, it’s filling it in with “123”. The semi-colon, at the end of the line you just wrote? That’s there to let the computer know you’re done with the line – kind of like a period/full stop at the end of a sentence.

 

Step 5: Start the program.

Notice that the only things you see on the form are the labels that had a value in the “Text” property.

Now, click the “Test” button. See that the “lblGold”, which was just empty, now shows “123”, the value the logic code said to display when the player clicks the “Test” button.

That’s a quick introduction to how the code we’re going to write is going to connect with the form on the screen. The player will do something to one of the controls on the form (such as clicking a button). Then, the logic code will figure out what happens to the player’s character in the game world, and updates the screen.

 

Summary

The game has a button! And the button does something!

OK, so it’s not all that exciting, but you need some way for the player to interact with the “brains” of the program, and this is the first step.

After we write the logic in the Engine project, we’ll come back to the UI and add the remaining controls, so you can start playing the game.

 

Next Lesson: Lesson 04.1 – Creating the Player class and its properties

Previous lesson:  Lesson 02.2 – Building the solution for the game

All lessons: Learn C# by Building a Simple RPG Index