Pyxel ドット絵の保存方法

Pyxel イメージエディタの絵をPNG画像に保存する手順

 Python向けゲームエンジン Pyxel のエディタで作成したドット絵を画像ファイルに保存したいときは,Pyxelアプリケーションのスクリーンショット機能(Alt+1)を利用しましょう。
 ※本記事の操作はエディタでの保存ではなく,プログラムの実行画面に絵を表示してからの保存操作です。
 

スクリーンショット機能

Pyxel 公式サイト「特殊操作」より

Pyxel アプリケーション実行中に、以下の特殊操作を行うことができます。

  • Esc  アプリケーションを終了する
  • Alt(Option)+1 スクリーンショットをデスクトップに保存する
  • Alt(Option)+2 画面キャプチャ動画の録画開始時刻をリセットする
  • Alt(Option)+3 画面キャプチャ動画をデスクトップに保存する (最大 10 秒)
  • Alt(Option)+0 パフォーマンスモニタ (fps、update 時間、draw 時間) の表示を切り替える
  • - Alt(Option)+Enter フルスクリーン表示を切り替える

APIリファレンス-システム」より

pyxel.init(width, height, [title], [fps], [quit_key], [display_scale], [capture_scale], [capture_sec])

 Pyxel アプリケーションを画面サイズ (width, height) で初期化します。titleでウィンドウタイトル、fpsで動作フレームレート、quit_keyでアプリケーション終了キー、display_scaleで画面表示の倍率、capture_scaleで画面キャプチャの倍率、capture_secで画面キャプチャ動画の最大録画時間を指定します。

 機能の紹介記事
 Pythonでお絵描きしてみよう (Pyxelの新命令の紹介) - kitao's blog

 

ドット絵を表示するプログラム例

 アプリケーション左上の座標から,保存したいドット絵を描いたイメージバンクを表示するようにプログラムを記述します。(リソースファイルの名前(load()命令の引数)はエディタで作成したファイルと合わせてください)

import pyxel
pyxel.init(256,256,display_scale=1,capture_scale=1)
pyxel.load("sample.pyxres")

pyxel.blt( 0, 0, 0, 0, 0,  256, 256 )
pyxel.show()

 実行したアプリケーション画面で Altキーを押しながら1キーを押すと,デスクトップにPNG画像が保存されます。
 (背景色を変えたい場合は,cls()命令でのクリアとblt()命令の透過色指定で工夫してください)
 

あらかじめ保存用プログラムを準備する例

 本項目は教室等でのパソコン実習の場面を想定しています。init()命令の引数を変数で書き換えやすくして,実習用PCにPythonプログラムファイルとして準備しておいても良いかもしれません。

# ドット絵のキャプチャ用プログラム
# プログラムを実行してPyxel画面で Alt+1 キー を押すと
# PNG画像ファイルがデスクトップに作成される

RESOURCE = "sample"     # リソースファイルの名前
IMAGE_NO = 0
WIDTH    = 256
HEIGHT   = 256
SCALE    = 1            # 1ドットの大きさ

import pyxel
pyxel.init(WIDTH,HEIGHT,display_scale=SCALE,capture_scale=SCALE)
pyxel.load(RESOURCE + ".pyxres")

pyxel.blt( 0, 0, IMAGE_NO, 0, 0, WIDTH, HEIGHT )
pyxel.show()

 アプリケーション画面で Altキーを押しながら1キーを押す
 
 保存されたPNG画像
 

※保存したPNG画像ファイルは,イメージエディタ画面にドラッグ&ドロップして他のリソースファイルに追加することもできます。(表示中のイメージバンクに読み込み)

※blt()命令で複数のイメージバンクのドット絵を画面の適切な位置に表示すれば,リソースのマージ(結合)もできます。

 

1ドットのサイズを変えて保存する

 1ドット1ピクセルの画像ファイルが小さいと思うときは,init()命令の capture_scaleの値で大きなサイズに変更できます。以下は1ドットの大きさを4×4ピクセルに指定した例です。(画像の幅と高さも必要な範囲に変更しています)

RESOURCE = "sample"     # リソースファイルの名前
IMAGE_NO = 0
WIDTH    = 64
HEIGHT   = 48
SCALE    = 4            # 1ドットの大きさ

import pyxel
pyxel.init(WIDTH,HEIGHT,display_scale=SCALE,capture_scale=SCALE)
pyxel.load(RESOURCE + ".pyxres")

pyxel.blt( 0, 0, IMAGE_NO, 0, 0, WIDTH, HEIGHT )
pyxel.show()

 アプリケーション画面
 
 保存されたPNG画像
 

 

プログラムで画像ファイルを自動出力する

 ※本項のsaveメソッドはPyxel開発者の Takashi Kitao さんから頂いた情報ですが,公式サイトでの上級者向けAPIに該当するので注意してください。


 PyxelのImageクラスのsaveメソッドを利用すると,プログラムから直接PNG画像を保存することができます。(保存のキーボード操作が不要)

pyxel.image(1).save("filename", 3)

 上記コードを実行するとイメージバンク1の画像をスケール3で,実行したフォルダに filename.png として出力できます。

コード例

import pyxel
pyxel.init(128,128)
pyxel.load("sample.pyxres")

# イメージバンク0-2を1ドット1ピクセルで保存
pyxel.image(0).save("image_0", 1)
pyxel.image(1).save("image_1", 1)
pyxel.image(2).save("image_2", 1)

# イメージバンク0を1ドット4×4ピクセルで保存
pyxel.image(0).save("image_large", 4)

pyxel.text(1,1, "FINISH!",7)
pyxel.show()    # show()後は待機なので,save()はその前に実行する

 画面に表示していないイメージバンクも出力できるので,load()命令でリソースを読み込んだのちイメージバンク3つ(0,1,2)を一度に保存することができます。
 Pythonの「コマンドライン引数」の仕組みを使って,リソースファイルの名前を指定して実行すると画像ファイルが出力されるプログラムを準備すると良さそうです。
 
 

GIFアニメーションの保存

 Pyxelアプリケーション画面の特殊操作「Alt+3」で,画面キャプチャ動画をGIFアニメーションファイルに保存できます。

  • 「Alt+2」で開始時刻のリセット
  • 「Alt+3」を押したところまでの動画を保存
  • init()命令の引数 capture_sec で録画時間を指定できる

以前のブログ記事に使用した画面例で動いていたものは下記のような指定で保存していました。

pyxel.init(128,128,title="NINJA",capture_scale=3,capture_sec=10)


 
 <補足メモ>
 公式サイト上級者向けAPIから確認できる__init__.pyi内の定義 screencast(scale) を利用するとGIFファイル出力もプログラムから行えました。任意のタイミングで1回だけ呼び出す作りにすることでデモ画像を作る際に利用できそうでした。

 ファイル出力のあるプログラムをレンタルサーバー上に配置して,Webブラウザ上で実行したときの動作は以下でした。
 ・GIFファイル ー> 作成されない
 ・PNGファイル ー> 作成されない(サーバのフォルダになし。FireFoxのネットワークログにダウンロード記録なし)

 ローカルマシンに配置したファイルをWebサーバーにBlackJumboDogを使ってlocalhostで実行したときの動作は以下でした。
 ・GIFファイル ー> ブラウザでダウンロード開始
 ・PNGファイルー> 作成されない

 ファイル出力のコードが残っていてもセキュリティの問題はなさそうですが,サーバーにアップするプログラムではコードは消しておくのが無難かなと思いました。

 

関連記事

 kinutani.hateblo.jp