pyxeleditorでドット絵を描く

※pyxelのバージョンアップもあったので見直して追記しました。（2021/6/22）
※pyxel Ver1.5.0からは仕様が大きく変わっています。Ver1.5.0以降のPyxel Editorについては下記の記事で取り上げています。（2021/12/21）

pyxelにはドット絵・タイルマップ・サウンドを編集できるpyxeleditorがついています。タイルマップとサウンドはまだ試していないですが、ドット絵は作ってみました。

起動の仕方

僕は環境はAnacondaを使っているので、まずターミナルを起動します。そのあとは、[pyxeleditor  保存するファイルパス]で 起動できます。下記はC直下にsample.pyxelを作る書き方です。

cd /
pyxeleditor C:pyxel\sample.pyxel

既に作成したファイルを開く場合も、同様にファイルパスを指定します。

※pyxelバージョン1.2からはファイル拡張子がpyxresに変更されました。pyxelファイルからpyxresファイルへの変換など、この辺りは下記noteをご参照ください。また、pyxeleditorを起動する際に拡張子部分は不要になりました。上記の例だと[pyxeleditor sample]で開きます。

ドット絵の描き方

下のパレットから色を選んでぐりぐり描いていきます。大体アイコンで機能がわかるようになっててありがたいです。右の四角がパレット全体で、左が選択部分です。このパレットが0から2まで計3つあります。この画像のサイズが縦横16ピクセルのサイズです。

※pyxelバージョン1.3からパレットの色味が変わっています。

▲パレットの色味が変わっただけで、その他機能的には同じです。ちなみにパレットの色は16進数で指定することもできるらしいのですが、やったことはありません。

ドット絵の使い方

そうやって描いていくとパレットの中にいろいろな絵が増えていきます。実際に使う際には.pyxelファイルをpyxel.loadで読み込ませたうえで、以下のようなコードになります。上の画像に対応したコードになっています。

pyxel.blt(50, 10, 1, 0, 16, 63, 16, 15)

(コピー先x, コピー先y, イメージバンク番号, イメージバンクx, イメージバンクy, イメージバンク領域x, イメージバンク領域y, 透過する色コード)の順番で指定していきます。
このコードだと「画面の(50, 10)にイメージバンク1の(0, 16)から横に63ピクセル、縦に16ピクセルの範囲をコピーする。色コード15は透過させる。」という意味になります。
座標をうまく指定して整理していけば、一つのイメージバンクでいろいろなドット絵が使えます。

少し動かしてみましたが、縦横16ピクセルの範囲でも結構いろいろ描くことができました。使い方に慣れれば、もっと大きなドット絵や、精密なものも描けそうです。ただ、今のところはこの大きさでも手に余る感じですね…。8×8ぐらいで練習するのがいいかもしれません。

何はともあれとても便利なエディターでした。今後もいろいろ作っていきたいと思います。