提示詞
帮我做一个原创的手游「高光时刻」动效：[主体，例如：开宝箱 / 段位晋升 / 成就解锁 / Boss 掉落 / 角色升级]。
做成一个可以直接打开的单文件网页（HTML + CSS + JS），点一下就能完整播放，效果对标商业手游的结算 / 奖励演出。
【世界观与风格】
- 原创美术，不要模仿任何现有游戏的 IP、角色或 Logo。
- 卡通手游风：高饱和配色，统一的深色描边（例如 #1A1033），圆润厚重的造型。
- 配色随等级升级：[等级阶梯，例如：普通绿 → 稀有蓝 → 史诗紫 → 传说金]。每升一级都要切换主色、光效颜色和背景色调。
- 标题用圆胖的游戏字体（如 Titan One / Lilita One），描黑边，加投影；文字逐字「砸」进画面，带回弹。
【主体物：做成真 3D】
- 用 Three.js 建模，不要用平面 SVG 贴图。要有厚度、倒角，以及符合主体的结构细节（木板缝、铆钉、包边、宝石切面、锁扣等）；木板缝这类细节用真实几何体拼出来，不要贴黑线条。
- 着色用卡通分阶（MeshToonMaterial 加 3～4 阶的渐变贴图），配三种灯光：主光、天光、等级色的轮廓光。
- 描边用后期边缘检测：渲染法线图 + 深度图，再用着色器画线。外轮廓粗、零件交界细，粗细全程一致；另外做 1.5 倍超采样和多重采样抗锯齿。
不要用「放大一圈的黑色背面」那种描边，那样粗细不均、转角会断。
深度判断的阈值要放宽，接缝主要靠法线判断，否则斜着看的表面会冒出细碎斜纹。
- 活动部件要真实运动，比如箱盖绕铰链翻开、奖章绕竖轴旋转。
- 待机时主体缓慢左右转动，让人看到侧面和厚度，同时轻微上下浮动；脚下要有随高度变化的柔和投影。
【如果画面里有 2D 插画（卡面、奖励图标、角色）】
- 三层卡通着色：底色、成块的阴影色、高光色，不要只用一层渐变。
- 线条分粗细：外轮廓粗，内部结构线细。
- 每个角色或物件要有自己的表情和姿态，不要所有东西共用同一张脸。
- 脚下画投影，让主体「站」在画面里；背景按属性区分图案，不要全用同一套放射线。
【演出节奏：五个阶段，缺一不可】
1. 预备：主体待机浮动，每隔几秒抖一下提示可以点击，底部显示「点击」提示。
2. 升级：每点一次，主体跳起、在空中转一圈、落地时压扁再回弹；同时切换到下一等级的颜色，闪一下光，冒一圈粒子，标题更新。
3. 蓄力（约 1 秒）：主体越抖越剧烈，缝隙透出光，四周粒子往中心吸，音效音调持续上升；最后一刻猛地压扁。
4. 爆发：从爆点向外扩散的泛光闪白、屏幕震动、镜头往前一推、多层冲击波、细长流光迸射、闪光星点、金币和宝石（带旋转）。高等级的爆发要明显更强。彩带只在最高潮用一次，不要满屏彩带。
5. 揭晓与结算：
- 奖励卡片从主体里沿弧线飞出，落位时带超调和晃动收尾，数字滚动计数。
- 稀有物品带彩虹流光边框和「NEW!」角标。
- 点击领取后，金币和宝石沿贝塞尔曲线飞进右上角的余额，每到一个余额就跳一下。
【揭晓舞台：让主角独占画面】
- 最高稀有度揭晓时，其他元素收起或淡出，背后换成一层干净的渐变幕布加缓慢旋转的柔光，不要让主角压在杂乱的背景上。
- 幕布出现时，把场景里的其他 3D 物件隐藏掉，否则后期描边会把它们的轮廓线画在幕布上。
- 主角的外发光要放在主体背后，只从边缘溢出，不能盖在主体前面把它糊成一片白。
- 可以加一圈围绕主角盘旋的星尘拖尾，但轨道必须完整在主角轮廓外侧，不能从主体正面扫过。
【光效：必须柔和，不能有硬边】
- 背景光芒：用带渐变过渡的 conic-gradient，不要一刀切的色块边缘；叠 2～3 层不同密度、不同转速的光。
- 光柱：由 5～7 道带模糊的光束呈扇形散开，亮度各自轻微闪动；根部加一团柔光核心，光里有光尘缓慢上飘。
- 闪白：从爆点向外的径向泛光（mix-blend-mode: screen），强度不超过 0.8，不要整屏纯白过曝。
- 粒子：每个火花都带一圈低透明度的外晕；冲击波用三层描边（宽而淡、中等、细而亮）。
【材质与界面】
- 边框、名牌、按钮要有材质感：金属拉丝渐变、左上亮右下暗的倒角光、内阴影；按稀有度换镶嵌件（钢铆钉 → 银框宝石 → 金框钻石加小王冠）。
- 小卡片上不要塞小字数值；详细数值放到揭晓时的信息面板里，面板里的数字滚动上涨，并弹出「▲+数值」。
- 画在 Canvas 上的贴图，分辨率至少是屏幕上最大显示尺寸的 1.5 倍，否则放大时会发虚。
【动画原则】
- 用 GSAP 时间线编排。所有动作都要有挤压拉伸、超调和弹性回弹，不要匀速。
- 粒子系统用 Canvas 2D 自己写：重力、阻力、生命周期、叠加混合，以及「吸入」「曲线飞行」「环绕」三种运动。
- 不要用 CSS 3D 透视去翻转大尺寸元素，放大加侧翻时会被投影成铺满屏幕的平面，3D 翻转一律放在 WebGL 里做。
- 所有「抖动」「呼吸」类的循环补间，在状态切换时要先取消再归零，避免它比停止指令晚一帧结束，又把值设回去。
【音效】
- 全部用 Web Audio 实时合成，不用音频文件：跳起、落地、升级和弦、蓄力上升音、爆炸低频加噪声、弹出音、计数滴答、金币叮当、胜利号角。
- 第一次点击时才初始化音频；右上角放静音开关。
【界面与工程】
- 顶部 HUD：模式切换、金币和宝石余额、静音按钮。
- 手机宽度也要能用；遵守「减少动态效果」设置（关闭震屏，减少粒子）。
- 动画状态机要严谨：动画播放中忽略点击，不能出现点击被吞或状态错乱。
- 目标 60fps。第一次打开时就是完整的待机画面，不能是空白。
【交付前自检】
在蓄力、爆发、揭晓、结算这几个时刻各截一张图，逐张检查：
- 主角有没有被光晕、粒子或文字挡住？
- 有没有过曝成一片白？
- 背景是否杂乱，有没有穿帮的描边线？
- 小字是否能看清？
- 结算后是否还有东西在不该动的时候继续抖动？
最后告诉我：每个阶段的时长，以及哪些参数可以调整演出强度。
中文翻譯
幫我做一個原創的手遊「高光時刻」動效：[主體，例如：開寶箱 / 段位晉升 / 成就解鎖 / Boss 掉落 / 角色升級]。
做成一個可以直接打開的單文件網頁（HTML + CSS + JS），點一下就能完整播放，效果對標商業手遊的結算 / 獎勵演出。
【世界觀與風格】
- 原創美術，不要模仿任何現有遊戲的 IP、角色或 Logo。
- 卡通手遊風：高飽和配色，統一的深色描邊（例如 #1A1033），圓潤厚重的造型。
- 配色隨等級升級：[等級階梯，例如：普通綠 → 稀有藍 → 史詩紫 → 傳說金]。每升一級都要切換主色、光效顏色和背景色調。
- 標題用圓胖的遊戲字體（如 Titan One / Lilita One），描黑邊，加投影；文字逐字「砸」進畫面，帶回彈。
【主體物：做成真 3D】
- 用 Three.js 建模，不要用平面 SVG 貼圖。要有厚度、倒角，以及符合主體的結構細節（木板縫、鉚釘、包邊、寶石切面、鎖釦等）；木板縫這類細節用真實幾何體拼出來，不要貼黑線條。
- 着色用卡通分階（MeshToonMaterial 加 3～4 階的漸變貼圖），配三種燈光：主光、天光、等級色的輪廓光。
- 描邊用後期邊緣檢測：渲染法線圖 + 深度圖，再用着色器畫線。外輪廓粗、零件交界細，粗細全程一致；另外做 1.5 倍超採樣和多重採樣抗鋸齒。
不要用「放大一圈的黑色背面」那種描邊，那樣粗細不均、轉角會斷。
深度判斷的閾值要放寬，接縫主要靠法線判斷，否則斜着看的表面會冒出細碎斜紋。
- 活動部件要真實運動，比如箱蓋繞鉸鏈翻開、獎章繞豎軸旋轉。
- 待機時主體緩慢左右轉動，讓人看到側面和厚度，同時輕微上下浮動；腳下要有隨高度變化的柔和投影。
【如果畫面裏有 2D 插畫（卡面、獎勵圖標、角色）】
- 三層卡通着色：底色、成塊的陰影色、高光色，不要只用一層漸變。
- 線條分粗細：外輪廓粗，內部結構線細。
- 每個角色或物件要有自己的表情和姿態，不要所有東西共用同一張臉。
- 腳下畫投影，讓主體「站」在畫面裏；背景按屬性區分圖案，不要全用同一套放射線。
【演出節奏：五個階段，缺一不可】
1. 預備：主體待機浮動，每隔幾秒抖一下提示可以點擊，底部顯示「點擊」提示。
2. 升級：每點一次，主體跳起、在空中轉一圈、落地時壓扁再回彈；同時切換到下一等級的顏色，閃一下光，冒一圈粒子，標題更新。
3. 蓄力（約 1 秒）：主體越抖越劇烈，縫隙透出光，四周粒子往中心吸，音效音調持續上升；最後一刻猛地壓扁。
4. 爆發：從爆點向外擴散的泛光閃白、屏幕震動、鏡頭往前一推、多層衝擊波、細長流光迸射、閃光星點、金幣和寶石（帶旋轉）。高等級的爆發要明顯更強。綵帶只在最高潮用一次，不要滿屏綵帶。
5. 揭曉與結算：
- 獎勵卡片從主體裏沿弧線飛出，落位時帶超調和晃動收尾，數字滾動計數。
- 稀有物品帶彩虹流光邊框和「NEW!」角標。
- 點擊領取後，金幣和寶石沿貝塞爾曲線飛進右上角的餘額，每到一個餘額就跳一下。
【揭曉舞臺：讓主角獨佔畫面】
- 最高稀有度揭曉時，其他元素收起或淡出，背後換成一層乾淨的漸變幕布加緩慢旋轉的柔光，不要讓主角壓在雜亂的背景上。
- 幕布出現時，把場景裏的其他 3D 物件隱藏掉，否則後期描邊會把它們的輪廓線畫在幕布上。
- 主角的外發光要放在主體背後，只從邊緣溢出，不能蓋在主體前面把它糊成一片白。
- 可以加一圈圍繞主角盤旋的星塵拖尾，但軌道必須完整在主角輪廓外側，不能從主體正面掃過。
【光效：必須柔和，不能有硬邊】
- 背景光芒：用帶漸變過渡的 conic-gradient，不要一刀切的色塊邊緣；疊 2～3 層不同密度、不同轉速的光。
- 光柱：由 5～7 道帶模糊的光束呈扇形散開，亮度各自輕微閃動；根部加一團柔光核心，光裏有光塵緩慢上飄。
- 閃白：從爆點向外的徑向泛光（mix-blend-mode: screen），強度不超過 0.8，不要整屏純白過曝。
- 粒子：每個火花都帶一圈低透明度的外暈；衝擊波用三層描邊（寬而淡、中等、細而亮）。
【材質與界面】
- 邊框、名牌、按鈕要有材質感：金屬拉絲漸變、左上亮右下暗的倒角光、內陰影；按稀有度換鑲嵌件（鋼鉚釘 → 銀框寶石 → 金框鑽石加小王冠）。
- 小卡片上不要塞小字數值；詳細數值放到揭曉時的信息面板裏，面板裏的數字滾動上漲，並彈出「▲+數值」。
- 畫在 Canvas 上的貼圖，分辨率至少是屏幕上最大顯示尺寸的 1.5 倍，否則放大時會發虛。
【動畫原則】
- 用 GSAP 時間線編排。所有動作都要有擠壓拉伸、超調和彈性回彈，不要勻速。
- 粒子系統用 Canvas 2D 自己寫：重力、阻力、生命週期、疊加混合，以及「吸入」「曲線飛行」「環繞」三種運動。
- 不要用 CSS 3D 透視去翻轉大尺寸元素，放大加側翻時會被投影成鋪滿屏幕的平面，3D 翻轉一律放在 WebGL 裏做。
- 所有「抖動」「呼吸」類的循環補間，在狀態切換時要先取消再歸零，避免它比停止指令晚一幀結束，又把值設回去。
【音效】
- 全部用 Web Audio 實時合成，不用音頻文件：跳起、落地、升級和絃、蓄力上升音、爆炸低頻加噪聲、彈出音、計數滴答、金幣叮噹、勝利號角。
- 第一次點擊時才初始化音頻；右上角放靜音開關。
【界面與工程】
- 頂部 HUD：模式切換、金幣和寶石餘額、靜音按鈕。
- 手機寬度也要能用；遵守「減少動態效果」設置（關閉震屏，減少粒子）。
- 動畫狀態機要嚴謹：動畫播放中忽略點擊，不能出現點擊被吞或狀態錯亂。
- 目標 60fps。第一次打開時就是完整的待機畫面，不能是空白。
【交付前自檢】
在蓄力、爆發、揭曉、結算這幾個時刻各截一張圖，逐張檢查：
- 主角有沒有被光暈、粒子或文字擋住？
- 有沒有過曝成一片白？
- 背景是否雜亂，有沒有穿幫的描邊線？
- 小字是否能看清？
- 結算後是否還有東西在不該動的時候繼續抖動？
最後告訴我：每個階段的時長，以及哪些參數可以調整演出強度。
溯源
- 原作者
- prasenx
- 發佈日期
- 2026-09-24（由推文 ID 反解）
- 原始出處
- 查看原帖 ↗
- 收錄來源
本條由 21 個來源合併去重而來
