開発04.釣りタイミング/ 開発初心者はアセット設定に大苦戦をした。

ゲーム制作勉強中の麗です!

「小さくても動くゲーム」を作りながら学ぶ大作戦を行なっています。

今回もGodot4というゲームエンジンを使って、ゲームを制作しました。

今回のアイデアは「Godot4 × 初心者 × 1日程度で作れる」の3条件を提示して、ChatGPTにお任せしました。

そして開発に着手したのが「釣りタイミング」。

魚がかかったらクリックして釣るシンプルなゲームです。 レアな魚ほど猶予時間が短くなり簡単には釣れません。

制作の流れ

1.設計:ChatGPT

2.実装:Codex

3.画像:ClaudeCodeのサポートのもと画像作成と調整

 

実装はCodexに依頼し、下記セッションに分けて行いました。

  • タイミング釣りゲームの基本ロジック(待機→HIT→釣り上げ)
  • 釣り竿ショップ(4種の竿、reaction_bonus による難易度変化)
  • 魚図鑑(5種の魚、レア度・発見数の記録)
  • 釣り画面のビジュアル(空・海・雲・波・釣り竿・浮き・魚シルエットをコードで描画)
  • 文字の視認性改善、タブUIによるページ切り替え

工夫したこと

今回の工夫は何よりも、画像でした!💦

  • 魚6枚+竿4枚、計10枚分をChatGPTで生成
  • AI生成画像を加工(透過、サイズ調整、左右反転、つり糸削除)

生成・加工した画像を配置すると、何故か白い四角で表示されてしまいました。透過処理はしてるのになぜ?

原因は、ClaudeCodeによると下記だそうです。(私にはさっぱり意味がわかりません💦)

  • 根本原因**: Godotのインポートシステム(CompressedTexture2D)経由だとアルファチャンネルが正しく処理されなかった
  • 対策: テクスチャキャッシュ辞書(_texture_cache)も追加しパフォーマンスを確保

白い四角問題が解決したあと、直面した問題が「つり竿の位置がおかしい」でした。

仮UIの時点で回転させていたのですが、生成画像がすでに回転されているため二重回転になっていたことが原因のひとつで💦

回転なしで配置してもまだ不自然すぎる感じになり、画像サイズと位置を微調整。

「65か?66か?いやいや、65.5か?」みたいな微調整なので、さすがにこれは私自身がコードを触りながら調整しました。

そして、つり竿を複数用意したので、竿ごとに微妙にカーブが異なり、位置やサイズが変わる悩みにも直面💦

何百回とロードしながら調整していきました。

がんばった!!!

その他の工夫

魚の種類は5匹と少ないながらも図鑑にチャレンジ!

ショップ画像も別画面が開くようにしました。 (※水槽シュミレーションの反省点)

評価

ClaudeCodeによる評価です。

  • 完成度: ビジュアル付きの遊べるゲームとして完成(釣り・ショップ・図鑑の3画面)
  • 学習効果: Godotの描画API、テクスチャ読み込み、AI画像生成のワークフローを習得
  • 成長実感: テキストベース → AI画像付きゲームへの大きなステップアップ

振り返り

「釣りタイミング」はとにかく、つり竿がの位置調整が全てを持っていった感です。

骨の折れる作業ではありましたが、座標や比率の感覚がほんの少しだけ身についた気がします。コードも何となく分かることが増えました。

勉強になったので、良しです👌

遊んでみた感想としては、意外と楽しかったです。

「図鑑を制覇したい」 ←これがプレイにおいて大きなモチベーションになることも感じました!