Pyxel Advent Calendar 2025

Pyxelを学校の授業で使う。- 環境設定の試み -

Last updated at 2025-12-17Posted at 2025-12-16

1.はじめに

学校(高等学校や専門学校)で、pythonのpyxelを授業で使う環境設定をしてみました。

パソコン室や生徒一人一台パソコンに事前インストールでPythonが入っている。
pip install -U pyxelでpyxelをインストールされている。
2D物理エンジン、pymunkをインストール　pip install -U pymunk
エディタはvscodeが利用できる。

という方法であれば問題なく使えます。
以下、いろいろ起こったことをまとめておこうと思います。

2.起こったこと

(1) pyxelをインストールできたけど、OpenGLエラー

pyxelが起動すると、ローカルで使えないエラー。blenderなど使えない。
pyo3_runtime.PanicException: called glCreateShader but it was not loaded.
Love2D起動でもOpenGLドライバー・エラー。

これは、学校に導入した業者さんが、ワード、エクセル、パワポ、アクセスだけ使えれば良い、グラフィックスは必要ない前提でOpenGL外している環境のパソコン室です。

(2) 生徒学生ログイン、シャットダウン後は、新規設定は消える

pip install -U pyxelでインストールしても、次の授業で消えてしまう。学校のパソコン室は環境復元ソフトが導入されているため、フォルダによっては削除されてしまいます。
エディタのthonnyを使えば、thonny-4.1.7-windows-portableだとpython3.10ですが、ログインユーザhomeフォルダに残っているかもしれません。thonny内のToolsから「システムシェルを開く」でpyxelをインストールも可能です。(消えるかどうかは、未検証、ネットワーク上だと起動するのに時間がかかったりします。)

毎回いろいろインストールするのが面倒だし、座っている席が変わると、毎回設定することに時間をとられてしまいます。

3.pythonがなくてもvscodeがあればできる授業設定

(1) Visual Studio Codeはインストールしてあることが大事です。

vscodeがあるのと、拡張ツールLive Serverをインストールする。

(2) 「今日の授業フォルダ」を共有フォルダにコピーして、生徒のHOMEフォルダにコピーしてもらう。

学校の環境によって、共有フォルダが違ったり、Google共有フォルダにしてフォルダを作ったり、やり方はいろいろでしょう。

(3) 生徒学生はvscodeを立ち上げて、「今日の授業フォルダ」を「ファイル→フォルダを開く」で指定する。

(4) htmlファイル内で右クリック「Open With Live Server」を起動し、ブラウザでpyxelを動かす。

4.「今日の授業フォルダ」の中身

pymunkをダウンロードする。pymunk-7.2.0-cp312-cp312-pyodide_2024_0_wasm32.whl

pymunk72_test.htmlを作成。pymunkとnumpyも呼び出せるようにしておく。作成したpyxelのファイルは、一番下に書き込む。

pymunk72_test.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
    
    <!-- numpy読み込み用スクリプトを追加 -->
    <script type="module">
      async function initPyodide() {
        // Pyodideの初期化
        let pyodide = await loadPyodide({
          indexURL: "https://cdn.jsdelivr.net/pyodide/v0.29.0/full/"
        });
        
        // numpyのインポート
        await pyodide.loadPackage("numpy");
        
        console.log("Pyodide and numpy loaded successfully");
      }
      
      // ページ読み込み時に実行
      window.addEventListener('load', initPyodide);
    </script>
  </head>

  <body>
    <pyxel-run root="." name="rect_fall.py" packages="cffi,pymunk-7.2.0-cp312-cp312-pyodide_2024_0_wasm32.whl,numpy"></pyxel-run>
  </body>
</html>

Pyxelファイルのサンプル例。赤い長方形が画面中央上部から地面に落下する。

rect_fall.py

import pyxel
import pymunk
import math

COLOR_RED = 8
COLOR_BLUE = 5

class PhysicsSimulation:
    def __init__(self):
        self.width = 640
        self.height = 480
        pyxel.init(self.width, self.height, title="2D Physics Simulation")
        self.reset()
        pyxel.run(self.update, self.draw)

    def reset(self):
        self.space = pymunk.Space()
        # 重力は下向き（y正方向）
        self.space.gravity = (0, -900)

        # 地面の作成 (青い長方形)
        ground_body = pymunk.Body(body_type=pymunk.Body.STATIC)
        ground_body.position = (self.width / 2, 20)
        ground_shape = pymunk.Poly.create_box(ground_body, (self.width, 40))
        ground_shape.friction = 0.8
        ground_shape.elasticity = 0.8
        self.space.add(ground_body, ground_shape)
        self.ground_shape = ground_shape

        # 落下する赤い長方形
        size = (60, 30)
        mass = 5
        moment = pymunk.moment_for_box(mass, size)
        self.rect_body = pymunk.Body(mass, moment)
        # 画面中央上部から落下させる
        self.rect_body.position = (self.width / 2, 450)
        self.rect_body.velocity = (100, -200)
        # 回転速度を付加（適宜調整可能）
        self.rect_body.angular_velocity = 5

        rect_shape = pymunk.Poly.create_box(self.rect_body, size)
        rect_shape.friction = 0.5
        rect_shape.elasticity = 0.8
        self.space.add(self.rect_body, rect_shape)

    def update(self):
        if pyxel.btnp(pyxel.KEY_R):
            self.reset()

        dt = 1 / 60.0
        self.space.step(dt)

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

        # 地面の描画（青い長方形）
        # bbは左下原点なのでpyxel座標に変換が必要です。
        
        ground_bb = self.ground_shape.bb 
        pyxel.rect(
            int(ground_bb.left),
            int(self.height - ground_bb.top),
            int(ground_bb.right - ground_bb.left),
            int(ground_bb.top - ground_bb.bottom),
            COLOR_BLUE,
        )

        # 赤い長方形の描画（回転を反映し三角形２つで塗りつぶし）

        verts_local=[self.rect_body.local_to_world(v) for v in [(-30,-15),(30,-15),(30,15),(-30,15)]]

        verts_pyxel=[(int(x),int(self.height - y)) for x,y in verts_local]

        v0,v1,v2,v3=verts_pyxel

        pyxel.tri(v0[0],v0[1],v1[0],v1[1],v2[0],v2[1],COLOR_RED)
        pyxel.tri(v2[0],v2[1],v3[0],v3[1],v0[0],v0[1],COLOR_RED)


if __name__=="__main__":
    PhysicsSimulation()

pyxel editorを起動するhtml、リソース名を決めておいて、htmlファイル内で右クリック「Open With Live Server」を起動し、ブラウザで作成します。

edit_image.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
  </head>

  <body>
    <pyxel-edit root="." name="invader_resource.pyxres" editor="image"></pyxel-edit>

  </body>
</html>

フォルダの中身例

生徒学生のフォルダから、右クリックLive Serverを立ち上げて、pyxelを動かすという、一見面倒ですが、htmlの勉強にもなるし、ローカルにwebサーバを立ち上げる、vscodeの使い方もサクサクできるようになると面白いです。
まとめると、生徒学生の作業は、

vscodeを立ち上げ、「今日の授業フォルダ」をフォルダを開くで開きます。
新しいファイルでpyxelのコードを書く、例:rect_fall.pyで保存。
pymunk72_test.htmlに、rect_fall.pyを呼び出せるように書き換え。
pymunk72_test.htmlを保存、右クリック、(Open With Live Server)でLive Serverを立ち上げ、ブラウザでpyxel体験。

面倒ですが、動いたとき、うれしい、楽しいです。

　pyxel editor起動して、map作成は、保存先を間違えてしまうこともあります。ブラウザによっては、ダウンロードに保存されたりするので、生徒学生の保存ができたか確認が必要になるでしょう。
ローカルな環境で、pyxelが使えないという制約があっても、やりかた次第、面白くなってきます。たくさんサンプル体験をしながら、慣れてもらい。ワクワクして、じっくり制作できると良いです。
面倒だけど、可能性感じる環境設定でした。
一歩一歩です。ありがとうございます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up