ゲーム開発

【Pyxel】Pythonでレトロゲームを作ろう! Day 1 -画像の扱い方-

Pyxelでレトロゲームを作る

こんにちは!

くるる
くるる
人気フクロウの”くるる”@kururu_owl だよー
はやぶさ
はやぶさ
現役エンジニアの”はやぶさ”@Cpp_Learningです

前回こんな記事を書きました↓

python(pygame)でゲームを作る
【Python】ゲームソフト開発を題材にしたオブジェクト指向入門ゲームソフト作成を題材にした「オブジェクト指向」の入門記事を書きました。オブジェクト図/クラス図の書き方や考え方のポイントも説明した実践的な内容になっています!ソフトウェア設計やソフトウェア開発を学びたい人にオススメの記事です!...

この記事ではアクションゲームのソースコードを公開してるけど…

あくまでオブジェクト指向(ソフトウェア設計)の説明記事なので、実装に関する説明は割愛しちゃってます。。

くるる
くるる
またゲーム作りたーい
くるる
くるる
今度はソースコード書き方を勉強したーい

というフクロウが目の前にいるので…

『Pythonでレトロゲームを作ろう!』シリーズを書こうと思います。

はやぶさ
はやぶさ
約一週間で簡単なゲームを作れるチュートリアルになる予定です!
くるる
くるる
今回は記念すべき”Day1”だね!楽しみ♪

Pyxelとは

今回はPyxel (ピクセル) を使ってゲームを作っていきます!

くるる
くるる
Pyxel?なにそれ美味しいの?

Pyxel (ピクセル) はPython向けのレトロゲームエンジンです。

くるる
くるる
前回Pygameを使ったのに、今回pyxelに変えちゃうのは何故?
はやぶさ
はやぶさ
それはpyxelが魅力的だからだよ

pyxelの魅力については以下の記事で紹介しているので本記事では割愛します!

Pyxelインストール

PyxelはPythonが使える環境であれば、pipで簡単にインストールできます。

Pyxelインストール方法や簡単な使い方までpyxel|GitHubに説明があります!

くるる
くるる
日本語ドキュメントがある!親切~!!
スポンサーリンク

【Day 1】Pyxelでレトロゲームを作ろう!

うーん。。

くるる
くるる
pyxel|GitHubにAPIリファレンスもあって本当に親切なんだけど…やっぱり初心者には難しいよぉ
はやぶさ
はやぶさ
大丈夫!そのための本記事”Day1”だよ!一緒に勉強しようねー
くるる
くるる
はい!はやぶさ先生!!

ビシッと敬礼してる”くるる”ちゃんが今日も可愛い(*・ω・)ノ♪

くるる
くるる
ところで今日は何をするの?
はやぶさ
はやぶさ
画像の扱い方を勉強するよー

ゲーム開発なのに…画像???

【Pyxel】画像の扱い方

本題はゲーム開発なんだけど、画像処理の基礎知識が必要だからね!

くるる
くるる
画像処理の基礎なら以下の記事で勉強したよー
ソーベルフィルタ
【深層学習入門】画像処理の基礎(画素操作)からCNN設計まで画像処理の基礎(画素操作)から深層学習のCNN設計までカバーした記事です。画像処理にはOpenCVとPythonを使用しました。画像処理入門、深層学習入門、どちらも取り組みたい人におすすめの記事です。...
はやぶさ
はやぶさ
上記の記事の第1部が画像処理の基礎(画素操作)の説明だったね

(本記事の理解が深まるので、まだ読んでない人は読んでほしいなぁー)

くるる
くるる
『画像は、画素(pixel)の集合体!』でしょ?覚えてるよー
はやぶさ
はやぶさ
うんうん。それが分かってると説明しやすい!

画像は、画素(pixel)の集合体!

画素と座標

画素(pixel)の位置は座標で表現され、基本的には画像の左上が原点になります。

画素と座標

ちなみに↑の画像は(x, y)=(120, 160)が右下の点になります。

つまり、画像の幅(Window_width)が160pixel・画像の高さ(Window_hight)が120pixelあります。

画素と座標
くるる
くるる
つまり、この画像は画素(pixel)120×160=19,200の集合体だね

その通り!Pyxelで生成したゲーム画像も原点は左上だよ!

また、Pyxelでは画像の幅(Window_width)と画像の高さ(Window_hight)を0~255の範囲で自由に設定できます!

くるる
くるる
ほーほー!ゲーム開発でも画像処理の知識が役に立つね♪
はやぶさ
はやぶさ
私のプロフィールにも書いてるけど、修得した知識やスキルは必ずどこかで活かせるよー
くるる
くるる
何でも貪欲に勉強したくなっちゃうねー

”くるる”ちゃんのモチベーションが高くて嬉しい!笑

画像の場合、基本的に左上が原点!

Pyxelと色

次は色の話をするよー

画素と座標
はやぶさ
はやぶさ
各画素がRGB成分を持っているよね?
くるる
くるる
うん!この画像だと背景が黒だから(R,G,B)=(0,0,0)が多いね

大正解!!”くるる”ちゃん賢いな~

はやぶさ
はやぶさ
じゃあ色の組み合わせがいくつあるか分かるかな?
くるる
くるる
RGBの各成分を0~255(8bit)で表現するから、色の組み合わせは256×256×256通り!ドヤァ

”くるる”ちゃん…テストだったら満点でした…!

Pyxelのカラーパレット

実はPyxelでは↑の16色しか扱えません

くるる
くるる
なんと!それで本当にゲームなんて作れるの?(´・ω・)

私も最初は戸惑ったけど…

画素と座標

↑の”猫”や”Pyxelのロゴ”が色鮮やかで素敵だと思わない?

16色あれば、意外と色んな”絵”が表現できます!

また、0~15の数字で色を設定できるので、簡単にプログラミングできます!!

くるる
くるる
じゃあ黄色は(R,G,B)=(255,236,39)じゃなくて、”10”と設定すれば良いんだね!楽々~

PyxelはシンプルなAPIとモダンな設計を組み合わせることで、Pythonの手軽さや生産性を損なわずに誰でも楽しくゲーム開発できる

引用元:レトロゲームエンジン Pyxel でプログラミングを始めよう!|kitao’s blog

↑その通りって感じだね(*・ω・)ノ♪

Pyxelで扱える色は16色!

Pyxelとカラーキー

色の話がもう少しだけ続きます。

Pyxelとカラーキー

↑の左右画像で違う箇所があるけど分かるかな?

くるる
くるる
猫の背景が”透明”になってる!

正解!Pyxelで生成した画面に、背景グレーの猫画像を”そのまま”挿入すると左画像になります。

一方、カラーキー(colkey)を指定して猫画像のグレーを”透明”にしたのが右画像です。

くるる
くるる
カラーキー(colkey)??

Pyxelでいうカラーキーは、さっき説明した以下の16色のことのようです。

Pyxelのカラーパレット

なので、グレーを”透明”にするには…

くるる
くるる
カラーキー(colkey)に”5”を指定すれば良い!!

正解!!

くるる
くるる
Pyxelを使えば簡単に背景を透明にできるね!シンプル!!

Pyxelでカラーキー(colkey)を指定すれば、挿入画像の指定色を”透明”にできる。

Pyxelと画像の挿入

うーん。。

くるる
くるる
猫も画像ってことは、画素があるし座標もあるってこと?
はやぶさ
はやぶさ
良い質問だね!その通りだよ!!
画素と座標

ゲーム画像と同じように、猫画像も左上に原点があります。

ただし、x座標・y座標と区別するためにu座標・v座標で表現します。

また、この猫画像は16×16 pixelだよ!もちろん色は16色です(*・ω・)ノ♪

くるる
くるる
自分の好きなキャラの画像を挿入してゲームが作れちゃうね!
はやぶさ
はやぶさ
実は画像に画像を重ねるソースコードなら作ったことあるよ
ゲーム画面1
【OpenCV】動物大好きエンジニアが”主人公レンズ”を作るこんにちわ。動物大好きエンジニアの”はやぶさ”@Cpp_Learningです。 今日は、このサイトにアフリカオオコノハズクの”くる...

!!!ビックリして羽毛が逆立つ”くるる”ちゃんも可愛い

くるる
くるる
伏線回収キタ━━!!
くるる
くるる
昔やった知識が今まさに活かせそう!!深イイ~

【画像の基礎】

  • 画像は画素(pixel)の集合体
  • 画素(pixel)の位置は座標で表現する
  • 座標の原点は、基本的に画像の左上
  • 画素はRGB成分を持っている(Pyxelの場合は16色)
  • 複数の画像を重ねる場合でも各画像が↑の性質をもつ

【実践】Pyxelで画像を扱う

【画像の基礎】の説明はここまでにして、Pyxelで実際に画像を扱ってみましょう!

くるる
くるる
知識をInputしたら直ぐにOutputしたくなっちゃう!ワクワク

pyxel|GitHubexamples/01_hello_pyxel.pyをベースに猫画像を挿入(描画)するソースコードに改造したものが以下です。

このコードを実行すると、今までの説明で登場したゲーム画像が表示されます。

実践!Pyxelで画像挿入
くるる
くるる
コード短っ!
くるる
くるる
しかも前半で勉強したおかげか、何となくコード読めるよー!!

…と”くるる”ちゃんは言っていますが、簡単にソースコードの説明しますね。

ソースコードの説明

このソースコードでは”Pyxel”しか使わないので、importするのは”Pyxel”のみです。

画像サイズなど動的に変更しない設定値はC言語の#defineのように先に定義しておくと書き換えが楽です。

Appクラスの__init__で初期設定を行います。

具体的には、ゲーム画面のサイズ/Windowの名前(”Hello Pyxel”)/ロードする画像のパス(“assets/cat_16x16.png”)などを定義します。

なお、画像は0~2しか挿入できませんpyxel.image(3)と書くとエラーが出ます)

run関数の引数には「フレーム更新処理を行うupdate関数」「描画処理を行うdraw関数」を指定します。

update関数については、次の機会に説明するので、ここでは猫やロゴを描画するdraw関数についてのみ説明します。

…といっても既に基礎知識については説明済みなのでAPIリファレンスの通りです。

・blt(x, y, img, u, v, w, h, [colkey])
イメージバンクimg(0-2) の (u, v) からサイズ (w, h) の領域を (x, y) にコピーする。w、hそれぞれに負の値を設定すると水平、垂直方向に反転する。colkeyに色を指定すると透明色として扱われる

引用元:pyxel|GitHub

blt関数で画像挿入(描画)を行っています。

ゲーム画像の座標(x,y)にimg=0~2の指定した画像を挿入します。

img=1はpyxel.image(1)とリンクしています…つまり、img=1は猫画像(”assets/cat_16x16.png”)のことです。

u,vは”挿入画像”の原点、で基本的には猫画像の原点と揃えて(u,v)=(0,0)を設定します。

勉強なので、試しに(u,v)=(8,0)にコードを変更してみて下さい。原点の位置が猫画像の左上から中央に移動するため、猫画像の右半分しか描画されないよ!

くるる
くるる
コード触りながら勉強するの楽しい♪

w, hは”挿入画像”の幅と高さで、基本的には猫画像の幅と高さを設定します。

勉強なので、試しにw=8(CAT_W=8)にコードを変更してみて下さい。”挿入画像”の幅が8(猫画像の半分)になるので、猫画像の左半分しか描画されないよ!

はやぶさ
はやぶさ
手を動かして勉強すると理解が深まるね!

Pyxelおもしろい(*・ω・)ノ♪

最後にw=16をw=-16に変更したら、どうなるか?

 

くるる
くるる
これもAPIリファレンスの通りなら…

おぉ~

本記事では「画像処理の基礎を学ぶ」⇒「ソースコードを触る」というフローで説明しましたが「ソースコードを触る」⇒「分からない箇所を調べる」というフローでも問題ありません。ただ、どんな勉強方法でも『手を動かしながら学んでほしいなぁ』と思います♪

スポンサーリンク

おわりに

『Pythonでレトロゲームを作ろう!Day 1-画像の扱い方-』について説明しました。

ゲーム開発(pyxelの使い方)を題材にして、楽しくプログラミングの勉強ができると良いなーとか考えながら、本記事を書きあげました。

また、一気に詰め込むと頭がパンクすると思ったので、本サイト初のシリーズ記事に挑戦します!

本記事がDay1なので「画像の扱い方」という地味な内容ですが…次回からは応用で猫を動かしていきます!

くるる
くるる
動きがあるとゲームっぽくて楽しいね

予定では約一週間(Day5~8)くらいのボリュームにしたいと考えていますが…

私や”くるる”ちゃんが飽きたり、ニーズが無さそうならボリューム減るかも…

逆に私や”くるる”ちゃんが熱中したり、ニーズがありそうならボリューム増えるかも…?

くるる
くるる
気まぐれなのよねー

本記事楽しかったかな?次回もお楽しみに~

Python+ゲーム関連の本(Pyxelの本は2018/12/15時点では存在しません)
LINEスタンプ配信中!

フクロウのLINEスタンプ

当サイトのマスコットキャラクター

「フクロウのくるる」が

LINEスタンプになりました!

勉強で疲れたあなたに癒しをお届け☆

お迎え待ってます(*・ω・)ノ♪

今すぐお迎えする

40個セットがたったの50コインとお得です