【pyxel 1.5】Pyxel Editor使用方法まとめ

pythonのレトロゲームエンジン「pyxel」 に付随するPyxel Editorの使い方まとめです。バージョン1.5.0から大きく変更された点もあるので、そのあたりに重点を置いて書いていきたいと思います。

Pyxel Editorではイメージ・タイルマップ・サウンドとゲームに必要なリソースをまとめて作ることができます。僕のような初心者にはうれしいところです。
サウンドエディターはあまり使えていないので、このnoteではイメージとタイルマップを取り上げます。

※Ver1.5.0ではPyxel Editorの座標関連の不具合が報告されていました。Ver1.5.1で修正されていたので、Pyxel Editor使用前にpyxel本体のバージョン確認をおすすめします。

旧バージョン（Ver.1.4以前）については以下のnoteに記載してあります。

使用環境

Windows 11　＋　Anaconda
エディターはAnacondaについてくるSpyderを使っています。
pyxelの実行環境構築については以下のnoteをご参照ください。

起動方法

Anaconda環境ではターミナルから起動します。Anaconda Navigaterの左のタブから「Enviroments」をクリック。pyxelが動かせる環境の▶ボタンをクリック。「Open　Terminal」をクリック。黒い背景のターミナルが起動します。「pyxel edit　"保存するファイルパス"」で起動です。

pyxel edit C:\python\pyxel\sample

▲Cの中にある「python」というフォルダの中の「pyxel」フォルダに「sample」という名前で作成する場合はこんな感じ。
作成したファイルの拡張子は「.pyxres」ですが、起動コマンドには不要です。

▲Pyxel Editorが起動できました。左上のファイルパスも指定したものになっています。

ドット絵を作る

まずはドット絵を作ってみます。

ドット絵を描く

▲イメージ編集画面です。ざっくりと説明していきます。
①：編集対象の切り替えボタンです。左から「イメージ・タイルマップ・サウンド・ミュージック」の順です。
➁：「もどす・進める」ボタンです。
③：「保存」ボタンです。
④：「現在のカーソルの座標」が表示されています。
⑤：メインの編集ウィンドウです。左クリックでドットを打つことができます。右クリックで選択個所の色を取得、右クリックしたままマウス移動でスクロール。
⑥：イメージバンク全体の表示です。白枠部分が左の編集ウィンドウに写っている部分です。
⑦：パレット部分です。色やブラシの形・機能を選択します。
⑧：イメージバンク切り替え部分。「0・1・2」の3つあり、それぞれでイメージを作成できます。キャラクター表示用とかタイルマップ用とか、用途別で分けるとわかりやすいかも。

▲白猫と茶猫を描きました。これを実際に表示させてみます。

ドット絵を使う

# -*- coding: utf-8 -*-

import pyxel

class APP:
  def __init__(self):
      pyxel.init(128, 128, title="pyxel")
      
      pyxel.load('sample.pyxres')
      
      pyxel.run(self.update, self.draw)
     
  def update(self):
      pass

  def draw(self):
      pyxel.cls(0)

      pyxel.blt(50, 50, 0, 0, 0, 8, 8, 0)
      
      pyxel.blt(65, 65, 0, 8, 8, 8, 8, 0)
      
      
APP()

▲短いコードですがこれで画像表示ができます。
まずpyxel.loadで先ほど作ったイメージファイルを読み込みます。今回は本体の.pyファイルと同じ階層にイメージファイルを置いています。
その後、draw部分でイメージの描画です。pyxel.bltを使います。
blt(x, y, img, u, v, w, h, [colkey])が書式です。
例えば、
pyxel.blt(50, 50, 0, 0, 0, 8, 8, 0)
は日本語にすると
画面の（50，50）の位置にイメージバンク「0」の（0，0）の位置から横8、縦8の範囲を描画し、カラーコード「0」（黒）は透過させる。
という意味になります。最後の透過カラーコードは省略してもOKです。

▲表示できました。結構かわいい気がしてきた。

タイルマップを作る

さて、白猫と茶猫を表示してみましたが、背景があんまりなのでタイルマップを作ってみます。

タイルマップを描く

タイルマップはイメージの集合体です。なので、まずはタイルにするイメージを描きます。

▲岩ブロック、土ブロック、草原を描きました。ごちゃごちゃにならないように、イメージバンクは「1」に切り替えています。

▲タイルマップ編集画面です。上部のツールバーはイメージ編集画面と被るので割愛します。
①：タイルマップ編集ウィンドウです。
➁：選択しているタイルマップの中でどの部分が編集ウィンドウに表示されているかがわかります。
③：選択しているイメージバンクの中身です。
④：タイルマップの切り替えなどを行います。
⑤：使用するイメージバンクを切り替えます。イメージバンクは１つしか選べない点は注意です。（例えばイメージバンク0からこのタイル、イメージバンク1からこのタイルとかはできない。）

タイルマップを使う

# -*- coding: utf-8 -*-

import pyxel

class APP:
  def __init__(self):
      pyxel.init(128, 128, title="pyxel")
      
      pyxel.load('sample.pyxres')
      
      pyxel.run(self.update, self.draw)
     
  def update(self):
      pass

  def draw(self):
      pyxel.cls(0)

      pyxel.bltm(0, 0, 0, 0, 0, 128, 128)
           
      pyxel.blt(50, 50, 0, 0, 0, 8, 8, 0)
      
      pyxel.blt(65, 65, 0, 8, 8, 8, 8, 0)
      
      
APP()

▲先ほどのコードに少し追加しています。
タイルマップ表示の書式はbltm(x, y, tm, u, v, w, h, [colkey])です。先ほどのイメージ表示とほぼ同じですね。コードの上から順番に描画するので、タイルマップ→イメージの順で書いています。
今回書いたコードは
pyxel.bltm(0, 0, 0, 0, 0, 16, 16)で
日本語にすると
画面の（0，0）の位置にタイルマップバンク「0」の（0，0）の位置から横128、縦128の範囲を描画する。
という意味になります。透過カラーコードは必要ないので書いていません。

▲タイルマップの表示ができました。草原の上に猫がいます。

これでイメージとタイルマップの作製・表示ができました。
今回はここまでになります。読んでいただきありがとうございました。

おまけ

# -*- coding: utf-8 -*-

import pyxel

class APP:
  def __init__(self):
      pyxel.init(128, 128, title="pyxel")
      
      pyxel.load('sample.pyxres')
      
      self.neko_pos = [48, 48] 
      self.neko_muki = 0
      
      pyxel.run(self.update, self.draw)
      
     
  def update(self):
      tile_x = self.neko_pos[0] / 8
      tile_y = self.neko_pos[1] / 8
      if pyxel.btnp(pyxel.KEY_UP):
          tile = pyxel.tilemap(0).pget(tile_x, tile_y - 1)
          if tile == (0, 1):
              self.neko_pos[1] = self.neko_pos[1] - 8
      
      if pyxel.btnp(pyxel.KEY_DOWN):
          tile = pyxel.tilemap(0).pget(tile_x, tile_y + 1)
          if tile == (0, 1):
              self.neko_pos[1] = self.neko_pos[1] + 8
          
      if pyxel.btnp(pyxel.KEY_RIGHT):
          tile = pyxel.tilemap(0).pget(tile_x + 1, tile_y)
          if tile == (0, 1):
              self.neko_pos[0] = self.neko_pos[0] + 8
          self.neko_muki = 0
          
      if pyxel.btnp(pyxel.KEY_LEFT):
          tile = pyxel.tilemap(0).pget(tile_x - 1, tile_y)
          if tile == (0, 1):
              self.neko_pos[0] = self.neko_pos[0] - 8
          self.neko_muki = 1

  def draw(self):
      pyxel.cls(0)

      pyxel.bltm(0, 0, 0, 0, 0, 128, 128)
           
      pyxel.blt(self.neko_pos[0], self.neko_pos[1], 0,
                0 + self.neko_muki * 8, 0, 8, 8, 0)
      
      pyxel.blt(65, 65, 0, 8, 8, 8, 8, 0)
      
      
APP()

▲少しコードを追加して白猫を動かせるようにしました。移動先のタイルを見て、草原のみ動けるようにしています。タイル種類はVer1.5.0からタプル型になったようです。(x, y)の順なので(0, 1)は1行目の0個目ということになります。今回では草のマスですね。順番が0から始まる点は注意。

▲動かすとこんな感じ。茶猫には当たり判定がないのですり抜けてしまいます。

Pyxel Editorの使い方について、ざっくりとみてみました。割と少ないコードでも動くものが作れますし、ちょっとしたお絵描きツールとしても良いと思います。おすすめです。

ここまで読んでいただきありがとうございました。