Pyxelを触ってみよう

こんにちは。元TENTO生で現在スタッフをしているSです。

つい先日、ある先生にPyxelって知ってる？もしよかったらブログで書いてみてよ、と言われたのがきっかけで、Pyxelを触り始めました。触り始めると、思った以上に楽しくて、いろんなゲームを作ってみたくなりました。このブログでは、そんなPyxelについて紹介したいと思います。

そもそもPyxel (ピクセル)とは何なのか？

TENTOのプログラミング教材にもざっくりと書かれているのですが、Pyxel(公式サイト) は、Python 向けのレトロゲームを作って動かすためのライブラリです。色は16色、同時発音数4音と非常にシンプルな仕様で、始めやすいのが特徴です。

実際に触ってみよう

Pyxelで遊ぶための準備をしよう

TENTO教材の、Pyxel でレトロゲームを作ろう！(1)：準備しようを参考にして、Pyxelを使うための準備を進めます。ちなみに、私はmacを使っているのですが、Xcodeを入れなくても、Thonyをインストールするだけで使えました。

画面を表示させてみる

TENTO教材のPyxel でレトロゲームを作ろう！(2)：表示しように沿って、画面を表示させます。

まず、Pyxelを触っていて驚いたのが、こんなにも簡単にレトロゲームぽいUIを描くことができるのか！ということです。色がカラーパレット方式で、16色が決まっていて、どの色を組み合わせてもなんとなくいい感じの雰囲気になります。文字も、ドットフォントでとても可愛くて、簡単に「レトロゲームぽい画面」を作ることができました。

キャラクターを表示させる

基本的な画面描画について学んだところで、次はキャラクターを表示させてみます。

キャラクターは最小8×8から書けるので、今回は汎用性の高そうな8×8のキャラクターを2種類作ってみました。私はあまりレトロゲームをやったことがないので、このキャラクターは適当に書いたのですが、適当に書いても「ぽい」のが作れて楽しいです。

ではこれを表示させます。さっき作った枠のある背景に、キャラクターを表示させてみます。2体だけでは少し寂しいので、白いキャラクターを2つ表示させてみました。あら、かわいい。表示させたら次はキャラクターを動かしたくなりました。

キャラクターを動かしてみる

ここからは、教材がないので、自力で進めていきます。

ひとまず、白い方のキャラクターをキーボードの矢印キーで動かせるようにします。白キャラクターのx座標とy座標用に変数を作って、矢印キーが押された時にこの変数が増減するようにします。これで、白いキャラクターが縦横無尽に動くようになりました。

    if btn(KEY_RIGHT): # 右矢印が押されたら
        whiteX += 2
    if btn(KEY_LEFT): # 左矢印が押されたら
        whiteX -= 2
    if btn(KEY_UP): # 上矢印が押されたら
        whiteY -= 2
    if btn(KEY_DOWN): # 下矢印が押されたら
        whiteY += 2

端から飛び出ないようにしよう

しかしこれでは、白いキャラクターが端についた後にフェードアウトしてしまうので、端についたら動かないように制限をかけます。キャラクターの座標が各端から飛び出ていない時のみ、キャラクターの座標を増減させる、というふうに制限をつけました。（今回は、灰色の枠を背景に表示させているので、この枠からはみ出ないように、端の数字の制限をつけました。）

    if btn(KEY_RIGHT) and whiteX < 88: # 右矢印が押されたら
        whiteX += 2
    if btn(KEY_LEFT) and whiteX > 4: # 左矢印が押されたら
        whiteX -= 2
    if btn(KEY_UP) and whiteY > 4: # 上矢印が押されたら
        whiteY -= 2
    if btn(KEY_DOWN) and whiteY < 88: # 下矢印が押されたら
        whiteY += 2

これで、白いキャラクターが画面から逃げることなく、縦横無尽に走り回るようになりました。水色のキャラクターも動かしたいところですが、同じように矢印キーで動かすとキャラクター2体がくっついて動いてしまうので、ひとまず白いキャラクターのみを動かしてみました。

今回の最終的なコードはこちら

from pyxel import *
import random

init(100, 100) # 画面の大きさ
load("my_resource.pyxres") # キャラクターのインポート

whiteX = 10 # 白キャラクターのX座標のための変数
whiteY = 50 # 白キャラクターのY座標のための変数

while True:
    if btn(KEY_RIGHT) and whiteX < 88: # 右矢印が押されたら
        whiteX += 2
    if btn(KEY_LEFT) and whiteX > 4: # 左矢印が押されたら
        whiteX -= 2
    if btn(KEY_UP) and whiteY > 4: # 上矢印が押されたら
        whiteY -= 2
    if btn(KEY_DOWN) and whiteY < 88: # 下矢印が押されたら
        whiteY += 2

    cls(3) # 背景
    rect(2, 2, 96, 96, 13) # 枠のための灰色の四角
    rect(3, 3, 94, 94, 3) #  枠のための緑色の四角 

    blt(whiteX,whiteY, 0, 0, 0, 8, 8, 0)  # 白いキャラクター
    blt(20,50, 1, 0, 0, 8, 8, 0) # 水色のキャラクター
    flip()