Getting Started with 2D Games Using Arcade Library (Part 3): Displaying a Background

Let’s Display a Background

In this chapter, we will display a background image.
The gray screen from the previous chapter will now become a game screen with an image.

1. Prepare a Background Image

Create an images folder inside your working folder.
All image assets will be stored in this folder.

For the background image, please use the following image.
(This time, the setting is Japanese-style!!)

The folder structure should look like this:

# folder structure
working_folder/
 ├ main.py
 └ images/
    └ bg_temple.png  # background image

2. SpriteList and Sprite

A sprite is an object that holds an image and position information.
All characters and backgrounds that appear on the game screen
are created using the arcade.Sprite class.

To manage multiple sprites together, we use arcade.SpriteList.

# main.py (excerpt)
# prepare a background sprite list
self.backgrounds = arcade.SpriteList()

Next, we create a sprite using the arcade.Sprite class.
Pass the path to the image file (the background image we just prepared)
as an argument.

Then, set the x and y coordinates of the generated sprite.

# main.py (excerpt)
# create a background sprite
bkg = arcade.Sprite("images/bg_temple.png")
bkg.center_x = self.w / 2  # horizontal center of the screen
bkg.center_y = self.h / 2  # vertical center of the screen

Finally, add the background sprite to the list.

# main.py (excerpt)
self.backgrounds.append(bkg)  # add to background list

3. Draw the SpriteList

In the on_draw() method of GameView,
draw all sprites added to the list at once.
(This is one of the easy-to-understand features of Arcade.)

# main.py (excerpt)
self.backgrounds.draw()  # draw background list

At this point, the background image will be drawn on the game screen.

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

        # prepare background sprite list
        self.backgrounds = arcade.SpriteList()

        # create a background sprite
        bkg = arcade.Sprite("images/bg_temple.png")
        bkg.center_x = self.w / 2  # horizontal center of the screen
        bkg.center_y = self.h / 2  # vertical center of the screen

        self.backgrounds.append(bkg)  # add to background list

    def on_key_press(self, key, key_modifiers):
        pass

    def on_key_release(self, key, key_modifiers):
        pass

    def on_update(self, delta_time):
        pass

    def on_draw(self):
        self.clear()                 # Clear
        self.backgrounds.draw()      # draw background list

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 Prepare the Player.”
Stay tuned 👍