Pyxel 背景の処理（イメージバンクの利用） - 勉強ボックス管理者ブログ

イメージバンクの画像でスクロールする背景を作る
- リソースファイル（イメージバンク）の内容
- 背景の描画処理
関連記事

イメージバンクの画像でスクロールする背景を作る

　Python向けレトロゲームエンジン「Pyxel（ピクセル）」の公式サンプルで，ゲームの背景の処理をどのように行っているか見てみましょう。

　・Pyxel リソースファイルを使ったジャンプゲーム
　　02_jump_game.py
　　assets/jump_game.pyxres
　【ソースコード】pyxel/02_jump_game.py at main · kitao/pyxel · GitHub
　【デモ】https://kitao.github.io/pyxel/wasm/examples/02_jump_game.html

リソースファイル（イメージバンク）の内容

　jump_game.pyxres のイメージバンク0に，キャラクターと背景用の絵が描かれています。
　

　イメージバンク上の座標
　

　これらを範囲指定で切り出して重ねて表示させる仕組みです。
　

背景の描画処理

　ソースコードで背景をどのように表示しているのか抜き出してみます。

01 空の描画

　空は画面塗りつぶし後に，画面下部に幅いっぱいで表示しています。

import pyxel
pyxel.init(160,120)
pyxel.load("jump_game.pyxres")

def update():
    return

def draw():
    pyxel.cls(12)

    # Draw sky
    pyxel.blt(0, 88, 0, 0, 88, 160, 32)

    return

pyxel.run(update, draw)

実行結果
　

02 山の描画

　山も位置を固定して表示。

    # Draw mountain
    pyxel.blt(0, 88, 0, 0, 64, 160, 24, 12)

03 木のスクロール処理

　背景のスクロール処理のポイントです。横スクロールさせるために，画面と同じ幅の画像を2枚並べて横にスライドさせる（表示する位置を動かす）という方法が使われています。

木の背景画像

blt()命令をx座標を変えて2回実行

    # Draw trees
    offset = pyxel.frame_count % 160
    for i in range(2):
        pyxel.blt(i * 160 - offset, 104, 0, 0, 48, 160, 16, 12)

実行結果
　
　※ offsetの値が pyxel.frame_count によって変わるので，自動的にスクロールします。

04 雲の描画

　雲は表示位置をずらしたリストを用意して，木の例同様に横方向に2回繰り返すつくりでスクロールさせています。

far_cloud = [(-10, 75), (40, 65), (90, 60)]
near_cloud = [(10, 25), (70, 35), (120, 15)]
        
def draw():
　・・・

    # Draw clouds
    offset = (pyxel.frame_count // 16) % 160
    for i in range(2):
        for x, y in far_cloud:
            pyxel.blt(x + i * 160 - offset, y, 0, 64, 32, 32, 8, 12)
    offset = (pyxel.frame_count // 8) % 160
    for i in range(2):
        for x, y in near_cloud:
            pyxel.blt(x + i * 160 - offset, y, 0, 0, 32, 56, 8, 12)