DEV Community

Kajiru
Kajiru

Posted on

Getting Started with 2D Games Using Arcade Library (Part 11): Switching Between Screens

Switching Between Screens

In this extra chapter, we will look at an example of switching between screens.

We will implement a very common game flow:

Title Screen → Game Screen → Result Screen

1. Organize Files

As development continues, the number of source files increases and management becomes more difficult.

To keep things organized, create a dedicated src folder for source code and split the screens into three modules, one per screen.

File Name Role Location
title.py Title screen src/title.py
game.py Game screen src/game.py
result.py Result screen src/result.py

The folder structure will look like this:

# Folder structure

working_directory/
├ main.py
├ images/
└ src/            # Folder for source code
   ├ title.py
   ├ game.py
   └ result.py
Enter fullscreen mode Exit fullscreen mode

2. Switch Screens

The code for switching screens is the same as in previous examples.

At any timing where a screen transition is needed, simply do the following:

  • Create an arcade.View
  • Pass it to window.show_view()

That’s all it takes to switch screens.

# main.py (example)

view = title.TitleView(window)  # TitleView
window.show_view(view)
Enter fullscreen mode Exit fullscreen mode

Complete Code

Below is the complete working example.
Press the SPACE key to switch screens in this order:

Title Screen → Game Screen → Result Screen

You can copy and run the code as-is.

# main.py (complete code)

import arcade
import src.title as title

def main():
    """ Main process """
    window = arcade.Window(480, 320, "Hello, Arcade!!")
    view = title.TitleView(window)  # TitleView
    window.show_view(view)
    arcade.run()

if __name__ == "__main__":
    main()
Enter fullscreen mode Exit fullscreen mode
# src/title.py (complete code)

import arcade
import src.game as game

# Title screen
class TitleView(arcade.View):

    def __init__(self, window):
        super().__init__()
        self.window = window
        self.background_color = arcade.color.PRUNE

        # Info text
        self.msg_info = arcade.Text(
            "TITLE: SPACE TO NEXT",
            window.width / 2, window.height - 20,
            arcade.color.WHITE, 12,
            anchor_x="center", anchor_y="top"
        )

    def on_key_press(self, key, key_modifiers):
        # SPACE → Game screen
        if key == arcade.key.SPACE:
            view = game.GameView(self.window)  # GameView
            self.window.show_view(view)

    def on_update(self, delta_time):
        pass

    def on_draw(self):
        self.clear()  # Clear
        self.msg_info.draw()
Enter fullscreen mode Exit fullscreen mode
# src/game.py (complete code)

import arcade
import src.result as result

# Game screen
class GameView(arcade.View):

    def __init__(self, window):
        super().__init__()
        self.window = window
        self.background_color = arcade.color.DARK_SPRING_GREEN

        # Info text
        self.msg_info = arcade.Text(
            "GAME: SPACE TO NEXT",
            window.width / 2, window.height - 20,
            arcade.color.WHITE, 12,
            anchor_x="center", anchor_y="top"
        )

    def on_key_press(self, key, key_modifiers):
        # SPACE → Result screen
        if key == arcade.key.SPACE:
            view = result.ResultView(self.window)  # ResultView
            self.window.show_view(view)

    def on_update(self, delta_time):
        pass

    def on_draw(self):
        self.clear()  # Clear
        self.msg_info.draw()
Enter fullscreen mode Exit fullscreen mode
# src/result.py (complete code)

import arcade
import src.title as title

# Result screen
class ResultView(arcade.View):

    def __init__(self, window):
        super().__init__()
        self.window = window
        self.background_color = arcade.color.CERULEAN

        # Info text
        self.msg_info = arcade.Text(
            "RESULT: SPACE TO NEXT",
            window.width / 2, window.height - 20,
            arcade.color.WHITE, 12,
            anchor_x="center", anchor_y="top"
        )

    def on_key_press(self, key, key_modifiers):
        # SPACE → Title screen
        if key == arcade.key.SPACE:
            view = title.TitleView(self.window)  # TitleView
            self.window.show_view(view)

    def on_update(self, delta_time):
        pass

    def on_draw(self):
        self.clear()  # Clear
        self.msg_info.draw()
Enter fullscreen mode Exit fullscreen mode

The result will look like this:

Final Thoughts

Thank you very much for reading.
I hope this series becomes a starting point for your own game development journey. ޱ(ఠ皿ఠ)ว👍

Top comments (0)