简介面向 Cocos Creator 游戏开发入门者这份基于 2.4.10 版本的 2D 人物 3D 背景示例项目聚焦人物移动与透视视角设置能帮助理解混合场景搭建、输入监听和摄像机参数调整。压缩包共 33 个文件包含 4 个 TypeScript 脚本、多个 JSON 配置、PNG 图片及 meta 等类型整体约 313KB目录结构清晰便于直接查看核心代码与场景配置。已有 464 人浏览学习。资源内含可运行的项目场景NewProject_7及 creator.d.ts、tsconfig 等工程配置读者可对照代码学习通过键盘或触摸输入驱动角色移动以及借助摄像机位置与视角参数实现深度透视效果作为 2D/3D 混合玩法的实战参考有助于快速上手 Cocos Creator 的双维度开发流程。1. 2D 人物 3D 背景的透视融合第一眼以为是 2D结果是混搭场景有人丢给我一份 cocos creator 2.4.10 的工程我打开后第一反应是“这不就是个普通 2D 游戏吗”——人物是序列帧场景是手绘风。等我把人物挪到墙角才发现那面墙是带透视的 3D 模型地面也是按透视投影铺的。这个工程真正解决的是 2D 角色与 3D 背景同屏时的坐标统一、层级遮挡和移动手感问题核心玩法就是人物在透视场景里自由走动。适合想研究 2D3D 混搭方案、又不想啃复杂渲染原理的开发者也适合做俯视角 RPG、解谜 Demo 的人拿去做资源参考。2. 同一场景两套坐标系2D 节点与 3D 平面的共存策略2.1 为什么不能直接把人物拖进 3D 场景很多人拿到工程第一反应是既然背景是 3D那把 2D 人物也放进去挂在一个 3D 节点下不就行了我一开始也这么干结果人物直接变成了贴在背景上的一张纸片放大缩小都跟着 3D 相机走一转身就糊了。原因是 2D 角色用的 Sprite 渲染模式本质是面向正交相机的平面放进透视相机场景里它会跟着相机 FOV 变形近大远小非常明显角色一走近屏幕边缘就歪掉。所以这套工程的做法很明确人物放在 UI 渲染层背景放在 3D 渲染层两层共用一套“视觉坐标”而不是把节点塞进同一棵渲染树。这样人物始终是正的背景的透视感由 3D 相机负责。常见做法是先建一个空节点作为“逻辑坐标中心”人物节点挂在中心下背景模型也挂在中心下两边各用各的坐标系。2.2 双相机分层谁渲染人物谁渲染背景工程里最值得抄的部分是相机分层。主相机设置成透视投影负责渲染 3D 背景剔除掉人物所在的 2D 层再单独挂一个正交相机只渲染人物和特效层。两个相机一前一后叠在同一画面上背景就有透视纵深人物却始终是像素对齐的。我一般这样配正交相机的 ClearFlags 设为“仅深度”或透明这样它不会把背景刷掉只叠加 2D 内容。渲染顺序上先画背景再画人物。2D 人物图层放在 Canvas 下那个 Canvas 的 RenderMode 选 Screen Space Camera指定给正交相机这样人物坐标系始终以屏幕像素为单位方便后面做移动计算。2.3 脚底锚点2D 位置到 3D 平面的唯一入口混搭场景最大的坑是“人物站在地面上”这个视觉关系。3D 地面是有深度的2D 人物只有 x、y 两个坐标如果直接把人物节点贴到屏幕位置走到画面下方时人物会像飘在地面上方走到画面最上方又像陷进地面里。工程里给每个角色单独留了一个“脚底锚点”子节点。这个锚点的含义是角色模型底部中心点必须压在地面碰撞体的投影平面上。代码层面就是把锚点的屏幕 x、y 转成 3D 地面的某个近似坐标再把这个坐标反馈给背景层做遮挡排序。换算公式不用太精确常见做法是取一条地面灭线附近的缩放系数。// 脚底锚点换算挂在角色控制器脚本里 const ref { screenHeight: 640, // 设计分辨率高度 vanishY: 200, // 灭线所在的屏幕 y bottomY: 560 // 地面最低参考线 y }; // 根据屏幕 y 计算透视缩放越靠近灭线越小越靠画面下方越大 function getScaleAt(screenY) { let t (screenY - ref.vanishY) / (ref.bottomY - ref.vanishY); return Math.max(0.4, Math.min(1.6, 0.6 t * 1.0)); }这段逻辑思路是每个角色的脚底点都经过这个函数换算出一个透视缩放值用来调整碰撞盒高度和遮挡层级。参数里vanishY和bottomY不是写死的换背景贴图时必须按实际场景重新取点我一般会把背景图拖进编辑器用两个调试节点标出灭线和最低位置。这里最容易出的问题是 t 值算出来是负数或超过 1角色出现在灭线以上或者画面边界外所以clamp到 0.4~1.6 是比较稳的做法。3. 透视视角下的地面成角构图、行走方向与脚下对齐3.1 背景贴图的透视灭点怎么用这套工程的地面不是横平竖直的而是接近 45 度斜视角类似传统日式 RPG 的八方向地图。做这种场景背景贴图本身必须先有一条明确的灭线。我在工程里检查过它的背景资源地面砖缝线整体向画面中心偏上一点汇聚人物身高大概占画面高度的四分之一这个比例决定了看起来最舒服。拿到手后第一件事别急着写代码先把背景导出成一张图在绘图软件里找到地面主要线条的汇聚点记录下那个点的屏幕坐标。这个坐标就是 3D 相机的“视觉中心”。后面所有遮挡关系、缩放关系都要绕着它算。我见过有人把背景画成平行线人物怎么摆都像滑冰就是因为灭线位置被忽略。3.2 行走方向换算屏幕八方向不等于地面八方向接下来是最容易绕晕的地方。摇杆往右推角色在屏幕上应该往右走这没问题但摇杆往上推角色要“走”向画面深处还是简单地把 y 坐标往上加呢这套工程给了一个很聪明的处理人物移动仍然在屏幕坐标系里做但是纵向位移要叠加上透视收缩系数越靠近灭线同样的摇杆位移在屏幕上看起来应该越短才能模拟走进远处的效果。// 移动换算把屏幕输入转成最终人物位移 let vx joystick.dir.x; let vy joystick.dir.y; let scale getScaleAt(this.node.y); this.node.x vx * this.moveSpeed * dt; this.node.y vy * this.moveSpeed * 0.6 * scale * dt;如果只是把横向纵向都用同一个速度人物在画面里的运动会显得违反透视。0.6这个系数是背景纵深感的经验值我调这个工程时试过 0.4 到 0.8太小人物理着发飘太大又像背景不存在。另外移动过程中每次都要重新取getScaleAt的返回值如果只在初始化时算一次人物走几步之后方向又会歪掉。3.3 脚下锚点、影子与缩放人物走进背景深处时如果还是一整个角色直接缩小画面会像用 PPT 缩放动画很假。这套工程的做法是分两段处理人物上半身保持原大小不动只有脚底锚点、影子和碰撞体积跟着透视缩放走。这样在视觉上人物越走越“沉”而不是越走越小。影子是最便宜又最有效的深度提示。工程里在角色子节点下放了一个半透明圆形贴图位置紧贴脚底锚点影子大小随getScaleAt同步调整。我把影子的 alpha 也做了联动越靠近灭影子越淡整个画面的空气透视感就出来了。如果背景是阳光强烈的室外场景影子偏移方向要和背景里的光照方向一致否则看着像两个光源。4. 移动手感的调参速度、朝向和边界4.1 摇杆输入的速度换算拿到工程先跑一下我发现人物移动手感偏“滑”松手后还会往前蹭一段。代码里确实做了一段滑动缓冲它的设计意图是模拟角色惯性适合 RPG 里的细腻走位。但初始速度参数给得太大把moveSpeed从 300 调到 180惯性时间从 0.3 秒降到 0.15 秒之后手感才正常。// 角色控制器核心参数 properties: { moveSpeed: 180, // 移动速度像素/秒 accelerationFade: 0.15, // 松手后的惯性时间秒 diagonalFactor: 0.7071 // 斜向移动时的速度折算 }这里有一个总被忽略的参数斜向移动。摇杆同时往右往上推时如果不做归一化人物斜向速度会变成横向速度的 1.4 倍看起来像偷偷开了加速。所以换算时要给斜向乘一个0.7071的系数。整套工程里这个值写得很明确新手容易忽略老手可以直接抄。4.2 转身与镜像翻转透视场景里人物转向最怕做旋转。2D 人物素材通常只有朝右的序列帧让它朝左时我一般直接做scaleX -1镜像翻转而不是旋转 180 度。这套工程里也是这么做的朝上朝下则用固定角度序列帧。问题出现在斜向移动时如果按八个方向取角度人物会在左右镜像之间频繁切换产生抖动的“洗脸”效果。常见做法是加一个判定阈值只有当输入方向越过 90 度和 270 度方向线时才切换左右镜像。我加了一个小技巧切换镜像时保留人物脚底锚点的位置不变否则角色会突然跳起来半个头。4.3 碰撞边界投影体积而不是 3D 物理体人物是 2D 的背景是 3D 的物理碰撞不能直接用 3D 刚体。硬加 BoxCollider 到 3D 背景上人物根本撞不到因为角色不在同一物理世界。这套工程的处理是给每个 3D 障碍物算一个“屏幕投影矩形”然后把碰撞判断放在 2D 层做。// 障碍物投影碰撞盒从 3D 模型投影到屏幕坐标系 function getProjectedBox(obstacle3D) { let min obstacle3D.getWorldPosition(); // 模型底边中点 return { x: min.x - obstacle3D.width / 2, y: min.y - obstacle3D.height / 2, w: obstacle3D.width, h: obstacle3D.height }; }这套做法的好处是计算量小适合小场景。缺点是投影盒是静态的相机一旦跟着人物旋转盒子的位置就对不上了。所以工程里相机基本固定视角。如果你后续要加相机旋转得把投影盒改成每帧重新计算一次或者直接升级为射线检测那就更复杂了。5. 避坑手册透视混搭最容易翻车的四个位置5.1 人物被 3D 背景模型吞掉现象人物走到墙边身体明明在墙前面墙却把人物遮住了像人物被背景吃掉。原因2D 人物和 3D 背景用了不同的渲染管线层级判断靠的是 zIndex 和渲染顺序而不是 3D 空间深度。墙的 zIndex 比人物层高整面墙都会盖住人物哪怕墙在视觉上只是掠过人物头顶。解决别依赖全局 zIndex把遮挡关系拆成“脚底锚点”的排序。每个地面实体和人物都有一个 worldY 坐标按这个坐标实时调整 y 排序开关。我在这套工程里给墙加了两个碰撞体组件一个管挡住角色一个管穿透遮挡效果就是角色站在墙前正常遮挡走到墙后又被墙盖住。5.2 透视背景和像素人物撕裂现象背景是细腻的渐变 3D 渲染人物是像素风贴图两者边界有明显的“数码感”像两个游戏拼在一起。原因像素风贴图在非整数缩放时产生锯齿3D 背景又自带抗锯齿两种风格混在一起眼睛会用边缘差异放大这种撕裂。解决给人物贴图的纹理过滤改成 Nearest渲染时强制关掉平滑缩放让锯齿风格统一。同时把人物贴图的 PPU 调到和背景单位一致。我按这个思路把贴图分辨率从 256 降到 128重新做了二倍化处理撕裂感轻了很多。千万别想着靠加模糊滤镜盖过去滤镜过后人物就脏了。5.3 坐标回跳和滑步现象角色停下后脚底偶尔会原地抖几下或者明明停住了影子还往前滑一小截。原因惯性缓冲逻辑在停止时没有清空速度向量导致 stop 信号发出后 velocity 仍然非零另外移动计算里把缩放系数乘在了位移上停下来的那一帧缩放突然变了脚底锚点跟着跳。解决加一个停止标志位当摇杆输入为零时直接把速度归零并跳过缩放系数计算。我在控制器里加了一行if (inputMag 0.01) { vx 0; vy 0; }问题就不见了。影子滑步则是因为影子节点的插值逻辑与角色移动逻辑分开更新改成每帧用角色位置硬赋值就正常了。5.4 屏幕适配宽度导致人物飘出地面现象在宽屏手机上背景地面看着完整但人物走到屏幕左右两边时脚底明显没有贴合地面砖缝。原因适配方案只做了高度适配宽度拉长后背景地面横向被拉伸灭点位置偏移但人物的透视缩放系数还按原设计分辨率计算两边就自然对不上。解决把透视缩放系数改成动态计算。用实际屏幕宽高除以设计宽高得出一个比例参与getScaleAt计算。我用这句做了兼容let ratio screen.width / screen.height; let adjustedY node.y * ratio;。如果背景是固定贴图而不是 3D 模型跨设备时最好还是锁定分辨率然后居中裁切别让地面横向变形。6. 进阶验证法用一条参考线检验透视对齐最后的调试技巧是我从这套工程里反复踩坑后沉淀出来的在场景里立一条参考线专门验证人物脚底锚点是否真的贴合地面。做法很简单在背景 3D 地面最深处的某条砖缝上放一个细长的红色立方体拉伸到画面横向贯穿。然后让角色在这条线上来回走。角色脚步与红线完全重合说明脚底锚点与地面投影深度一致如果角色脚底在红线前方或后方说明透视系数或灭点坐标偏了。// 调试参考线放在地面层验证脚底投影 const DebugLine { x: 0, y: 320, // 这个 y 需要和背景砖缝实际位置对齐 width: 1500, thickness: 4, color: #ff4444 };我习惯在那里同时放两条线一条对应画面最高处一条对应最低处。人物从上往下走如果两条都能贴合整个透视换算基本就成立了。从那以后我每次拿到类似的 2D3D 混搭工程都会先花十分钟把这条参考线立起来再动其他参数省掉了至少两天的“凭感觉调参”时间希望能帮到你。本文还有配套的精品资源点击获取