Step 2 - Add Sprites#

Our next step is to add some sprites, which are graphics we can see and interact with on the screen.

../../_images/title_02.png

Setup vs. Init#

In the next code example, 02_draw_sprites, we’ll have both an __init__ method and a setup.

The __init__ creates the variables. The variables are set to values such as 0 or None. The setup actually creates the object instances, such as graphical sprites.

I often get the very reasonable question, “Why have two methods? Why not just put everything into __init__? Seems like we are doing twice the work.” Here’s why. With a setup method split out, later on we can easily add “restart/play again” functionality to the game. A simple call to setup will reset everything. Later, we can expand our game with different levels, and have functions such as setup_level_1 and setup_level_2.

Sprite Lists#

Sprites are managed in lists. The SpriteList class optimizes drawing, movement, and collision detection.

We are using three logical groups in our game. A player_list for the player. A wall_list for walls we can’t move through.

self.player_list = arcade.SpriteList()
self.wall_list = arcade.SpriteList(use_spatial_hash=True)

Sprite lists have an option to use something called “spatial hashing.” Spatial hashing speeds the time it takes to find collisions, but increases the time it takes to move a sprite. Since I don’t expect most of my walls to move, I’ll turn on spatial hashing for these lists. My player moves around a lot, so I’ll leave it off for her.

Add Sprites to the Game#

To create sprites we’ll use the arcade.Sprite class. We can create an instance of the sprite class with code like this:

self.player_sprite = arcade.Sprite("images/player_1/player_stand.png", CHARACTER_SCALING)

The first parameter is a string or path to the image you want it to load. An optional second parameter will scale the sprite up or down. If the second parameter (in this case a constant CHARACTER_SCALING) is set to 0.5, and the the sprite is 128x128, then both width and height will be scaled down 50% for a 64x64 sprite.

Next, we need to tell where the sprite goes. You can use the attributes center_x and center_y to position the sprite. You can also use top, bottom, left, and right to get or set the sprites location by an edge instead of the center. You can also use position attribute to set both the x and y at the same time.

self.player_sprite.center_x = 64
self.player_sprite.center_y = 120

Finally, all instances of the Sprite class need to go in a SpriteList class.

self.player_list.append(self.player_sprite)

We manage groups of sprites by the list that they are in. In the example below there’s a wall_list that will hold everything that the player character can’t walk through. There’s also a player_list which holds only the player.

Notice that the code creates Sprites three ways:

  • Creating a Sprite class, positioning it, adding it to the list

  • Create a series of sprites in a loop

Source Code#

02_draw_sprites - Draw and Position Sprites#
 1"""
 2Platformer Game
 3
 4python -m arcade.examples.platform_tutorial.02_draw_sprites
 5"""
 6import arcade
 7
 8# Constants
 9SCREEN_WIDTH = 1000
10SCREEN_HEIGHT = 650
11SCREEN_TITLE = "Platformer"
12
13# Constants used to scale our sprites from their original size
14CHARACTER_SCALING = 1
15TILE_SCALING = 0.5
16
17
18class MyGame(arcade.Window):
19    """
20    Main application class.
21    """
22
23    def __init__(self):
24
25        # Call the parent class and set up the window
26        super().__init__(SCREEN_WIDTH, SCREEN_HEIGHT, SCREEN_TITLE)
27
28        # These are 'lists' that keep track of our sprites. Each sprite should
29        # go into a list.
30        self.wall_list = None
31        self.player_list = None
32
33        # Separate variable that holds the player sprite
34        self.player_sprite = None
35
36        arcade.set_background_color(arcade.csscolor.CORNFLOWER_BLUE)
37
38    def setup(self):
39        """Set up the game here. Call this function to restart the game."""
40        # Create the Sprite lists
41        self.player_list = arcade.SpriteList()
42        self.wall_list = arcade.SpriteList(use_spatial_hash=True)
43
44        # Set up the player, specifically placing it at these coordinates.
45        image_source = ":resources:images/animated_characters/female_adventurer/femaleAdventurer_idle.png"
46        self.player_sprite = arcade.Sprite(image_source, CHARACTER_SCALING)
47        self.player_sprite.center_x = 64
48        self.player_sprite.center_y = 128
49        self.player_list.append(self.player_sprite)
50
51        # Create the ground
52        # This shows using a loop to place multiple sprites horizontally
53        for x in range(0, 1250, 64):
54            wall = arcade.Sprite(":resources:images/tiles/grassMid.png", TILE_SCALING)
55            wall.center_x = x
56            wall.center_y = 32
57            self.wall_list.append(wall)
58
59        # Put some crates on the ground
60        # This shows using a coordinate list to place sprites
61        coordinate_list = [[512, 96], [256, 96], [768, 96]]
62
63        for coordinate in coordinate_list:
64            # Add a crate on the ground
65            wall = arcade.Sprite(
66                ":resources:images/tiles/boxCrate_double.png", TILE_SCALING
67            )
68            wall.position = coordinate
69            self.wall_list.append(wall)
70
71    def on_draw(self):
72        """Render the screen."""
73
74        # Clear the screen to the background color
75        self.clear()
76
77        # Draw our sprites
78        self.wall_list.draw()
79        self.player_list.draw()
80
81
82def main():
83    """Main function"""
84    window = MyGame()
85    window.setup()
86    arcade.run()
87
88
89if __name__ == "__main__":
90    main()

Running this code should result in some sprites drawn on the screen, as shown in the image at the top of this page.

Note

Once the code example is up and working, try adjusting the code for the following:

  • Adjust the code and try putting sprites in new positions.

  • Use different images for sprites (see Built-In Resources for the build-in images, or use your own images.)

  • Practice placing individually, via a loop, and by coordinates in a list.