MidnightGrill · 深夜食堂 — Three.js 3D + Unity 游戏动画特效

项目概况 · 双版本

Three.js 版

C# 脚本

粒子特效

动画类型

深夜食堂是一款烹饪模拟游戏，拥有两个独立版本：

🔥 Three.js 3D 版 — 实时 WebGL 3D 渲染，可直接在浏览器中试玩。完整 3D 厨房场景（地板/墙面/木条装饰/霓虹灯招牌/日式灯笼），实时阴影（PCFSoftShadowMap），ACES 色调映射，粒子特效系统（烹饪蒸汽/油花飞溅/完成爆发/金币粒子），浮动文字动画，CSS 弹性 UI 动画（订单卡片入场/Combo 弹出/按钮呼吸）。

🎮 Unity 2D 版 — 底层游戏架构验证。 12 个 C# 脚本 + GameManager 状态机驱动的完整游戏循环，程序化粒子（零外部贴图依赖）+ UI 动画曲线系统 + Spine 骨骼动画集成。

Three.js 3D 技术栈

渲染引擎： Three.js 0.160 · WebGL 2.0 · ACES Filmic Tone Mapping
光照： 方向光（月亮光）+ 点光源（厨房暖光 + 霓虹反射）+ 环境光 · PCFSoft 阴影
3D 场景： 木质台面 · 4 个 CylinderGeometry 烹饪站 · TorusGeometry 发光环 · CanvasTexture 霓虹招牌
粒子系统： 程序化粒子池（蒸汽/金币/完成/失败）· 生命周期管理 · 缩放+透明度动画
交互： Raycaster 拾取 · Pointer Events · 移动端触控适配
UI： CSS 弹性动画（cubic-bezier 缓动）· 订单卡片入场 · Combo 弹出 · 浮动数字
音效： Web Audio API 合成音效（正弦波/锯齿波/三角波）

游戏系统架构

GameManager 状态机驱动全部游戏逻辑，6 个子系统各司其职：

GameManager — 主控状态机（Title → Playing → DayEnd → Upgrade → GameOver），天数/金币/连击/升级管理，PlayerPrefs 存档
CustomerSpawner — 顾客 + 订单生成，动态难度（天数增加 → 订单量增加），入场动画
CookingStation — 4 种烹饪站（烤架/炸锅/备菜/出餐），进度条 + 食材变色 + 光晕提示
SelectionManager — 食材按钮选择系统，点击食材 → 发光选中 → 点击烹饪站放置
AssemblyPlate — 装盘系统，食材组合匹配算法（Dictionary 计数比对），自动触发订单完成
Order — 订单生命周期：初始化 → 计时 → 食材填充 → 完成/超时失败

粒子特效系统（VFX）

全部粒子特效由 VFXManager.cs 的 CreateProceduralMaterial() 方法在运行时生成 32×32 像素纹理——圆形、柔光团、四角星三种形状——零外部贴图依赖。

💨

烹饪蒸汽

柔光团粒子 · 缓升+渐消 · CircleShape 发射器

💥

油花飞溅

尖锐圆形粒子 · Burst 爆发 · 重力+随机旋转

⭐

完成金光

星形粒子 · SphereShape + 反重力 · 金色色调

🪙

金币爆发

星形黄色粒子 · Canvas 空间 · 订单完成触发

💫

Combo 光晕

全屏粒子层 · Combo≥5 触发 · 3秒自动销毁

📳

屏幕震动

Camera 随机偏移 · 指数衰减 · 震感可配置

// VFXManager.cs — 运行时程序化粒子纹理生成
Material CreateProceduralMaterial(Color tint, bool softBlob, bool star = false)
{
    int size = 32;
    var tex = new Texture2D(size, size, TextureFormat.RGBA32, false);
    // ... pixel-level circle/star/soft-blob pattern generation ...
    var mat = new Material(Shader.Find("Particles/Standard Unlit"));
    mat.mainTexture = tex;
    return mat;
}
  

UI 动画系统

UIAnimator.cs 提供 8 种动画原语，全部由 AnimationCurve + Coroutine 驱动，不依赖 DOTween 等第三方库：

SlideIn — 从右侧滑入 + 弹性曲线（订单卡片入场）
DropIn — 从上方掉落 + 缩放渐显（日结算面板）
Pop — 弹性缩放弹出（Combo 文字）
Punch — 快速缩涨（金币变化反馈）
Stagger — 子元素交错入场（升级卡片）
FlashColor — 颜色闪烁（按钮反馈）
CountTo — 数字滚动动画（金币递增）
Pulse — 持续呼吸缩放（选中状态指示）

Spine 骨骼动画集成

角色在 Spine 中完成全套骨骼动画制作，通过 spine-unity 运行时集成到 Unity：

Idle — 2 秒循环 · 呼吸起伏 + 微小身体晃动
Walk — 1 秒循环 · 手臂摆动 + 腿部迈步 + IK 脚掌踩地
Happy — 1.5 秒 · 跳起 + 举手 + 表情变化

动画状态机由 SpineAnimationController.cs 管理，根据游戏事件切换动画轨道，使用 SkeletonAnimation.AnimationState.SetAnimation() 实现 Crossfade 混合过渡。

技术栈

引擎： Unity 2022.3 LTS · 2D Core
语言： C# (.NET Standard 2.1)
动画： Spine 2D (spine-unity runtime) · Unity ParticleSystem · UI AnimationCurves
渲染： Post-processing (Bloom + Vignette + Color Grading) · URP 2D Renderer
输入： Mouse + Touch (pinch zoom)
数据： ScriptableObject (RecipeDatabase) · PlayerPrefs (存档)
版本控制： Git

反思与下一步

✅ 程序化粒子省去了外部贴图依赖，但若重来会从第一天就搭建 Post-processing 管线
✅ 模块化架构让新烹饪站/新菜谱的添加成本极低（只需修改 RecipeDatabase.asset）
🔜 计划添加更多 Spine 角色动画（厨师烹饪动作、顾客生气/离开动画）
🔜 Build WebGL 版本部署到 itch.io，方便面试官直接试玩

← 返回作品集