RST-02: Images

Learning Outcome

At the end of this lesson, you will be able to:

get a background tile to show up on a PyBadge

Review

how to connect the PyBadge to computer and transfer files to it
- Note: right click on the folder and eject the PyBadge before disconnecting

Lesson

- learn about layers on the PyBadge:
  - there are 2 on the PyBadge, 1 for the background and another for the sprites on top of them
  - each layer also has an ordered layer of images drawn to it
- learn about image banks
  - 16x256 *.bmp file with only 16 colors
  - each PyBadge screen allows for 10 16-bit images lengthwise and 8 16-bit images widthwide
- learn how to save an image bank onto the PyBadge and reference it
- learn how to make a single background tile the entire background
- read "CircuitPython Stage game library" to learn how to do this

CircuitPython Stage game libraryThis tutorial shows how to display a checkered background, moving sprites and some text on the PyBadge's screen — a first step to making a game or an interactive application for it. It uses a library called Stage, which is limited compared to displayio, but fast enough to make a platformer or a space shooter.

To Create your Own Image Assets

Option 1 (easiest):

read "Creating your First Tilemap Game with Circuit Python"
- download the Space Aliens Assets folder below
- unzip it to a folder on your computer
- drag the images individually to your PyBadge
- if you want to modify the image, open the image in Gimp and edit it there

Option 2 by Jack Turcotte (more complicated):

in VS Code, install pillow:
- -m pip install pillow
setup a directory like this in vs code:
- Note: the "tiles" and "strips" folders should both be empty
- Note: "your_image.png" should be 160x128 pixels

Creating Your First Tilemap Game with CircuitPythonThis guide will walk you through the process of building and customizing a tile based adventure / puzzle game. It will cover graphics, level maps, and controls.

After this, you will need to put this code in splitter.py and run it:

from PIL import Image

import os

# Load your full image

image = Image.open("DIRECTORY HERE/wall_image_splitter/your_image.png")

# Check image's size (has to be exactly 160x128)

assert image.width == 160 and image.height == 128, "Image must be 160x128"

# Define tile size stuf

tile_size = 16

tiles_wide = image.width // tile_size # 10

tiles_high = image.height // tile_size # 8

# Create output folder

out_dir = "tiles"

os.makedirs(out_dir, exist_ok=True)

tile_id = 0

for y in range(tiles_high):

for x in range(tiles_wide):

# Crop the tile

tile = image.crop((

x * tile_size,

y * tile_size,

(x + 1) * tile_size,

(y + 1) * tile_size

))

# Save tile as a BMP, and put it in the output directory

tile.save(f"{out_dir}/tile_{tile_id}.bmp")

tile_id += 1

# Process completed

print(f"Sliced {tile_id} tiles into '{out_dir}/'")

After you run the code above and get a successful output, replace it with the following code and then run it again:
- you should then have a file containing the five 16x256 bmp files inside of the strips folder.
- open a template bmp (like background.bmp) found in the resources section of the website
- import the strip files into Gimp and overlay them on top of one of the resource images (like background.bmp)

from PIL import Image

import os

# Define input and output directories

input_dir = "tiles"

output_dir = "strips"

os.makedirs(output_dir, exist_ok=True)

# Define img aspect stuff

tiles_per_strip = 16

tile_size = 16

# Image Orientation

orientation = "vertical"

tiles = sorted(

[f for f in os.listdir(input_dir) if f.endswith(".bmp")],

key=lambda f: int(f.split("_")[1].split(".")[0])

)

num_strips = len(tiles) // tiles_per_strip

# Loop through tiles, putting them in groups

for i in range(num_strips):

if orientation == "vertical":

new_img = Image.new("RGB", (tile_size, tile_size * tiles_per_strip))

else:

new_img = Image.new("RGB", (tile_size * tiles_per_strip, tile_size))

for j in range(tiles_per_strip):

tile_index = i * tiles_per_strip + j

tile_path = os.path.join(input_dir, tiles[tile_index])

tile = Image.open(tile_path)

if orientation == "vertical":

new_img.paste(tile, (0, j * tile_size))

else:

new_img.paste(tile, (j * tile_size, 0))

# Save the new images

new_img.save(os.path.join(output_dir, f"strip_{i}.bmp"))

# Process completed

print(f"Created {num_strips} {orientation} strips in '{output_dir}/'")

Here is the Problem

watch "SpaceAliens-02"
update your code.py file with the following code:

code.py

Daily Assignment

complete the Daily Assignment section in Hãpara Workspace for this day
- if Hãpara is not working, make a copy of this document
- move it to your IMH-ICS folder for this course

Space Aliens Assets

Page updated

Report abuse