見出し画像

【Pyxel「歴史クイズゲーム」を 作りました！ 〜構想からGitHub公開までの備忘録〜

ぽぽじろう

https://popojiro.github.io/popo_quize/popo_quize.html?gamepad=enabled
自分で作ったゲームです↑


スマホでも遊べます^^

Pyxelを使って、歴史クイズゲーム（2択問題）を制作しました🐦✨
時代の流れが楽しくつかめるように、
縄文時代から令和までをテーマにしています。
完成後、さっそく子ども（🐤）が遊んでくれました！
今回は備忘録として、
制作のきっかけから完成までの流れをまとめたいと思います。

💡 作ろうと思ったきっかけ

子どもが歴史を習う年になり、「小学校でも結構しっかり学ぶんだな」と実感したのがはじまりです✨

せっかくなら「歴史を好きになってほしい！」 歴史は単なる暗記科目ではなく、先人の知恵を学び、未来へ活かすための教科だと思っています😊
まずは時代の流れをざっくりとつかむため、
遊びやすいクイズ形式にしようと思い立ちました💪🐦

🔰 制作前の私のプログラミングスキル

ちなみに、ゲームを作り始める前の私のスキル感はこんな感じです。

  • VSCodeの開発環境は、調べればなんとか構築できる

  • １か月オンラインプログラミングスクールを利用したことがある。
    その時にAPIキーを漏らさないこと、
    個人情報をコードに載せないことなど セキュリティを学べたのは
    良い経験でした。

  • 過去にUnityで2Dゲームの教本を写経して作ったことがある

  • PythonはBlenderで少し触った程度

  • if文やfor文は調べれば理解できるが、「それをゲームにどう活かすか」が分からない

  • コードは自力では読めない（調べながら時間をかければなんとなく分かるレベル。でもそれを自分で生かすのは難しい…）

「文法の基礎はなんとなく分かるけど、ゼロからゲームを組み立てるなんて到底ムリ！」という状態でした。

🤖 開発について（AIフル活用！）

そんな私なので、今回のコーディングはほぼAIに書いてもらいました。
メインはClaudeを使用し、
制限に達したらGPTやGeminiを併用するスタイルです。
最終的なアップロード前には
セキュリティ上問題ないかなど自分でコードを確認し、整えています。

🚧 制作の流れ（ざっくり）

  1. ゲーム全体の構成をAIに設計してもらう

  2. 仮画像（四角など）でまず動作確認

  3. クイズ1問で動作テスト

  4. 問題数を25問に拡張

  5. 画像素材を作成（Geminiで生成 →それを見ながらPyxelEditorで作成）

  6. タイトル・Fin画像はGPTで作成 → Canvaでリサイズ

  7. BGMの作成と実装

  8. 不要なコードの削除＆APIキー等のセキュリティ確認（ここはどうしても自力での確認が必要！）

  9. GitHubへ公開（ライセンスも記載） ※今回はitch.ioではなくGitHubを使用しました

📁 工夫した点：ファイル構成とデータ分離

後からメンテナンスしやすいように、
ファイルとフォルダの「整理整頓」を強く意識しました。


フォルダ、ファイル構成

■ シーンごとにファイルを分割
個人的に好きな以下のゲームフローに合わせて、
ファイルを分割しました👇
オープニング → タイトル → クイズ → 巻物表示 → 全問正解でエンディング → Fin（画像）

■ データと処理の分離
 「クイズデータ　quiz_data.py」
「巻物データ　makimono_data.py」
をそれぞれ分けたことで、修正や管理が劇的に楽になりました！
短いゲームでも、最初からファイルを分けて作るのはおすすめです。

⚠️ 苦労した点・課題

順調に進んだ部分もありましたが、やはり壁にぶつかることもありました。

■ BGMの取り込み
BGMは、ふれんちさん（@frenchbread1222）が公開されている
「Pyxel Composer」のプリセットから作成しました。
素敵なツールに大感謝です✨

ここからは私のコード理解力の話ですが
エクスポートしたMMLデータをコードへ
組み込む流れにかなり苦戦しました
AIへの指示が曖昧だとエラーが頻発してしまうため、
「AI任せにせず、自分自身でファイル構成や仕組みを理解すること」
の重要性を痛感しました。

■ レイアウトと文字数調整
クイズの文字数制限など、表示の工夫に苦労しました。
「見やすさ」と「整理」を意識しながら進めました👀
また、スマホ操作も想定して、
ゲームパッドのボタン配置などは draw.py で一括管理しています。
フォントは「ふれんちさん」の記事から
k8x12S.bdfを採用しました。

■ UIとデザイン
 UIのベースもAIに作ってもらいましたが、細かい調整は自力で行いました。 128×128ピクセルという画面サイズにしたので、
どうしてもドット単位の調整が必要になります。
色の配置なども自分で考えながら組み上げました。

🎮 制作を振り返って

UIやキャラクターなどのアセットはPyxelEditorで作成し
「16色のみ」という制約があることで逆に迷いが減り、サクサク制作できました👀
制約の中でどう表現するかを考えるのは、むしろ面白いですね。

この2カ月間で、Pyxelを使った作品を3つ（横スクロールゲーム、ショートアニメ、今回のクイズゲーム）作ることができました！

スピード感を持って作れる理由は、間違いなく以下の2つです。

  • AIがコードを書いてくれること
    そして

  • 先人たちのPyxelに関する熱量の高い記事が豊富にあること

Pyxelでの制作、めちゃくちゃ楽しいです✨

この記事が、
「ゲームを作ってみたいけど難しそう…」と思っている
誰かの参考になれば嬉しいです😊

いいなと思ったら応援しよう！