はじめに
Pyxelはシンプルな仕様で手軽にゲーム開発ができるレトロゲームエンジンです。
以前の記事ではGitHub Devを利用したPyxel開発環境の構築について書きました。
しかし、GitHub Devを利用した方法では、コード補完が行われないことや実行するたびにプッシュする必要があることなど不便な点も多くありました。
GitHubにはコーディング環境として、GitHub CodeSpacesも存在しています。
GitHub CodeSpacesも無料枠内であれば無料で利用することができます。
そこで今回は、GitHub CodeSpaces上でPyxel開発環境を構築する方法について説明します。
加えて、devcontainer を利用して開発環境の構築を自動化する方法についても説明します。
サンプルはGitHubで公開しています。
準備
GitHub CodeSpacesを利用するためにGitHubアカウントが必要になります。
また、GitHub上で開発するため、gitの基本的な知識が必要です。
構築手順
1. リポジトリの作成
GitHubでリポジトリを作成します。
2. GitHub CodeSpacesの起動
CodeからCodeSpaceを起動します。
起動すると図のようにvscodeベースのIDEが開きます。
3. devcontainer の追加
devcontainerの設定ファイルを作成すれば、CodeSpaceの起動時に設定した環境を利用できるようになります。
まず、今回はPython 3用の環境を作ります。
Ctrl+Shift+Pでコマンドパレットを開いて、devcontainerと入力して、Codespaces: Add Dev Container Configuration Files...を選択します。
次に Create a new configurationを選択します。
次に、pythonと入力して、公式が提供しているPython 3 devcontainersイメージを選択します。
pythonのバージョンを選択します。今回はデフォルトのpythonのバージョン3.12-bullseyeを選択しました。
追加でライブラリやツールはインストールできますが、今回は何もインストールせずにそのままokを押します。
.devcontainer/devcontainer.jsonと.github/dependabot.ymlが作成されます。
devcontainer.jsonの中身は次のようになっていて、pythonのイメージが選択されています。
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/python
{
"name": "Python 3",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/python:2-3.12-bullseye"
// Features to add to the dev container. More info: https://containers.dev/features.
// "features": {},
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "pip3 install --user -r requirements.txt",
// Configure tool-specific properties.
// "customizations": {},
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
}
4. devcontainer の起動
再びコマンドパレットを開いて、rebuildと入力してCodespaces: Rebuild Containerを選択して、devcontainerをビルドします。
ビルドが終わり、CodeSpacesの読み込みが終わると指定したバージョンのpythonを使える環境が起動します。
5. devcontainer のカスタマイズ
手動でPyxelや必要なライブラリをインストールすることもできますが、CodeSpacesを再作成したり、ほかの環境で動かしたりするたびに設定を行うのは面倒です。そこで、Pyxelのインストールもdevcontainerの設定に追加します。
Pyxelを使えるようにするためには、libsdl2-devをインストールする必要があります。
postCreateCommandにコマンドを追加する方法ではlibsdl2-devをインストールできなかったので、今回はDockerfileを作成して設定します。
次のような.devcontainer/Dockerfileを作成します。イメージはdevcontainer.jsonに記載されていたものを使っています。
また、CodeSpaceのデフォルトでgit lfsが有効になっているため、git-lfsをインストールしています。
FROM "mcr.microsoft.com/devcontainers/python:2-3.12-bullseye"
RUN apt-get update && apt-get install -y \
libsdl2-dev \
git-lfs \
&& apt-get clean \
&& rm -rf /var/lib/apt/lists/*
devcontainer.jsonのimageを削除し、Dockerfileを利用するように設定します。また、PyxelをインストールするためにpostCreateCommandのコメントアウトを解除します。
{
"name": "Python 3",
"build": {
"dockerfile": "Dockerfile"
},
"postCreateCommand": "pip3 install --user -r requirements.txt"
}
リポジトリのルートにrequirements.txtを作成し、Pyxelをインストールするように設定します。
pyxel
設定ファイルの追加が終わったら、devcontainerを再ビルドします。
ビルドが終わり、CodeSpacesの読み込みが終わるとpyxelが実行できるようになります。例えば、pyxel copy_examplesを実行するとpyxelのサンプルアプリがコピーされます。
6. 拡張機能のインストール
devcontainerでは利用するvscodeの拡張機能を起動時にインストールすることができます。
今回はpyxelの実行をwebで実行できるようにLive Previewをインストールします。
拡張機能を検索し、Live Previewのページの歯車マークをクリックし、Add to devcontainer.jsonを選択します。
devcontainer.jsonにcustomizaitonsが追加されます。
"customizations": {
"vscode": {
"extensions": [
"ms-vscode.live-server"
]
}
}
devcontainerを再ビルドします。
pyxel copy_examplesで作成されたサンプルプログラム01_hello_pyxel.pyを実行して動作を確認します。
リポジトリのルートにindex.htmlを追加します。
<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<pyxel-run root="." name="pyxel_examples/01_hello_pyxel.py"></pyxel-run>
コマンドパレットを開いて、liveと入力してLive Preview: Start Serverを選択します。
エディター内のプレビューが起動しますが、このプレビューでは表示できないため、ブラウザの別のタブで開く必要があります。
ポートタブを開き、Live Previewが公開しているポート番号の転送したアドレスをCtrl+クリックします。
デフォルトでは3000が指定されますが、繰り返し起動すると別のポート番号が使われることもあります。
新しくタブが開かれて、サンプルプログラムが実行されていることが確認できます。
まとめ
この記事では、GitHub CodeSpacesとdevcontainerを利用してPyxel開発環境を構築する方法を説明しました。
年末年始の休暇で帰省して、いつもの開発環境を使えないこともあると思います。
GitHub CodeSpacesを利用すればいつでも同じ環境で開発できるので、暇な時間でちょっと開発したいときに便利です。
それでは良きPyxelライフを。