週末にClaude Codeを使って良いゲームを作った方法

よっしゃ、ゲーム作るで！今回の具体的なゲームについては、AIに勝手にアイデア考えさせるんやなくて、俺とプロデューサーのデイブが一緒にブレインストーミングして、面白そうやなって思ったアイデアがあるんや。

そのゲームは仮に「Library Survivors」って呼んでるねん。バンパイア・サバイバーズのゲームにめっちゃ似てるけど、プレイヤーは図書館員なんや。騒がしい子供らが本を棚から取って、それをマップ中に散らかしまくる中で、本を片付けなアカンのや。図書館員として、あちこち回って本を拾って、本棚に戻すんや。ゲームが進むにつれて、どんどん多くの子供らが図書館に入ってくる。そいつらはどんどん騒がしくなって、本棚からもっとたくさんの本を引っ張り出すんや。

あんたの仕事は、圧倒される前に、ずっとこの本らを拾って本棚に戻し続けることや。ちっちゃなカオスメーターがあってな、このカオスメーターは、地面に本が多いほど、どんどん早く上がっていくんや。カオスメーターが100％に達する前に、地面からすべての本を拾い上げなアカンのや。

バンパイア・サバイバーズを知ってたら、ちょっと複雑に聞こえるかもしれんな。これは逆バンパイア・サバイバーズゲームみたいなもんで、大群の子供らがおるんやけど、子供らは実際には図書館員を避けようとしながらカオスを起こしてて、図書館員は子供らを追いかけて、本を拾って棚に戻そうとしてるんや。

ゲームコンセプトの詳細設計

さて、ゲームのコンセプトができたから、俺はゲームの基本的なアイデアを打ち込んだんやけど、ChatGPTにもっと肉付けしてもらいたいねん。この以下のゲームコンセプトを肉付けするのを手伝ってくれ。ゲームプレイループ、パワーアップ、勝ち負けのシナリオ、時間とともに難易度を上げる方法、そして俺が完全に考え抜けてない他の必要なゲームプレイ要素について手伝ってくれ。

今回は、実際にo3 Proにアップグレードするつもりやねん。もしo3や4oしか持ってなくても、かなりええ仕事をしてくれるはずや。ただ、これについてもうちょっと時間をかけて考えてもらいたいねん。提出して、このゲームについて本当に推論して考えるのに1分くらいかかるやろな。

GPTがこれについて考えるのに5分ちょっとかかって、このゲームがどうあるべきかについて、かなり詳細なアウトラインと分析をまとめてくれたんや。ゲームメカニクスからキャラクターアップグレード、サウンドエフェクトやグラフィック推奨まで、すべてを含んでた。全体的に、ChatGPTからの本当にしっかりした最初の取り組みやったな。会話全体を読みたい場合に一時停止できる2つのスクリーンショットがここにあるで。

かなりよく練られたコンセプトができたな。この概要に足りてない他のいくつかのことがあると思うから、すぐに追加するつもりや。子供らは本を棚から落とすだけやなくて、本を取って逃げて、図書館の他の場所に落として、さらにカオスを作り出すことができるべきや。

プレイヤーは子供が本を持ってるときに見えるようにして、プレイヤーが実際に子供を追いかけて本を取り戻せるようにすべきや。子供らは実際に図書館員から積極的に逃げようとすべきや。時間が経つにつれて、どんどん多くの本が棚から取れるようになって、本の量でも難易度が上がるようにすべきや。

そして各レベルでプレイヤーがいるたびに、レベルアップするのがどんどん難しくなるべきや。レベル1からレベル2に行くのは10XP必要やけど、レベル2からレベル3に行くのは20必要で、毎回レベルアップするのがどんどん難しくなるべきや。この追加情報で概要を更新して、俺らが決めたすべてのゲームプレイ詳細の完全な説明を含むマークダウンファイルを作ってくれって言うつもりや。

よっしゃ。今度はその内容を概要に追加するけど、次のステップで使えて引っ張れるマークダウンファイルをくれるんや。4分半後に、「あんたの5つの新しいメカニクスをキットAI難易度カーブとプレイヤーインタラクションシステムに組み込んで、すべてを単一のマークダウン概要にまとめたで」って言うてくる。

Claude Codeを使ったコーディング作業

マークダウンの概要はここにあるな。ダウンロードして、かなりまともな分析ができた。今度はコーディング段階に移る時やな。コーディングするのに、Claude Codeを使うつもりや。

Claude Codeはそんなにいじったことないねん。最近、あんたらの好きなツールは何か、もっと時間をかけていじるべきものは何かって聞くツイートをしたんやけど、おそらく圧倒的に一番多く言われたのは、Claude Codeにもっと時間を使え、本当にええでってことやったな。

だから、この数日間Claude Codeの基本を学んで過ごしたんやけど、ほんまに気に入ったわ。だから、Claude Codeを使ってこのゲームを構築していくつもりや。深いチュートリアルには入りたくないけど、あんたのパソコンでClaude Codeを動かす方法の簡単な概要はここや。

anthropic.com/claude-codeに行ったら、指示を取得できる場所やな。まず最初にやらなアカンのは、パソコンにNodeJSをインストールすることや。このリンクをクリックして、あんたのオペレーティングシステム用にダウンロードして、インストーラーを実行するんや。それがインストールされたら、あんたのターミナル内でここにあるこのコマンドを実行してほしいねん。

個人的には、Claude Codeを使うときでも、まだIDEを使うのが好きやねん。IDEっていうのは、Visual Studio CodeやCursor、Windsurfみたいなもんや。そしてそれらのアプリの内側のターミナル内にclaude codeをインストールできるねん。本当に簡単やで。実際にはWindsurfを使うつもりやけど、VS Codeを使って見せたるわ。

code.visualstudio.comに行って、あんたのオペレーティングシステム用にダウンロードするんや。デスクトップにVS Codeをセットアップしたら、ここにある小さなボタンのところに来るんや。拡張機能って書いてあって、3つの小さな四角と1つのダイヤモンドみたいになってる。そして検索のところでClaudeを検索するんや。VS Code用のClaude Codeがここに見えるやろ。

WindsurfやCursorにいても、まったく同じに見えるで。WindsurfとCursorはVS Codeのフォークやから、まったく同じ拡張機能をインストールして、まったく同じ方法でやるんや。だから、インストールをクリックしてこの拡張機能をインストールするで。パブリッシャーを信頼してインストールや。今、Claude Codeがインストールされたのが見えるな。VS CodeやWindsurfみたいなツールの中にいるときは、すべてのファイルを保存するフォルダを開いておきたいねん。

左上のこの小さなエクスプローラーアイコンをクリックするで。フォルダを開くをクリック。俺のパソコンにはcodeって呼んでるフォルダがあって、codeの中にlibrary survivorsって新しいフォルダを作るで。作成をクリックして、ここのエクスプローラーでこのフォルダを俺らのフォルダとして開くんや。これで作成を始める準備ができたな。

あの拡張機能をインストールしたとき、VS Codeの右上にちっちゃなClaudeのロゴが付いたのが見えるやろ。だから、ここのリンクをクリックしたら、Claude Codeが立ち上がるんや。初回使用時は、セットアップの指示があるで。進めるためにyesをクリックして、ここに打ち込むだけでClaude Codeを使い始められるんや。

また、俺はVS CodeよりもWindsurfを使うねん。だから、実際にVS Codeを閉じて、Windsurfで中断したところから再開するで。同じに見えるのがわかるやろ。左側に同じアイコンがある。ここのプラグインをクリックしたら、Claude Codeプラグインがインストールされてるのが見えるな。

まったく同じように動作するで。フォルダを開いて、codeに入って、library survivorsを開いて、基本的にWindsurfの中で同じ方法で構築するつもりや。右クリックして、新しいテキストファイルをクリックするで。これをやると、ここにRun Cloud Codeボタンが見えるな。

だから、それをクリックするだけや。小さなターミナルでCloud Codeが開くで。実際にこれを閉じるつもりや。ここのエクスプローラーで、実際に先ほど作成した概要を取って、新しいフォルダに放り込むつもりや。だから、今は作成したいものの概要を持ってるんや。

ChatGPTがこのゲームについて書いた概要全体を実際にプレビューできるで。Claude codeを使うことの本当にクールなことの一つは、ここでシフト+タブをクリックすると、自動受け入れ編集をオンにできることや。だから、コードを書いてくれる間に、すべてを更新して自動作成してくれるよう言えるんや。

シフト+タブをもう一度押すと、構築する予定のものの計画をマップするプランモードに入るけど、まだ実際にコードを書かないねん。俺はこのプランモードを使って次のステップが何かを理解するのが本当に好きやねん。計画をマップしてもらって、それから考え出した計画をコーディングする次のステップに移るんや。

そのやり方で、計画の一部が意味をなさない場合、計画をちょっと再構成するよう言って、それから進めるんや。よっしゃ、計画を始めるために、このlibrary survivor design MDのところに来て、右クリックするで。ここでパスをコピーして、プロンプトボックスで、この概要でゲームを開発する計画をマップしてくれって言うつもりや。

そして、コピーしたパスを貼り付けるんや。エンターを押すと、勝手にやり始めるで。そしてそれだけで、Cloud Codeが始まったんや。俺らのために非常に詳細な開発ロードマップをまとめてくれて、ゲームエンジンや予想開発時間まで含んでて、俺が全部を1日でやってるから、ちょっと笑ったわ。

ゲーム開発の実践

でも最初のバージョンでは、提案されたものよりもちょっと速くて簡単なものをやりたかったんや。だから、ロードマップを修正して、JavaScriptでゲームを開発するよう頼んだんやけど、完璧にやってくれたわ。だから、最後のステップは、このロードマップで新しいマークダウンファイルを作成してもらって、後で参照できるようにすることやった。

今度はclaude codeの最もクールな部分が来るで。物を構築してくれって言って、パソコンから離れるだけでええんや。10分くらいかかるかもしれんけど、構築し始めるだけや。だから、ここで自動受け入れ編集をオンにしておくつもりや。開発計画を取って、パスをコピーして、ここにマップされた計画に従って、ここで設計したゲームを構築してくれって言うで。

そして、このパスを取るで。これをやるもっとええ方法があるはずや。「ああ、あんたはこれをめっちゃ遅くやってる。このホットキーやあのことをクリックしてできるで」みたいなコメントをたくさんもらうんは確実やな。俺はコーディングにめっちゃ新しくて、今学んでるとこやねん。もしあんたがプロのコーダーでこの動画を見てるなら、俺がたくさん間違いを犯すのを見るやろうな。

でも、あんたがプロのコーダーやなくて、自分のゲームを作りたいなら、俺がやることをすべて見てる、間違いもすべて含めてな。だから、計画と設計に従ってこれを構築してもらうで。自動受け入れ編集をオンにしたまま、エンターを押すだけや。勝手にやってくれるで。開発計画に従ってlibrary survivorsの構築を始めるで。

フェーズ1のコア基盤から始めよう。今、やらなアカンすべてのチェックリストを構築してる。それが今から行くのが見えるやろ。この時点で、追加の初期化処理を実行する必要があるから、続行するかどうか聞いてくる。yesって言って、もう聞かないでおこう。だから、やるべきことを勝手にやってくれるんや。

ここで、実際に新しいファイルを構築し始めて、ゲームが始まったのが見えるで。めっちゃクールやな。この時点で、ちょっと離れて勝手にやらせることができるで。

初期テストとデバッグ

今、ここで要約をくれて、やったことすべてが見えるで。開発計画に従ってlibrary survivorsの基盤の構築に成功したで。プロジェクトセットアップ、ゲームループ、状態管理、入力システム、アセット読み込み、カメラシステム、レンダリングシステム、プレイヤーエネルギーなどなど。

今、npm rundevを実行してlocalhost 3000でゲームをプレイしてくれって言ってる。だから、やってみよう。ターミナルを開くつもりや。右上のこの小さなボタンをクリックしてやるねん。どう表現したらええかわからんけど、上に大きなボックスがあって、下に小さな長方形がある感じのボタンや。これをクリックすると、windsurf内で直接ターミナルが下に開くねん。

ここでnpm rundevをコピーできるで。これを下のターミナルに貼り付けるんや。こんな画面になるで。Library survivors。ゲーム開始、説明書、設定がある。矢印キーかWSを使ってナビゲートできるって書いてあるな。でもそれらは動いてないみたいや。

ああ、ここはかなり凍った画面やな。だから、Wind Surfに戻ろう。まず、プランモードに切り替えるで。local hostでゲームを開こうとしたけど、メニューは読み込まれるけど、何も動かないねん。矢印キー、WSボタン、マウスクリックなど。ゲームをプレイしようとしても何も動かないねん。それを提出して、コードを確認してもらおう。

問題を見つけられるかどうか見てみよう。よっしゃ、1分くらい考えた後に問題を見つけたみたいやな。エラーを見つけて、必要な変更を説明して、簡単な修正やって言ってる。だから、yesをクリックして編集を受け入れよう。数分後に、ブラウザを更新して、コントロールが動くはずやって言ってくる。

今、ここでこれをチェックしてみよう。更新。うーん、まだうまくいかないな。だから、何回かやり取りした後もまだ問題が起きてる。今回は、コンソールをチェックして、コンソールで見てる問題を送るよう言ってくれた。もう一度やってみた。見てのとおり、ボタンをクリックしてるけど、メイン画面では何も動いてない。

でも、下や矢印キーの一つをクリックすると、コンソールで、そのボタンをクリックしてることに気づいてるのが見えるで。ホームページでは何も起きてないだけや。だから、ここのコンソールで右クリックして、コンソールをコピーして、Windsurfに戻って、まだ動いてないって言うつもりや。コンソールの内容はここやって。

そして、スペースをあけて、ここですべてを貼り付けて、エンターを押すで。コンソールで見たすべてがここにある。だから、実際にそれを読んで問題を理解できるんや。トラブルシューティングを続けるで。

Claude Codeと何回かやり取りして、「まだ動かなかった。もう一度やってみて。まだ動かなかった。もう一度やってみて」って言った後、ついに動いてるっぽいものを手に入れたで。だから、実際に上下を押したり、SNWを押したりできるねん。マウスはまだ動かないけど、キーボードは動くで。設定は何もしない。設定をクリックしても何も起きない。説明書はここで基本的な説明書をくれるな。エスケープを押すとメインメニューに戻る。

ゲーム開始をクリックすると、ゲーム中なのが見えるで。でも、上のカオスメーターがめちゃくちゃ早く動いて、もうゲームオーバーや。だから、俺らが望んでる通りには動いてない。ゲームループが俺らが望んでるようにはなってない。今度は実際にゲームを洗練して調整する時やな。

グラフィックとサウンドの追加

でもその前に、俺がいじってる本当にクールなプラットフォームについて話したいねん。これはスポンサーやないで。ただクールやと思って、あんたらとシェアしたかっただけや。それはDeliって呼ばれてるねん。deli.ai/mattwolfに行ったら、これは俺のYouTube動画、ポッドキャスト、ニュースレター、書いたいろんなブログ投稿などで訓練されてるねん。

実際に質問を聞けて、俺がウェブに投稿したこの情報すべてで訓練されてるから、俺が答えるであろう方法で答えてくれるんや。だから、「ビデオゲーム開発に使うべきAIツールは何？」みたいな質問ができるねん。そうすると、俺が答えるであろう方法で答えてくれるで。

AIでゲーム開発に飛び込むなら、すごいツールがあるで。GoogleのAI Studio、Leonardo、Runway、Stable Diffusion、MidJourney、Luma AI。まあ、あんたが今見てる動画ではまだ訓練されてないねんけどな。でも、この動画が生放送になった後は、基本的に俺の脳がその時点で入ってるから、実際には違う答えになるやろな。

だから、チェックして、俺のDeli、俺のデジタルクローンと実際にチャットしたかったら、deli.ai/matwolfに行って会話してみてくれ。俺と電話してるのをシミュレートできるクールな音声モードもあるねん。とにかく、クールやと思ったから、すぐにあんたらとシェアしたかっただけや。

ゲームの改良とファイナライズ

今、第4章の洗練に戻ろう。だから、Wind Surfに戻って、俺が見てることについてたくさんの詳細を与えるつもりや。当たり前のことから始めて、カオスメーターが動くのが早すぎる。ゲーム開始時に4秒くらいしか持たない。そして2つ目、本は本棚から始まるべきや。床から始まったらアカン。

図書館に入ってくる子供らが本を本棚から落としたり、拾って逃げたりするはずやねん。ゲーム開始時に床にあったらアカンのや。よっしゃ、そのアップデートを実行した後にもう一度やってみよう。見えるやろ。よっしゃ、クールやな。

だから、カオスメーターはまだ動いてなくて、すべての本が本棚から始まってる。本棚を通り抜けて歩けるのが気に入らないから、理想的やないな。また、子供らが入ってきて本を本棚から落とすのも見えない。シフトを押し続けると、ちょっと早く移動できることにも気づいたで。

左上のスタミナバーがめっちゃ早く下がるねん。でも、スタミナがなくなっても、同じように早く移動し続けられるねん。全く影響がないように見えた。だから、見てることに基づいて修正が必要なことについて、いくつかメモを与えたで。プランモードで実行して、俺らのための計画をマップしてもらおう。

ここで新しい計画がマップされたな。だから、yesって言って、自動受け入れ編集して、また計画を実行してもらおう。ここから、Claude Codeが新しいバージョンを吐き出した。これはかなりの回数の洗練が必要になることに気づき始めてたで。このバージョンでは、NPCが実際に現れるのに約30秒かかった。

そして何人か… ああ、待って、待って。取り消すわ。30秒で最初のNPCがおるな。メインキャラクターは本棚を通り抜けて歩ける。棚には本が床にないのに空のスロットがあった。そして、ちょっとした微調整が必要な他の要素がたくさんあった。だから、Claude Codeに新しい指示を与えて、計画を更新して新しいバージョンをまとめる作業に取りかかったで。

次のやつはちょっとましやったけど、まだ穴だらけやった。NPCは常にマップの端に逃げてた。本はまだ本棚で欠けてて、全体的なゲームプレイロジックがまだちゃんと調整されてなかった。だから、また指示を追加して、Claudeをまた楽しい道に送り返したで。そして、またやった。

本が消えてるのが見えるやろ。また。俺に近づこうとしたら逃げるで、それはええな。また。また。また。だから、これは実際に楽しいゲームになり始めてるねん。この人を追いかけよう。本をくれ。終わった。カオスが100％になった。だから、動いてるみたいやな。

よっしゃ。ついにゲームを俺がかなり満足できる状態まで持ってきたで。実際に遊んでて楽しいねん。難しすぎず、簡単すぎもしない。そして、どんどん難しくなってく。これがゲームの現在の結果や。俺の小さな青い四角が俺の図書館員や。すべての本棚が見えるやろ。もう2人の子供が本を落として、大混乱を起こしてる。

ここで行って、これらの本を本棚に置けるで。カオスが上がり始めてるのが見えるけど、本を取って、棚に置いて、このいまいましい子供らの後片付けをすることで、カオスを下げられるんや。レベルアップがあるねん。3つの利用可能なレベルアップの中からランダムに選んでくれる。今、全部で5個か6個のレベルアップがあると思うけど、最大スタミナを増やす、カオス増加を減らす、カオスメーターがどれくらい早く上がるかを減らす、本を拾える距離を増やすなどがあるで。

スタミナを増やすつもりや。シフトを押し続けたら、実際にちょっとスピードランできるからな。でも右上を見たら、スタミナバーがあって下がっていくで。だから、一定時間しか走れないねん。ゲームは実際に正当に楽しいねん。小さなかんくがバグはすべて解決されてる。これにはまだ2つの問題があるだけや。1つ目は、まだ醜く見えることや。ただの長方形が動き回ってるゲームを目指してたわけやないからな。2つ目は、サウンドエフェクトがないことや。本を拾って棚に置くときの満足できる小さな音があったらええのにな。

そして、より多くの本を拾うにつれて、サウンドエフェクトがより速く、より満足できるものになるんや。このプロセスのこの時点で、好きなものがあって、それを基に構築したいとき、ちょっとバックアップしたいねん。この状態に戻れることを確認したいねん。グラフィックやサウンドエフェクトを追加したり、他のことをしようとし始めて、ゲームを完全に壊してしまった場合、この種のセーブ状態に戻れるようにしたいねん。

そのために、GitHubを使うつもりや。まだGitHubアカウントを持ってなくて、ついて来たかったら、無料のGitHubアカウントを作ることを確認してくれ。このゲーム用に新しいリポジトリを作るつもりや。今のところこれをthe librarian gameって呼ぶつもりや。プライベートにして、リポジトリを作成をクリックするだけや。

それだけでええねん。だから、今、このリポジトリのURL、github.com/misterflow/thelibrariangameを持ってるねん。このリポジトリへのこのURLをコピーして、下のWindsurfに戻るで。これをやるのに、実際にClaude Codeにやらせるんやなくて、Windsurf内でCascadeを使うつもりや。

Cascadeにバックアップをやってもらう方が、Cloud Codeを使うよりも実際にちょっとええ仕事をしてくれるような気がするねん。だから、github.com/なんちゃらかんちゃらで、このゲーム用に新しいプライベートGitHubリポジトリを作ったって言うつもりや。この現在のバージョンをGitHubにコミットしてプッシュしてくれ。俺のために作業をやってくれるで、GitHubにプッシュしてくれるんや。

1分くらいかかったけど、ここで見られるで、完璧や。あんたのlibrary survivorsゲームをGitHubにコミット＆プッシュに成功したで。俺がやったことはここや。Gitリポジトリを初期化して、リモートオリジンを追加して、すべてのファイルをステージして、などなど。今、いつでも、実際に右側に来て、「GitHubのこのバージョンから俺のゲームを復元してくれ」って言えるねん。

ブラウザでGitHubを開いて、これをリロードしたら、今すべてのファイルがここに見えるはずや。だから、すべてがGitHubでバックアップされて、準備完了で、いつでもこのバックアップから復元できるねん。何かを構築し始めて、間違った方向に行って、完全にめちゃくちゃになって、「古いセーブ状態に戻りたいわ」って思った場合のええ方法やな。

まあ、これがGitHubがやってくれることや。基本的に古いセーブ状態に戻れるようにしてくれるんや。だから、ゲーム用のグラフィックを作り始めよう。小さな長方形や背景などを実際にええグラフィックに置き換え始めるで。もうちょっと居心地のええスタイルのゲーム、16ビットグラフィック的なもの、Stardew Valleyみたいなグラフィックを目指してるねん。

グラフィック制作

だから、俺らの図書館の床から始めたで。これをやるために、Leonardoに飛び込んで、最初の何個かのプロンプトにFlowを使ったんやけど、欲しいものが本当に得られなかった。Flowが生成した1つのバージョンをテストしたけど、ゲームにインポートしたときに醜いタイリングになった。だから、Leonardoの通常の画像作成セクションに行って、タイルオプションをオンにクリックして、ここでこのプロンプトを入力して、ついに俺が探してた雰囲気にフィットするもっとクールなものを手に入れたで。

ああ、これは本当に本当にええ見た目やな。あの背景が気に入ったわ。タイリングがええと思う。選んだサイズがええ。継ぎ目は本当に見えない。ああ、それが俺らの背景やと思うで。今度はキャラクターが必要や。立方体が走り回ってるんやなくて、図書館員のキャラクターが必要やねん。

次は俺らの図書館員やった。図書館員のスタイルにこのプロンプトから始めたけど、Leonardo Phoenixを使ってて、俺が探してたレトロ16ビットの雰囲気にマッチするスタイルが生成されなかった。だから、Lucid Realismに切り替えたんやけど、リアリスティックやない16ビットキャラクターを作ろうとしてるのに、Lucid Realismを使うのがちょっと面白いな。でも、前と同じプロンプトを使って、欲しかったものにもっと近い画像を吐き出してくれたで。

見た目を決めたら、基本的な歩行アニメーションを作れるように、足を一緒にした2番目のバージョンを作ってくれって頼んだ。それから、Claudeに戻って新しいキャラクター変更を実装する前に、背景を除去することを試したで。ちょっとテストした後、キャラクターサイズ、画像の色、立ってるときのキャラクターの見た目に問題があることがわかった。

だから、Claudeに新しい指示をいくつか与えて、画像の色を自分で調整する必要があることに気づいたで。今度はあのいたずらな子供らやった。まず俺らの図書館員の画像をスタイル参照としてアップロードして、それから悪いことをしてる子供らの画像を生成してくれって頼んだ。なぜかわからんけど、理由は想像できないけど、すべての結果が男の子で茶色い髪やった。

だから、プロンプトをちょっと調整して、条件に合う3つの異なるキャラクターに決めたで。それから、図書館員でやったのと同じプロセスを繰り返して、歩行をシミュレートするための2番目の画像を生成して、背景を除去したんや。よっしゃ。だから、これらのプレイヤーを今調整したで。まだ色の問題があるねん。

1分で修正するつもりや。でも、本を盗む何人かのキャラクターが歩き回ってるのが見えるやろ。複数のキャラクターがおる。小さな茶色い髪の子供、小さな赤い髪の女の子、それからある時点で小さな金髪のキャラクターも出てくるはずや。

そして、ゲームが続くにつれて、どんどん増殖し続けて、どんどん多くのカオスを起こして、本を棚から落として、進むにつれてゲームをどんどん難しくしてくんや。グラフィックについてはかなりええと思うねん。後でパート2の動画を作って、このゲームをGDAUかUnityで実際に再構築するつもりや。

そのゲームでグラフィックを本当に調整するで。でも、このやつは基本的なJavaScriptバージョンを作りたかってん。ここでかなりしっかりしたゲームができたと思うで。だから、Photoshopで色をすぐに修正して、それからサウンドエフェクトを追加して、ゲームができるで。これを本当に簡単にやるつもりや。Photoshopで今やってるねん。このキャラクターとこのキャラクターを開いた。

このやつのジャケットがちょっと違う色なのが見えるやろ。だから、やるつもりのことは、カラードロップで、ここのジャケットの色を取ることや。こっちに飛んで、このキャラクターのジャケットが同じ色になるようにするで。色置換ツールをここで使うつもりや。同じに見えるまで、こんな感じでジャケットの色を塗るんや。

それから、すべてのキャラクターでそれをやるつもりや。うまくいけば、もっと一貫した色になるで。よっしゃ。ゲームで今いるところはここやな。実際に俺らのローディング画面用に小さな背景アニメーションを作ったで。基本的に、Leonardoで画像を生成して、図書館に座ってる図書館員のStardew Valley風16ビットアニメーションが欲しいって言っただけや。それから、作ってくれた画像を取って、VO3を通してアニメーション化した。

それがここで見てるアニメーション背景やな。設定も取り除いた。変更する設定がなかったからな。だから、ゲーム開始と説明書があるだけや。説明書はここでちょっと作業が必要やった。Claudeコードに修正する指示をちょっと与えただけや。今、実際に読める説明書ページができたで。完璧やな。

実際にゲームをプレイするとき、キャラクターが色を変えることにまだ問題があるけど、俺らのキャラクターが歩き回るのが見えるやろ。歩いてる方向を向いてる。NPCが歩き回ってる。小さな子供らや。子供らのいくつかの異なるバリエーションがある。レベルアップがあって、ゲームは現在意図された通りに動いてて、意図された通りに見えてるで。

すべてが俺の望む通りに動いてるから、ゲームをプレイしてる感じにするために、サウンドを追加して、すべてをまとめよう。ゲームプレイは実际にクールや。楽しいねん。本当に本当に楽しんでるわ。デモしたりテストしたりするたびに、どんどん長く長くプレイしてて、前のスコアを打ち負かそうとしてるのに気づくねん。それがかなりええゲームの指標やと思うで。めっちゃ楽しいわ。気に入ってる。

でも、サウンドエフェクトを入れよう。まず、背景音楽が欲しいねん。そのために、Suno.aiに飛ぶつもりや。2つの曲があったらクールやと思うねん。メインホーム画面用と、実際にゲームをプレイしてるとき用で、ずっと同じ曲やないようにな。

だから、作成に行くで。インストゥルメンタルをオンにするつもりや。この曲に歌詞は必要ないねん。lowfi cozy retro video game musicをやるつもりや。Calming soothing。ただリラックスして、快適な音楽が欲しいだけや。それでそれが何をくれるか見てみよう。最初のバージョンはここやな。ダウンロードしよう。

これを俺らのアセットにここに放り込む。パスをコピー。この曲をオープニングメニュー画面の背景音楽として設定してくれ。曲をループして、再生が終わったらまた再生するんや。よっしゃ。だから、それを俺らのオープニング背景曲として設定するはずや。それを生成してる間に、Sunnoに戻って、もう1つ生成しよう。同じプロンプトをもう一度使うつもりや。

この他の曲もWind Surfの俺のアセットフォルダに引っ張り込むで。パスをコピーして、そこに貼り付けて、それを実際のゲームプレイの背景として設定してもらうんや。それから、サウンドエフェクトも欲しいねん。だから、サウンドエフェクトのために、11 Labsに行くで。実際にここにサウンドエフェクト生成器があるねん。

menu selectみたいなのをやったらどうなるか見てみよう。このサンプル3がちょっと気に入ったな。これをダウンロードしよう。このメニュー選択音を俺らのアセットに引っ張り込む。それから、まだ背景音楽で作業してる間に、プロンプトを打ち始めるで。だから、ここでパスをコピーして、メニュー画面で、新しいメニューアイテムが選択されたときにこのオーディオを使ってくれって言うつもりや。

ついに俺が実際にかなり満足してるゲームができたで。メインメニューに背景音楽、説明書がある。ゲームを始めよう。ゲーム音量がちょっと大きかったけど、このクリーンな録音で聞こえるように、俺らの音楽をすべて追加したで。本を落とすときの本当に満足感のある音、子供らがちっちゃなくそったれをやってるときのくすっと笑う音、スタミナがなくなったときのサウンドエフェクトまで追加したで。

このゲームプレイ録画から、Photoshopを使ってグラフィックを修正できて、ゲームプレイのペースにいくつかの追加の小さな調整をしたことにも気づくやろ。でも全体的に、このゲームは本当に楽しくて、ちょっと中毒性があるねん。1日でこれをすべてやることができて、今後数週間で洗練と改良を続けるつもりや。

このシリーズのパート2は、ゲームをUnityやGDAUに移して、ゲームを本当に次のレベルに持っていくことを考えてるねん。でも、とりあえず、ゲームとGitHubの両方へのリンクがここにあって、説明欄にもリンクアップされてるから、試してみることができるし、自分のバージョンを作ることもできるで。

もし自分のバージョンを作ったら、X（旧Twitter）で俺にリンクしてくれ。試してみるから。俺と一緒にオタクしてくれてありがとう。この動画を楽しんで、何か学んでくれたらええと思うわ。このゲームで作業を続けるのがめっちゃ楽しみで、うまくいけばパート2で会えるやろ。バイバイ。

こんなビデオが好きやったら、今日俺と一緒にオタクしてくれてありがとう。サムズアップして、このチャンネルを購読することを確認してくれ。こんなビデオがあんたのYouTubeフィードに表示されるようにするで。まだやってなかったら、futuretools.ioをチェックしてくれ。そこで最もクールなAIツールと最新のAIニュースをすべてシェアしてて、素晴らしい無料ニュースレターがあるで。また本当にありがとう。本当に感謝してるわ。次の動画で会おう。