Toonle - クリエイティブアニメーション描画ゲーム - カジュアル ゲーム
プロンプト
MODEL: Seele01-Flash
Three.jsを使用して、テーマ「**Toonle: フレームバイフレームアニメーションスタジオ**」の**モバイルファーストゲーム**を生成してください。以下の詳細なゲームデザイン要件をまず確認し、それに従ってコードを生成してください：
### 1. アセットと環境
* **ビジュアルスタイル:** 3Dワークスペース内に埋め込まれた、クリーンでミニマルな2Dインターフェース。美的感覚は「デジタルペーパー」をテーマにしてください。鮮明な白いキャンバスエリア、奥行きのための柔らかなドロップシャドウ、丸みを帯びたUI要素。背景は、アニメーターの作業場のような雰囲気を与えるために、微妙で落ち着いたグラデーション（例：ライトシアンからパステルブルー）または机のテクスチャを使用します。
* **3D要素:** 描画は2Dですが、「フレーム」を3D空間に浮かぶ物理的なフィルムストリップまたは紙のシートとして表現してください。ユーザーがフレームを切り替えるときは、カメラまたは紙の山をアニメーションさせて、ページをめくる（オニオンスキンメタファー）感覚を再現してください。
* **ツール:** アクティブなキャンバスの近くに浮かぶ、描画ツール（鉛筆、ブラシ、消しゴム）の3D表現をレンダリングしてください。
* **パフォーマンス:** 描画が含まれるため、キャンバステクスチャのパフォーマンスを優先してください。UI装飾にはローポリメッシュを使用し、線のレンダリングを最適化してください（すべてのピクセルに重いジオメトリを使用するのではなく、パフォーマンスの高いラインシェーダーまたはテクスチャベースのストロークを使用します）。
### 2. オーディオ要件
* **BGM:** 非常にローファイで、チルホップまたはアコースティックギタートラック。創造性と集中力を助けるために、反復的であるが邪魔にならないものを使用します。
* **SFX:**
* **描画:** 異なるツールに対する明確な音（スケッチ用のかすれた鉛筆の音、色塗り用の湿ったマーカーの音、消しゴム用の柔らかいこすれる音）。
* **UI:** ツールや色を選択するときに満足感のある「ポップ」または「クリック」音。
* **アニメーション再生:** ユーザーが「再生」をタップしてアニメーションをプレビューする際、高速な「フィルム映写機」のクリック音またはページをめくるような音を再生する。
### 3. ゲームプレイループ
* **コアメカニズム:** ユーザーは中央のキャンバスに描画します。新規フレームを追加すると、現在の描画が保存され、次のフレーム用にキャンバスがクリアされます。
* **オニオンスキニング（下絵表示）:** 重要な機能です。フレーム2で描画している際、フレーム1が薄く半透明のレイヤーとして下に表示され、動きのガイドとなるようにします。
* **再生:** 目立つ「再生」ボタンを押すと、フレームをコンパイルし、設定されたフレームレート（例: 12 FPS）でループ再生され、アニメーションが表示されます。
* **ツール:**
* **ブラシサイズ:** 太さを調整するスライダー。
* **カラーパレット:** シンプルなカラーピッカー。
* **消しゴム:** 間違いを消す。
* **フレームのコピー/貼り付け:** 前の描画を複製し、少し修正するため。
### 4. モバイルコントロール＆インタラクション
* **タッチ入力（重要）:** 描画ロジックは、タッチ座標（touchstart, touchmove, touchend）をThree.jsの3D平面または2Dキャンバステクスチャに正確にマッピングする必要があります。マルチタッチの誤認識防止（可能であれば手のひらを置いても描画されない、または厳密に主たるタッチポイントのみを追従）をサポートする必要があります。
* **画面の向き:** 縦向き（縦長アニメーション用）と横向き（ワイドスクリーン用）の両方をサポートします。UIは応答的に配置されるべきです（縦向きではツールを下部に、横向きでは側面に）。
* **UIサイズ:** すべてのボタン（再生、フレーム追加、ツール）は少なくとも44x44ピクセル以上とします。カラーピッカーは簡単にタップできる十分な大きさにします。
* **ジェスチャー:**
* **2本指ピンチ:** キャンバスを拡大/縮小します。
* **2本指ドラッグ:** 拡大中にキャンバスをパン（平行移動）します。
* **元に戻す / やり直し:** 目立つ「元に戻す」ボタン、またはダブルタップジェスチャー（オプションですが推奨）を実装してください。
* **フィードバック:** ツールが選択されたとき、視覚的にわずかに拡大またはハイライトされるべきです。描画ストロークは、遅延なく即座に表示されるべきです。
ゲーム紹介
Toonleについて
Toonle は、あなたの創造的なアイデアを魅力的なアニメーションシーケンスへと変革する革新的なオンラインアニメーション描画ゲームです。この無料プレイプラットフォームは、従来のコマ撮りアニメーションの技法と現代的なデジタルツールを組み合わせており、初心者から経験豊富なアーティストまで、あらゆる人々がアニメーション制作に取り組める環境を実現しています。
シンプルな棒人間を描く場合でも、複雑なキャラクターアニメーションを制作する場合でも、Toonleはブラウザ上で直接プロフェッショナルな仕上がりのアニメーションを作成するために必要な基本ツールをすべて提供します。
主な特徴
プロフェッショナルなアニメーションツール
Toonleは、使いやすさを考慮して設計された包括的な描画・アニメーションツール一式を提供します：
- 直感的な描画インターフェース : 初心者を圧倒しない、シンプルで使いやすいワークスペース
- 多彩なブラシオプション : 様々な芸術的効果を実現するための多様なブラシの種類とサイズ
- カスタムカラーパレット : 一貫したスタイリングのための個人的な配色を創作・保存可能
- コマ撮りアニメーション : 従来のアニメーション技法をシンプルかつ分かりやすく実現
- オニオンスキニング : 描画中に前後のフレームを確認して、滑らかなアニメーションの流れを実現
コミュニティと共有機能
仲間のアニメーターとつながり、あなたの創造性を披露しましょう:
- アニメーションギャラリー : コミュニティの作品を閲覧してインスピレーションを得る
- 簡単共有 : アニメーションを友人やソーシャルメディアプラットフォームで共有
- コミュニティフィードバック : 他のユーザーから建設的な批評や励ましを受ける
- 注目コンテンツ : 話題のアニメーションや人気クリエイターを発見
学習と成長
Toonleは単なるツールではありません – 完全な学習プラットフォームです:
- 組み込みチュートリアル : アニメーションの基礎をカバーするステップバイステップガイド
- インスピレーション溢れるコンテンツライブラリ : 優れたアニメーションテクニックの例を視聴
- 段階的なスキル構築 : あなたの能力と共に成長するツールと機能
- アニメーションの原則 : タイミング、間隔、イージングなど業界標準のテクニックを学ぶ
ゲームメカニクス
コマ撮りアニメーションのプロセス
Toonleでのアニメーション作成はシンプルで強力なワークフローに従います：
- シーンのセットアップ : アニメーションに合わせてキャンバスサイズとフレームレートを選択
- 最初のフレームを描く : 描画ツールを使って最初の画像を作成
- 次のフレームを追加 : 新しいフレームを作成して段階的な変化を描く
- 作品をプレビュー : アニメーションを再生して流れを確認
- 調整と仕上げ : タイミングを調整し、詳細を追加して作品を完成させる
- 共有と書き出し : アニメーションを保存してコミュニティと共有
クリエイティブな可能性
ゲームは様々なアニメーションスタイルとジャンルをサポートしています：
- キャラクターアニメーション : 棒人間、漫画、オリジナルキャラクターに命を吹き込む
- モーショングラフィックス : 抽象的なアニメーションと視覚効果を作成
- ストーリーテリング : 短編アニメーションの物語とシナリオを制作
- 教育コンテンツ : 指導用アニメーションとデモンストレーションを作成
- 実験的アート : 独自のアニメーション技術で創造の境界を押し広げる
操作とコントロール
デスクトップエクスペリエンス
- マウス描画 : 左マウスボタンを使用して滑らかな線や図形を描画
- 精密制御 : 正確なカーソル操作で作品を微調整
- キーボードショートカット : 便利なホットキーでワークフローを効率化
- マルチツールアクセス : ブラシ、色、アニメーションコントロールの素早い切り替え
モバイル互換性
- タッチ描画 : スマートフォンやタブレットでの自然な指描画
- ジェスチャーコントロール : 直感的なピンチズームとパンジェスチャー
- レスポンシブインターフェース : 小さい画面に最適化されたレイアウト
- クロスプラットフォーム同期 : 異なるデバイス間でプロジェクトを継続
Toonleを選ぶ理由
初心者に最適
Toonleは従来のアニメーション制作の障壁を取り除きます：
- ダウンロード不要 : ブラウザで即座にアニメーション制作を開始
- 無料で利用 : すべてのコア機能を無償でアクセス
- 緩やかな学習曲線 : 初心者を圧倒しない使いやすいインターフェース
- 包括的なチュートリアル : ガイド付きレッスンでアニメーションの基礎を学ぶ
すべてのスキルレベルに対応
初心者向けでありながら、経験豊富なアニメーターにも深みを提供します：
- プロフェッショナル技術 : 高度なアニメーション原則のサポート
- 柔軟なツール : 様々なアニメーションスタイルや好みに適応
- コミュニティ学習 : 他のアニメーターから学び、技術を共有
- ポートフォリオ構築 : スキルを披露するアニメーションコレクションを作成
創造的自由
制限なく自分を表現:
- スタイル制限なし : 写実的、カートゥーン、抽象的、実験的なアニメーションを作成
- オリジナルコンテンツ : 創作作品の完全な所有権
- 共同制作の機会 : 他のクリエイターとつながり共同プロジェクトを実現
- インスピレーションハブ : コミュニティ閲覧で新しいアイデアを発見
はじめ方
Toonleでのアニメーション制作の旅は簡単です:
- ゲームにアクセス : モダンなウェブブラウザでToonleを開く
- チュートリアルを探索 : 組み込みのチュートリアルシステムから始める
- 初めてのアニメーションを作成 ：シンプルな動きとキャラクターから始めましょう
- コミュニティに参加 ：作品を共有し、他のアニメーターと交流しましょう
- スキルを向上させる ：定期的に練習し、新しい技術を試してみましょう
シンプルなアニメーションGIFの作成、プロのアニメーション技術の学習、あるいはデジタルアートで楽しむことに関心がある方にも、Toonleは、アニメーションの魔法を通じて創造性を探求し、アイデアを形にするための理想的なプラットフォームを提供します。