2-1. 黒い画面からグラフィックへ：Pyxelの導入と「翻訳」

Pythonでプログラミングを学んでいると、文字ばかりで「今、何が起きているのか」が分かりづらく感じることがあります。
そんな時は、絵や図形を自由に描ける「Pyxel（ピクセル）」というライブラリを使って、プログラムの動きを目に見える形にしてみましょう！
今回は、その第一歩としての準備を紹介します。

2. 文字の世界から「目に見える」世界へ

これまでの学習では、プログラムの実行結果は主に「文字」として黒い画面に表示されてきました。

文字でのやり取りは基本ですが、複雑な動きを作ろうとすると頭の中だけで考えるのは少し大変です。
「今、変数の中身はどうなっている？」「キャラクターはどこにいる？」といったことを、パッと目で見えるようにできたら、もっと楽しく、分かりやすく理解できるようになります。

コンピュータが絵を表示するときは、画面にある小さな光の点（ピクセル）一つひとつの色を変えることで、図形やキャラクターを描き出しています。
これからは、この「ピクセル」を自在に操っていきましょう。

3. Pyxelを使ってみよう

Pythonで手軽に絵を描いたり動かしたりするために、今回は「Pyxel（ピクセル）」という道具を使います。

Pyxelは、昔のゲーム機のような懐かしいドット絵の世界を、とてもシンプルな命令で作ることができるライブラリです。

これからコードを書いていくと、pyxel.init() や pyxel.cls() のように、頭に pyxel. と付いた言葉がたくさん出てきます。
​これは、「これはPyxelという道具箱の中にある、専用の関数（命令）だよ！」という合図です。
​Pythonという広い世界の中で、「今からPyxelの機能を使うよ！」とPCに教えるための大切なルールなので、セットで覚えておきましょうね。

インストールは、ターミナルで以下の1行を実行するだけで準備完了です。

pip install pyxel

補足だよ

Pyxelは、難しい設定なしですぐに「目に見えるプログラム」が作れるゲームエンジンです。シンプルな分、プログラミングの本質を理解するのにぴったりな道具ですよ。

これで、あなたのPythonプログラムが「画面に絵を描く」という新しい力を手に入れました。

4. はじめてのPyxelプログラム：黒い画面に窓を開く

それでは、Pyxelを使って最初のプログラムを実行し、グラフィックが表示される「窓」を開いてみましょう。

以下のコードは、Pyxelのウィンドウを表示するだけのシンプルなものです。

import pyxel

def update():
    # ゲームの状態を更新する関数
    pass

def draw():
    # 画面に描画する関数
    pyxel.cls(0) # 画面を黒でクリアします

pyxel.init(160, 120, caption="はじめてのPyxel")
pyxel.run(update, draw)

このコードは、Pyxelの基本的な動作の仕組みを示しています。

まず import pyxel でPyxelライブラリを読み込みます。

pyxel.init(160, 120, caption="はじめてのPyxel") は、幅160ピクセル、高さ120ピクセルのゲームウィンドウを作成し、そのタイトルを「はじめてのPyxel」に設定する命令です。

豆知識

pyxel.init() の第3引数 caption で、ウィンドウのタイトルを変更できます。これにより、何のプログラムか一目でわかるようになります。

そして pyxel.run(update, draw) を実行すると、update 関数と draw 関数が繰り返し呼び出され、ゲームが動作し始めます。

update 関数はゲームの状態（キャラクターの位置やスコアなど）を更新し、draw 関数は更新された状態を画面に描画する役割を持っています。

今回はまだ何も描画していませんが、pyxel.cls(0) で画面を色番号0（黒）でクリアしています。

上記のコードを実際にブラウザで動かしてみてください。

実際に動かしてみよう！

何も操作できませんが、Pyxelのウィンドウが表示されることを確認してください。

5. 命令が「目に見える形」に変わる瞬間

pyxel.init(160, 120) という命令は、コンピュータに「縦160、横120の大きさのキャンバスを用意してね」と伝えています。

これまでの print 命令が文字を出すだけだったのに対し、Pyxelの命令は画面上のピクセル（光の点）を直接操作します。
pyxel.run() を動かすことで、コンピュータは1秒間に何回も update と draw を繰り返し、私たちの書いたプログラムの動きをリアルタイムで画面に映し出してくれるようになります。

「何をやっているかが見える」ようになると、プログラミングはぐっと身近で、理解しやすいものに変わります。

今回はPyxelの導入と、黒い画面からグラフィックが表示される仕組みの第一歩を学びました。

次回は、実際に絵を描くための「描画関数」と、画面上の位置を示す「座標系」について詳しく見ていきましょう。

魔法の絵筆描画関数