DEV Community

Kajiru
Kajiru

Posted on

Getting Started with 2D Games Using Arcade Library (Part 4): Preparing the Player

Let’s Prepare the Player

In this chapter, we will display a controllable player on top of the background.

1. Prepare a Sprite Module

As the code grows, writing everything in a single file becomes difficult to manage.
So, we will separate sprite-related logic into another file.

We will create a dedicated module that defines the player sprite.
Create a file named sprite.py as shown below.

The folder structure should look like this:

# folder structure
working_folder/
 ├ main.py
 ├ sprite.py  # sprite module
 └ images/
    └ bg_temple.png
Enter fullscreen mode Exit fullscreen mode

In the sprite module, define two classes that inherit from arcade.Sprite
as shown below:

# sprite.py
import arcade

class BaseSprite(arcade.Sprite):

    def __init__(self, filename, x, y):
        super().__init__(filename)
        # Position
        self.center_x = x
        self.center_y = y

class Player(BaseSprite):

    def __init__(self, filename, x, y):
        super().__init__(filename, x, y)
Enter fullscreen mode Exit fullscreen mode

BaseSprite is a base class used to collect common logic shared by all sprites.
In this chapter, it only handles initializing the position.

Player is the blueprint for the player character, which is the main character of this game.
It inherits from BaseSprite.

2. Prepare the Player Image

Inside the images folder, create a new folder named ninja
and place the following image inside it.
(This time, the main character is a ninja!!)

Image File name
front_01.png

The folder structure should look like this:

# folder structure
working_folder/
 ├ main.py
 ├ sprite.py
 └ images/
    ├ bg_temple.png
    └ ninja/  # folder for ninja images
       └ front_01.png
Enter fullscreen mode Exit fullscreen mode

3. Create the Player Sprite

In the constructor of GameView, create a sprite using the Player class
we prepared earlier.

As before, we use arcade.SpriteList to manage and draw multiple sprites at once.

The arguments of sprite.Player() are:
image path, x coordinate, and y coordinate.

# main.py (excerpt)
# prepare player sprite list
self.players = arcade.SpriteList()

# create a player sprite
self.player = sprite.Player(
    "images/ninja/front_01.png",
    x=self.w / 2,
    y=self.h / 2
)

self.players.append(self.player)  # add to player list
Enter fullscreen mode Exit fullscreen mode

4. Update the Player Sprite

In the on_update() method of GameView,
update all sprites in the player list at once.

At this point, the player does not move yet,
but this is where sprite positions will be updated in the future.

# main.py (excerpt)
self.players.update(delta_time)  # update player list
Enter fullscreen mode Exit fullscreen mode

5. Draw the Player Sprite

In the on_draw() method of GameView,
draw all sprites in the player list at once.
(This is the same approach used for the background sprite.)

# main.py (excerpt)
self.players.draw()  # draw player list
Enter fullscreen mode Exit fullscreen mode

Complete Code

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

# sprite.py (complete code)
import arcade

class BaseSprite(arcade.Sprite):

    def __init__(self, filename, x, y):
        super().__init__(filename)
        # Position
        self.center_x = x
        self.center_y = y

class Player(BaseSprite):

    def __init__(self, filename, x, y):
        super().__init__(filename, x, y)
Enter fullscreen mode Exit fullscreen mode
# main.py (complete code)
import arcade
import sprite

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

        # background sprites
        self.backgrounds = arcade.SpriteList()
        bkg = arcade.Sprite("images/bg_temple.png")
        bkg.center_x = self.w / 2
        bkg.center_y = self.h / 2
        self.backgrounds.append(bkg)

        # prepare player sprite list
        self.players = arcade.SpriteList()

        # create player sprite
        self.player = sprite.Player(
            "images/ninja/front_01.png",
            x=self.w / 2,
            y=self.h / 2
        )

        self.players.append(self.player)  # add to player 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):
        self.players.update(delta_time)  # update player list

    def on_draw(self):
        self.clear()            # Clear
        self.backgrounds.draw()
        self.players.draw()     # draw player 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()
Enter fullscreen mode Exit fullscreen mode

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

Coming Up Next...

Thank you for reading.
The next chapter is titled “Let’s Move the Player.”
Stay tuned 👍

Top comments (0)