【公式】準備ゼロで使えるPyxel開発環境『Pyxel Code Maker』のご紹介

もっと手軽にPyxelを使いたい！

Pyxel（ピクセル）は、Pythonを使ってレトロ調のゲームやアプリを作れるゲームエンジンです。（Pyxelの名前を聞くのが初めてという方は、紹介記事「【公式】レトロゲームエンジンPyxelを使わない理由が見つからない」をご参照ください）

Pyxelは「気軽に楽しくゲームプログラミング」をコンセプトにしており、実際にとても手軽に使える環境ではあるのですが、ひとつだけ避けられない前提がありました。
それは、PythonとPyxelを事前にインストールする必要があるという点です。

例えば、プログラミング教室で、プログラミングをまったく知らない生徒たちに、いきなりPyxelを使わせたい場合。

あるいは、会社のPCを使っているときに、ふと思い立ってPyxelでゲームを作りたくなった場合。（自己責任でお願いします😉）

こうした場面では、この「事前準備」が意外と大きなハードルになることがありました。

この「最後の一手間」の課題を解決するために、新たに作成した開発環境が『Pyxel Code Maker』です。

Pyxel Code Makerとは

Pyxel Code Makerは、ブラウザ上でPyxelのプログラミングや絵や音などのリソース作成を行い、そのまま実行できるオンライン開発環境です。

PythonやPyxelを事前にインストールする必要はなく、Webブラウザさえ動けば、準備時間ゼロですぐに使い始めることができます。

コードやリソースを編集したら、その場で実行して結果を確認できるため、書く・作る・動かす、という一連の作業をテンポよく繰り返すことができます。

それでは、早速こちらのリンクを開いて、Pyxel Code Makerを立ち上げてみましょう！

Pyxel Code Makerの画面構成

Pyxel Code Makerを立ち上げると、次のような画面が表示されます。

他のオンライン開発環境を使ったことのある方であれば、画面を見ただけで、だいたいの使い方は想像がつくのではないかと思います。

ここでは、各UI要素について簡単に説明します。

操作ボタン

画面上部の右側には、各種操作ボタンが並んでいます。

• LOAD / SAVE
  プロジェクトファイルの読み込みと保存を行います。
• CODE / RES
  コードエディタとリソースエディタを切り替えます。
• RUN
  アプリを実行（再実行）します。

ツールの基本操作は、このボタン群だけで完結するようになっています。

編集エリア

画面左側が、コードやリソース（絵や音）を編集するための編集エリアです。

起動時はコード編集を行うコードエディタになっており、RESボタンを押すと、Pyxelのリソースエディタに切り替わります。

このリソースエディタは、ローカル環境で使うPyxel付属のエディタと同じ操作方法です。

なお、ここで編集するリソースファイルのファイル名はmy_resource.pyxres で固定されています。

実行画面

画面右側には、アプリ実行中の画面が表示されます。

コードやリソースを編集して RUN ボタンを押すと、その結果がすぐにこの実行画面に反映されます。

また、編集エリアと実行画面の境界はドラッグすることで調整できるため、コードを広く見たいときや、実行結果を大きく表示したいときに、用途に応じてレイアウトを変えることができます。

便利なショートカット

Pyxel Code Makerでは、編集と実行をテンポよく行えるように、いくつかのショートカットキーが用意されています。

• Ctrl (Cmd) + ,
  コードエディタとリソースエディタの切り替え

• Ctrl (Cmd) + Enter
  アプリの実行（再実行）

• Ctrl (Cmd) + .
  編集エリアと実行画面のフォーカス切り替え

特に最後の「フォーカス切り替え」は、コードエディタでコードを書いたあとに実行画面へフォーカスを移してキャラクターを操作し、その後すぐに編集エリアへ戻ってコードを修正する、といった使い方をする際に非常に便利です。

慣れてくると、ほとんどマウスを使わずに作業できるようになりますので、ぜひ活用ください。

プロジェクトファイルについて

LOAD・SAVE ボタンを押すと、コードとリソースファイルをひとまとめにしたzipファイルの読み込みと保存ができます。

このzipファイルには、Pyxel Code Makerで編集しているコードとリソースがすべて含まれており、プロジェクトの受け渡しやバックアップを簡単に行えます。

少しトリッキーな使い方にはなりますが、このzipファイルを展開して、フォントデータなどの追加ファイルを手動で組み込むことも可能です。（あくまで上級者向けの使い方なので、無理におすすめはしません）

また、このzipファイルは、Pyxelのアプリケーションファイル形式（.pyxapp ファイル）と互換性を持つように作られています。そのため、ローカル環境で次のように指定すると、そのまま実行することもできます。

pyxel play プロジェクト名.zip

使い方はわかったけど、何を作ればいい？

これで、PythonとPyxelを使って、準備ゼロで開発を始められるようになりました。

とはいえ、

「環境は整ったけど、何を作ればいいのかわからない」
「どういう順番で勉強すればいいのかわからない」

と感じる方もいるかもしれません。

そんなときは、Pyxel作者による公式入門書籍
『ゲームで学ぶPython！ Pyxelではじめるレトロゲームプログラミング』
を活用してみてください。

終わりに

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

Pyxelの開発は、GitHubのスターを励みに、無償で続けています。
「応援しているよ」という方は、Pyxelリポジトリ にスターを付けていただけると、作者のやる気につながりますので、ぜひよろしくお願いします！