Press "Enter" to skip to content

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.

UI control positions
TypeNameTextLocation XLocation Y
Labeldon't changeHit Points: 18 20
Labeldon't changeGold: 18 46
Labeldon't changeExperience: 18 74
Labeldon't changeLevel: 18 100
LabellblHitPoints11019
LabellblGold11045
LabellblExperience11073
LabellblLevel11099

 

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

56 Comments

  1. Bill Hice
    Bill Hice August 17, 2021

    I am putting the same numbers for the locations of the buttons and size of the window but it is not layed out correctly. The buttons are overlapping and everything look squeezed together

    • Scott Lilly
      Scott Lilly August 17, 2021

      Hi Bill,

      Can you upload your solution (including the directories under it, and all the files in those directories) to GitHub, Dropbox, or some other file-sharing location so I can look at it?

        • Scott Lilly
          Scott Lilly August 18, 2021

          You’re welcome, Bill.

          It looks like Visual Studio 2022 Preview has a different form scale mode than 2019. Try editing SuperAdventure.Designer.cs. Find “this.AutoScaleMode” and set its value to “System.Windows.Forms.AutoScaleMode.None” (its current value is “System.Windows.Forms.AutoScaleMode.Font”).

          That property sets how a form handles its layout ratios/scaling. When it scaled based on the font, that threw off the layout.

          Let me know if you have difficulty finding that line, or if it doesn’t work.

  2. Carly C.
    Carly C. February 6, 2022

    Hi,
    I wanted to ask, I wasn’t able to put the code on line 22 because, apparently, label2_Click, label1_Click and lblGold_Click exists in the code. Was this supposed to happen or did I create my label’s wrong?

    Thanks!

    • Scott Lilly
      Scott Lilly February 6, 2022

      Hi Carly,

      If you accidentally double-click on the screen when in the form mode (not the code mode), Visual Studio creates the most-common event for the component (label, button, etc.) you double-clicked on.

      You can leave the functions. They don’t have any code, so they won’t do anything. But, that will mean the line numbers in your SuperAdventure.cs file won’t match with the lines numbers in the lessons.

      You can delete the “_Click” functions for the labels from SuperAdventure.cs, but you will also need to delete the related lines in SuperAdventure.Designer.cs. In SuperAdventure.Designer.cs, search for the line with the same name as the function (label1_Click, label2_Click, etc.) and delete them – or comment them out by adding two forward slashes // at the start of those lines.

      There is more about “eventhandlers” in this future lesson: https://www.scottlilly.com/learn-c-by-building-a-simple-rpg-index/lesson-21-3-add-a-button-and-create-its-eventhandler-in-code-without-the-ui-design-screen/

      Please let me know if that was not clear or if there are any problems removing the functions.

    • Scott Lilly
      Scott Lilly June 6, 2022

      Hi Justin,

      In the Solution Explorer (the upper-right section of Visual Studio), can you click the “+” next to SuperAdventure.cs, which should let you see “SuperAdventure.Designer.cs” – then view the designer file. You may have to expand things, but you should see a list of the labels. Check them for “lblGold” and make sure there isn’t a typo.

      If that doesn’t help, can you upload your solution to GitHub, so I can look at it? I have a video here on how to upload to GitHub, from within Visual Studio: https://www.youtube.com/watch?v=F-Azm-JvJmM

      • Breanna Southworth
        Breanna Southworth July 8, 2022

        I was having the same exact issue but closing and reopening the Solution fixed it.

        As I was making the Github Repo for the project, I closed and reopen the Solution to check that the Repo was made correctly when I saw none of my work for this step was saved. After I redid it, suddenly the SuperAdventure.Designer.cs file was updating with the labels whereas before it didn’t.

        • Scott Lilly
          Scott Lilly July 10, 2022

          Hi Breanna,

          What version of Visual Studio (or VS Code, or other editor) are you using? I haven’t personally seen this problem and am wondering how it’s happening (and how to prevent it).

  3. Hung Nguyen
    Hung Nguyen August 11, 2022

    Hi Scott

    I got the exact problem as Breanna and fix it by reopening the Solution and redoing the whole thing again. I’m using Visual Studio 2022 at the moment

    • Scott Lilly
      Scott Lilly August 12, 2022

      Hello Hung

      Thanks for sharing that. Sometimes Visual Studio does act a little strange, and restarting it clears some bad cached/saved memory.

Leave a Reply

Your email address will not be published. Required fields are marked *