【初心者向け】0から始める簡易ChatGPTアプリ作成動画
ゲーム制作について
基本的にウェブページ、ウェブアプリを作ることが得意なCreateですが、うまく使いこなすとゲーム制作も可能です。ただし、JavaScriptライブラリ(jsファイル)などを組み合わせる必要が出てくる場面が多いため、多少開発知識があるとスムーズです。
簡単なものであればプロンプトに「ブロック崩しを作って」などと指示して生成することも可能です。AIは多くの古典ゲームのルールを理解しているためうまく生成してくれることがあります。
ゲームを作るのに必要なjsをCreateで利用するには
物同士が衝突する処理をするなら物理エンジン、立体的な表示をするなら3Dエンジンなど、専用のライブラリを呼び出すことで複雑なゲームの構築が可能になります。
そのままCreateを使った場合、最小限のライブラリしか呼び出されません。必要なライブラリは「CDNの〇〇.jsを読み込む」のように指示することでライブラリが読み込まれ利用できるようになります。
役立つライブラリ
例えば2Dゲームであれば p5.js、3Dゲームであれば Three.js、落ちゲーであれば matter.jsなどです。落ちゲーはスイカゲームやタワーバトルゲームが簡単に(5分で)作れます。
- p5.js CDNでMainComponent内に読み込む：p5.js
- Three.js CDNでMainComponent内に読み込む：Three.js
- matter.js CDNでMainComponent内に読み込む：matter.js
オリジナルゲームを作るには？制作のコツは？
プロンプトにできる限り詳細にあなたが思い描いているゲームについて記述していきます。ルールであったり、面白いアイテムを登場させたり、イベントなどトリッキーなものやスリリングなものにしてみてください。あなたの創造性を言語化して可能な限り詳細に表現してください。 Createを使ってあなたもゲームクリエイターになりませんか。
コツは、抽象的ではなく可能な限り具体的に言語化しプロンプトにすることでCreateは理解しやすくなります。そういった言語化スキルや、基礎的なプログラミングスキル（変数、配列、関数）、ＣＧの基礎、基礎的な数学（四則演算に加え三角関数「サイン・コサイン」）を概念だけでもよいので理解しておくとゲーム制作に役立つと思います。
プログラミング的な考え方
変数
「〇〇は1」「〇〇: 1」などのように記述すればAIがいい感じに解釈してくれます。もちろんプログラミング風の記述もOK i=1のようにしても良いです。
「配列は{1,2,3}」「配列：1,2,3」などのように記述すればAIがいい感じに解釈してくれます。
アルゴリズム
AIは基本的なアルゴリズムを理解しています。
例えば、ソートアルゴリズムや迷路探索アルゴリズムなども抽象的に伝えてもうまく実装がされます。
生成(Generate)に利用するLLM（生成AIの種類）の使い分け
Createでの生成(Generate)時、無料プラン(Free)では”Claude Sonnet 3.5”と”GPT-4o”がご利用いただけます。Pro以上のプランであれば加えて”Anthropic Opus”、”Google Gemini”、”Anthropic Haiku”、”Groq”の4種類も利用可能になります。
同じプロンプトを用いても、LLMの種類が変わると結果は全く変わってきます。
無料で利用できるLLMで充分生成(Generate)が可能ですが、なかなか期待通りの結果が得られない場合、途中で別のLLMに切り替えてみるのも一つの手段です。それぞれの違いは体感してみないとわからない部分があるため、本項の著者（さとこよ）の雑感を以下に記載しておきます。
利用の仕方や今後のアップデートで評価が変わる可能性がありますが、一つの参考にしてください（2024年7月時点での評価）。
- Anthropic Sonnet 3.5（Claude Sonnet 3.5） 無料プランで利用できるにも関わらず、スピードと生成の質のバランスが良い。大規模ページへの生成も得意。
- GPT-4(GPT-4o) 品質とスピードのバランスがほどよく、一度生成したページを改修する際のコード維持が得意な印象。大規模のページ生成は苦手。
- Anthropic Opus（Claude Opus 3） 生成の質が高く、大規模ページへの生成も得意。生成スピードは遅い。
- Google Gemini 生成スピードは速いが、品質の面でGPT-4やSonnet 3.5に届かない場面が多く採用頻度は低め。
- Anthropic Haiku（Claude Haiku 3） 生成スピードは速いが、多くの場面においてOpusの下位互換となるため利用機会は少ない。
- Groq 生成の質が低く、あえて採用する機会は少ない。
コンポーネント(Component)の使い方
Createでリトライ(Retry)をすると生成ガチャされるため、同じプロンプトを利用してもランダムに生成され再現することが難しいです。生成ガチャを回避する方法は、コンポーネントを使うことです。コンポーネントにより、ロックすることができます。
ページからのコンポーネント利用、あるいは、コンポーネント内からコンポーネントを利用するという利用方法も可能です。コンポーネントを利用することで生成する時間も大幅に短縮されます。ぜひ、いろいろと試してみてください。
順次処理
プログラミングで順番に処理を進めていくことを「順次処理」といいます。手順や命令を一つずつ、順番に行うことを意味し、プログラミングの基本となる考え方です。
Createでも順番に解釈されて処理されます。
効果音の鳴らしかた
WebAudioを使って簡単に鳴らせます。
Kickボタン。WebAudioでKickを鳴らす。
Snareボタン。WebAudioでSnareを鳴らす。
Hi-Hatボタン。WebAudioでHi-Hatを鳴らす。
Crashボタン。WebAudioでCrashを鳴らす。
Tomボタン。WebAudioでTomを鳴らす。
Rideボタン。WebAudioでRideを鳴らす。
Clapボタン。WebAudioでClapを鳴らす。
Rimボタン。WebAudioでRimを鳴らす。
Create内でLLMを扱う時のコツ
create .xyz内でLLM（ChatGPTなど）を扱う際、プロンプトを書いても簡略化されてしまうことが多いです。そのような時はプロンプトであることを明示的に示すことで省略を避けることが可能です。
記号などで囲っても良いですが、さとこよの場合は次のような書き方をして対応しています。
<prompt>保持したいプロンプト</prompt>プロンプトが正しく適用されているかはソースコードを見てみましょう。
プログラムがわからなくてもプロンプトが適用されているかはなんとなくわかるはずです。
JavaScriptの⚪︎⚪︎⚪︎というライブラリが読み込みたい
多少ウェブの知識がある方だと、JavaScriptのライブラリを読み込みたいといった場面が出てくることでしょう。
本来、Createでは外部のライブラリを読み込むことを想定しておらず、普通に読み込みを指示しても基本的には反映されることはありません。
ではどうすれば良いかというと、次のような書き方をすることで外部ライブラリを読み込むようになります。
maincomponentでCDNの⚪︎⚪︎⚪︎.jsを読み込む。※ライブラリ名は架空のものです。
例えば、3Dで行うthree.jsや2Dの物理運動を処理するmatter.jsなどを読み込み、ゲーム的な表現ができるようになることを確認しています。ただし、3D描画など一部の動きとcreateのシステムの相性が悪く、動作が不安定になることがありますので自己責任でご利用ください。
To be continued!