フェーズ 3 星を流す

トップページ ／ step0 概要 ／ フェーズ 3

ゴール

画面いっぱいに星が散らばり、上から下へ流れ続けます。 速い星は明るく、遅い星は暗く描くことで奥行きが生まれます。 画面の下に出た星は上に戻って再利用されるので、星は無限に流れ続けます。

1. 考え方

「動く」とは、座標を毎フレーム少しずつ変えること

アニメーションに特別な仕組みはありません。1 フレームごとに y 座標を少しだけ増やし、 その位置に描き直す。これを 1 秒間に 30 回繰り返すと、人の目には滑らかに動いて見えます。

星 1 個が覚えておくことは 3 つ

星ごとに x 座標・y 座標・落ちる速さ の 3 つが必要です。速さを星ごとに変えることで 奥行きが出ます。これを [x, y, 速さ] という 3 要素のリストで表し、 そのリストを さらにリストに入れて 全部の星をまとめて持ちます。

画面の下に出たら、上に戻して使い回す

星が下に流れ切ったら、その星を捨てて新しく作る必要はありません。 y を 0 に戻し、x をランダムに引き直せばそのまま新しい星として再利用できます。 星の個数は最初の 40 個から一生変わらず、それでも無限に流れ続けます。

2. このフェーズで使う API・機能

3. ステップ A：星を作って、止めたまま表示する

まず動かさずに、星が画面に散らばるところまで作ります。 star_voyager.py を次のように書き換えてください。追加した行に印を付けています。

# star_voyager.py
# step0 フェーズ3：星を流す（ステップA：星を表示する）

import random                    # ← 追加：乱数を使う

import pyxel

SCREEN_WIDTH = 160
SCREEN_HEIGHT = 120

TITLE = "STAR VOYAGER"
GUIDE = "PRESS ESC TO QUIT"

STAR_COUNT = 40                  # ← 追加：星の数
STAR_SPEED_MIN = 0.3             # ← 追加：星の速さの下限（ドット／フレーム）
STAR_SPEED_MAX = 1.8             # ← 追加：星の速さの上限

stars = []                       # ← 追加：星をぜんぶ入れるリスト


def make_stars():                # ← 追加：ここから
    """星を STAR_COUNT 個ぶん作って stars に入れる"""
    for i in range(STAR_COUNT):
        x = random.randint(0, SCREEN_WIDTH - 1)
        y = random.randint(0, SCREEN_HEIGHT - 1)
        speed = random.uniform(STAR_SPEED_MIN, STAR_SPEED_MAX)
        stars.append([x, y, speed])


def star_color(speed):
    """速い星ほど明るい色にして、奥行きを表す"""
    if speed > 1.2:
        return pyxel.COLOR_WHITE
    if speed > 0.7:
        return pyxel.COLOR_GRAY
    return pyxel.COLOR_DARK_BLUE  # ← 追加：ここまで


def text_center(y, s, col):
    """文字列 s を、画面の横中央に来るように描く"""
    x = (SCREEN_WIDTH - len(s) * pyxel.FONT_WIDTH) // 2
    pyxel.text(x, y, s, col)


def update():
    """毎フレームの更新処理。まだ何もしない"""
    pass


def draw():
    """毎フレームの描画処理"""
    pyxel.cls(0)

    for star in stars:                                   # ← 追加：星を描く
        pyxel.pset(star[0], star[1], star_color(star[2]))

    text_center(20, TITLE, pyxel.COLOR_YELLOW)
    text_center(34, GUIDE, pyxel.COLOR_GRAY)


pyxel.init(SCREEN_WIDTH, SCREEN_HEIGHT, title="Star Voyager")
make_stars()                     # ← 追加：星を用意してから
pyxel.run(update, draw)

実行して確認

python step0/star_voyager.py

• 画面いっぱいに点が散らばっている（40 個）
• 点には明るいもの・灰色・暗い青の 3 種類がある
• まだ動かない。文字は今までどおり表示されている
• 閉じてもう一度実行すると、星の配置が変わる（乱数なので毎回違う）

4. ステップ B：星を流す

update だけを次のように書き換えます。他の場所はそのままです。

def update():
    """毎フレームの更新処理。星を下へ動かす"""
    for star in stars:
        star[1] += star[2]                             # y に速さを足す

        if star[1] >= SCREEN_HEIGHT:                   # 画面の下に出たら
            star[0] = random.randint(0, SCREEN_WIDTH - 1)  # x を引き直して
            star[1] = 0                                # いちばん上に戻す

先頭のコメントも ステップB：星を流す に直しておくと分かりやすくなります。

実行して確認

• 星が上から下へ流れ続ける
• 明るい星ほど速く、暗い星ほど遅い（奥行きが感じられる）
• 下に消えた星が上から出てきて、途切れずに流れ続ける
• タイトル文字は星の手前に表示されている

4 つとも確認できたらフェーズ 3 は完了です。

5. コードの解説

リストの中のリスト（二次元リスト）

stars.append([x, y, speed])

[x, y, speed] というリストを 1 つ作って、それを stars に追加しています。 結果として stars は「リストを要素に持つリスト」になります。

for star in stars: の中で書き換えると、元のリストが変わる

for star in stars:
    star[1] += star[2]     # ← これで stars の中身が本当に変わる

star はリストの要素のコピーではなく、同じものを指す別名です。 だから star[1] を書き換えると stars の中身が変わります。

numbers = [1, 2, 3]
for n in numbers:
    n += 10            # numbers は [1, 2, 3] のまま変わらない

関数の中からリストに追加できる理由

stars = []           # 関数の外で作った

def make_stars():
    stars.append(...)  # 関数の中から追加できる（global 宣言は不要）

関数の外にある変数は、関数の中から読むことはできます。 append は「stars という箱の中身をいじる」操作なので、そのまま実行できます。

一方、stars = [] のように入れ直そうとすると別の話になります。 これは「stars という名前を新しいリストに付け替える」操作で、 関数の中で書くと関数の中だけの別の変数になってしまい、外側は変わりません。 その場合は global stars という宣言が必要です。

random.randint と random.uniform の違い

速さを色に変える star_color

def star_color(speed):
    if speed > 1.2:
        return pyxel.COLOR_WHITE
    if speed > 0.7:
        return pyxel.COLOR_GRAY
    return pyxel.COLOR_DARK_BLUE

return はその場で関数を終える命令です。speed が 1.5 なら 最初の if で COLOR_WHITE を返して終わるので、 以降の行は実行されません。だから elif や else を書かなくても 正しく振り分けられます。

これまでの関数（text_center など）は「何かをして終わり」でしたが、 この関数は値を返します。返った値は pyxel.pset(..., star_color(star[2])) のように そのまま別の関数に渡せます。

座標が小数になっても大丈夫

速さが 1.5 のような小数なので、star[1] も 10.5 12.0 …と小数になっていきます。 pyxel.pset は小数を受け取ると小数点以下を切り捨てて描くので、そのままで問題ありません。

むしろ小数のまま持つほうが正確です。もし整数に丸めてから足していくと、 0.3 のような遅い星は毎回 0 に切り捨てられ、永遠に動かなくなります。

make_stars() を呼ぶ位置

pyxel.init(...)
make_stars()          # 星を用意してから
pyxel.run(update, draw)

pyxel.run はそこで止まるので、それより後ろに書いた行は実行されません。 星の準備は必ず run の前に置きます。

6. 試してみよう

確認できたら元に戻しておいてください。

7. うまくいかないときは