タイトル画像
琴葉茜

さて、ホッケーゲームが完成したことだし、誰かに遊んでもらえるようにしていこうか!

琴葉葵

っていうことは、実行ファイル化するってことだよね??
それなら、じゃんけんアプリを作った時と一緒で「PyInstaller」を使うんじゃないの?

琴葉茜

実質的にはそうなんだけど、今回はPyxelに付いている機能を使った実行ファイル化の方法を紹介するよ

琴葉葵

「実質的」...とは??

琴葉茜

Pyxelで実行ファイル化する機能はPyInstallerを使ってるから、事前にPyInstallerもインストールする必要があるんだよね

琴葉葵

ああ!それで「実質的」なんだね!!

琴葉茜

ということでまずは、ファイルの整理からしようか!
最初にフォルダ「hockey_game」を作って、今回作った「hockey.py」と「assets.pyxres」を入れよう

琴葉葵

もうすでに自分でホッケーゲーム用のフォルダを作ってたら別にそれで良いよね??

琴葉茜

そうだね!それで大丈夫!!

琴葉茜

次に、ここが重要なんだけど、カレントディレクトリはフォルダ「hockey_game」が置かれているフォルダに設定してほしいんだ

琴葉葵

「hockey.py」とかが置かれている場所じゃなくて、一個手前のフォルダだね

琴葉茜

もし、カレントディレクトリが「hockey.py」の置かれているフォルダになっている場合は、ターミナルで「cd ..」とすればOKだよ!

琴葉葵

おっけー!フォルダはデスクトップに置いてたから、カレントディレクトリをデスクトップに変更したよ!

琴葉茜

そしたら次は、「仮想環境」の設定をしようか
今回の仮想環境名は「hockey_venv」にしておこう

python -m venv hockey_venv
.\hockey_venv\Scripts\activate
python3 -m venv hockey_venv
source hockey_venv/bin/activate
琴葉茜

もし、Windowsで実行したときに赤字で「セキュリティエラー」が出たら、下のプログラムを実行してからもう一度試してみてね

Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope Process
琴葉葵

準備完了!ちゃんとターミナルの一番左に「(hockey_venv)」が表示されたよ!

琴葉茜

もうその辺りはバッチリだね!じゃあその状態で「Pyxel」と「PyInstaller」をpipでインストールしよう

pip install pyxel pyinstaller
pip3 install pyxel pyinstaller
琴葉葵

インストール完了!

琴葉茜

ここからが新しい方法になるよ!
Pyxelでは、実行ファイルを作る前に「パッケージング」をするんだ

琴葉葵

パッケージング?プログラムをまとめちゃうって感じかな

琴葉茜

まぁそんな感じだと思っておけばOK!
早速、ターミナル上で次のコードを実行してみよう

pyxel package ./hockey_game ./hockey_game/hockey.py
琴葉茜

「hockey_game」のところは、自分が作ったフォルダの名前に合わせてね

琴葉葵

なんか、「hockey_game.pyxapp」ってファイルが出来たよ!

琴葉茜

それがパッケージングされたPyxelのゲームだよ!
無事に出来たら、ファイル名を「hockey_game.pyxapp」から「hockey.pyxapp」に変更しとこうか

琴葉葵

ん?わざわざ変更しないといけないの?

琴葉茜

前のバージョンは変更しなくても大丈夫だったけど、最近のバージョンでは実行ファイルを作る時にファイル名と同じ名前のフォルダを作ろうとして、元のプログラムのファイルが上書きで消えちゃうかもしれないんだよね(汗)

琴葉葵

それは怖いね...

琴葉茜

せやろ
んで、名前の変更が出来たら、次のコードを実行すると実行ファイルが完成するはずだよ!

pyxel app2exe hockey.pyxapp
琴葉葵

おお!「hockey.exe」が完成した!!ダブルクリックでちゃんと起動するよ!

琴葉葵

だけど、この流れならPyInstallerで実行ファイル化した方が楽じゃない??

琴葉茜

そこが今回のポイント!
今紹介した方法を少し変えるだけで「ブラウザ上で動作する形」に出力する事も出来るんだ

琴葉葵

なんと!?...そういえば、Pyxelのサイトでデモのゲームが遊べたね!

琴葉茜

そうそう
しかも、その方法はさっき実行ファイル化した時のコードの「app2exe」を「app2html」に変更するだけで作ってくれるよ!

pyxel app2html hockey.pyxapp
琴葉葵

それだけで良いんだ!
こうやって出力形式を変えるために「パッケージング」が必要だったんだね!

琴葉茜

そういうこと
こうやって出力されたデータは「HTMLファイル」になっているから、ゲーム投稿系のサイトや「GitHub Pages」などで公開することができるよ

解説画像0
琴葉葵

おおーーー!「hockey.html」をダブルクリックしたらブラウザが開いてゲームが出来た!!

琴葉茜

...ということで、ここからは「GitHub Pages」で公開する方法を説明するね

琴葉葵

よろしくお願いします!!

琴葉茜

その前に、さっき作った「hockey.html」を「index.html」に名前を変更しておいてね

琴葉葵

了解!

琴葉茜

そしたら最初に、Webアプリの時と同じく「GitHub」にアクセスしよう!
再度ログインが必要な場合はログイン情報を入力してね

琴葉茜

アクセスするとおそらく、自分のメインページにいると思うから、「New」と書かれた緑色のボタンをクリックしよう

解説画像1
琴葉葵

クリックしたら、新しいリポジトリを作る画面が出てくるね!

解説画像2
琴葉茜

今回のリポジトリ名は「hockey_game」にして、公開情報は「Public」にしておこうか

琴葉葵

今回の公開情報は「Private」じゃないんだね

琴葉茜

無料枠内でサイトを公開する場合は「Public」じゃないとダメみたいなんだよね

琴葉葵

じゃあ、秘密の情報とかの扱いには気を付けないとだね...!!

琴葉茜

入力が完了したら、右下の「create repository」をクリックしよう

琴葉茜

クリック後はリポジトリのメイン画面が表示されるはずだから、「create a codespace」をクリックして、移動したページの「create new codespace」をクリックしよう

解説画像3
琴葉葵

こうすればブラウザにVSCodeの画面が出てくるんだよね!
ちゃんとフォルダの名前が「HOCKEY_GAME」になってるよ!

解説画像4
琴葉茜

大丈夫そうだね!そしたら、この中に「index.html」と「hockey_game.pyxapp」をドラッグアンドドロップで追加しよう

解説画像5
琴葉茜

あとは前回と同じく、「ソース管理」の項目で「メッセージ」を追加して「コミット」ボタンをクリック後、「変更の同期」をクリックして元のページに戻ろう

解説画像6
琴葉葵

うん、レポジトリのメインページに戻ったらちゃんと反映されてるね!

解説画像7
琴葉茜

メインページに戻ってきたら、一番右にある「Settings」っていうタグをクリックして、その下の方にある「Pages」を選ぶと次のような画面が出てくるよ

解説画像8
琴葉茜

この時の「Branch」の項目の左にある「None」を「main」に変更して、「Save」をクリックしよう

解説画像9
琴葉葵

あ!なんか、上のところに「GitHub Pages source saved.」って出てきた!

解説画像10
琴葉茜

それが出てきてからブラウザを更新すると、「Visit site」ってボタンが出てくると思うよ!
もし出てこない場合は少し待ってからもう一度更新してみてね

琴葉葵

お!「Visit site」が出てきたよ!

解説画像11
琴葉茜

そしたら、それをクリックしてみて!

解説画像12
琴葉葵

ゲームが...出来る...!!!!!

琴葉茜

完璧だね!!公開おめでとう!!

琴葉茜

あとは、このURLを共有すれば誰でも遊べるようになるよ

琴葉葵

流れさえ覚えたら簡単にブラウザゲームを公開出来るようになるね!

琴葉茜

ちなみに、今回はスペースキーでゲームが始まるようにしてるからダメだけど、スマホで起動すると画面に十字キーと4つのボタンが出て来るから、スマホ対応のゲーム作成も出来るよ!

解説画像13
琴葉葵

マジでか!!

琴葉茜

今回の公開方法以外にも国内のゲーム投稿サイト「ふりーむ!」や海外のゲーム投稿サイト「itch.io」などにも公開可能だよ!

琴葉茜

サイトごとに公開するためのルールと投稿方法があるから、それについては自分で調べてチャレンジしてみてね!

琴葉葵

たくさん良いゲームを作って、皆に遊んでもらえるようにしたいね!!

琴葉茜

ちなみに、もっと複雑なゲームや3Dゲームを作りたいなら、Pythonじゃなくて「Unity」や「Unreal Engine」、「RPGツクール」や「ティラノスクリプト」みたいなゲーム制作に特化したものを学ぶのが良いと思うよ

エンジン名代表的なゲーム公式サイト備考
Unity
原神 / Among Us / Hollow Knight(ホロウナイト)
世界的に最も普及している汎用ゲームエンジン
Unreal Engine 5
フォートナイト / FINAL FANTASY VII REMAKE / 鉄拳8
高画質リアルタイム3Dに最適。大型商用作品に多用
Godot
Caramel Mokaccino(Steam版で日本語あり)
軽量で2Dに強い。オープンソースかつ日本語対応も進行中
GameMaker
Undertale(アンダーテイル) / Hyper Light Drifter
2DアクションやRPGに最適。日本語化された名作多数
RPGツクール(MV/MZ)
To the Moon / いりす症候群! / OneShot(日本語版あり)
ノンプログラムでJRPGが作れる王道ツール
WOLF RPGエディター
Ib(イヴ) / 魔女の家 / 霧雨が降る森
完全無料で国内ノベル・ホラーRPGの名作が生まれた
ティラノスクリプト
廃深 / フリー・同人ノベル多数(日本語専用)
ノベル・ADVに特化したHTMLベースエンジン
Ren'Py
Doki Doki Literature Club(ドキドキ文芸部!)
多言語対応で、日本語化されたノベルゲームも多数
Construct 3
Mindustry(マインダストリー)
ノーコードでWebやスマホ向けに強い
GDevelop
自由創作系多数(例: Lil BUB's HELLO EARTH – 日本語対応)
初心者・教育向け、ノーコードで日本語対応も進行
Scratch
教育向けゲーム多数(公式ギャラリーで日本語タグ検索可)
子供のプログラミング学習用に設計
Cocos Creator
非公開事例が多いが、スマホゲーム(中国系)が日本語展開
TypeScriptベース。モバイル向けに最適
CryEngine
Hunt: Showdown(ハント・ショーダウン)
超写実的グラフィックが強みの重量級エンジン
PICO-8
Celeste(セレステ)※PICO-8版が存在
レトロ感ある8bitゲーム制作が可能
琴葉葵

ゲームジャンルに合わせて得意不得意があるみたいだし、自分の作りたいものに合わせて使うのが大事かもね

琴葉茜

他のツールについて学びなおすのは大変かもしれないけど、プログラムの基礎的な知識や考え方は既に身についてると思うから、きっとうまくやれるはず!

琴葉葵

そうだね!これからも頑張ってみる!!