Monster Block — 45秒で街を破壊せよ

# Monster Block — 再構築仕様 ## 1. プロジェクトの目標 Monster Blockというプレイ可能なブラウザゲームを制作します。プレイヤーが玩具のモンスターを選び、ミニチュア都市に入り、45秒間でできるだけ多くの建物を破壊できるようにします。移動、爪での攻撃、建物へのダメージ、車の投てき、破壊コンボでは、すぐに結果が伝わるフィードバックを出します。最後にスコア、称号、リトライ操作、友達が同じブロックで遊べるチャレンジリンクを表示します。英語と簡体字中国語のインターフェース、キーボード操作とタッチ操作に対応します。 ## 2. ビジュアルスタイル クリーム色の背景に置いた、厚みのある正方形プラットフォーム上の温かみのあるボードゲーム風ジオラマにします。ディテールを抑えたパステルカラーの建物、小さな濃いティール色の窓、淡い屋根の縁取り、幅広く落ち着いた緑がかったグレーの道路、横断歩道、丸みのある木々、小さな車、柔らかく温かい影を使います。建物のカラーパレットには、テラコッタ、マスタード、ダスティティール、ローズ、ブルーグレー、クリーム、セージを含めます。マテリアルは光沢のある金属ではなく、マットに塗装された玩具のように見せます。 フラットな真上視点ではなく、高めの3/4視点カメラを使います。基準カメラは(35, 37, 41)から開始し、(0, 0.4, 0)の方向を向けます。広い画面では視野角38度、中間サイズの画面では44度、狭い画面では51度にします。プレイ中はモンスターを滑らかに追従しつつ、近くのターゲットが見えるようにします。シーンは暖色の半球ライト、柔らかな影を落とす指向性ライト、クールなフィルライトで照らします。 大きな英語見出しには、幅が狭く太字のディスプレイ書体を使い、説明文には読みやすいサンセリフ体を使います。濃い緑のテキスト、クリーム色の面、オレンジ色のプレイ操作、黄色のTripo作成操作を組み合わせます。ホームページでは、PlayとCreate with Tripoを同じ程度に目立たせます。一時停止ダイアログでは、3体のキャラクターサムネイルと黄色の作成ボタンを配置した濃い緑のTripoカードを、枠線付きのResumeボタンの上に置きます。スマートフォンでもヘルプテキストを無理なく読めるようにします。 入力をきっかけに短く発生するエフェクトを使います。爪のスワイプ、短い建物ののけぞり、違いが分かるヒット音と破壊インパクト、広がる踏みつけリング、小さな瓦礫の飛散、スコアポップアップ、コンボの変化、控えめで方向性のあるカメラの揺れを含めます。つかんだ車は約220 msで手元まで持ち上げます。視差効果を減らす設定が有効な場合は、揺れ、瓦礫の飛散、UIの拡大縮小を取り除きつつ、スコア、ターゲット表示、破壊結果は維持します。 ## 3. ワールドとシーン 破壊可能な建物16棟を4×4のグリッドに配置します。ブロック間隔は10.4とし、ブロックの中心はその間隔の-1.5、-0.5、0.5、1.5倍の位置に置き、各軸に5本の大通りを通します。プラットフォームの幅は52.6 unitsです。建物は2〜5階建てとし、平面形状、屋根のディテール、ひさしを変化させ、場合によっては小さなHOTELまたはNOODSの看板を付けます。レイアウトはシードから決定論的に生成します。 道路沿いに車を12台配置し、初期プレイ位置の近くには必ず投げられる黄色い車を1台置きます。建物区画とプラットフォームの縁に木々を配置し、四隅の街灯4基、車線マーク、中央の横断歩道を含めます。モンスターは(0, 0.2, 10.4)の見通しのよい大通りから開始し、ホームページではz=20.8を手前側の待機位置として使います。 同じブロックパラメータからは、同じ建物レイアウトを再現できなければなりません。指定がない場合は、UTC日付からブロックシードを導出します。beatパラメータで友達の目標スコアを指定します。リトライ時には選択したブロックを維持します。ランダムな瓦礫は決定論的でなくてもかまいません。 ## 4. アセット一覧 安定したアセットIDを維持し、ビジュアルモデルとゲームプレイ用の衝突プロキシを分離します。 - munch: Munch / 阿猛。デフォルトの緑色の恐竜です。元の丸みを帯びた鼻先、クリーム色のお腹と角、オレンジ色の背中のトゲ、短い腕、大きな足、長い尻尾を保持します。/assets/monster-animated.glbを読み込み、高さを5.6 unitsに正規化します。静的フォールバックとして/assets/monster.glbも保持します。 - bongo: Bongo / 橘拳。大きなこぶしと幅広い体を持つ、オレンジ色の玩具ゴリラです。/assets/bongo-animated.glbを読み込み、高さを4.5 unitsに正規化します。 - bolt: Bolt / 蓝电。ずんぐりした手足と親しみやすいシルエットを持つ、青い玩具ロボットです。/assets/bolt-animated.glbを読み込み、高さを4.9 unitsに正規化します。 - 各キャラクターには対応するプレビューPNGと、待機、走行、斬撃のクリップを用意します。選択可能な3体を実際に維持し、切り替え時にはプレビューと次のラウンドで使うモデルの両方を更新します。 - city_building: 再利用可能なプロシージャル建物グループ。体力、コライダーの境界、ヒット時ののけぞり、破壊状態を個別に管理します。屋根の縁、基部、ひさしは衝突範囲に含めます。 - city_car: 再利用可能なプロシージャルの投てき可能な車。保持中、空中、破壊済みの状態を分離します。3台の車には黄色いTripoブランディングを施します。 - city_decor: プロシージャルな木々、街灯、歩道、看板、道路塗装。軽量に保ち、ジオメトリとマテリアルを再利用します。 - tripo_scenery: 屋上ロゴ彫刻1体、屋上看板2枚、ワークショップの店舗正面1か所、ブランド付きの車3台。提供されたTripoロゴとプロシージャルメッシュから構築します。これらはシーンの装飾であり、APIで追加生成するモデルやゲームプレイ用パワーアップではありません。 3体のキャラクターモデルをTripoアセットの最優先対象にします。利用可能な場合は、提供された生成済み・リギング済みのGLBを再利用します。新しいキャラクターを作る場合は、玩具風のモデルを用意し、リグへの適合性を確認してバインドし、待機・走行・斬撃アニメーションを作成し、ロスターに加える前にプロポーションを検証します。プレイヤーがラウンドを開始したときに生成APIを呼び出してはいけません。キャラクターのアップロードと、プレイヤー自身の作品の自動インポートは今回のバージョンでは対象外です。 ## 5. ゲームプレイとフィードバック 移動にはWASDまたは矢印キー、連続した爪攻撃には押し続けたSpace、近くの車をつかむ操作にはE、投げる操作にはもう一度E、踏みつけにはR、一時停止にはEscapeを使えるようにします。タッチスクリーンには仮想ジョイスティックと、攻撃、つかむ／投げる、踏みつけ用の個別ボタンを用意します。一時停止時やフォーカスを失ったときは、押し続けている入力をクリアします。 以下のルールを使用します。 - 1ラウンドは45秒です。建物の体力は階数+1とし、3〜6になります。 - 爪のヒットは1ダメージで、攻撃間隔は0.42秒です。 - 踏みつけは範囲内の各建物に3ダメージを与え、クールダウンは7秒です。 - 投げた車は着弾範囲内の建物に4ダメージを与え、投てきの着弾で基本75ポイントを獲得します。 - 建物へのヒットでは現在の倍率×20ポイントを獲得します。建物を破壊すると、破壊コンボを加算した後、(180 + 建物の高さ × 50)を四捨五入した値に倍率を掛けたポイントを加算します。 - 3.5秒以内に再度破壊するとコンボが継続します。通常のヒットではこの時間枠は延長されません。倍率はmin(5, 1 + floor(combo / 2))です。 - 16棟すべてを破壊するとラウンドを終了し、残り秒数の切り上げ×100を加算します。それ以外の場合は、時間が0になった時点で終了し、それ以降のスコア加算を防ぎます。 敵、ボス戦、プレイヤーの体力、死亡ペナルティはありません。ルートの選択、車と踏みつけの効率的な使用、破壊コンボの維持がチャレンジになります。残り時間、スコア、破壊した建物数、倍率、踏みつけのクールダウンを表示します。利用できない操作も、移動を妨げずに分かるようにします。空振りと成功したヒットは、音とビジュアルフィードバックで区別します。 移動と回転は、腕や尻尾を含む各キャラクターのサンプリング済みアニメーション形状に対して判定します。小さなクリアランスを設け、建物全体の境界と照合します。モンスターは、合法な立ち位置から攻撃できなければなりません。建物が破壊された後は、その区画を通り抜けられるようにします。プレイヤーが角で閉じ込められたり、方向転換時に尻尾が無傷の建物を通り抜けたりしないようにします。 Escape、 一時停止ボタン、ウィンドウのぼかし、非表示タブでタイマーと入力を一時停止します。Resume、Retry、Homeのフローを用意します。終了時には、スコア、破壊数、最高コンボ、遊び心のある称号、同じマップへのチャレンジリンクを表示します。1080×1350のスコアカードをダウンロードできるようにし、MediaRecorderに対応している場合は、対応するMP4またはWebM形式でラウンドを録画できるようにします。利用可能な場合はネイティブ共有を使い、チャレンジリンクにはクリップボードへのフォールバックを用意します。ブラウザ上で計算したスコアを、安全な競争型リーダーボードとして提示してはいけません。 ## 6. 技術実装 Three.js、TypeScript、Viteを使い、静的なdistビルドにします。ワールド生成、ルール、衝突、キャラクター、レンダリング、オーディオ、録画、アナリティクス、UIを別々のモジュールに分けます。フォントと必要なデコーダーアセットはローカルにバンドルします。繰り返し使う窓や道路標示にはインスタンシングを使い、マテリアルとジオメトリを再利用します。描画のピクセル比は1.65を上限にします。一時的なエフェクト数を制限し、完了時またはリセット時にリソースを破棄します。 GLTFLoader、スケルタルアニメーションミキサー、提供されたGLBクリップを使います。各モデルは中央に配置した接地ピボットを基準に正規化します。基準エクスポートは+X方向を向いているため、ゲームの+Z前方方向に合わせるためにビジュアルピボットをY軸周りに-90度回転させます。読み込んだモデルを表示する前に待機アニメーションを評価し、アニメーション中の足が地面付近に保たれるようにします。読み込みに失敗した場合は、表示可能なプロシージャルフォールバックを使い、失敗したことを正直に示します。非同期のキャラクター選択を保護し、古い読み込み結果が最新の選択を上書きしないようにします。 キャラクターの衝突データはレンダリング用メッシュから分離し、キャラクターやアニメーションを変更したときはサンプリング済み形状を再ベイクします。壁際で移動と回転の両方をテストします。安定したキーボード／タッチ入力、レスポンシブなダイアログ、ローカライズされたコピー、フォーカス動作、ミュート可能な音声コントロール、視差効果の軽減、WebGLの復旧動作を維持します。 Tripoの作成操作をhttps://www.tripo3d.ai/にリンクし、utm_source=monster_block、utm_medium=referral、utm_campaign=monster_block_game、および配置ごとのutm_content（header_logo、hero_create、pause_create、result_create、footer_logo）を付けます。これらの操作は別タブで開き、先にアクティブなプレイを一時停止します。Tripoは3Dアセットを作成するサービスであり、このゲームへの自動インポートを約束するものではないと説明します。 ホスティングポリシーで許可されている場合は、既存のPageviewとPostHogのイベント連携を維持します。静的ビルドでは公開ブラウザ取り込み設定のみを使用します。生成、CMS、デプロイ、個人用アナリティクスの認証情報は、ソースとビルド成果物の外部に保管します。ページへの到達、キャラクター選択、プレイ、最初の操作、ラウンド結果、リトライ、共有／書き出し、外部Tripoクリックを記録します。ただし、クリックを確認済みのサインアップや支払いとして扱ってはいけません。 ## 7. 完了条件 実行可能なソース、ローカルアセット、本番用の静的ビルド、明確なインストール／起動／ビルド手順を納品します。3体すべてのキャラクター選択、時間制のラウンド全体、建物の破壊、つかむ・投げる操作、踏みつけのクールダウン、コンボの失効、一時停止／再開、リトライ、ラウンド終了時のスコア計算を検証します。元の恐竜が引き続き選択可能であること、3体すべてが建物の近くで目に見えるめり込みやスタックなしに移動・方向転換できることを確認します。 デスクトップと狭いモバイル幅で英語および中国語のレイアウトを確認します。読みやすいヘルプ文、タッチ操作、一時停止操作、結果の共有を含めます。TripoのCTAの遷移先とUTM配置値、スコアカードの書き出し、録画のフォールバック動作を検証します。デプロイ済みページと、実際のCMS iframe環境で、モデルの読み込み、入力、外部リンク、ダウンロードをテストします。ブラウザやデバイスの制限は、根拠なく普遍的な対応や計測済みの安定フレームレートを主張せず、報告します。