ClaudeのArtifacts機能でタイピングゲームを作ろう！

皆さんはClaudeのArtifacts機能をご存知ですか？これは、簡単にプログラムのコーディングができ、その動作をClaude上で確認できるというものです。いろいろな機能の紹介がされていますが、具体例が少ないと思ったので、今回はブラウザで遊べるタイピングゲームを作成してみました。以下、具体的な手順をご紹介します。

作り方

1. Artifactsでゲームの骨格を作る

１、Artifactsでゲームの骨格を作る

まずはClaudeを開き、以下のように入力します。

タイピングゲームを作ってください。
画面は上下３段に分かれていて、上段は、左側からゾンビが登場し、右端にいる魔法使いに襲いかかります。
中段は、タイピングするキーワードの表示と、入力するためのテキストエリアです。入力に成功すると魔法使いが
ゾンビを攻撃します。
下段は、拡張用なので開けておいてください。

すると、ClaudeがHTMLコードを生成し、プレビュー画面でイメージを確認できます。Claudeは下段にスキルボタンを配置し、敵の一掃と歩行速度を遅くする機能を自動で追加しました。その後、キャラクターのAVG画像を作成したり、演出を加えたりします。

開発初期画面

2. ChatGPTで細かい修正を加える

開発を進めるとゲームのコードが400行を超えたため、Claudeでは一度に処理できない量になりました。そこで、ChatGPTを使って細かい調整を加えました。また、背景にはDALL-E 3で作成した画像を使用しました。

その後、キャラクターのAVG画像を作成したり、演出を加えたりします。

3. DreamMACHINEでオープニング動画を作成

次に、話題の動画生成AIであるDreamMACHINEを使って、ゲームのオープニング用のイメージ動画を作成しました。プロンプトには「魔法使いがゾンビを魔法で倒す」と入力しました。結果として、魔法使いの片足が消えたり、ゾンビの顔が破綻したりしましたが、自分では絶対に作れないアニメが完成しました。この動画を元に、10秒のオープニングシーンを作成しました。

DreamMACHINEの画面

完成したゲームがこちら

感想

約30年前のゲームを短時間でそれっぽく作れるのが非常に魅力的でした。これに独自の視点やアイデアを組み込めば、プログラマー初心者でも人を惹きつけるゲームが作れる可能性を感じましたので、今後も続けていこうと思います。一方で、DreamMACHINEはまだ実用には少し早い感じがしました。1枚作るのに2〜3分かかることや、思い通りにいかないことが多いため、イメージに近い動画を作るには根気が必要です。それでも、自分では絶対にできないことが手軽にできるのは面白い体験でした。無料分はほとんど使ってしまったので、来月また挑戦したいと思います。