--- title: "Rainbow Road Pixel Animation" description: "A 19-second pixel animation titled Rainbow Road Pixel Animation." canonical: "https://potto.ai/zh-Hant/videos/rainbow-road-pixel-animation" language: "zh-Hant" datePublished: "2026-09-22" --- # Rainbow Road Pixel Animation A 19-second pixel animation titled Rainbow Road Pixel Animation. A short pixel animation built around a rainbow road. The video runs 19 seconds and focuses on the movement and color of the scene. - [視覺系統](https://potto.ai/zh-Hant/videos/visual-system.md) - 由 riku720720 - 時長與比例: 0:19 · 16:9 - 製作工具: Canvas, CSS, HTML, JavaScript - 發布於 2026年9月22日 - 查看原片: https://x.com/riku720720/status/2102515055116063144 ## 提示詞 ```text Vanilla JavaScript と Canvas 2D を使い、オレンジ色のピクセルキャラクターが宇宙空間のレインボーの床を超高速で駆け抜け、次々と襲いかかる隕石やビームをかっこよく回避し続けるアニメーションを、単一の自己完結型 HTML ファイルとして作成してください。外部アセット、ライブラリ、ネットワークリクエストは一切使用しないこと。操作は不要で、キャラクターが自動で回避し続けるデモとしてシームレスにループさせること。 レンダリング - すべてを 160x90 の固定論理解像度のオフスクリーンキャンバスに描画し、それをフルスクリーンの表示用キャンバスに転写する。拡大率はウィンドウに収まる最大の整数倍とし、中央に配置する。余白は黒で埋める。imageSmoothingEnabled = false、CSS は image-rendering: pixelated を指定すること。 - すべての描画は論理キャンバス上の整数座標にスナップさせる。サブピクセル位置、アンチエイリアス、グラデーション、shadowBlur、回転描画は使用しない。 - 約32色の固定パレットを使う：宇宙背景用の黒〜深い紺・紫系、キャラクター用のオレンジ系3段階（本体 #CD7B5E 付近、明るいハイライト、暗い影）と目の黒、レインボー床用の7色（赤・橙・黄・緑・水色・青・紫）とそれぞれの暗色、隕石用の岩色・溶岩色、ビーム用の白・シアン・マゼンタ。すべてのピクセルはこのパレットの色から取ること。 キャラクター - 次の 12x8 ピクセルのシルエットを正確に再現する（1マス＝論理1ピクセル）： - 胴体は幅8×高さ8の四角形（列2〜9）。 - 腕は胴体の左右に幅2×高さ2で突き出す（列0〜1と列10〜11、行2〜3）。 - 目は黒の1x1ピクセル2つ、行1の列3と列8。 - 脚は行6〜7に4本、各幅1（列2・4・7・9）。脚の間は背景色で抜く。 - 1色塗りではなく、上辺と左辺に1pxのハイライト、下辺と右辺に1pxの影色を入れ、16ビット風の立体感を出す。 - 走りモーションは脚4本を2本ずつ交互に上下させる4フレームサイクル。速度に応じてサイクルを速める。 - ポーズをパラメータ化する（上下バウンド、前傾、スクワッシュ＆ストレッチ、腕の上下）。スクワッシュ＆ストレッチは幅・高さを整数ピクセル単位で1〜2px変えるだけで表現する。パラメータは滑らかに補間しつつ、毎フレームピクセルグリッドに量子化し、60fpsループでも 12fps 前後のドット絵アニメらしく見せること。 レインボーの床 - キャラクターは画面左寄り1/3付近を右方向へ走る横スクロール構成。床は7色の横縞からなる虹の帯（各色1〜2px）で、画面を横切るように延び、ゆるやかにうねる（サイン波で上下にカーブ）。 - 床の縦方向に一定間隔の区切り線（暗色の縦ライン）を入れ、速度に応じて左へ高速スクロールさせて疾走感を出す。 - 床の下辺からは虹色の光の粒が後方へこぼれ落ち、床が宇宙に浮いていることを示す。 - ときどき床にジャンプ台（上向きのカーブ）や途切れ（ギャップ）を出し、ジャンプの見せ場を作る。 障害物 - 隕石：大・中・小の3サイズ。ドット絵の岩（アウトライン＋2段階の陰影＋溶岩色のひび）で、画面右上から斜めに飛来する。後ろに溶岩色→暗色へ変化する炎の尾を引く。避けられた隕石は床に衝突せず画面外へ抜けるか、背後で破片に砕け散る。 - ビーム：出現前に予告として1pxの点滅ライン（マゼンタ）を 0.5 秒ほど表示し、その後に白い芯＋シアンの外縁からなる太さ3〜5pxのビームが水平または斜めに照射される。照射中は端がジリジリと揺れる。 - 障害物はランダムではなく、あらかじめ決めた「攻撃パターン」を順番に流し、全体が一定時間でループするように設計する（例：隕石単発 → 隕石3連 → 低いビーム → 高いビーム → ビームと隕石の複合 → 大隕石＋床のギャップ）。 回避アクション - ジャンプ：スクワッシュで溜め → ストレッチで跳躍 → 空中で縮こまる → 着地でスクワッシュ＋砂煙ならぬ虹色の火花。 - 二段ジャンプ：空中で一瞬静止してから再加速。キャラクターの周囲に虹色のリングが1pxで広がる。 - スライディング：高さを半分近くまでスクワッシュして低空姿勢で滑り、床との接地面から火花を飛ばす。 - ダッシュ回避：一瞬だけ速度を大きく上げ、後方に残像を3〜4体残す。残像は虹の7色を順に使い、パレットの暗色へと段階的に消えていく。 - 各攻撃パターンには、それに最もかっこよく見える回避アクションを割り当てる。回避はギリギリのタイミング（ニアミス）で行うこと。 ステートマシン - RUN（通常疾走）→ WARN（予告表示、キャラクターが一瞬前を見るように目を1px動かす）→ DODGE（回避アクション）→ NEAR_MISS（演出）→ RUN に戻る、を攻撃パターンごとに繰り返す。 - ループの最後には BOOST（全力加速）→ WARP（画面全体が白→虹色に一瞬フラッシュ）を入れ、そのまま冒頭の RUN に自然につながるようにする。 - ポーズやカメラのパラメータはキーフレーム間でイージングをかける。 カメラワーク - カメラは論理座標上の整数オフセットとして扱う。ズームや回転は使わず、位置の移動と揺れだけで表現する。 - 追従：キャラクターの上下移動にダンピング付きで遅れて追従し、ジャンプ時は少し遅れて持ち上がる。 - 先読み：速度が上がるほどカメラを進行方向へ数px先行させ、キャラクターが画面左に押し込まれるようにして加速感を出す。 - ヒットストップ：ニアミスの瞬間に 3〜4 フレームだけ全体を停止し、その後 0.3 秒ほどスローモーション（更新ステップを間引く）にしてから通常速度に戻す。 - シェイク：大隕石の通過やビーム照射開始時に 1〜2px の画面揺れ。揺れは決まったパターン配列から読み出し、乱数は使わない。 - BOOST 中はカメラをわずかに下げ、床の占める面積を増やして速度感を強調する。 疾走感を出すエフェクト - 多層パララックス：遠い星（ほぼ動かない1pxの点）、中景の星（速度に応じて横に2〜6pxの線に伸びる）、近景のスピードライン（明るい色の横線が画面を高速で横切る）の3層。 - スピードラインの本数と長さは速度に比例させ、BOOST 中は最大にする。 - 背景に大きな惑星や星雲をドット絵で1〜2個配置し、ごくゆっくりスクロールさせてスケール感を出す。 - ニアミス時はキャラクターの輪郭を1pxの白で縁取り、隕石・ビームに近い側だけ一瞬光らせる。 - 着地・スライディング・ダッシュの火花、隕石の尾、破片、床からこぼれる光の粒は、すべて同じパーティクルシステムで扱う。 パーティクルシステム - プール方式でアロケーションのないパーティクルシステム：事前に確保して再利用する。 - 各パーティクルは種類ごとに色の遷移テーブル（パレットのインデックス列）を持ち、寿命に応じて段階的に色を変えて消滅する（例：火花は白 → 黄 → 橙 → 暗色、残像は虹色 → 暗色）。 - 描画時にはパーティクル位置をグリッドにスナップさせる。 - 60Hz の固定タイムステップで更新し、描画は rAF で行う。ループ内でのオブジェクト生成はゼロにすること（配列・クロージャ・文字列連結の生成も含む）。 シーン - 背景は深い宇宙：黒から紺への段階的な帯（ディザリングで色の境目を表現）、瞬く星、遠くの惑星。 - キャラクター・障害物・床の色が背景に埋もれないよう、明度差をはっきりつける。どんなに画面が騒がしくても、キャラクターのシルエットが一目で読み取れること。 品質基準 - どのウィンドウサイズでもピクセルがくっきりしていること、ループが途切れないこと、安定した60fps、読みやすいシルエット。 - ベクター図形を縮小したものではなく、洗練された16ビット時代のアクションゲームのデモ画面のように見えること。 - 「速い」「ギリギリで避けた」「かっこいい」の3つが、毎回の回避で伝わること。 ``` ## Rainbow Road Pixel Animation 常見問題 Rainbow Road Pixel Animation 的製作方式、提示詞內容，以及如何用 Potto 做出同類的 視覺系統 影片。 ### Rainbow Road Pixel Animation 是什麼？ Rainbow Road Pixel Animation 是 riku720720 製作的 視覺系統 類型 AI 動態圖形影片。 A 19-second pixel animation titled Rainbow Road Pixel Animation. ### Rainbow Road Pixel Animation 是怎麼製作的？ Rainbow Road Pixel Animation 使用 Canvas、CSS、HTML和JavaScript 製作，屬於 Potto 上 視覺系統 分類的 AI Motion Graphics 影片。 ### 可以查看 Rainbow Road Pixel Animation 的提示詞嗎？ 可以。本頁有 Rainbow Road Pixel Animation 的完整提示詞。你可以複製，或點選「使用此提示詞」，在 Potto 工作區中開啟。 ### Rainbow Road Pixel Animation 有多長，畫面比例是多少？ Rainbow Road Pixel Animation 時長為 0:19，畫幅為 16:9。 ### 我能用 Potto 做出像 Rainbow Road Pixel Animation 這樣的 視覺系統 影片嗎？ 可以。點選「使用此提示詞」，把 Rainbow Road Pixel Animation 的提示詞載入 Potto 工作區。Potto 會算繪自己的版本，匯出前你可以修改文字和風格。 ### 在哪裡觀看 Rainbow Road Pixel Animation 的原片？ Rainbow Road Pixel Animation 最初由創作者發布。點擊「查看原片」，即可在新分頁開啟該貼文。 ### 在哪裡可以找到更多像 Rainbow Road Pixel Animation 這樣的 視覺系統 影片？ 在 Potto 上瀏覽 視覺系統 合集：480 支影片，每支都附有提示詞、規格和來源。