[Python] Make a game with Pyxel-Use an editor-

Previous article [Python] The first step to making a game with Pyxel

Introduction

Pyxel has an editor (Pyxel Editor) that allows you to draw pixel art. Here, we will introduce how to use the editor.

Launch the editor

Execute the following command.

pyxeleditor [Pyxel resource file]

The resource file is a file of the format .pyxres. If omitted, a new one will be created.

draw a picture

The editor looks like this. The frame on the right is the entire area (image bank) where you can draw a picture. Three image banks are available. The numbers are 0 to 2 and can be switched in the lower right frame. The frame on the left is an enlarged view of the selected 16x16 area of ​​the entire image bank. In the lower left frame, you can select the color to draw. Therefore, first select the range to draw the picture in the right frame, and actually write in the left frame. For the time being, draw a picture appropriately and save it.

Display the picture

In order to display the picture drawn by the editor on the game screen, it is necessary to load and draw resources. Write the code as follows.

import pyxel

class App:
    def __init__(self):
        pyxel.init(100, 100)

        #Read resource file
        pyxel.load("sample.pyxres")
        
    def run(self):
        pyxel.run(self.update, self.draw)

    def update(self):
        pass

    def draw(self):
        pyxel.cls(0)

        #Image drawing:(x, y, img, u, v, w, h, [colkey])
        # xy:Copy destination coordinates, img:Image bank number
        # uv:Coordinates of copy source, wh:Copy range, colkey:Transparent color
        pyxel.blt(0, 0, 0, 0, 0, 16, 16, 0)

App().run()

import pyxel

class App:
    def __init__(self):
        pyxel.init(100, 100)

        pyxel.load("sample.pyxres")
        
    def run(self):
        pyxel.run(self.update, self.draw)

    def update(self):
        pass

    def draw(self):
        pyxel.cls(0)

        pyxel.blt(0, 0, 0, 0, 0, 16, 16, 0)
        pyxel.blt(32, 48, 0, 16, 0, 16, 16, 0)
        pyxel.blt(64, 16, 0, 32, 16, 16, 16, 0)

App().run()

Draw the background

The background is created using the tile map editor. The background is created by pasting the image created with the image editor. First, the contents of the image bank are displayed in the lower right frame. The picture you drew earlier is displayed. Here, select the range you want to copy. Right now, 8x8 on the upper left is selected. Next, in the upper right frame, the entire area (tile map) where the background can be drawn is displayed. The overall size is 256 x 256. From here, select the area you want to edit. In the left frame, the selected area 16x16 of the tile map is displayed. An image bank area of ​​8x8 fits in one tile map. Eight tile maps are available, and the numbers are 0-7. You can switch at the "TILE MAP" at the bottom left. In the initial state, it is filled with the picture on the upper left of the image bank, so change it appropriately.

Display the background

import pyxel

class App:
    def __init__(self):
        #Change the screen size a little
        pyxel.init(128, 128)

        pyxel.load("sample.pyxres")
        
    def run(self):
        pyxel.run(self.update, self.draw)

    def update(self):
        pass

    def draw(self):
        pyxel.cls(0)

        #Background drawing:(x, y, tm, u, v, w, h, colkey)
        # xy:Coordinates of copy destination, tm:Tile map number
        # uv:Coordinates of copy source, wh:Copy range, col transparent color
        pyxel.bltm(0, 0, 0, 0, 0, 16, 16, 0)

        pyxel.blt(0, 0, 0, 0, 0, 16, 16, 0)
        pyxel.blt(32, 48, 0, 16, 0, 16, 16, 0)
        pyxel.blt(64, 16, 0, 32, 16, 16, 16, 0)

App().run()

Draw the background using bltm. The arguments are similar to blt, but note that for(u, v, w, h), you specify the coordinates in the tilemap editor. The number of dots is 128 x 128, but the area of ​​the tile map is 16 x 16. I was able to display the background. But it feels a little uncomfortable.

reference

https://github.com/kitao/pyxel/blob/master/README.ja.md Making a Pac-Man-like game with Pyxel Part 1 Making a Sokoban game with Pyxel (Part 1)