Getting Started with 2D Games Using Pyxel (Part 3): Preparing Resource Files

Preparing Resource Files

In this chapter, we will prepare game assets using the Pyxel Editor.

The complete code is shown at the end of this article.

1. Launch the Pyxel Editor

The Pyxel Editor is a tool for managing assets such as images and sounds in one place.
All of these assets are stored together in a file with the .pyxres format.

You can launch the editor with the following command:

(The $ symbol is not part of the command.)

# Launch the Pyxel Editor
$ pyxel edit filename.pyxres

2. Let’s Draw Pixel Art

For detailed usage of the Pyxel Editor, the following resources are very helpful:

• Pyxel Editor Usage Summary
• Making Games with Pyxel – Using the Editor
• Let’s Create Various Things with the Pyxel Editor

For this project, we prepared the following assets:

• Spaceships ×2
• Asteroids ×6
• Boosters ×2

Download the resource file (Click the “Download” button in the top-right corner of the page.)

3. Place the .pyxres File

Place the generated .pyxres file into your working folder.
Your folder structure should look like this:

# Folder structure
working_folder/
 ├ main.py
 └ shooter.pyxres  # Place the pyxres file here

4. Load the .pyxres File

Next, we implement the process to load the placed .pyxres file.
Inside the constructor of the Game class, load the file as shown below.

# main.py (excerpt)

def __init__(self):
    """ Constructor """

    # Start Pyxel
    pyxel.init(W, H, title="Hello, Pyxel!!")
    pyxel.load("shooter.pyxres")  # Load the pyxres file
    pyxel.run(self.update, self.draw)

5. Display Images

Now, let’s extract and display images from the loaded .pyxres file.
In the draw() method of the Game class, we will display only the first spaceship sprite.

The pyxel.blt() method:
“Cuts out part of an image and draws it onto the screen.”

The arguments are as follows:

• X coordinate on the game screen
• Y coordinate on the game screen
• Image bank number
• X coordinate of the top-left corner in the Pyxel Editor
• Y coordinate of the top-left corner in the Pyxel Editor
• Width of the image in the Pyxel Editor
• Height of the image in the Pyxel Editor
• Color to treat as transparent

# main.py (excerpt)

def draw(self):
    """ Drawing logic """
    pyxel.cls(0)

    # Test: spaceship 1
    pyxel.blt(20, 20, 0, 0, 0, 8, 8, 0)  # Spaceship 1
    pyxel.blt(20, 28, 0, 0, 8, 8, 8, 0)  # Booster 1

Spaceship 1 will be displayed at position (20, 20),

and Booster 1 will be displayed at position (20, 28).

Complete Code

Below is the complete code with all features implemented so far.

# main.py

import pyxel
import math
import random

W, H = 160, 120  # Game screen width and height

# Game
class Game:
    def __init__(self):
        """ Constructor """

        # Start Pyxel
        pyxel.init(W, H, title="Hello, Pyxel!!")
        pyxel.load("shooter.pyxres")
        pyxel.run(self.update, self.draw)

    def update(self):
        """ Update logic """
        pass

    def draw(self):
        """ Drawing logic """
        pyxel.cls(0)

        # Test: spaceship 1
        pyxel.blt(20, 20, 0, 0, 0, 8, 8, 0)  # Spaceship 1
        pyxel.blt(20, 28, 0, 0, 8, 8, 8, 0)  # Booster 1

        # Test: spaceship 2
        pyxel.blt(30, 30, 0, 8, 0, 8, 8, 0)  # Spaceship 2
        pyxel.blt(30, 38, 0, 8, 8, 8, 8, 0)  # Booster 2

        # Test: asteroids
        pyxel.blt(40, 40, 0, 16, 0, 8, 8, 0)  # Asteroid 1
        pyxel.blt(50, 50, 0, 24, 0, 8, 8, 0)  # Asteroid 2
        pyxel.blt(60, 60, 0, 32, 0, 8, 8, 0)  # Asteroid 3
        pyxel.blt(70, 70, 0, 40, 0, 8, 8, 0)  # Asteroid 4
        pyxel.blt(80, 80, 0, 48, 0, 8, 8, 0)  # Asteroid 5
        pyxel.blt(90, 90, 0, 56, 0, 8, 8, 0)  # Asteroid 6

def main():
    """ Main entry point """
    Game()

if __name__ == "__main__":
    main()

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

Coming Up Next...

Thank you for reading this chapter.
The next title is “Displaying Text.”

See you next time!!