3-1. 荒野に降り立つ主人公：自機変数の定義と描画

主人公

召喚！

みなさん、こんにちは！うずらです。

いよいよ今回から、本格的にゲームの「仕組み」を作り上げていきます。前回までで学んだPyxelの描画の魔法を使って、ゲームの主役を画面に呼び出しましょう。

宇宙の荒野に、あなたの生み出す主人公が今、降り立ちます！

1. 3秒でわかるまとめ

今回の目標は、画面中央の下部に、あなたの分身となる「自機（じき）」をシンプルな四角形として描画することです。
そのために、自機の位置やサイズなどの「情報」を変数にまとめ、Pyxelの描画関数で画面に表示します。

2. 黒い画面に光を！ゲーム世界の主役を召喚しよう

前回魔法の絵筆描画関数は、Pyxelが用意している魔法の絵筆を使って、画面にさまざまな図形や文字を描く方法を学びましたね。
四角形、円、線、文字など、いろいろなものを思いのままに描けるようになりました。

いよいよ今回は、その描画の魔法を活かして、ゲームの「主役」を登場させます。そう、あなた自身が操作することになる「自機（じき）」です！

まずはシンプルに、四角形を組み合わせて自機を表現してみましょう。

3. 自機の「情報」を変数にまとめよう

ゲームの世界に登場するキャラクターには、必ず「情報」が必要です。
「どこにいるのか？」「どれくらいの大きさなのか？」「どんな色をしているのか？」といったことです。

これらの情報を管理するために、Pythonの「変数（へんすう）」を大いに活用します。記憶の箱「変数」の正体で変数の基礎は学びましたね。

今回のコードでは、自機の位置とサイズを新しく定義しています。前回のコードと比べて、追加された部分を見ていきましょう。

import pyxel

# =========================================================
#  ASTRO SURVIVOR
#  - 宇宙シューティングゲーム -
# =========================================================

# --- 定数設定 ---
SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120
GAME_TITLE = "ASTRO SURVIVOR"

# キャラクターのサイズ
PLAYER_W = 8    # 自機の幅
PLAYER_H = 8    # 自機の高さ

# 色の定義
COL_BLACK   = 0
COL_NAVY    = 1
COL_PURPLE  = 2
COL_GREEN   = 3
COL_BROWN   = 4
COL_DBLUE   = 5
COL_LBLUE   = 6
COL_WHITE   = 7
COL_RED     = 8
COL_ORANGE  = 9
COL_YELLOW  = 10
COL_L_GREEN = 11
COL_CYAN    = 12
COL_GRAY    = 13
COL_PINK    = 14
COL_PEACH   = 15


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

# --- 変数の初期化 ---
# プレイヤー
player_x = SCREEN_WIDTH // 2 - PLAYER_W // 2
player_y = SCREEN_HEIGHT - 20

いくつか新しい要素が登場しましたね。

新しい定数の登場：キャラクターのサイズと色

まず、PLAYER_W と PLAYER_H という2つの定数が追加されました。
これらは自機の幅（Width）と高さ（Height）を表しています。

また、COL_BLACK だけでなく、COL_NAVY から COL_PEACH までのたくさんの色の定数が増えました。
Pyxelには16色のパレットがあり、それぞれの色に番号が割り当てられています。これらの定数を使うことで、色番号を直接書くよりも、後から見て「この色が何の色か」が分かりやすくなります。

補足だよ

定数名は通常、全て大文字で書くことが一般的です。これはプログラミングの世界で広く使われている慣習であり、「これは途中で値が変わらないものだ」ということを示しています。

自機の位置を計算する変数

そして一番大切なのが、player_x と player_y という変数です。
これらは自機が画面のどこに表示されるかを示す「座標」を保存しています。

注目してほしいのは、その値の決め方です。

player_x = SCREEN_WIDTH // 2 - PLAYER_W // 2
player_y = SCREEN_HEIGHT - 20

player_x：
- SCREEN_WIDTH // 2 で、画面の横幅の中心を計算しています。
- そこから PLAYER_W // 2 を引くことで、「自機の中心が画面の中心に来る」ように調整しています。
- // は「整数除算」というPythonの演算子です。割り算の結果の整数部分だけを取り出してくれます。画面の座標は整数で扱うことが多いので、この演算子が非常に役立ちます。
player_y：
- SCREEN_HEIGHT - 20 としています。これは「画面の高さの端から20ピクセル上の位置」という意味です。
- つまり、自機が画面の下の方に配置されるようになります。

豆知識

整数除算 // は、例えば 5 // 2 は 2 になります。一方、通常の割り算 / だと 5 / 2 は 2.5 となります。ゲームの座標のように「小数はいらない、整数だけでいい」という場面で // はとても便利です。

4. 魔法の絵筆で自機を描き出す！

それでは、いよいよ draw 関数を使って、画面に自機を描画してみましょう。
前回の draw 関数の中身は、今回、新しく定義する自機の描画に置き換えられます。

# 毎フレーム実行される更新処理 (計算などはここで行う。描画は禁止)
def update():
    pass

# 毎フレーム実行される描画処理 (結果を画面に表示する。計算はしない)
def draw():
    pyxel.cls(COL_BLACK) # 画面を真っ黒にクリア

    # プレイヤーの描画
    pyxel.rect(player_x, player_y, PLAYER_W, PLAYER_H, COL_ORANGE) # 自機本体
    pyxel.rect(player_x+3, player_y-2, 2, 2, COL_YELLOW)          # 自機の頭（コックピットのイメージ）

draw 関数の中では、まず pyxel.cls(COL_BLACK) で画面全体を真っ黒に塗りつぶしています。これは「前のフレームで描いた絵を消して、新しい絵を描く準備をする」という意味です。

そして、pyxel.rect 関数を2回使って自機を描いています。

1回目の pyxel.rect では、先ほど定義した player_x, player_y, PLAYER_W, PLAYER_H と、オレンジ色 (COL_ORANGE) を使って、自機の本体となる四角形を描画しています。
2回目の pyxel.rect では、player_x と player_y から少しずらした位置に、黄色 (COL_YELLOW) で小さな四角形を描いています。これは、自機の「頭」や「コックピット」のようなイメージですね。

このように、複数のシンプルな図形を組み合わせることで、より複雑なキャラクターを表現できます。

5. 完成コードと動かしてみよう！

これで、荒野に降り立つあなたの主人公が完成しました！

以下のコード全体をコピーして、実行してみてください。

import pyxel

# =========================================================
#  ASTRO SURVIVOR
#  - 宇宙シューティングゲーム -
# =========================================================

# --- 定数設定 ---
SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120
GAME_TITLE = "ASTRO SURVIVOR"

# キャラクターのサイズ
PLAYER_W = 8
PLAYER_H = 8

# 色の定義
COL_BLACK   = 0
COL_NAVY    = 1
COL_PURPLE  = 2
COL_GREEN   = 3
COL_BROWN   = 4
COL_DBLUE   = 5
COL_LBLUE   = 6
COL_WHITE   = 7
COL_RED     = 8
COL_ORANGE  = 9
COL_YELLOW  = 10
COL_L_GREEN = 11
COL_CYAN    = 12
COL_GRAY    = 13
COL_PINK    = 14
COL_PEACH   = 15


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

# --- 変数の初期化 ---
# プレイヤー
player_x = SCREEN_WIDTH // 2 - PLAYER_W // 2
player_y = SCREEN_HEIGHT - 20


# =========================================================
#  メインループ (Update & Draw)
# =========================================================

# 毎フレーム実行される更新処理 (計算などはここで行う。描画は禁止)
def update():
    pass

# 毎フレーム実行される描画処理 (結果を画面に表示する。計算はしない)
def draw():
    pyxel.cls(COL_BLACK)
    
    # 背景
    # プレイヤー
    pyxel.rect(player_x, player_y, PLAYER_W, PLAYER_H, COL_ORANGE)
    # プレイヤーの頭
    pyxel.rect(player_x+3, player_y-2, 2, 2, COL_YELLOW)


pyxel.run(update, draw)

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

実際に動かしてみよう！

画面中央下部に、あなたの自機が表示されます。まだ動きません。

どうでしょうか？黒い画面の真ん中下あたりに、オレンジと黄色の小さな四角形が現れましたか？
これが、これからあなたと一緒に宇宙を冒険する「自機」です。まだ動きませんが、自分の手でゲームの主人公を画面に表示できたことに、ぜひ感動してください！

次回は、この静止している自機に「動き」を与える方法を学びます。キーボードからの入力を受け取って、自機を左右に動かせるようにしてみましょう！
お楽しみに！もしもの魔法自機移動

最後まで読んでくれてありがとう！🌱
ノートみたいに、いつでも見返してね。