2.とりあえず動かそう！Pyxelでゲーム作り＋ちょこっとPython：何かを表示してみよう

2026年6月19日 22:05

この記事は、Scratchを少し触ったことのある中学生や、学校で必修科目だからプログラミングを学ぶ高校生、他の言語は経験したけれどPythonは初めてという人に向けた、PythonとPyxelの入り口の記事です。
Pyxel Code Makerを使うと、パソコンに環境を作らなくても、ブラウザ上でPyxelのプログラムを書いて、そのまま実行できます。今回はこれを使って試してみます。

第2回は、画像表示プログラムの説明です。
リンクをクリック　→　draw-test

とにかくゲームという方は第3回の記事へ

はじめにPythonで使う用語（予約語とかいう）の説明をして、次に画像表示プログラムの説明をします。

ことばを知っていると、AIにも質問しやすくなります。
読み方をつけているのは、音声入力で質問しやすくするためです。
たとえば、range の読み方が「レンジ」だと分かっていれば、「パイソンのレンジについて教えて」と話しかけて質問できます。

プログラムに出てくるPython（パイソン）の予約語・重要な文法

import（インポート）外部のライブラリを使えるようにする命令。ここでは pyxel を使えるようにしている。
class（クラス）プログラムの設計図を作るための書き方。ここでは App というアプリ全体の設計図。
def（デフ）関数・メソッドを定義する。
self（セルフ）クラスの中で「このApp自身」を表す大事な名前。
pass（パス）「ここでは何もしない」という意味。空の処理を書くときに使う。
for（フォー）繰り返し処理。ここでは四角形を5個描くために使っている。
in（イン）「〜の中から順に取り出す」という意味。range(5) の中から数字を取り出す。
if（イフ）条件分岐。「もし〜なら」。
else（エルス）if に当てはまらなかった場合の処理。
range(5) （レンジ）0, 1, 2, 3, 4 という数字を順番に作る。
App() （エーピーピー）（アップ） App クラスから実際に動くアプリを作る。これでプログラムが始まる。
__init __（イニット）クラスから作られた直後に自動で呼ばれる特別なメソッド。初期設定を書くブロック。
update（アップデート）ゲームプログラムで状態を変えたり、調べたりするブロック。
draw（ドロー）ゲームプログラムで画面に文字や画像を描くブロック。

def文、if文、for文の文末の : （コロン）を忘れずに！

このプログラムにはないけど、大事な言葉

True（トゥルー）条件にあてはまる。たとえば爆弾にあたったか調べて、あたったら True。最初の文字は大文字。
False（フォルス）条件にあてはまらない。最初の文字は大文字。
elif（イーリフ、エリフ）条件式の else if の意味。

import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120)
        pyxel.load("my_resource.pyxres")
        pyxel.run(self.update, self.draw)

    def update(self):
        pass
        
    def draw(self):
        pyxel.cls(1)

        pyxel.text(10, 10, "HELLO, PYXEL!", 7)
        pyxel.circ(20, 30, 10, 8)
        pyxel.tri(30, 45, 10, 60, 40, 65, 9)
        for i in range(5):
            if i == 2:
                collor = 10
            else:
                collor = 11
            pyxel.rect(10 + i * 20, 70, 15, 10, collor)
        pyxel.blt(10, 90, 0, 0, 0, 15, 16, 2)
        pyxel.blt(30, 90, 0, 16, 0, 15, 16, 2)
        pyxel.blt(50, 90, 0, 0, 67, 11, 13, 2)
        pyxel.blt(70, 90, 0, 16, 69, 11, 11, 2)

App()

プログラムに出てくるPyxel（ピクセル）の命令一覧

Pyxelの命令については公式ページを参照してください。

先頭にpyxel.と付いている言葉はレトロゲーム用のライブラリpyxelをimportした時だけ使える命令です。

pyxel.init(160, 120)（ピクセル・イニット）Pyxelの画面を作る。横160、縦120ピクセルの画面。この場合、左上が（x座標 0, ｙ座標 0）右下が（x座標 159, y座標 119）になる。
pyxel.load("my_resource.pyxres")（ピクセル・ロード）画像や音などのリソースファイルを読み込む。
pyxel.run(self.update, self.draw)（ピクセル・ラン）ゲームを開始する。update() と draw() をくり返し呼び出す。
pyxel.cls(1)（ピクセル・シーエルエス）画面を指定した色で塗りつぶす。ここでは色番号1（紺色）。
pyxel.text(10, 10, "HELLO, PYXEL!", 7)（ピクセル・テキスト）文字を表示する。座標 (10, 10) に色7（白）で表示。
pyxel.circ(20, 30, 10, 8)（ピクセル・サークル）円を描く。中心 (20, 30)、半径10、色8（赤）。
pyxel.tri(30, 45, 10, 60, 40, 65, 9)（ピクセル・トライアングル）三角形を描く。3つの点の座標と色を指定する。
pyxel.rect(10 + i * 20, 70, 15, 10, collor)（ピクセル・レクト）四角形を描く。左上の座標、幅、高さ、色を指定する。
pyxel.blt(...)（ピセル・ビルト）イメージバンクの画像の一部を画面に貼り付ける。キャラクター表示によく使う。

update() と draw() の役割

Pyxelでは、ゲームが始まると
update（アップデート）と draw（ドロー）がくり返し呼ばれます。

update() は、計算する場所です。
たとえば、キャラクターを動かしたり、キー入力を調べたり、当たり判定をしたりします。
今回のプログラムでは、pass
となっているので、まだ何もしていません。

draw() は、画面に描く場所です。
背景を塗ったり、文字、図形、キャラクター画像などを表示したりします。

リソースエディター

使い方は Pyxel Editor マニュアルを参照してください。

画面右上の「Res」をクリックすると起動します。
saveアイコンを押さなくても変更は保存されます。
画面右上の「Run」をクリックして確認してみてください。

blt の見方

たとえば、次の命令を見てみます。

pyxel.blt(10, 90, 0, 0, 0, 15, 16, 2)

イメージバンク0番の中から、左上 (0, 0) の位置にある横15・縦16の画像を切り取り、画面の (10, 90) に表示するという意味です。

blt の引数の順番は、次のようになります。

pyxel.blt(画面x, 画面y, 画像バンク番号, 画像内x, 画像内y, 幅, 高さ, 透明色)

透明色（とうめいしょく）とは、「この色は表示しない」と指定するための色です。透明色に指定した部分は画面に描かれず、後ろにある背景や画像がそのまま見えます。

注意したいのは、キャラクターの目などに使う色を透明色にしないことです。たとえば黒を透明色にすると、黒い目や線まで消えてしまいます。
そのため、イメージバンクで画像を描くときは、キャラクターにほとんど使わない色を透明色にします。
今回は、あまり使わない紫色の 2 を透明色に指定し、透明にしたい部分をその紫色で塗っています。

このプログラム全体でしていること

このプログラムは、Pyxelの画面を作り、そこに文字・円・三角形・四角形・画像を表示する練習用プログラムです。まだ update() の中には動きを作る処理がないので、キャラクターは動きません。
今はまず、「Pyxelでは、こうやって画面にものを描くんだ」ということを確認するためのプログラムです。
数値を色々変更して、画面右上の「Run」をクリックして実行してみましょう！

Pyxel Code Makerの使い方は、画面上部まんなかあたりの(Manual)をクリックすると表示されます。