【Pyxel】「たった10分で」Pyxelで作ったゲームをブラウザ上で動かす！

## はじめに
　先日Pyxelで作ったゲームをweb上へ公開したので、その公開方法をこの記事で紹介します。難しいことは一切ないので、記事を見ながら手順通りにやってみてください。タイトルについてですが、この方法なら10分くらいで実践できるよという意味です。記事を読んでいる時間はノーカンでお願いします笑。もちろん、手順については、読みながら実践していただいて構いません。


## 公開までの手順
　Pyxelで作ったゲームを公開したい人向けに書いているので、Pyxelはpipしてある前提で進めていきます。また、GitHubを使うので、アカウントを持っていない人は、GitHubのアカウントを作ってから戻ってきてください。面倒なものでもないので、アカウント作成については省略します。

:::note warn
一応筆者の環境も置いておきます
```
OS 名:                  Microsoft Windows 11 Home
OS バージョン:          10.0.22631 N/A ビルド 22631
Python バージョン:      3.11.3
開発環境:               IDLE (Python3.11.3)
```
:::

## 手順１：リポジトリを作成する
　GitHubって全部英語だから、最初は威圧感ありますよね？筆者も全くどこを押せばいいか分からず、最初は戸惑いました。よって、GitHubを使ったことがない人のために、画像付きで手順を説明します。慣れている人は自分で進めてもらえればOKです。

 ![スクリーンショット 2024-11-21 221328.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/68c4e59a-dbe2-32f3-4f13-5062a2d3f095.png)
 　**リポジトリの名前は自由**ですが、**Publicにチェックを入れる**のを忘れないようにしてください。名前を入力したら**Create a new repository**を押してください。
  
## 手順２：index.htmlを作る
　`index.html`っていうのは、そのサイトにアクセスするときに、ファイル名まで指定されていなかったら、暫定的に開かれる奴ですね。今回はこれ以外にhtmlファイルを作らないので、気にしなくてもOKです。とにかく、`index.html`という名前でファイルを作ってください。
 ![スクリーンショット 2024-11-21 221346.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/ffc7e122-fe93-c374-1496-3d425451669d.png)
 この画面で**Creating a new file**を押してください。

　作ったら**ファイル名に`index.html`を入力**して、エディタに**以下の二行をコピペ**してください。**`main.py`の部分は自分のファイル名に書き換え**てください。こちらは`index.html`とは違い、固定ではないので、むしろ変えないとファイルが見つからずエラーが出ます。
```
<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<pyxel-run name="main.py" gamepad="enabled"></pyxel-run>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/caeace5e-97f7-14ca-14b0-515ae97278ed.png)
コピペ出来たら**Commit changes**で適用してください。確認が出てくるので、**もう一度Commit changes**を押したらOKです。

:::note warn
ゲームパッドが要らない人はgamepad="enabled"の部分を削除してください。この後紹介するサンプルで試す人はそのままでお願いします。 
:::

## 手順３：必要なファイルをすべてアップロードする
 ![スクリーンショット 2024-11-21 221540.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/552c5b47-68e2-618d-f68f-fe8360704d51.png)
 Add fileの**Upload files**を押します

 ![スクリーンショット 2024-11-21 221619.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/39f51202-e6b5-f9e9-e4f0-6976fcede291.png)
**ローカルに用意してあるフォルダから必要なファイルをすべてドラッグアンドドロップ**すればいいです。アップロードしたら**Commit changes**で変更を適用してください。ゲームが入っているフォルダの中身を全部入れておけば間違いないです。ただし、バックアップのためにコピーしたファイルとかは、見栄え悪いのでなくした方がベターです。

## 手順４：公開する
　なんともうこれが最後です。Settingsタブに移動して、PagesでBranchを**Noneからmainに変えてSave**します。
![スクリーンショット 2024-11-21 221721.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/a227af45-5916-5a68-1b31-fceaa3ad6e70.png)
あとはちょっと待ってから画面を更新すると、上の方にURLが出てくるので、アクセスして動作確認したら終わりです。

## サンプル
```python: main.py
import pyxel
class App:
    def __init__(self):
        pyxel.init(256, 256)
        self.x, self.y = 48, 48
        self.color = pyxel.COLOR_RED
        pyxel.run(self.update, self.draw)    
    def update(self):
        #十字キー
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_UP):
            self.y -= 2
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_DOWN):
            self.y += 2
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_LEFT):
            self.x -= 2
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_DPAD_RIGHT):
            self.x += 2
        #日本でいうところのAとB、XとYがそれぞれ逆なので注意
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_B):
            self.color = pyxel.COLOR_RED
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_A):
            self.color = pyxel.COLOR_GREEN
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_Y):
            self.color = pyxel.COLOR_YELLOW
        if pyxel.btnp(pyxel.GAMEPAD1_BUTTON_X):
            self.color = pyxel.COLOR_CYAN
        
    def draw(self):
        pyxel.cls(7)
        pyxel.rect(self.x, self.y, 32, 32, self.color)
if __name__ == '__main__':
    app = App()
```
特に作りたいものは決まってないけど、動作確認だけしたいよーという人のためにサンプルを置いておきます。自分のファイルが動かない場合の比較対象としてもご活用ください。特にGAMEPAD「1」を忘れたりとか、ボタンの配置とかが気を付けたいところです。（個人的な感想）

https://prosamo.github.io/web-pyxel/

こんな感じに動きます

## その他の注意点
#### 日本語フォントについて
　外部モジュールが使えないので、`PyxelUniversalFont`が使えません。Pyxelの標準のフォント機能を使い、それで足りない部分はリソースを自作するしかないですね。png形式とかの画像を読み込む機能もPyxelにはあるので、タイトル画面とかだったら、`PyxelUniversalFont`で作った画面をスクショするとか、そういうパワープレーで何とかなったりします。
 
https://prosamo.github.io/glove-dropper/

 こちらが実際に何とかしたものです（一応ゲーム自体に興味を持ってくれた方のために操作説明も置いておきますが、ちょっと難易度調整ミスってるみたいで、難しすぎるらしいです。https://qiita.com/Prosamo/items/e94548b124e703583f25 ）

#### マウス操作について
　一般的な問題か分からないのですが、筆者の環境だと、`pyxel.mouxe_x`とかで取得するマウス操作の座標が、全画面表示になるとずれるんですよね。（画面はぴったり全画面になってるけど、判定は整数倍でしか調整されてないっぽい？）この方法だと全画面表示になるので、必然的にこの問題に直面します。まあレトロゲームを作る目的でPyxelを使ってると思うので、ゲームパッドで代用できる仕様に変更するのが一番かなと思います。

## まとめ
- リポジトリを作成する
- index.htmlを作成する
- 必要なファイルをアップロードする
- 公開する
- 動くか確認して終了！

## 最後に
　ここまで読んで下さりありがとうございました。そこまで難しい操作ではないのですが、筆者はGitHubを初めて使ってゲームをアップしたときに、いろいろ不安を感じながら操作していました。この記事を読んで、GitHubを使う心理的ハードルが少しでも下がっていればいいなと思います。注意ですが、この記事はあくまで動かすことに重点を置いて、できるだけ最低限の操作にしています。実際上GitHubでちゃんとプログラムを公開するなら、READMEとかを付けるのが良いです。

 ## 参考
https://github.com/kitao/pyxel/blob/main/docs/README.ja.md

## 宣伝
pygame版こちら

https://qiita.com/Prosamo/items/de12a90ba026b7517d2a