Pyxel の機能を広く浅く体験する、最初のアニメーション作品
真っ暗な宇宙空間を、星が手前へ流れていきます。画面中央下に自作のドット絵の宇宙船がいて、 矢印キーで上下左右に動かせます。画面上部にはタイトル文字、そして BGM が流れ続けます。
完成までを 8 つのフェーズに分けます。上から順に、少しずつ書き足していきます。 見出しのリンクから、それぞれの解説ページへ直接移動できます。
| フェーズ | やること | 主に使う API・機能 |
|---|---|---|
| 1 | ウィンドウを出して、黒い画面を表示する | pyxel.init / pyxel.run / pyxel.cls |
| 2 | タイトル文字を画面に表示する | pyxel.text、色番号 |
| 3 | 星を並べ、手前に流れるアニメーションにする | pyxel.pset、リスト、random |
| 4 | リソースエディタで宇宙船のドット絵を描く あわせてコードをクラスにまとめ直す | pyxel edit、.pyxres、class |
| 5 | 描いた宇宙船を画面に表示する | pyxel.load / pyxel.blt、透過色 |
| 6 | 矢印キーで宇宙船を動かす（画面外に出ないように制限する） | pyxel.btn、pyxel.KEY_LEFT ほか |
| 7 | リソースエディタで BGM を作り、流し続ける | サウンド／ミュージック編集、pyxel.playm |
| 8 | 作品をパッケージ化し、Web で公開する | pyxel package / pyxel app2html、GitHub Pages |
| 分類 | 項目 | 登場フェーズ |
|---|---|---|
| Pyxel の骨格 | アプリの起動と終了（pyxel.init / pyxel.run） | 1 |
| 毎フレーム呼ばれる 2 つの処理（更新と描画） | 1 | |
| 画面座標系（左上が原点）と 16 色パレット | 1・2 | |
| 描画 | 文字の描画（pyxel.text） | 2 |
図形の描画（pyxel.pset / rect / circ） | 3 | |
| アニメーション | 座標を毎フレーム更新して動かす考え方 | 3 |
| 画面外に出たものを再利用する（ループさせる） | 3 | |
| 素材づくり | リソースエディタの操作（pyxel edit） | 4・7 |
イメージバンクとリソースファイル（.pyxres） | 4・5 | |
スプライトの転送と透明色（pyxel.blt） | 5 | |
| 入力 | キー入力の判定（pyxel.btn / btnp） | 6 |
| サウンド | サウンドとミュージックの作成 | 7 |
BGM の再生とループ（pyxel.playm） | 7 | |
| 公開 | アプリのパッケージ化（pyxel package） | 8 |
HTML 化して Web 公開（pyxel app2html） | 8 |
これまでの「順次・反復・分岐・リスト・モジュール」に加えて、この step では次の 2 つが 新しく登場します。出てきたフェーズで、必要になった理由とセットで解説します。
| 概念 | なぜ必要になるか | 登場フェーズ |
|---|---|---|
| リストの中のリスト （二次元リスト） |
星 1 個ごとに「x 座標・y 座標・速さ」の 3 つをまとめて持たせるため。 | 3 |
| クラス （ class / __init__ / self） |
宇宙船の位置や星の一覧など「ゲームが覚えておくデータ」が増えてくると、関数の外に変数を置く書き方では管理しきれなくなるため。フェーズ 3 まではあえて関数だけで書き、限界を体感してから導入します。 | 4 |
Pyxel の画面は、数学のグラフと違って 左上が原点 (0, 0) です。 x は右へ、y は下へ増えます。「y を増やすと下に動く」ことに慣れるのが最初の関門です。
Pyxel のゲームは 1 秒間に 30 回、同じ処理を繰り返し続けることで動いて見えます。 その 1 回分を 1 フレーム と呼び、フレームごとに次の 2 つが順番に呼ばれます。