简介这份资源面向使用 Cocos Creator 2.4.10 进行游戏开发的初学者与进阶开发者聚焦 2D 人物与 3D 背景混合场景的搭建解决人物移动控制与透视摄像机视角设置等常见问题。压缩包共 33 个文件约 313KB包含 4 个 ts 脚本用于人物移动与输入监听逻辑4 个 png 贴图与 1 个 atlas 图集承载 2D 人物素材6 个 json 与 1 个 fire 场景文件记录项目配置与场景布局另有 meta、creator.d.ts 等工程声明文件目录结构完整可直接导入编辑器运行。目前已有 464 人学习下载。通过该工程读者可参考 2D 精灵与 3D 模型共存的节点组织方式理解透视摄像机参数对空间纵深感的影响并借鉴脚本中位置更新与键盘、触摸输入的绑定思路快速搭建可移动角色的混合维度游戏原型。1. 2D人物踩在3D地面上这个Cocos Creator项目到底在做什么如果你做过2D横版或者俯视角游戏大概都遇到过同一个尴尬人物是纸片背景也是纸片整个画面平得像一张贴纸。想加点纵深感要么硬画透视背景要么干脆转3D引擎重做成本都不低。这个基于Cocos Creator 2.4.10的项目走了一条中间路线——用2D精灵做人物用3D模型搭场景再让摄像机带一点透视角度人物在3D地面上移动时会产生近大远小的空间感。它适合两类人一类是想在2D项目里低成本引入3D背景的独立开发者另一类是正在学Cocos Creator、想搞明白2D与3D混合渲染到底怎么落地的新手。项目本身不复杂但把「2D人物 3D背景 透视视角 移动控制」这条链路完整跑通了拿来当混合渲染的起点正合适。2. 场景搭建与节点结构2D和3D怎么塞进同一个场景2.1 先搞清楚Cocos Creator 2.4.10的渲染分层Cocos Creator 2.4.x 的渲染体系里2D和3D并不是两套完全隔离的世界它们共享同一个场景树但走不同的渲染管线。2D节点cc.Node 挂 cc.Sprite默认由2D渲染层处理3D节点挂 cc.MeshRenderer 之类走3D管线。关键在于摄像机的配置——2.4.x 里摄像机有 visibility 和 clearFlags 两个属性决定了它能看到哪些层、清屏时清什么。这个项目的核心思路是主摄像机保持透视投影Perspective让它同时能看到3D地面和2D人物。人物虽然是2D精灵但因为摄像机是透视的只要把人物节点放在3D空间里合适的位置它就会跟着透视关系产生缩放效果。听起来简单实际配置时最容易翻车的就是层级和深度问题。2.2 节点树长什么样一个能跑起来的典型节点结构大致是这样Scene ├── Main Camera (透视摄像机visibility含2D和3D层) ├── 3D Environment │ ├── Ground (3D平面/地形模型) │ ├── Props (场景装饰物3D模型) │ └── Directional Light(平行光照亮3D场景) ├── 2D Character │ ├── Body (cc.Sprite人物主体) │ └── Shadow (cc.Sprite脚下阴影) └── UI Canvas (2D UI层独立摄像机或同摄像机)这里有个细节值得说人物节点虽然挂的是2D精灵但它的 position 是在3D空间里计算的。也就是说人物的 x、y、z 三个坐标都参与运算z 值决定了它在3D场景中的前后位置。地面用3D平面人物贴着地面走摄像机从斜上方往下看透视感就出来了。2.3 摄像机参数怎么调摄像机是这个项目的灵魂参数不对要么人物被3D模型挡住要么透视感全无。常见做法是把摄像机放在场景斜上方朝向地面中心// Main Camera 的关键配置在编辑器里设置也可代码动态改 // 投影模式透视 camera.projection cc.Camera.ProjectionType.PERSPECTIVE; // 视场角45~60度之间透视感比较自然 camera.fov 50; // 摄像机位置斜上方俯视 camera.node.setPosition(0, 8, 10); // 看向场景中心 camera.node.lookAt(cc.v3(0, 0, 0)); // 可见层同时包含2D和3D层 camera.visibility cc.Camera.VisibilityFlag.DEFAULT | cc.Camera.VisibilityFlag.UI_2D;fov 这个参数直接决定透视强度。fov 越大近处物体越大、远处越小空间感越强但太大画面会变形fov 太小就接近正交投影透视感消失。我一般从50开始试根据场景大小微调。摄像机位置也要注意y 太高会变成俯视地图y 太低又看不到地面纵深8到12之间比较稳妥。注意2.4.x 里如果摄像机的 clearFlags 设成 SOLID_COLOR3D场景和2D人物会一起被清屏重绘顺序不对就会出现人物闪烁。建议把3D和2D放在同一个摄像机下渲染或者用 depth 控制渲染顺序。3. 人物移动与透视跟随从输入到坐标更新的完整链路3.1 输入监听与移动方向计算人物移动的输入部分很常规监听键盘或者触摸算出移动方向向量。但因为这个项目是透视视角移动方向不能简单用屏幕坐标得转换到3D世界空间里。// CharacterController.js cc.Class({ extends: cc.Component, properties: { moveSpeed: 5, // 移动速度单位/秒 groundNode: cc.Node, // 3D地面节点引用 }, onLoad() { // 注册键盘输入 cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this); this.moveDir cc.v3(0, 0, 0); }, onKeyDown(event) { switch(event.keyCode) { case cc.macro.KEY.w: this.moveDir.z -1; break; // 向前 case cc.macro.KEY.s: this.moveDir.z 1; break; // 向后 case cc.macro.KEY.a: this.moveDir.x -1; break; // 向左 case cc.macro.KEY.d: this.moveDir.x 1; break; // 向右 } }, onKeyUp(event) { // 松开按键时清零对应方向 switch(event.keyCode) { case cc.macro.KEY.w: case cc.macro.KEY.s: this.moveDir.z 0; break; case cc.macro.KEY.a: case cc.macro.KEY.d: this.moveDir.x 0; break; } }, });这里用 w/s 控制 z 轴、a/d 控制 x 轴是因为摄像机是斜俯视的z 轴方向在屏幕上表现为「上下」x 轴表现为「左右」。如果摄像机角度变了这套映射也要跟着调。moveDir 是个三维向量归一化之后乘以速度和时间就是每帧的位移量。3.2 每帧更新位置并限制在地面范围内移动逻辑放在 update 里核心是「方向归一化 → 乘速度和时间 → 累加到当前位置」。同时要限制人物不能走出地面边界否则会掉进虚空。update(dt) { if (this.moveDir.mag() 0.01) return; // 没有输入就不动 // 归一化保证斜向移动不会更快 let dir this.moveDir.normalize(); // 计算本帧位移 let delta cc.v3(dir.x * this.moveSpeed * dt, 0, dir.z * this.moveSpeed * dt); // 更新人物位置 let pos this.node.position.add(delta); // 边界限制假设地面是20x20的平面中心在原点 let halfSize 10; pos.x cc.misc.clampf(pos.x, -halfSize, halfSize); pos.z cc.misc.clampf(pos.z, -halfSize, halfSize); // y 保持贴地高度人物脚底对齐地面 pos.y 0.5; this.node.setPosition(pos); }cc.misc.clampf是Cocos自带的钳制函数把值限制在区间内。边界值 halfSize 要根据实际地面尺寸改地面多大就设多大。人物 y 值设成0.5是因为2D精灵的锚点默认在中心要让脚底贴地得把节点抬高半个精灵高度。这个数值每个人物不一样得根据精灵尺寸调。3.3 透视视角下的人物朝向与缩放透视摄像机下人物离摄像机近就大、远就小。如果项目需要人物始终面向移动方向可以用简单的旋转// 根据移动方向旋转人物假设人物默认朝前 if (dir.mag() 0.01) { // atan2 算出水平面内的角度 let angle Math.atan2(dir.x, dir.z) * 180 / Math.PI; // 平滑插值避免瞬间转向 let current this.node.eulerAngles.y; let target angle; this.node.eulerAngles cc.v3(0, cc.misc.lerp(current, target, 0.2), 0); }Math.atan2(dir.x, dir.z)返回的是弧度转成角度后赋给节点的 y 轴旋转。cc.misc.lerp做线性插值让转向有个过渡不会太生硬。如果人物是2D精灵旋转时要注意精灵本身是否支持多方向贴图否则转过去还是同一张图看起来会很怪。常见做法是准备四方向或八方向的序列帧根据角度切换。提示透视视角下人物缩放是自动的不需要手动改 scale。但如果你发现人物在远处变得太小看不清可以给摄像机加一个最小缩放限制或者把人物节点单独放到一个不受透视影响的层里。4. 避坑与常见问题混合渲染最容易翻车的几个点4.1 人物被3D模型遮挡明明站在前面却看不见现象人物走到某些3D道具后面直接被挡住消失但逻辑上人物应该在前方。原因2D精灵和3D模型的渲染顺序由摄像机的 depth 和节点的 z 值共同决定。2D节点默认可能被排到3D之后渲染或者 z 值计算方式和3D不一致。解决把人物节点的 z 值设得比3D道具更靠近摄像机或者在人物上挂一个透明的3D包围盒来参与深度测试。更稳妥的做法是把2D人物和3D场景放在同一个渲染队列里用节点的 worldPosition.z 来控制前后关系。4.2 移动时人物抖动或跳帧现象人物移动不流畅偶尔会瞬移一下。原因update 里直接改 position 没有考虑帧率波动或者输入方向没有归一化导致斜向移动速度异常。解决位移计算必须乘 dtdelta time保证不同帧率下速度一致。方向向量一定要 normalize否则斜向移动会变成1.414倍速度。另外检查是否有其他地方也在改人物位置多个脚本同时操作同一个节点会打架。4.3 透视摄像机下UI错位或变形现象血条、按钮这些UI元素跟着3D透视一起变形了。原因UI Canvas 和3D场景共用了同一个透视摄像机。解决给UI单独建一个正交投影的摄像机或者把UI Canvas的 renderMode 设成独立模式。2.4.x 里推荐用两个摄像机一个透视的管3D和2D人物一个正交的管UI。两个摄像机的 visibility 分开设置互不干扰。4.4 地面边界判断不准人物走到边缘还在走现象人物已经走出地面模型了但还能继续移动看起来像悬空。原因边界限制用的是硬编码的数值和实际地面尺寸不匹配。解决把地面尺寸做成可配置的属性或者直接从地面节点的 boundingBox 读取实际大小。如果地面是不规则形状就得用碰撞检测或者寻路网格来判断可行走区域不能简单用矩形钳制。4.5 2D精灵在3D空间里光照不对现象3D场景有明暗变化但2D人物始终一个亮度显得很突兀。原因2D精灵默认不受3D光照影响走的是自己的渲染管线。解决如果想让2D人物也受光照影响可以改用3D材质渲染精灵或者手动根据人物位置计算一个亮度值动态调整精灵的 color 属性。简单做法是给人物加一个跟随的2D光源效果用叠加一层半透明黑色精灵来模拟阴影。5. 二次开发与改造把这个Demo变成你自己的项目5.1 换人物和场景资源项目里的人物是2D精灵场景是3D模型替换起来很直接。人物部分把 cc.Sprite 的 spriteFrame 换成你自己的序列帧就行注意锚点要设在脚底不然贴地会飘。场景部分把3D模型拖进场景调整位置和缩放确保地面在 y0 附近。如果换了地面尺寸记得同步改移动脚本里的边界值。// 把边界值改成从地面节点动态获取 properties: { groundNode: cc.Node, // 拖入3D地面节点 }, onLoad() { // 读取地面模型的包围盒 let box this.groundNode.getComponent(cc.MeshRenderer).model.worldBounds; this.halfX box.size.x / 2; this.halfZ box.size.z / 2; }, update(dt) { // 用动态边界替代硬编码 pos.x cc.misc.clampf(pos.x, -this.halfX, this.halfX); pos.z cc.misc.clampf(pos.z, -this.halfZ, this.halfZ); }这样换场景就不用改代码了地面多大人物就能走多远。5.2 加碰撞和交互纯移动太单调实际项目里人物要能撞墙、捡东西、触发事件。2D人物和3D场景做碰撞常见做法是在3D场景里放隐形的碰撞体人物移动时做射线检测或者简单的距离判断。// 简单的圆形碰撞检测 checkCollision(newPos) { for (let obstacle of this.obstacles) { let dist cc.v2(newPos.x - obstacle.x, newPos.z - obstacle.z).mag(); if (dist obstacle.radius this.radius) { return true; // 碰撞了 } } return false; }obstacles 是一个数组存了每个障碍物的位置和半径。移动前先算一下新位置会不会撞会撞就不让走。这种方法适合障碍物不多、形状简单的场景。复杂场景还是得上物理引擎或者寻路网格。5.3 调整透视强度和摄像机跟随如果觉得透视太强或太弱改摄像机的 fov 就行。想让摄像机跟着人物走把摄像机节点设成人物节点的子节点或者每帧把摄像机位置设成人物位置加一个偏移量。// 摄像机跟随保持固定偏移 lateUpdate(dt) { let targetPos this.character.position.add(this.offset); // 平滑跟随避免抖动 this.cameraNode.position this.cameraNode.position.lerp(targetPos, 0.1); }offset 是摄像机相对人物的偏移向量比如 (0, 8, 10)。用 lerp 做平滑跟随会有点延迟感看起来更舒服。lateUpdate 在 update 之后执行保证人物位置已经更新完了再动摄像机。5.4 性能优化要注意的地方2D和3D混合渲染比纯2D更吃性能尤其是3D模型面数多的时候。几个优化方向3D场景尽量用低模远处物体用LOD或者直接剔除2D人物的序列帧图集要合并减少draw call摄像机的 visibility 只开必要的层别把UI层也塞进透视摄像机。如果目标平台是移动端fov 别设太大透视计算量会随视锥体增大而增加。提示2.4.10 的3D渲染在移动端上性能一般如果场景复杂建议把3D背景烘焙成静态贴图只在需要透视感的地方保留少量3D模型。5.5 一个我踩过的坑刚开始做这个项目时我把人物节点直接放在3D地面节点的子节点下想着这样人物就能跟着地面一起动。结果人物移动时坐标全乱了因为子节点的 position 是相对父节点的地面一旋转人物的移动方向也跟着转。后来把人物和地面拆成平级节点人物位置用世界坐标算才正常。从那以后我每次做混合场景都强制把2D和3D节点放在平级坐标全部用世界坐标算不再嵌套。希望这个经验能帮你少走点弯路。本文还有配套的精品资源点击获取