Playable-style HTML/JS giant-beast city traversal scene

Prompt

The author shared the full prompt.

プロンプトはGPT-6 Solで出力。

「巨大生物の背中に街がある」オリジナルのゲーム風シーンをHTML/CSS/JavaScriptで描画・アニメーションし、ブラウザで動く作品と、その実行画面を収録した30秒の完成動画を作ってください。操作できるゲームの実装は今回の必須条件ではありません。画像や動画の見本は使わず、以下の文章だけから画面を設計してください。

画づくりの方向性:
- カメラは冒険者の斜め後方。手前には奥へ続く木造の屋根と橋があり、その先に巨大生物の背中の街が広がる。
- 巨大生物は画面の中央から右側を大きく占める。岩肌、苔、角、長い首と頭、雲の中まで伸びる太い脚を持ち、遠景の山と比較して圧倒的な大きさが伝わる。
- 街は生物の背に沿って段状に築かれた集落とする。大小の建物、塔、木橋、階段、手すり、灯り、樹木を重ね、暮らしのある街として描く。
- 遠景には雪を頂いた山々、雲海、峡谷、朝の斜光を置く。手前・街・生物・遠景の奥行きを明確にし、平面的な切り絵や単純な図形の集合に見えない質感と陰影を目指す。
- 0秒から冒険者、背中の街、巨大生物の輪郭を同時に見せる。暗転やロゴで始めない。

新規成果物は以下へ隔離してください。
/Users/konnokensuke/Documents/プロンプトラボ/game-video/05-living-city/opus55-html/

完成画面と動きの条件:
- 冒険者が屋根や橋を前進し、カメラが追う。足元と屋根・橋の接地を保つ。
- 巨大生物は呼吸、首や脚、重心の動きによって「生きて街を運んでいる」と分かるようにする。大きな一歩に街、橋、布、霧が連動して揺れる。
- 左上にHPとスタミナのゲージをコードで描く。走行に合わせてスタミナを変化させる。必要なら小さな方位表示やスキル表示を足す。スマホ幅でも読め、主役を隠さない独自UIにする。
- 30秒を通じて人物、生物、街の造形と位置関係を保つ。単調な走行を続けず、生物の大きな一歩、街の揺れ、橋を渡る動き、進行先の景色で展開を作る。カットの順序は実機プレビューを見て調整してよい。

最初の5〜6秒を低解像度で確認したら、そこで止まらず30秒の完成版まで制作してください。最終動画は16:9・1920×1080を目標とし、安定して描画・書き出せる品質を採用してください。Canvas、WebGL、Three.js等の選択とファイル構成は任せます。見た目の密度と奥行きが足りない場合は、短い試作を合格扱いせず描画方法から見直してください。

ブラウザで作品画面を実際に開き、アニメーションとゲージの変化を確認してください。同じ描画コードの実行結果から30秒のMP4を書き出し、0・1・3・10・18・25・29秒と全編を実見してください。360px程度の表示幅と音なし再生でも、主要な画と動きが伝わるか確認してください。独自の環境音・足音等を加える場合は音源と生成方法を記録してください。

ソース一式、起動方法、30秒のMP4、使用モデル・経路、素材の出所、主要プロンプト、検品結果を残してください。完了報告では絶対パス、実測尺、解像度、音の有無、HUDと巨大生物の動き、30秒間の一貫性、コードが画を作っている根拠、未確認事項を明記してください。Xへの保存・予約・投稿・公開、既存X記事の変更は行わないでください。

Category

Games

Stack

Canvas

From the author

Used HTML/CSS/JavaScript only; no images or video assets.

On X

107 likes · 28K views · 49 saves