Getting Started with 2D Games Using Arcade Library (Part 2): Creating the Game Screen

Let’s Create the Game Screen

In this chapter, we will create a game screen.
We’ll start by displaying a game screen filled with a single solid color.

1. Prepare a Working Folder

First, prepare a working folder and create a main.py file.
For details on how to create files, please refer to

Saving a Program to a File.

The folder structure should look like this:

# folder structure
working_folder/
 └ main.py  # file where we write the program

From here on, we will write all code in the main.py file.

2. Prepare GameView

The GameView class represents the game screen itself.
It manages all processes required for a game, such as
keyboard input, mouse input, update logic, and drawing.

Each method is responsible for the following:

Method Name	Role	Description
__init__	Initialization	Initialize score, characters, etc.
on_key_press	Key pressed	Move the player
on_key_release	Key released	Stop the player
on_mouse_press	Mouse pressed	Not used this time
on_mouse_release	Mouse released	Not used this time
on_mouse_motion	Mouse moved	Not used this time
on_update	Update process	Update character positions, etc.
on_draw	Drawing process	Draw characters, etc.

# main.py (excerpt)
import arcade
import math
import random

class GameView(arcade.View):

    def __init__(self):
        """ initialization """
        super().__init__()
        # background color
        self.background_color = arcade.color.PAYNE_GREY

    def on_key_press(self, key, key_modifiers):
        """ when a key is pressed """
        pass

    def on_key_release(self, key, key_modifiers):
        """ when a key is released """
        pass

    def on_mouse_press(self, x, y, button, key_modifiers):
        """ when the mouse is pressed """
        pass

    def on_mouse_release(self, x, y, button, key_modifiers):
        """ when the mouse is released """
        pass

    def on_mouse_motion(self, x, y, delta_x, delta_y):
        """ when the mouse is moved """
        pass

    def on_update(self, delta_time):
        """ update processing """
        pass

    def on_draw(self):
        """ drawing processing """
        self.clear()  # Clear the screen

In the constructor __init__,
we specify the background color of the game screen.

# main.py (excerpt)
# background color
self.background_color = arcade.color.PAYNE_GREY

You can also specify colors using RGB values,
but you can directly choose colors from

arcade.color.

The on_update() method handles update processing
(which runs many times per second).
The argument delta_time contains the time interval (in seconds)
between frames.

The on_draw() method handles drawing the screen.
At this stage, it simply clears the entire screen
and fills it with the background color.

# main.py (excerpt)
self.clear()  # Clear

3. Create the Game Window

Next, we prepare the game screen in the main() function.

Here is the actual code:

# main.py (excerpt)
def main():
    """ main process """
    window = arcade.Window(480, 320, "Hello, Arcade!!")
    game = GameView(window)
    window.show_view(game)
    arcade.run()

First, we create the game window using the arcade.Window() function.
The arguments specify the screen width and height.

Next, we pass the GameView instance to window.show_view(),
and finally start the game loop with arcade.run().

Complete Code

Below is the complete code implementing everything so far.
You can copy and run it as-is.

# main.py (complete code)
import arcade
import math
import random

class GameView(arcade.View):

    def __init__(self, window):
        super().__init__()
        self.window = window
        self.w = self.window.width   # game screen width
        self.h = self.window.height  # game screen height

        # background color
        self.background_color = arcade.color.PAYNE_GREY

    def on_key_press(self, key, key_modifiers):
        """ when a key is pressed """
        pass

    def on_key_release(self, key, key_modifiers):
        """ when a key is released """
        pass

    def on_update(self, delta_time):
        """ update processing """
        pass

    def on_draw(self):
        """ drawing processing """
        self.clear()  # Clear

def main():
    """ main process """
    window = arcade.Window(480, 320, "Hello, Arcade!!")
    game = GameView(window)
    window.show_view(game)
    arcade.run()

if __name__ == "__main__":
    main()

When you run it, the result will look like this:

Coming Up Next...

Thank you for reading.
The next chapter is titled “Let’s Display a Background.”
Stay tuned 👍