挨拶
皆様初めまして、某企業の森田と申します。
結論
話題のエージェントなどで簡易的なゲームであれば誰でもすぐに作れる
やってみようとおもったきっかけ
最近のエージェントの威力を知りたかったから。
ゲームって作ったことがある人ならわかるかと思いますがいろいろな要素を含んでいてまさにエージェントの威力を試せる方法と思いました。BGM,敵キャラクターの画像,ストーリー,デザイン,これだけではないもっと様々な要素を考え作って準備していかなければいけないからです。（今回のゲームはただのお試しなのでまったく本格ではないです）
何をしたの？
◇概要
Gensparkエージェントでゲームを作り、Claudeで仕上げてから1itch.ioに販売登録をした。
◇詳細
１：以下プロンプトをGensparkエージェントに投げてhtml5作成
プロンプト文
📝 基本プロンプト
「ドラゴンPythonicクエスト」というPythonプログラミング学習RPGゲームを作成してください。
## 基本仕様
- HTML5/CSS3/JavaScriptで作成
- ブラウザで直接プレイ可能
- モダンなデザインと美しいUI
## ゲームシステム
1. **タイトル画面**: アニメーション付きの魅力的なオープニング
2. **2Dマップ移動**: WASDキーで1マスずつ移動できる勇者キャラクター
3. **敵との遭遇**: マップ上のモンスターマークに触れると戦闘開始
4. **クイズバトル**: Pythonプログラミングの選択式問題
5. **ストーリー**: 各敵ごとにドラマティックな背景ストーリー
## 学習内容（12のトピック）
1. クラスとオブジェクトの基礎
2. 継承とsuper()
3. カプセル化と@property
4. ポリモーフィズム
5. モジュールとimport
6. 特殊メソッド
7. @staticmethodと@classmethod
8. 例外処理
9. イテレーターとジェネレーター
10. デコレーターパターン
11. シングルトンパターン
12. ファクトリーパターン
## デザイン要件
- 濃い背景に白文字で読みやすい問題文
- 正解時は「マップへ戻る」、不正解時は「冒険再開」ボタン
- 勇者キャラクター（🗡️）とモンスターマーク表示
- 背景（木、川、山）は固定で動かない
- BGM機能付き
## 技術要件
- 単一HTMLファイルで完結
- レスポンシブデザイン
- 正確なコード表示（インデント保持）
- 詳細な解説システム
🎨 画像生成プロンプト
# モンスター画像生成用
「RPGゲーム用の12種類の多様なモンスター：炎のドラゴン、水の精霊、土のゴーレム、風のガーゴイル、光の天使、闇の悪魔、雷エレメンタル、毒植物モンスター、氷スライム、機械ロボット、火のフェニックス、嵐雲エレメンタル、ファンタジーRPGスタイル、敵キャラクター用」
# 個別モンスター生成例
「Fire dragon breathing flames, red and orange colors, RPG boss enemy, fantasy art style, menacing pose」
「Water elemental spirit, blue translucent body, flowing water magic, RPG enemy, mystical appearance」
🎵 音楽生成プロンプト
# BGM生成用プロンプト
1.「Epic fantasy medieval castle background music, orchestral, majestic, royal atmosphere, looping, RPG game soundtrack style」(お城BGM)
2. \"Adventure field music, peaceful overworld theme, fantasy RPG style, light orchestral, walking through plains and forests\"(フィールドBGM)
3. \"Intense battle music, RPG combat theme, fast-paced orchestral, drums and brass, epic fight music\"(戦闘BGM)
4. \"Victory fanfare, triumphant theme, short celebration music, RPG win sound, orchestral victory\"(勝利BGM)
5. \"Game over sad music, melancholy orchestral theme, defeat sound, somber atmosphere, RPG game over theme\"(ゲームオーバーBGM)
🔧 技術的詳細プロンプト
## 追加の技術要件
### マップシステム
- 5×5グリッドのマップ
- 勇者は中央(2,2)からスタート
- 各マスは32px単位で移動
- 背景要素（🌲🌊⛰️）は完全固定
- モンスターマーク（🔥💧🗿⚡等）も固定位置
### クイズシステム
- 実際のPythonコードを使用
- 正確なインデントとシンタックスハイライト
- 4択の選択肢
- 正解・不正解両方に詳細な解説
- 解説読み終わりボタンで手動進行
### UI/UXデザイン
- カラーパレット: 深い青(#1a1a2e)、金色(#ffd700)、白(#ffffff)
- グラデーション背景とアニメーション効果
- カード型デザインと立体的な影効果
- モバイル対応のレスポンシブデザイン
### 状態管理
- ゲーム状態の適切な管理
- 解説文の完全リセット機能
- BGMの自動切り替え
- エラーハンドリング
🎯 ストーリー作成プロンプト
## ストーリーシステム
各モンスターに以下の要素を含むストーリーを作成：
1. **遭遇時のセリフ**: モンスターの脅威的な一言
2. **背景ストーリー**: なぜ戦う必要があるのか
3. **勝利後のセリフ**: 倒した後の達成感
4. **学習との関連**: そのプログラミング概念がなぜ重要か
例：
- 🔥炎のドラゴン: 「グオォォ！クラス設計の秘密を燃やしてやる！」
- 背景: 古代の図書館が炎に包まれ、プログラミングの知識が失われる危機
- 勝利後: 「クラス設計の秘伝書が救われました！」
🚀 最終統合プロンプト
上記の全ての要素を統合して、以下の特徴を持つ完全なHTML5ゲームを作成してください：
✅ 単一ファイルで動作完結
✅ モダンで美しいデザイン
✅ 教育的価値の高いコンテンツ
✅ 没入感のあるRPG体験
✅ itch.ioで販売可能なクオリティ
✅ 初心者にも分かりやすい操作性
✅ プログラミング学習の効果的な仕組み
特に、背景固定、解説読み時間確保、直感的な操作性に注意して作成してください。
２：（必要であれば）Claudeで修正。理由はGensparkの改修は、必要箇所以外を変えてしまう傾向が強いためです。
３：2Repositoryをgit cloneしてそこにあるhtmlを上書き。ディレクトリ毎回作るの面倒なので自動作成シェルスクリプト作りました。といってもこれもClaudeで作ったものです。
４：setup_itch_complete.shを実行（chmod +xは忘れずに）
このシェルを実行すると
✅ itch.ioへゲーム投稿するディレクトリ構造の作成
（gensparkで作ったコードはローカル保存からの使用ではなかったため）
✅ 音楽ファイルのダウンロード＆正しい名前で保存
✅ 画像ファイルのダウンロード＆正しい名前で保存
✅ HTMLファイル内のURLをローカルパスに自動置換
✅ manifest.json、README.mdなどの作成
✅ itch.io用のZIPファイル作成
（sudo apt-get install zipを事前にやっておいたほうがいいです。詳細はrepositoryのREADME.md。）
５：https://itch.io/ でユーザー登録
６：アカウント設定にアクセス
Account Settingsをクリック
PUBLISHERクリック
税務情報（Tax information）⇒毎月$600以上などなければインタビュー不要らしい
支払い方法（Payment methods）⇒PaypalでOK
収益分配設定（Revenue sharing）⇒10％でOK（源泉徴収で30％引かれるらしい）
７: ゲームプロジェクト作成
**「Upload new project」**をクリック
基本情報を入力
Title: Dragon Pythonic Quest: Programmer's Grand Adventure
Project URL: dragon-pythonic-quest
Short description: 簡潔な説明
Genre: Roll-Playing Game
ステップ4: HTML5ファイルのアップロード
必要なファイル構成:
game_folder/
├── index.html # メインHTMLファイル
├── style.css # CSSファイル
├── script.js # JavaScriptファイル
├── assets/ # 画像・音声ファイル
│ ├── images/
│ └── audio/
└── manifest.json # ゲーム情報（オプション）
短い説明またはキャッチフレーズ:
Learn Python OOP through an epic RPG adventure! Defeat 12 monsters while mastering programming concepts
分類：ゲーム
プロジェクトの種類：HTML
リリースステータス：リリース
価格：0円
寄付：300円
アップロード：zipをアップ
埋め込みオプション：ページに埋め込む、手動でサイズ設定 960px 720px
フレームオプション：
☑モバイルフレンドリー-プロジェクトはモバイル端末でも実行できます（低解像度とタッチサポート）。
☐ページ読み込み時に自動的に開始する- 読み込み時にブラウザの遅延が発生する可能性があるため、Unity ゲームには推奨されません。
☑フルスクリーンボタン- 埋め込みの右下にボタンを追加してフルスクリーンにします
☑スクロールバーを有効にする- プロジェクトを含むiframeでスクロールバーを有効にします
☐SharedArrayBufferサポート— (試験的)ページまたはプロジェクトの一部が動作
詳細：
# 🎮 ドラゴンパイソンクエスト
ゲームプレイを通じて Python オブジェクト指向プログラミングを学べる革新的な教育 RPG!
## 🌟 機能
- **12の壮大な戦い**: 各モンスターは異なるOOPコンセプトを表します
- **インタラクティブ学習**: プログラミングの質問に答えて敵を倒しましょう
- **美しいグラフィック**: 手作りのピクセルアートとアニメーション
- **オリジナルサウンドトラック**: さまざまなシーンに合わせた7つのユニークなBGMトラック
- **日本語/英語完全サポート**:世界中の学習者に最適
## 📚 学習内容
1. クラスとオブジェクト
2. 継承とsuper()
3. カプセル化と@property
4. 多態性
5. モジュールとインポート
6. 特殊メソッド (__str__, __eq__)
7. 静的メソッドとクラスメソッド
8. 例外処理
9. イテレータ
10. デコレーター
11. シングルトンパターン
12. ファクトリーパターン
## 🎯 最適です
- プログラミング初心者
- Pythonを学ぶ学生
- 教育ゲームを探している教師
- OOPの概念に興味のある人
- コーディングを学びたいRPGファン
## 🕹️ 遊び方
- **WASD** キーを使用してヒーローを移動します
- モンスターをタッチして戦闘を開始
- プログラミングの質問に正しく答えて勝利をつかむ
- 12 体のモンスターをすべて倒してプログラミング王国を救おう!
## 🌐 言語
現在、コード例と説明付きの日本語版が利用可能です。
英語翻訳は近日公開予定です!
## 💡 教育的価値
このゲームは抽象的なプログラミング概念を具体的な課題に変換します。
OOPを直感的に楽しく学べます。モンスターとの戦闘ごとに
具体的な概念と実用的なコード例。
## 🎨 クレジット
プログラミング教育コミュニティへの愛情を込めて作成されました。
すべてのアートワークと音楽はオリジナルの作品です。
---
*今日からプログラミングの冒険を始めましょう!*
Publicを選択し保存でゲーム登録完了です。（https://abcdefboy.itch.io/dragon-pythonic-quest
とりあえずのリリースを終えて
決して本格ゲームではないですがなんとなく作れました。シェルスクリプトを作る時間をのぞいたらほんの数分でリリースできました。ゲームのコンセプトも、文章も、ストーリーも、音楽も敵のキャラクターもすべてGensparkエージェント作成です。改修時は、あれが直されたらこれがダメにを繰り返していたのでClaudeに最後お願いしました。「ここだけ直してね」と。
あとは、自分が何を作りたいのかでなんでも作れる気がしてます。サウンドノベル、ホラー、格闘ゲーム、FPS、便利な世の中になったとつくづく思います。
今後
今度はエージェントに、3ImageFXで部分修正をし、その画像をプロンプトに4ヒッグスフィールドを使って映画なみのシーンを作り、5Kling AIにて動画に効果音を入れて、ゲームや映画制作を作れるか試そうと思います。またあるかわかりませんが、それまで👋