「JavaScript+html+Canvas」からPyxelへ

ふとnoteの記事を見つけた。

Pyxelというpythonのレトロゲームエンジンだということで、これまで記事を書いてきた「JavaScript+html+Canvas でゲーム作成」はそのまま移植できそうな感じだなと思ったわけです。

私にも簡単にできるのか試してみました。

python言語は仕事で使ったことがあるのは、約2週間ほどでコンバーターを作成した事があるのみではたしてどうなのかというところです。
趣味の領域では、「閑話休題」で公開しているス〇－ス〇〇ベーダーもどきをpython化した程度。
（作ったのは2020年だったので最新版ではないしpythonもすっかり忘れていますが・・・）

手始めに「基本部分」で作成した玉いっぱい表示するものを動かすことを目標にしてみます。

まずは、Pyxelのインストール

を参考にしました。

ベースはMacで、Homebrew、python3はすでに入ってる。

brew install pipx
pipx ensurepath
pipx install pyxel

途中upgradeしろよとか言われたりしましたが無事インストール成功！
サンプルを動かしてみたり。

基本形がこれ

import pyxel

class App:
    #初期化
    def __init__(self):
    	#画面サイズ指定
        pyxel.init(160, 120)
        #＜初期化処理＞
        pyxel.run(self.update, self.draw)

    #更新
    def update(self):
        #＜更新処理＞

    #描画
    def draw(self):
    	#画面をカラー0でクリア
        pyxel.cls(0)
        #＜描画処理＞

App()

"test.py"というファイル名で保存。
（UTF-8で改行LF、BOM無し指定としてみたが決まりはあるのかどうか？）

コンソール上で、
pyxel run test.py
で実行、Escキー押下で終了、という流れ。

「基本部分」で作成した玉いっぱい表示するものを動かすプログラムを移植。
困ったのはカラーデータ。
RGB色で玉を描画ではなくて、セットしたカラーパレットの値をセットということらしい。
ここではひとまず表示のみということで、1～15のパレット値をランダムで設定。

プログラムソース：

import pyxel

class App:
	#初期化
	def __init__(self):
		#画面サイズ指定
		self.width = 160
		self.height = 120
		pyxel.init(self.width, self.height)

		#玉の半径
		self.radius = 2

		self.maxnum = 1000
		self.col = 0

		#玉準備（x,y,speedx,speedy,color）
		self.pos = [[0 for i in range(5)] for j in range(self.maxnum)]

		#初期値セット
		for i in range(self.maxnum):
			self.pos[i][0] = pyxel.rndi( 0, self.width - 1 )	#xpos
			self.pos[i][1] = pyxel.rndi( 0, self.height - 1 )	#ypos
			self.pos[i][2] = pyxel.rndi( 2, 10 )				#speedx
			self.pos[i][3] = pyxel.rndi( 2, 10 )				#speedy
			self.pos[i][4] = pyxel.rndi( 1, 15 )				#col

		pyxel.run(self.update, self.draw)

	#更新
	def update(self):
		#範囲内衝突判定
		for i in range(self.maxnum):
			#玉を壁のx方向で反射させる
			if( ( self.pos[i][0] + self.pos[i][2] > self.width - self.radius ) or ( self.pos[i][0] + self.pos[i][2] < self.radius ) ):
				self.pos[i][2]  = self.pos[i][2] * (-1);

			#玉を壁のy方向で反射させる
			if( ( self.pos[i][1] + self.pos[i][3] > self.height - self.radius ) or ( self.pos[i][1] + self.pos[i][3] < self.radius ) ):
				self.pos[i][3] = self.pos[i][3] * (-1);
 
			#玉移動
			self.pos[i][0] += self.pos[i][2];
			self.pos[i][1] += self.pos[i][3];

	#描画
	def draw(self):
		pyxel.cls(0)
		for i in range(self.maxnum):
			pyxel.circ( self.pos[i][0], self.pos[i][1], self.radius, self.pos[i][4] )

App()

忘れてたpythonをいじりつつ、１時間かからずここまでできた。

それでは、ス〇－ス〇〇ベーダーもどきをPyxel化してみようか。
とはいえすでにpython化したソースがあるので表示と入力だけ変えればいけるかな。
問題は「更新」と「描画」が分離していないというところ。
「更新」処理無しにはできなかったので適当に見繕って「描画」でまわすか・・・

つづく・・・つづくのか？