Pyxelで作ったゲームをネット上に公開しよう！

# 作ったゲームを公開しよう！
Pyxelでゲームを作っているみなさん！せっかく作ったゲーム、色んな人に遊んでもらいたくないですか！？👾
頑張って作ったゲームを自分だけしか遊ばないのはもったいない！🥺

https://twitter.com/sugijotaro/status/1618521846948974592?s=20&t=GfUnyFZpE0UsiHpAobxCLA

この記事では、GitHubと、GitHub Pagesというものを使って、作ったゲームをインターネット上に公開する方法を紹介します！

## 1. GitHubのアカウントを作成する（持っていない人）
こちらの記事を参考に、GitHubのアカウントを作成しましょう

https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d

## 2. GitHub上にリポジトリを作成する
GitHub上に、リポジトリというものを作成していきます！リポジトリとは、ざっくりいうとデータを置く場所のことです！

GitHubの右上の`+`ボタンを押し、`New repository`を押します
![20230126-113148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/79cff48e-1b2d-838c-415c-3b40aa0b06cf.png)

するとこのような画面になり、リポジトリの情報を入力する画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/17d4388e-3c04-71a3-773b-21f2385741e1.png)
各項目、以下の通り入力しましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/2e00ff1e-4730-1888-f5a3-32c07a33b2b7.png)
`Repository name`
ゲームの名前を入れましょう！アルファベットで入力するのがよき！スペースは使わない方がよき！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/6864739a-555a-1f23-8bd3-ad5af95a6eb3.png)
ここは`Public`を選択してください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/8dd0e238-31a2-a440-cccd-743974205a6e.png)
`Add a README file`にチェックを入れます


必要事項を入力し終わると、一番下の`Create repository`が押せるようになるので、押します！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/06148d1a-ea0c-d776-3311-78a54af9d1b9.png)
これでリポジトリの作成が完了しました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/48facb12-2a66-1eb3-0326-a5509321974b.png)

## 3. ファイルをリポジトリにアップロードする
それでは、Pythonのファイルをアップロードしていきましょう！
リポジトリのページを開いて、`+`ボタンから`Upload files`を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/7f66dc79-27d6-d6d9-ea42-e0577329bb10.png)
するとこのような画面になるので、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/6bc8d19c-dd2f-b932-d932-167d5b62f442.png)
Pyxelのpythonファイルをドラッグ&ドロップします
(resourceがある人はそれも）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/49495804-2c40-c394-f201-cd8b6652ddbf.png)
`Commit changes`を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/e49997b6-30fe-a52b-0d27-db878ac27c04.png)
ファイルが追加されていれば成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/5fcb90bf-207f-96d3-3afe-3c029045937f.png)

## 4. webサイトを設定する
ここでは、webサイトを表示するためのhtmlファイルを作成します！

リポジトリの`+`ボタンを押し、`Create new file`を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/90589ae7-9f49-0ffb-b455-acb68d1494a4.png)
ファイル名を`index.html`にして、
`Edit new file`の欄に
```html
<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<pyxel-run name="Pythonのファイル名.py"></pyxel-run>
```
と書きます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/16ce890a-50b3-71f3-c0c1-fb242cbd4003.png)
用意ができたら、画面の下の方の`Commit new file`を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/f18829ad-4c9d-15be-453f-155fd472cc03.png)

## 5. GitHub Pagesを設定する
いよいよ仕上げです！

リポジトリの`Settings`の`Pages`を開き、
![20230126-163729.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/eeb09c6b-fa98-e351-1295-cd8a4004af56.png)
Branchの部分の`None`を`main`に変更し、`Save`を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/2ab94497-1b12-58bb-e559-fea11faa8949.png)
上の方に`GitHub Pages source saved.`と出たら成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/c001344b-cea7-a477-bd08-168dc0adbece.png)
しばらく待つと、`Visit site`というボタンが出現します！これを押すと、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/ea4b84e5-678f-ebc0-9da3-2058ef5b7b09.png)
無事にインターネット上にゲームを公開することができました！🎉
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/ea0540a8-8b65-8805-a5bb-8a4ad49ec839.png)
このリンクをツイートしたり、友達に送ったりして、自分のゲームをたくさんの人に遊んでもらいましょう！

## (余力がある人向け)READMEを充実させよう！
READMEは、リポジトリについての情報をまとめた、いわばリポジトリの顔です！
READMEに、ゲームの遊び方や工夫した点、攻略などを書いて、より良いリポジトリにしましょう！

`README.md`の右側にある、`🖋`のボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/bc349726-34a6-8109-5ee3-f4092674f753.png)
するとこのような画面になるので、ここに文章を書きましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/ceed8421-c4c4-5719-e176-47079e10f0e8.png)
ちなみに、このREADMEは`Markdown`という記法で書かれています！

https://ja.wikipedia.org/wiki/Markdown

Markdownは、書きやすくて読みやすい記法です！
この記法に則ってREADMEを書くと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/b821bb5b-c39f-3acd-3d30-985dcc26ac90.png)
これだけで簡単に読みやすい文書を作ることができます！

文章を書き終わったら、一番下の`Commit changes`を押して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/11a6ca1b-0dca-5b4d-f8e7-2bc588303936.png)
完成！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/8fe8dbc3-6e7d-bc6d-f6fd-35d736159fff.png)


今回作ったリポジトリはこちら！

https://github.com/sugijotaro/shooting-game

# 参考

https://github.co.jp/

https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages

https://github.com/kitao/pyxel/wiki/How-To-Use-Pyxel-Web-(%E6%97%A5%E6%9C%AC%E8%AA%9E)