大ファンの株式会社　刀の森岡さんが、西武園ゆうえんちの改革に乗り出すそうです。あのUSJをハリーポッターでV字回復させた方です。西武園ゆうえんちは、古い遊園地ということを活かし昭和のレトロ空間をコンセプトにするとの事。

というわけで、今回はpyxel（ぴくせる）というpythonのレトロゲームエンジンで２Dゲームを作成してみました。
作成したゲームは次のようなものです。

一言で表すなら、爆弾を上下に移動して爆弾を避けるゲームです。
スペースキーを押すと上昇、離すと加工するフラッピーバード的なゲームです。
200行程度のプログラムで作成することができます。

Pyxel（ぴくせる）だけでゲームが作れる！

まずはPyxelの特徴ですが、pyxelはpyxelだけで、ゲームに必要な絵、音楽もつくることができます！
自分でゲームを作る際に問題になるのが「絵がかけない」、「音楽が作れない」という問題です。
キャラクターが作れないとゲームにならないし、絵が描けてもBGMがないゲームは味気ないです。
そんな悩みを一掃してくれるのがPyxelです。
上の方に貼り付けてあるゲーム画像の絵は全てオリジナルで描いたものです。
キャラクタも爆弾も爆発も雲も自分で書きました。
下手なんですけど２Dのレトロ風ゲームと言うことで味のある感じになります。

Pyxelでゲーム素材を作る方法

pyxelは標準で「pyxeleditor（ぴくせるエディター」という画像と音楽を作るツールが含まれており、オリジナルのゲーム素材
を作成することが可能です。
ゲーム内で使用する画像は四角のドットを並べて作成します。

音楽を作る場合はピアノロールを使って音を並べていくだけでOKです。どーでしょうか？いけそうじゃあないですか？
作成したサウンドは同時に4チャンネル重ねることも可能です。

Pyxelで理解すべき3つの関数について

素材が完成したらプログラムを組んでいきます。
Pyxelは基本的なプログラムのベースは次の通りです。

import pyxel

class App:
    def __init__(self):
        pyxel.init(160, 120)
        self.x = 0
        pyxel.run(self.update, self.draw)

    def update(self):
        self.x = (self.x + 1) % pyxel.width

    def draw(self):
        pyxel.cls(0)
        pyxel.rect(self.x, 0, 8, 8, 9)

App()

import pyxel

class App:

def __init__(self):

pyxel.init(160, 120)

self.x = 0

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

def update(self):

self.x = (self.x + 1) % pyxel.width

def draw(self):

pyxel.cls(0)

pyxel.rect(self.x, 0, 8, 8, 9)

App()

Appクラスの中の３つのクラスに処理を記述していきます。
それぞれの関数の役割は次の通りです。

・def __init__関数
Appクラスのコンストラクタです。
App()を実行したとき最初に呼ばれる関数のため、画面のサイズやプレイヤーの初期位置等、
ゲームの初期設定を記述します。

・def update関数
フレーム更新ごとに呼ばれる処理を書きます。
キャラクターの移動や、キー入力時の処理を記述します。

・def draw関数
ゲーム画面を描画する処理を書きます。
updateで更新した座標をdraw関数で描写するように記述していきます。

Pyxelで作成したゲーム素材を利用する方法

pyxelで作成したゲーム素材は次の手順で利用することができます。

１.素材ファイルを読み込む
　コンストラクタ内で作成した素材を読み込みます

    def __init__(self):
        pyxel.load("assets/my_resource.pyxres")

1 2	def __init__(self): pyxel.load("assets/my_resource.pyxres")

pyxel.load関数の引数に作成したpyxresのファイルパスを渡すことで、
ゲーム内に素材をロードすることができます。

２. 画像を表示したいところでblt関数を呼び出す

    def draw(self):
        #キャラクタ表示
        if not self.GAMEOVER:
            pyxel.blt(self.player_x, self.player_y, 0, 0, 0, 16, 16, 0)

def draw(self):

#キャラクタ表示

if not self.GAMEOVER:

pyxel.blt(self.player_x, self.player_y, 0, 0, 0, 16, 16, 0)

bltやbltmを利用して作成した素材から画像を描画することができます。
８つの引数はそれぞれ次のようになります。

blt(x, y, img, u, v, w, h, [colkey])

1	blt(x, y, img, u, v, w, h, [colkey])

x: 画像を表示するx座標
y: 画像を表示するy座標
img: 画像番号(イメージバンク番号）
u: イメージバンクからの位置（x)
v: イメージバンクからの位置(y)
w: 取得するイメージの幅
h: 取得するイメージの高さ

my_resource.pyxres

音はMusic番号を指定してあげればOKです。

#音再生
pyxel.playm(0, loop=True)

1 2	#音再生 pyxel.playm(0, loop=True)

サンプルゲームのプログラム内容

今回作成したpyxelのプログラムは次の通りです。

import pyxel
from  random import randint

class App:
    def __init__(self):
        pyxel.init(160, 120)

        pyxel.load("assets/my_resource.pyxres")

        #STARTFLAG
        self.START = False

        #GAMEOVERフラグ
        self.GAMEOVER = False

        #スコア用変数
        self.score = 0

        #プレイヤー初期地位
        self.player_x = 20
        self.player_y = 60
        
        #重力系変数
        self.gravity = 2.5
        self.MAX_GRAVITY = self.gravity
        self.POWER = 0.25

        #爆弾の生成用
        self.bomb = [(i * 60, randint(0, 104)) for i in range(3,15)]

        #遠い雲
        self.far_cloud = [(10, 25), (70, 35), (120, 15), (44, 45), (67, 75), (110, 95)]

        #近い雲
        self.near_cloud = [(20, 15), (40, 75), (110, 40)]

        #音再生
        pyxel.playm(0, loop=True)

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

    def update(self):

        #終了する
        if pyxel.btnp(pyxel.KEY_Q):
            pyxel.quit()

        
        #スペース押された場合
        if pyxel.btn(pyxel.KEY_SPACE) or pyxel.btn(pyxel.GAMEPAD_1_START):
            self.START = True

        if self.GAMEOVER and (pyxel.btn(pyxel.KEY_ENTER or pyxel.btn(pyxel.GAMEPAD_1_START))) :
            self.reset()


        if not self.START or self.GAMEOVER:
            return

        #プレイヤーの更新
        self.update_player()

        #爆弾の表示
        for i, v in enumerate(self.bomb):
            self.bomb[i] = self.update_bomb(*v)

        # スコア
        if not self.GAMEOVER:
            self.score += 1


    def draw(self):
        if self.GAMEOVER:

            MESSAGE =\
"""
     GAMEOVER

PUSH ENTER RESTART
"""
            pyxel.text(51, 40, MESSAGE, 1)
            pyxel.text(50, 40, MESSAGE, 7)
            return

        #背景表示
        pyxel.bltm(0, 0, 0, 0, 0, 20, 16, 0)

        #雲の表示(遠い)
        offset = (pyxel.frame_count // 8) % 160
        for i in range(2):
            for x, y in self.far_cloud:
                pyxel.blt(x + i * 160 - offset, y, 0, 0, 56, 22, 8, 12)

        #キャラクタ表示
        if not self.GAMEOVER:
            pyxel.blt(self.player_x, self.player_y, 0, 0, 0, 16, 16, 0)

        # 爆弾表示
        for x, y in self.bomb:
            pyxel.blt(x, y, 0, 32, 0, 16, 16, 7)


        #雲の表示(近く)
        offset = (pyxel.frame_count // 2) % 160
        for i in range(2):
            for x, y in self.near_cloud:
                pyxel.blt(x + i * 160 - offset, y, 0, 32, 56, 22, 8, 12)

        #スコア表示
        s = "SCORE {:>4}".format(self.score)
        pyxel.text(5, 4, s, 1)
        pyxel.text(4, 4, s, 7)

        if not self.START:
            MESSAGE ="PUSH SPACE KEY"
            pyxel.text(61, 50, MESSAGE, 1)
            pyxel.text(60, 50, MESSAGE, 7)
            return

    #プレイヤー更新関数
    def update_player(self):

        if pyxel.btn(pyxel.KEY_SPACE) or pyxel.btn(pyxel.GAMEPAD_1_A):
            if self.gravity > -self.MAX_GRAVITY:
                self.gravity = self.gravity - self.POWER
        else:
            if self.gravity < self.MAX_GRAVITY:
                self.gravity = self.gravity + self.POWER

        self.player_y = self.player_y + self.gravity 

        if( 0 > self.player_y ):
            self.player_y = 0

        if( self.player_y > pyxel.height -16 ):
            self.player_y = pyxel.height - 16


    #爆弾更新
    def update_bomb(self, x, y):
        if abs(x - self.player_x) < 12 and abs(y - self.player_y) < 12:
            self.GAMEOVER = True
            pyxel.blt(x, y, 0, 48, 0, 16, 16, 0)
            pyxel.blt(self.player_x, self.player_y, 0, 16, 0, 16, 16, 0)
            
            pyxel.stop()
        x -= 2
 
        if x < -40:
            x += 240
            y = randint(0, 104)
 
        return (x, y)

    def reset(self):
        #STARTFLAG
        self.START = True

        #GAMEOVERフラグ
        self.GAMEOVER = False

        #スコア用変数
        self.score = 0

        #プレイヤー初期地位
        self.player_x = 20
        self.player_y = 60
        
        #重力系変数
        self.gravity = 2.5
        self.MAX_GRAVITY = self.gravity
        self.POWER = 0.25

        #爆弾の生成用
        self.bomb = [(i * 60, randint(0, 104)) for i in range(3,15)]

        #遠い雲
        self.far_cloud = [(10, 25), (70, 35), (120, 15), (44, 45), (67, 75), (110, 95)]

        #近い雲
        self.near_cloud = [(20, 15), (40, 75), (110, 40)]

        #音再生
        pyxel.playm(0, loop=True)

App()

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

import pyxel

from random import randint

class App:

def __init__(self):

pyxel.init(160, 120)

pyxel.load("assets/my_resource.pyxres")

#STARTFLAG

self.START = False

#GAMEOVERフラグ

self.GAMEOVER = False

#スコア用変数

self.score = 0

#プレイヤー初期地位

self.player_x = 20

self.player_y = 60

#重力系変数

self.gravity = 2.5

self.MAX_GRAVITY = self.gravity

self.POWER = 0.25

#爆弾の生成用

self.bomb = [(i * 60, randint(0, 104)) for i in range(3,15)]

#遠い雲

self.far_cloud = [(10, 25), (70, 35), (120, 15), (44, 45), (67, 75), (110, 95)]

#近い雲

self.near_cloud = [(20, 15), (40, 75), (110, 40)]

#音再生

pyxel.playm(0, loop=True)

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

def update(self):

#終了する

if pyxel.btnp(pyxel.KEY_Q):

pyxel.quit()

#スペース押された場合

if pyxel.btn(pyxel.KEY_SPACE) or pyxel.btn(pyxel.GAMEPAD_1_START):

self.START = True

if self.GAMEOVER and (pyxel.btn(pyxel.KEY_ENTER or pyxel.btn(pyxel.GAMEPAD_1_START))) :

self.reset()

if not self.START or self.GAMEOVER:

return

#プレイヤーの更新

self.update_player()

#爆弾の表示

for i, v in enumerate(self.bomb):

self.bomb[i] = self.update_bomb(*v)

# スコア

if not self.GAMEOVER:

self.score += 1

def draw(self):

if self.GAMEOVER:

MESSAGE =\

"""

GAMEOVER

PUSH ENTER RESTART

"""

pyxel.text(51, 40, MESSAGE, 1)

pyxel.text(50, 40, MESSAGE, 7)

return

#背景表示

pyxel.bltm(0, 0, 0, 0, 0, 20, 16, 0)

#雲の表示(遠い)

offset = (pyxel.frame_count // 8) % 160

for i in range(2):

for x, y in self.far_cloud:

pyxel.blt(x + i * 160 - offset, y, 0, 0, 56, 22, 8, 12)

#キャラクタ表示

if not self.GAMEOVER:

pyxel.blt(self.player_x, self.player_y, 0, 0, 0, 16, 16, 0)

# 爆弾表示

for x, y in self.bomb:

pyxel.blt(x, y, 0, 32, 0, 16, 16, 7)

#雲の表示(近く)

offset = (pyxel.frame_count // 2) % 160

for i in range(2):

for x, y in self.near_cloud:

pyxel.blt(x + i * 160 - offset, y, 0, 32, 56, 22, 8, 12)

#スコア表示

s = "SCORE {:>4}".format(self.score)

pyxel.text(5, 4, s, 1)

pyxel.text(4, 4, s, 7)

if not self.START:

MESSAGE ="PUSH SPACE KEY"

pyxel.text(61, 50, MESSAGE, 1)

pyxel.text(60, 50, MESSAGE, 7)

return

#プレイヤー更新関数

def update_player(self):

if pyxel.btn(pyxel.KEY_SPACE) or pyxel.btn(pyxel.GAMEPAD_1_A):

if self.gravity > -self.MAX_GRAVITY:

self.gravity = self.gravity - self.POWER

else:

if self.gravity < self.MAX_GRAVITY:

self.gravity = self.gravity + self.POWER

self.player_y = self.player_y + self.gravity

if( 0 > self.player_y ):

self.player_y = 0

if( self.player_y > pyxel.height -16 ):

self.player_y = pyxel.height - 16

#爆弾更新

def update_bomb(self, x, y):

if abs(x - self.player_x) < 12 and abs(y - self.player_y) < 12:

self.GAMEOVER = True

pyxel.blt(x, y, 0, 48, 0, 16, 16, 0)

pyxel.blt(self.player_x, self.player_y, 0, 16, 0, 16, 16, 0)

pyxel.stop()

x -= 2

if x < -40:

x += 240

y = randint(0, 104)

return (x, y)

def reset(self):

#STARTFLAG

self.START = True

#GAMEOVERフラグ

self.GAMEOVER = False

#スコア用変数

self.score = 0

#プレイヤー初期地位

self.player_x = 20

self.player_y = 60

#重力系変数

self.gravity = 2.5

self.MAX_GRAVITY = self.gravity

self.POWER = 0.25

#爆弾の生成用

self.bomb = [(i * 60, randint(0, 104)) for i in range(3,15)]

#遠い雲

self.far_cloud = [(10, 25), (70, 35), (120, 15), (44, 45), (67, 75), (110, 95)]

#近い雲

self.near_cloud = [(20, 15), (40, 75), (110, 40)]

#音再生

pyxel.playm(0, loop=True)

App()

シンプルなゲームのため、複雑な処理はありません。
ボタンを押すと上昇し、離すと下降する処理は次のように記述しています。

        #重力系変数
        self.gravity = 2.5
        self.MAX_GRAVITY = self.gravity
        self.POWER = 0.25
---省略---
    def update_player(self):

        if pyxel.btn(pyxel.KEY_SPACE) or pyxel.btn(pyxel.GAMEPAD_1_A):
            if self.gravity > -self.MAX_GRAVITY:
                self.gravity = self.gravity - self.POWER
        else:
            if self.gravity < self.MAX_GRAVITY:
                self.gravity = self.gravity + self.POWER

        self.player_y = self.player_y + self.gravity 

        if( 0 > self.player_y ):
            self.player_y = 0

        if( self.player_y > pyxel.height -16 ):
            self.player_y = pyxel.height - 16

#重力系変数

self.gravity = 2.5

self.MAX_GRAVITY = self.gravity

self.POWER = 0.25

---省略---

def update_player(self):

if pyxel.btn(pyxel.KEY_SPACE) or pyxel.btn(pyxel.GAMEPAD_1_A):

if self.gravity > -self.MAX_GRAVITY:

self.gravity = self.gravity - self.POWER

else:

if self.gravity < self.MAX_GRAVITY:

self.gravity = self.gravity + self.POWER

self.player_y = self.player_y + self.gravity

if( 0 > self.player_y ):

self.player_y = 0

if( self.player_y > pyxel.height -16 ):

self.player_y = pyxel.height - 16

上下するキャラの処理の流れ

１.スペースキーが押された場合はPOWERを徐々に増やし重力(gravity)からPOWERを引くことで
キャラクターが浮き上がるように設定しています。(１０行目、１５行目)

２.ボタンを話した場合はgravityが徐々に増加していくので、徐々に落ちる速度が上昇します。
(１３行目、１５行目)

背景の雲を動かす方法

背景の雲の移動はプレイヤーから見て奥行きの近い雲と遠い雲の２パターン作成しています。

        #遠い雲
        self.far_cloud = [(10, 25), (70, 35), (120, 15), (44, 45), (67, 75), (110, 95)]

        #近い雲
        self.near_cloud = [(20, 15), (40, 75), (110, 40)]

---省略---

        #雲の表示(遠い)
        offset = (pyxel.frame_count // 8) % 160
        for i in range(2):
            for x, y in self.far_cloud:
                pyxel.blt(x + i * 160 - offset, y, 0, 0, 56, 22, 8, 12)

---省略---

        #雲の表示(近く)
        offset = (pyxel.frame_count // 2) % 160
        for i in range(2):
            for x, y in self.near_cloud:
                pyxel.blt(x + i * 160 - offset, y, 0, 32, 56, 22, 8, 12)

#遠い雲

self.far_cloud = [(10, 25), (70, 35), (120, 15), (44, 45), (67, 75), (110, 95)]

#近い雲

self.near_cloud = [(20, 15), (40, 75), (110, 40)]

---省略---

#雲の表示(遠い)

offset = (pyxel.frame_count // 8) % 160

for i in range(2):

for x, y in self.far_cloud:

pyxel.blt(x + i * 160 - offset, y, 0, 0, 56, 22, 8, 12)

---省略---

#雲の表示(近く)

offset = (pyxel.frame_count // 2) % 160

for i in range(2):

for x, y in self.near_cloud:

pyxel.blt(x + i * 160 - offset, y, 0, 32, 56, 22, 8, 12)

雲の動きの流れ

１.雲の初期位置を決めるリストの作成します。なお、リストの要素数が雲の数となります
(２行目、５行目)
２.経過フレームを定数で割った商を横幅と同じ１６０で余剰したときの結果分右にずらす。
(１０、１３行目、１８、２１行目)

ちょっと難しい処理ですが、雲が右から左に向かって少しずつ移動するような処理になっています。

Pyxelで作ったゲームを他の人に遊んでもらう

通常、pythonで作成したゲームを他の人のパソコンで遊んでもらうには、作成したゲームプログラムと
pythonの実行環境が必要になりますが、Pyxelではpythonの環境がない場合でも遊べるように
変換してくれる機能があります。

使い方は以下の通りです。

pyxelpackager python_file

1	pyxelpackager python_file

python_fileは自分が作成したゲームファイル名が入ります。
素材ファイルはassetsフォルタを作成し、その中に入れておく必要がありますが
うまく作成できるとdistフォルダの中に実行ファイルが作成されます。

ファイルを他のパソコンにコピーして起動すれば同じゲームが遊べます。
ちなみに今回作成したファイルリンクを貼っておきますので
よろしければ試してみてください。

pyxcelTestGame

※上の例ではMacで作成したので、同じOSの「Mac」で動かすことは可能ですが、
windowsやLinuxでは動かないので注意してください。
もしwindowsやLinuxで動くものを作りたい場合はpyxelの環境をそれぞれのOSで作成して
再度pyxelpackagerを実行してください。

今回はpyxelでゲームを作成してみましたが、画像だけでなく、音楽も簡単に作ることができるので
すぐにオリジナルのゲームを作成することができます。
単独実行ファイルを出力ができるため自分が作ったゲームを友達に遊んでもらうことも気軽にできます。
是非一度試してみてください。