1. Welcome Screen¶

To get started, we will create a welcome screen for the game. It's a simple screen, but it introduces the key ideas and processes we'll use in every lesson.

Planning¶

Wireframe¶

Below is a wireframe of the welcome screen.

The wireframe shows three parts of the program we need to work on:

• the game window (blue text):
  • this is the window that displays the game
  • we need to change its size and title
• the WelcomeScreen Room (orange text):
  • this is the area inside the window where the game runs
  • it has a background image and the Title object
• the Title object (green text):
  • shown as a placeholder (a box with an X)
  • it uses an image
  • it responds when the space key is pressed

Class diagram¶

Now we know what the screen will look like, let's think about the classes. Check out Deepest Dungeon if you need a refresher on class diagrams.

The WelcomeScreen class has two attributes:

• a background image
• a Title RoomObject

The Title class has:

• an image attribute
• a key_pressed method

So there are four tasks to create the welcome screen:

1. Adjust the window values
2. Create the WelcomeScreen Room
3. Create the Title RoomObject
4. Add the Title RoomObject to the WelcomeScreen Room

Let's get started.

Adjust the window values¶

The window settings are in Globals.py in the GameFrame folder. Open GameFrame/Globals.py and change the highlighted code below, then save it.

 7
 8
 9
10
11
12
13
14
15
16

    SCREEN_WIDTH = 1280
    SCREEN_HEIGHT = 800

    SCORE = 0

    # - Set the starting number of lives - #
    LIVES = 3

    # - Set the Window display name - #
    window_name = 'Space Rescue'

Create the WelcomeScreen Room¶

Let's check the GameFrame API to see how to create a Room. Rooms are subclasses of GameFrame's Level class.

Create a new file in the Rooms folder, add the code below and save it as WelcomeScreen.py.

1
2
3
4
5
6
7
8

from GameFrame import Level

class WelcomeScreen(Level):
    """
    Initial screen for the game
    """
    def __init__(self, screen, joysticks):
        Level.__init__(self, screen, joysticks)

Testing WelcomeScreen¶

Now that we've made the welcome screen, let's run the game and see what happens. Open MainController.py and click the Run button in the top-right corner.

That didn't go to plan. We should see this error:

1
2
3
4
5

Traceback (most recent call last):
  File "d:\GIT\space_rescue_pygame\MainController.py", line 34, in <module>
    room = class_name(screen, joysticks)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
TypeError: 'module' object is not callable

• line 1 → Python is showing us the path it took to the error, most recent step last.
• lines 2–4 → the error happened on line 34 of MainController.py, where GameFrame tries to create our Room.
• line 5 → the TypeError says GameFrame found a module (the file WelcomeScreen.py) instead of a class it can call.

We'll see this error again, so it's worth remembering. Back in Get to Know GameFrame we learnt that every new Room or Object must be added to __init__.py. This is the error we get when we forget.

Open Rooms/__init__.py, add the code below and save it.

1

from Rooms.WelcomeScreen import WelcomeScreen

We should now have a screen like this:

Not very exciting, but it's the right size and the title bar says Space Rescue, so that's a start.

Adding the background¶

Let's make it less boring with a background image. Checking the GameFrame API, there's a set_background_image method that takes an image file. We want the background to appear as soon as the Room is created, so we'll call it in the __init__ method.

Go back to Rooms/WelcomeScreen.py and add the highlighted code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

from GameFrame import Level

class WelcomeScreen(Level):
    """
    Initial screen for the game
    """
    def __init__(self, screen, joysticks):
        Level.__init__(self, screen, joysticks)

        # set background image
        self.set_background_image("background.png")

Create the Title RoomObject¶

Now that we have a Room, we can create the Title RoomObject to put inside it. Let's check the GameFrame API. It's a similar process to creating a Room:

1. Create a new file in the Objects folder
2. Import the parent class
3. Initialise the class
4. Add the new class to __init__.py

Notice that RoomObject has many more methods than Level. That's because the game logic lives in the objects.

Create a new file in the Objects folder, add the code below and save it as Title.py.

1
2
3
4
5
6
7
8

from GameFrame import RoomObject

class Title(RoomObject):
    """
    The object for displaying the title
    """
    def __init__(self, room, x, y):
        RoomObject.__init__(self, room, x, y)

This is very like the WelcomeScreen class. Next we need to give the object an image. Go back to Objects/Title.py and add the highlighted code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

from GameFrame import RoomObject

class Title(RoomObject):
    """
    The object for displaying the title
    """
    def __init__(self, room, x, y):
        RoomObject.__init__(self, room, x, y)

        # set image
        image = self.load_image("Title.png")
        self.set_image(image,800,350)

Open Objects/__init__.py, add the code below and save it.

1

from Objects.Title import Title

Run MainController.py again. Nothing should change, because we haven't put the Title in the Room yet. We're just checking there are no errors so far.

Add the Title to the WelcomeScreen¶

Now we can put the Title RoomObject into the WelcomeScreen Room. Go back to Rooms/WelcomeScreen.py and add the highlighted code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

from GameFrame import Level
from Objects.Title import Title

class WelcomeScreen(Level):
    """
    Initial screen for the game
    """
    def __init__(self, screen, joysticks):
        Level.__init__(self, screen, joysticks)

        # set background image
        self.set_background_image("background.png")

        # add title object
        self.add_room_object(Title(self, 240, 200))

Our screen should look like this:

Commit and push¶

We've finished and tested a section of code, so let's make a commit. Each commit is a roll-back point: if we break our code later, we can always go back to a version that worked.

1. In GitHub Desktop, type Created WelcomeScreen in the Summary box in the bottom left.
2. Click Commit to main.
3. Click Push origin.

Our work from this lesson is now saved and synced with GitHub.