2-2. 魔法の絵筆を手に入れろ：Pyxelが用意する「描画関数」と座標系

こんにちは、技術講師のうずらです！

前回の授業では、Pyxelの導入に成功し、黒い画面に「Hello Pyxel!」という最初のメッセージを表示することができました。グラフィック世界へ転生！
これは小さな一歩でしたが、あなたのPCの画面にプログラムが描画されるのを初めて見たとき、きっとワクワクしたのではないでしょうか。

今回は、そのワクワクをさらに膨らませていきましょう。いよいよ「絵」を描くための魔法の絵筆、Pyxelが用意する「描画関数」とその「座標系」について学んでいきます。

1. 3秒でわかるまとめ

Pyxelで画面に図形や文字を描くには、専用の「描画関数」を使い、画面のどこに描くかを「座標（ざひょう）」で指定します。

画面の左上を (0, 0) とした座標系で
「描画関数(X座標, Y座標, ... , 色)」を呼び出す

2. 画面はキャンバス、あなたはアーティスト！

ゲームの世界は、文字だけでなく、キャラクターや背景、アイテムなど、たくさんの「絵」でできています。
まるで魔法使いが絵筆を振るように、Pythonのコードで画面に絵を描いてみましょう。Pyxelには、そんな「魔法の絵筆」として使える「描画関数」がたくさん用意されています。

今回は、最も基本的な図形である四角形や円、そして文字を描く関数とその使い方を学んでいきます。

3. 「どこに描くか」を決める魔法：座標系

絵を描くとき、私たちはキャンバスの「どこに」描くかを意識しますよね。プログラミングの世界でも、Pyxelで何かを描画するときは、必ずその「位置」を指定する必要があります。この位置を示すのが「座標（ざひょう）」です。

ほとんどのコンピュータグラフィックスでは、画面の左上を原点 (0, 0) とします。

• X座標: 左から右に向かって値が増えます。
• Y座標: 上から下に向かって値が増えます。

(0, 0) -------------------> X軸 (右へ増える)
  |
  |
  |
  |
  V
Y軸 (下へ増える)

補足だよ

数学で習う座標系は、原点が中央でY軸が上向きに増えることが多いですが、コンピュータの画面ではY軸が下向きに増えるのが一般的です。これは、テキストの表示が上から始まることに由来するとも言われています。

私たちが使うPyxelの画面は、幅160ピクセル、高さ120ピクセルなので、描画できる範囲は以下のようになります。

• X座標: 0 から 159 まで
• Y座標: 0 から 119 まで

これらの座標を使って、「ここに四角を描いて」「あそこに文字を表示して」と指示を出すのです。

4. 魔法の絵筆：Pyxelの描画関数

Pyxelには、さまざまな図形や文字を描くための関数が用意されています。これらは、まるで色鉛筆や絵の具のように使い分けられます。

今回は、最も基本的な3つの描画関数を見ていきましょう。

• pyxel.rect(x, y, w, h, col): 四角形を描く
• pyxel.circ(x, y, r, col): 円を描く
• pyxel.text(x, y, s, col): 文字を描く

それぞれの引数（カッコの中身）は次の意味を持っています。

• x: 描画開始位置のX座標（circは中心のX座標）
• y: 描画開始位置のY座標（circは中心のY座標）
• w: 幅 (Width)
• h: 高さ (Height)
• r: 半径 (Radius)
• s: 表示する文字列 (String)
• col: 色（0〜15の数字で指定）

豆知識

Pyxelの色は0から15までの16色です。公式サイトのカラーパレットを見ると、どの数字がどの色に対応しているかが分かります。試行錯誤して好きな色を見つけてください。

5. 描画関数を使ってみよう！

それでは、実際に描画関数を使って画面に図形や文字を描いてみましょう。
前回のコードから少し変更を加えて、四角、円、そして新しい文字を表示してみます。

まずは、今回のコード全体を見てみましょう。

import pyxel

# 画面設定
SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120
GAME_TITLE = "Second Step"

# 色の定義（よく使う色）
COL_BLACK = 0
COL_WHITE = 7
COL_RED = 8
COL_CYAN = 12

# --- Pyxelの初期化と音の定義 ---
pyxel.init(SCREEN_WIDTH, SCREEN_HEIGHT, title=GAME_TITLE)

def update():
    pass

def draw():
    pyxel.cls(COL_BLACK)
    # 定数を使って描画
    pyxel.rect(50, 50, 20, 20, COL_CYAN)
    pyxel.circ(100, 50, 10, COL_RED)
    pyxel.text(10, 100, "Drawing Shapes!", COL_WHITE)

pyxel.run(update, draw)

このコードでは、次の描画を行っています。

• pyxel.cls(COL_BLACK): 画面全体を真っ黒（COL_BLACKは0）でクリアします。前回のpyxel.cls(0)と同じですが、COL_BLACKという名前を使うことで、何の色か分かりやすくなります。
• pyxel.rect(50, 50, 20, 20, COL_CYAN):
  • (50, 50): X座標が50、Y座標が50の位置から描画を開始します。
  • 20, 20: 幅が20ピクセル、高さが20ピクセルの四角形です。
  • COL_CYAN: 水色（COL_CYANは12）で描きます。
• pyxel.circ(100, 50, 10, COL_RED):
  • (100, 50): X座標が100、Y座標が50の位置を中心として描画します。
  • 10: 半径が10ピクセルの円です。
  • COL_RED: 赤色（COL_REDは8）で描きます。
• pyxel.text(10, 100, "Drawing Shapes!", COL_WHITE):
  • (10, 100): X座標が10、Y座標が100の位置から文字を描き始めます。
  • "Drawing Shapes!": 表示する文字列です。
  • COL_WHITE: 白色（COL_WHITEは7）で描きます。

コードの変更点と解説

前回のコードと比べて、いくつかの便利な工夫が追加されています。

1. 定数の導入

   • SCREEN_WIDTH = 160
   • SCREEN_HEIGHT = 120
   • GAME_TITLE = "Second Step"
   • COL_BLACK = 0 など

   これらの「定数（ていすう）」と呼ばれるものは、プログラムの中で変わらない値を、分かりやすい名前で定義するものです。こうすることで、例えば画面の幅を変えたいときに、pyxel.init()の中の数字を直接書き換えるのではなく、SCREEN_WIDTHの値を変えるだけで済み、コード全体の見通しが良くなります。

補足だよ

定数名はすべて大文字で書くのがPythonの一般的なルールです。これは「この値はプログラムの途中で変更しないよ」という意思表示になります。

2. draw() 関数の中身

   draw()関数の中が、pyxel.rect(), pyxel.circ(), pyxel.text()といった描画関数の呼び出しで賑やかになりました。
   それぞれの関数の引数に注目し、どの数字が何を表しているのかを意識しながら見ていきましょう。特に、xとyがそれぞれ描画開始位置や中心位置を示していることを理解することが重要です。

   そして、色を指定する部分も、以前は0や7といった数字でしたが、COL_BLACKやCOL_WHITEといった定数を使うことで、より直感的に「これは黒だ」「これは白だ」と理解できるようになりました。

実際に動かしてみよう！

このコードを保存して実行してみてください。画面に水色の四角、赤い円、そして白い文字が表示されるはずです。

python your_file_name.py

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

実際に動かしてみよう！

四角形、円、文字が描画されます

6. まとめ

今回は、Pyxelで画面に絵を描くための魔法の絵筆、「描画関数」とその位置を指定する「座標系」について学びました。

• 画面の左上が (0, 0) で、X座標は右へ、Y座標は下へ増えます。
• pyxel.rect() で四角形、pyxel.circ() で円、pyxel.text() で文字を描くことができます。
• update() 関数はゲームの「動き」の計算、draw() 関数は画面に「描く」ことを担当します。
• 定数を使うことで、コードが読みやすくなり、変更も簡単になります。

これであなたは、プログラムで絵を描く力を手に入れました！ 次回からは、この魔法の絵筆を使って、いよいよゲームの主人公を画面に登場させて動かす準備を始めます。ワクワクしますね！