tairadate_highschool_programming_lesson_2025

Pyxelでお絵かきしよう

前回まではpythonのプログラミングの話がメインだったけど、今回はゲーム制作に使うキャラクターのデザイン制作の話をしていくよ。自分の作ったキャラクターが実際に動くところを見ると、だんだんモチベも上がって行くので、プログラミングの学習にもつながっていくね。

ゲームエンジンとは

みんなが遊んでるゲームで、起動画面とかで、こういう画面見たことない？
alt text
alt text
実はこれ、「こういう名前のゲーム開発エンジンを使って開発したよ！」ていうマークなんだよね。で、ゲーム開発エンジンって何かってことだけど、簡単に言うと「ゲームに必要な要素が詰まった開発環境」のこと。 例えば、ＦＰＳ（一人称視点シューティング：自分の目線で銃を撃ったりするやつ）のゲームを作ったときに、シューティングの部分だったり、弾の弾道計算なんかはプログラミングでできるけど、ゲーム用のマップを作ったり、マップに生えている草木なんかのオブジェクトをイチから作っていると、時間がいくらあっても足りないよね。 ゲーム開発エンジンには、そういう細かいところの開発を助けてくれて、メインのプログラミングでの開発に集中しやすくしてくれる効果があるよ。 ゲーム開発エンジンにもいろいろあって、バリバリのきれいな３ｄグラフィックを扱うのが得意なエンジンや、スマホゲームを開発するのが得意なエンジンなど、いろいろ。大きなゲーム開発会社だと、独自のゲーム開発エンジンを作っているところもあるくらい。

レトロゲーム。２Ｄゲーム開発エンジン「Pyxel」

そもそもレトロゲームってなんだよ、ていう話だけど、みなさんファミコンとかって聞いたことある？
alt text
ファミリーコンピューターっていって、リッキーが幼稚園くらいにはまだ普通に遊ばれてたゲーム機。遊ばれてたゲームがどんなだったかっていうと こんなのとか
alt text
こんなのとか
alt text
なんか、全体的に四角いｗでも、↑みたいな画像で、ちゃんと車が右奥の方向に進んでるのを表現するのって、すごくない？？ ピクセルという単位があって、絵やグラフィックを表すための四角いマスのことで、このピクセルが小さければ小さいほど、きれいなグラフィックが表現できるんだけど、当時はそのピクセルが現代と比べるととっても大きくて、めちゃくちゃ大きい点を使って、いかにキャラクターなどの絵を表現するかと言うのが、すごく難しかったわけ。


ファミコン時代のマリオ
このマリオがもう現在ときたら、
switchのマリオ
こうなっちゃうんだから、すごいよね！

レトロゲームの魅力

リッキーがゲームをしていた頃は、ゲームのグラフィック面での進化がすごくて、グラフィックがきれいなゲーム = 新しいゲーム = 良いゲーム、みたいなところがあった気がする。実際、ファミコンが出て、スーパーファミコンが出て、プレステが１，２、３と出ていくにつれて、ものすごい勢いでグラフィックの技術が進歩していった。ファイナルファンタジー（通称ＦＦ）っていうＲＰＧがあるんだけど、リッキーが小学生のときこうだったのが（↓FF5）
FFV
中学生の時プレステ２がでて、こうなったのはマジでぶったまげた(FF10)
ffx

でも、nintendoストアとかsteamとかのゲームストアで、よく昔のゲームのリマスター版が販売されてたりするよね。あと、めちゃくちゃ技術が進歩している中で、マイクラやロブロックスみたいなシンプルなグラフィックのゲームが世界中で流行ったり、アンダーテイルなんていうド直球な２Ｄゲームが５００万本売れたりしてる。
アンダーテイル

これってつまり、ゲームの面白さはグラフィックだけじゃないってこと。ゲームシステムだったり、音楽だったり、演出だったり、いろんな要素が関係しているってこと。アイディア次第ですんごいゲームが作れちゃうってこと。実際昔のゲームをあそんでみると、技術的な制限がある中で超天才的なアイディアとセンスで作ってるのが感じられることがあるよ！ぜひやってみてね

Pyxelとは

「かんたんに・楽しく」ゲーム開発ができるように作られた、2Dゲーム開発専用のライブラリがpyxel.シンプルなpythonコードでアイディアをゲームに実装できるようになっている。 コーディング以外でも、ドット絵（レトロゲーム用の絵）を描けるツールが用意されていたり
ドット絵
レトロゲーム風音楽を作成できるツールがあったり
サウンドエディタ
いろいろ便利な機能がついている！

黒い画面を出してみよう

pyxel_traininigディレクトリの中に、pythonファイルを作成するよ。はじめてpyxelを実行するので、first_pyxel.pyとしよう。

touch first_pyxel.py

まずはとにもかくにも、ゲームの画面（枠）を出すコードを、そのまま打ち込んでみよう。

import pyxel

pyxel.init(160, 120, title="pyxel training")
pyxel.show()

実行してみて黒い画面が表示されたらOK!
pyxel黒画面

３行しかないので、それぞれに書かれていることを整理してみよう。

とりあえず画面を表示できたけど、まだ画面内に何かを表示する処理を書いてないので、真っ黒な画面が出ているだけ。

pyxelでお絵かきしよう①　図形を描画してみよう

pyxelには線を引いたり、四角や三角などの図形を描いたりする関数が用意されているから、早速使ってお絵かきしていこう！

と言いたいところだけど、その前にちょっと説明しときたいことがあるからちょっと待って！

前置きが長くなったので、そろそろpyxelでお絵かきしようか！ まず手始めに、直線を描画（びょうが）してみようか！（画面上に出すことを、描画といいます） 画面を表示したあとに線を引いても、その線は反映されないので、線を引く関数はshow()関数の前に書くよ！

import pyxel

pyxel.init(160, 120, title="pyxel training")

# (10, 20)の座標から（80, 20）まで,赤色（8番）の線を引く
pyxel.line(10, 20, 80, 20, 8)

pyxel.show()

実行するとこんな感じ！
alt text

線を引く以外にも、描画をする関数がたくさんあるよ！コードにコメントと一緒に書いておくから、試してみたい関数を書いてみよう。引数をアレンジして、色を変えたり、サイズを変更したりしてみよう。

import pyxel

pyxel.init(160, 120, title="pyxel training")

# 線を引く：（始点のｘ, 始点のｙ, 終点のｘ, 終点のｙ, 色番号 ）
pyxel.line(10, 20, 80, 20, 8)

# 点をうつ：（ｘ, y, 色番号）
pyxel.pset(10, 10, 7)

# 円を描画（中心のｘ, 中心のｙ, 半径, 色番号）
pyxel.circ(20, 50, 10, 11)

# 円の枠（円周）を描画：（中心のｘ, 中心のｙ, 半径, 色番号）
pyxel.circb(50, 50, 10, 11)

# 四角を描画：（左上のｘ, 左上のy, 幅, 高さ, 色番号）
pyxel.rect(10, 80, 20, 10, 13)

# 四角の枠を描画：（左上のｘ, 左上のy, 幅, 高さ, 色番号）
pyxel.rectb(40, 80, 20, 10, 13)

# 三角形を描画：（点１のx, 点１のy, 点２のx, 点２のｙ, 点３のx, 点３のｙ, 色番号）
pyxel.tri(80, 40, 80, 60, 100, 60, 15)

# 三角形の枠を描画：（点１のx, 点１のy, 点２のx, 点２のｙ, 点３のx, 点３のｙ, 色番号）
pyxel.trib(120, 40, 120, 60, 140, 60, 15)

pyxel.show()


図形

ちなみに、英語で line = ライン：線 circle = サークル：円 rectangle = レクタングル：長方形 triangle = トライアングル：三角形 pyxelの関数名はこれらを短縮したもので、枠線の関数にbがついているのは、border(境界線・枠線)のb。

練習①

以下の条件で描画してみよう。必要な計算はすべてpythonで計算する（自分で計算しない）こと。

画面の端から１０ずつ離れたところから、画面の中心に向かって線を引く


</img>

ヒント

変数を活用しよう

練習②

以下の図形を描画してみよう

中心に２０ｘ２０の正方形の枠を書いて、そこから２ピクセルずつ大きい正方形を５つ描く


</img>

ヒント

おんなじことの繰り返し・・・ということは？

pyxelでお絵かきしよう②　キャラデザをしてみよう

四角や三角がプログラムで作成できるのはわかったけど、これだけでマリオみたいなキャラクターを描いたりするのは超大変。でも大丈夫、さっきも言った通り、pyxelにはお絵かきするためのツールが用意されているよ

みんなが知っているような大規模なゲームタイトルは、チームや組織で作ることがほとんど。みんな役割が決まっていて、プログラミングをする人や、キャラデザを考える人、アニメーションをつくる人、音楽をつくる人、販売をする人、広告をつくる人・・・ほんとにいろんな人がゲームに関わって、みんなの元に届いています。

個人でゲームを開発するとなると、基本的にそれらを一人でやらくちゃいけないけど、逆にいうと全部を自分の思い通りにできる！その意味では、ゲーム作りの醍醐味とも言えるよね。

絵のが不得意だったり、音楽なんて作ったことないし、という不安もあると思う。でも大丈夫。Pyxelはそういう人でも絵を書いたり音楽が作れるツールを用意してくれているし、何よりドット絵や１６bitの音しか使えなくて、アイディア次第でいろんな絵や音楽が作れるよ！

pyxel Editorとは

pyxel editorは、pyxelのゲーム制作で必要になる画像や音楽を自分で作れるツール。Pyxelライブラリに標準で搭載されていて、Pyxel上で絵を書いたり、背景を描いたり、音楽や効果音を作ることができるよ！

pyxel editor の使い方

pyxel editorで描いた絵を表示させよう

まずは、pyxelプログラムを書くための雛形を書いちゃおう。コピペOK。

import pyxel


pyxel.init(200, 200)

def update():
    pass

def draw():
    pyxel.cls(0)
    

pyxel.run(update, draw)

このコードに、pyxel editorで描いたものを表示させるコードを追加していくよ。 vscodeのエクスプローラにあるcharacter.pyxresというファイルを、pythonファイルで使えるようにしなくちゃいけない（ロード）

pyxel.load("character.pyxres")

そして、この絵を表示する処理を、draw()関数の中に描いていくんだけど、その時に

関数にデータを渡してあげるには、 引数 っていうやつを使えばいいんだったね。ｘが１０、ｙが１０のところに、キャラクターを表示してみよう。

import pyxel

pyxel.init(200, 200)
# character.pyxresファイルをロード(読み込み)
pyxel.load("character.pyxres")
def update():
    pass

def draw():
    # 画面上の（10, 10）の座標に、イメージバンクの0番目の画像のx＝０，　ｙ＝０の位置から、16x16ピクセルで表示
    pyxel.blt(10, 10, 0, 0, 0, 16, 16)

pyxel.run(update, draw)

できたら実行してみよう

キャラクターを動かしてみよう。

さて、↑のコードとにらめっこしてみよう。

import pyxel

pyxel.init(200, 200)
# character.pyxresファイルをロード(読み込み)
pyxel.load("character.pyxres")
def update():
    pass

def draw():
    # 画面上の（10, 10）の座標に、イメージバンクの0番目の画像のx＝０，　ｙ＝０の位置から、16x16ピクセルで表示
    pyxel.blt(10, 10, 0, 0, 0, 16, 16)

pyxel.run(update, draw)

このコードで、キャラクターのｘ座標＝横位置を決めているのはこの部分。ここの数字を変えることができれば、キャラクターを動かすことができそう。

プログラム実行中にキャラクターのステータスとか位置情報とかを変更するには、 update関数を使うんだったね。 まず、update関数で変更する用の変数を辞書型で用意して、そのデータのなかからx座標の数値をupdate関数で変更するようにしよう。 そして、draw関数でも、update関数の変更を反映させられるように、x軸の引数を１０に固定していたところを、 character_info["x"] としよう。

import pyxel

character_info = {
    "x": 10
}

pyxel.init(200, 200)
# character.pyxresファイルをロード(読み込み)
pyxel.load("character.pyxres")
def update():
    character_info["x"] = character_info["x"] + 1

def draw():
    # 画面上の（10, 10）の座標に、イメージバンクの0番目の画像のx＝０，　ｙ＝０の位置から、16x16ピクセルで表示
    pyxel.blt(10, 10, 0, 0, 0, 16, 16)

pyxel.run(update, draw)

さて、どうなるか。
こいつ。。。動くぞ１！

いろんな方向に動かしてみよう

さっきは右方向に移動するだけだったので、 character_info["x"] を、１増やすだけだったけど、

ジャンプさせてみよう

ジャンプするってことは、どういうことかを考えてみる