LoginSignup
3
2

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-01-26

作ったゲームを公開しよう!

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

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

1. GitHubのアカウントを作成する(持っていない人)

こちらの記事を参考に、GitHubのアカウントを作成しましょう

2. GitHub上にリポジトリを作成する

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

GitHubの右上の+ボタンを押し、New repositoryを押します
20230126-113148.png

するとこのような画面になり、リポジトリの情報を入力する画面になります。
image.png
各項目、以下の通り入力しましょう!
image.png
Repository name
ゲームの名前を入れましょう!アルファベットで入力するのがよき!スペースは使わない方がよき!
image.png
ここはPublicを選択してください!
image.png
Add a README fileにチェックを入れます

必要事項を入力し終わると、一番下のCreate repositoryが押せるようになるので、押します!
image.png
これでリポジトリの作成が完了しました!
image.png

3. ファイルをリポジトリにアップロードする

それでは、Pythonのファイルをアップロードしていきましょう!
リポジトリのページを開いて、+ボタンからUpload filesを押します
image.png
するとこのような画面になるので、
image.png
Pyxelのpythonファイルをドラッグ&ドロップします
(resourceがある人はそれも)
image.png
Commit changesを押します
image.png
ファイルが追加されていれば成功です!
image.png

4. webサイトを設定する

ここでは、webサイトを表示するためのhtmlファイルを作成します!

リポジトリの+ボタンを押し、Create new fileを押します
image.png
ファイル名をindex.htmlにして、
Edit new fileの欄に

<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<pyxel-run name="Pythonのファイル名.py"></pyxel-run>

と書きます!
image.png
用意ができたら、画面の下の方のCommit new fileを押します
image.png

5. GitHub Pagesを設定する

いよいよ仕上げです!

リポジトリのSettingsPagesを開き、
20230126-163729.png
Branchの部分のNonemainに変更し、Saveを押します
image.png
上の方にGitHub Pages source saved.と出たら成功です!
image.png
しばらく待つと、Visit siteというボタンが出現します!これを押すと、、、
image.png
無事にインターネット上にゲームを公開することができました!🎉
image.png
このリンクをツイートしたり、友達に送ったりして、自分のゲームをたくさんの人に遊んでもらいましょう!

(余力がある人向け)READMEを充実させよう!

READMEは、リポジトリについての情報をまとめた、いわばリポジトリの顔です!
READMEに、ゲームの遊び方や工夫した点、攻略などを書いて、より良いリポジトリにしましょう!

README.mdの右側にある、🖋のボタンを押します
image.png
するとこのような画面になるので、ここに文章を書きましょう!
image.png
ちなみに、このREADMEはMarkdownという記法で書かれています!

Markdownは、書きやすくて読みやすい記法です!
この記法に則ってREADMEを書くと、
image.png
これだけで簡単に読みやすい文書を作ることができます!

文章を書き終わったら、一番下のCommit changesを押して、
image.png
完成!
image.png

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

参考

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2