Directorで作ったミニゲームをGodotで再構築する（その1-2）
オリジナルのベタ移植だとゲームとしてあまりにシンプル過ぎるので、いろいろとバージョンアップさせることにした。
休みの日や夜中にちょっとずつやってるので進みが遅い。
追加・変更箇所
今回このくらいの追加・変更を行った。
たこ焼きの数表示をリアルタイムカウントに変更（箱完成でリセット）
BGMを3種類追加（タイトル・ゲーム中・ゲームオーバー）
ゲーム中BGMのテンポが残り時間に応じて段階的に上昇（75秒・30秒・10秒以下の3段階）
SEを15種類追加（ボタン操作・ピック/カップの取得と返却・タネ入れ・具入れ・ひっくり返し・ピックで刺す・箱詰め・ソース・蓋・箱スライドなど）
音ON/OFFボタン追加（BGM・SE全て制御）
Web版は起動時ミュート、Win/Macは自動再生のプラットフォーム分岐
タイムボーナスの実装
遊び方画面（8枚の画像をクリックで切り替え）
この状態でitch.ioにアップして公開しようかなと少し思ったんだけど、このゲームにはなかったけど、かつてDirectorのWebブラウザゲームではスコアランキングを採用してたことが結構あったのを思い出した。
せっかくなのでそこまでやってみることにしようと思いClaudeにいろいろ質問。最初はSilentWolfってのを勧められたんだけど、ネットで調べたらセキュリティーに問題があると言っている人がいたので却下。最終的にTaloってのを使ってみることにした。無料で使えるしGodot用のプラグインもあるのでね。
Taloのアカウントを作ってゲーム用のダッシュボードを作っていろいろ設定して。スクショとか全然撮っていないので詳細は割愛。AIに訊きながらやれば全然問題ない。
スコアランキングの仕様を考える
オンライン状態であればWindows・Mac・HTML5の全バージョンでスコアランキングを競える。そこで、どんな仕組みにしようか考えた。
自動的にスコアを書き込みに行くのは駄目だと思った
自己記録を更新した時だけスコアランキングに参加できるようにしたい
そこでClaudeに以下の仕様を伝えた。
・ローカルに自分のハイスコアを保存する（最初は0点）
・画面の左端かどこかにオンラインランキング参加バッチを表示（初回起動時は×マーク付き）→これは文言に変更
・最初の画面に「オンラインランキング設定」ボタンを追加
・そのボタンをクリックで以下の項目を表示
・ニックネーム（テキスト入力）（1回決めたら変更できない）
・オンラインランキングに参加（チェックボックス）
・「OK」ボタン
・ニックネーム未入力でオンラインランキングにチェックだけしてOKすると警告（システムダイアログで良い）
・オンラインランキングに参加をチェックしてニックネームを入れてから「OK」ボタンクリックでオンライン参加バッチからバツが消える→文言表示に変更
・この状態で自己記録を更新したらゲームオーバー時に「スコアを送信する」ボタンを表示（初回は絶対出る）
・「スコアを送信する」ボタンをクリックしないとスコアはtaloに送られない
ゲーム作りの専門家ではないので、いろいろと詰めが甘いかもしれないけどこんなもんかな？
Taloはプレイヤーを内部IDで管理するので、ニックネームを変えても同一プレイヤーとして扱われるとClaudeが言うので、固定にする仕様はやめた。
※最終的にこれは嘘だということが分かった……
スコアランキングシステムの実装その1
まずはローカルに自己新記録を保存する部分から。もう全部Claudeに丸投げ。実装を進めてチェックしていたらバグがいろいろと出てくる。
・ソースアニメ中にたこ焼きが箱に入るバグ
・リトライ後に遊び方ボタンが表示されるバグ
・リトライ後に音量ボタンがONに戻るバグ
・音量OFF時にクリック音などが鳴るバグ
バグを直して、ローカルに自己新記録を保存できるようになった。テスト用に自己新記録のデータを0に戻すボタンを用意した。
スコアランキングシステムの実装その2
次はClaudeに勧められたTaloのアカウントを作った。＋New gameでたこ焼き名人用の何かを作成。そこにスコアランキング用のキーを作ってスコアの書き込みができる入れ物はできた。
全然スクショ撮ってないので文字だけになっちゃうけど、次はゲーム内にキーを埋め込んで自己記録を更新した時だけ、ボタンクリックでTaloに送れるようにする。
コードは全部Claude任せ。だが、ちょいちょいバグも見つかるのでその都度潰す。趣味で1人で作ってるのでデバッグも1人。辛い……。
そして自己記録を更新すると「スコアを送信する」ボタンが表示される。デバッグ用に制限時間を2分半から30秒にしているので少ししか作れない。最初はわざとすごく少ない数しか焼かないから良いんだけど。
「スコアを送信」ボタンをクリックするとTaloにスコアデータその他が送信される。通信中は画面を暗くするのだ。
通信がうまく行ったらシステムダイアログで成功を知らせる。
最後にちゃんとスコアがTaloに送られたかを確認するとバッチリ！
これでネットを使ったスコアランキングの仕組みがかなり出来上がった！
記録の表示方法でハマる
Taloに送られたデータをどうやって表示するか、これもClaudeに訊いていろいろ調査してもらった。
そしていろんな提案があった。エンジニアの人から見たら、何こんなことで悩んでるのと思われるだろう。知識が無いのだから仕方がない。
AIがない時代ならここまでやろうとは思わなかった。
Claudeにハイスコアを読み込むhtmlを書いてもらった。最終的にはphpになったけど、どちらもそんなに違いはない。ここでも一発で上手くスコアは表示されなかった。Claudeが試行錯誤と調査を重ね、自分もClaudeの指示でChromeのデベロッパーツールのエラーを見て教えたりとかしてかなり難儀した。
itch.ioの説明欄にClaudeの書いたhtmlを直接貼っても動かないことが分かった。そこで、Claudeは以下の提案をしてきた。
・GitHubのリポジトリをPrivateからPublicにして、docsフォルダを作ってその中にhtmlを突っ込んで、それをitch.ioの説明文の中にインラインフレームで書いて表示させろ
・Netlify Dropってとこ使えそうだからアカウント作ってみろ
しかし、GitHubのリポジトリをPublicにすると、自分が描いたパーツなどが全部赤裸々に公開されるのでそれは避けたいので却下。
Netlify Dropも何となく却下。
レンタルサーバーを借りる
ここまでは全部無料でやってみるがコンセプトだったのに、さんざん悩んでレンタルサーバーを借りることにした。レンタルサーバーさえ借りておけば、何かあって別の実験とかしたくてもいろいろできるだろうなと思ってさ。
最終的にさくらインターネットのレンタルサーバーのスタンダードプランを借りることにした。でもってドメインも取った。ドメインは1年で3,000円ちょいだし、サーバの維持費は月払いにしたので毎月600円かかるがNetflixより全然安いので良いと思うことにした。
レンタルサーバーが使えるようになるまで少し時間がかかるので、その間に今後どうすべきかClaudeに相談する。
時間の経過で無料SSLの設定ができるようになったりFTPサーバに接続できるようになった。
そして、サーバ上にClaudeの書いたphpをアップしたらTalo上のスコアが表示できるようになった！道のりは長かったよ……。
ここからも苦労の連続で、レンタルサーバー上のphpをitch.ioの説明文の中にインラインフレームで書いて表示させるんだけど、ここも一発でうまく行かず、Claudeの協力を得ながらかなり試行錯誤してついに表示できるようになった！
今回はここで一旦終了。あとは今いじっている「たこ焼き名人_改」をもう少し動作確認してからHTML5書き出ししてitch.ioにアップして、説明文など書いたら一応完成。
つづく
