《Cocos 游戏开发入门》4.2 固定步长物理与渲染插值
可变 dt 会让物理抖、会穿墙。本节用累加器把真实时间切成固定步长:讲清 maxSubSteps 如何防死亡螺旋、渲染插值 alpha 怎么把画面抹平,并把 mini2d 的 Clock 类完整写出来,包括「对增量取整而非绝对时间戳取整」这个关键点,最后给出 Cocos 3.8 对照。
category
可变 dt 会让物理抖、会穿墙。本节用累加器把真实时间切成固定步长:讲清 maxSubSteps 如何防死亡螺旋、渲染插值 alpha 怎么把画面抹平,并把 mini2d 的 Clock 类完整写出来,包括「对增量取整而非绝对时间戳取整」这个关键点,最后给出 Cocos 3.8 对照。
本节把《方块冲刺》的碰撞检测从零写起:先用中心加半宽的 AABB、圆形、OBB 三套结构定下形状,再逐个实现 AABB 区间重叠、圆与圆的免开方判定、圆与 AABB 的最近点法,以及 OBB 的分离轴定理;最后用一张代价表说明各自适用场景,配 vitest 用例与 Cocos Creator 3.8 的 Collider2D 家族对照。
本节从《方块冲刺》里一个真实 bug 出发:不乘 dt 的移动在不同帧率下速度完全不同。我们推导为什么乘 dt 就帧率无关、dt 从哪里来、为什么要钳制,分清先乘后加与先加后乘,踩一遍跳跃用 dt 的坑,最后给出 Cocos Creator 3.8 的对照写法。
本节给《方块冲刺》搭起场景图:用 2×3 仿射矩阵合成父子变换,讲清局部矩阵与世界矩阵的差别,用脏标记做惰性重算,并按深度优先遍历节点树;同时给出 mini2d 的 Node 实现、vitest 验证,以及 Cocos Creator 3.8 中 Node 与 UITransform 的对照。
本节给 mini2d 补上 UI 布局层:用归一化锚点把控件钉在父容器的任意相对位置,做出百分比布局与横竖排列;再处理设计分辨率、等比缩放与刘海屏安全区。末节对照 Cocos Creator 3.8 的 Widget、Layout、UITransform、Canvas、view、ResolutionPolicy 与 SafeArea。
本节讲清世界坐标到屏幕坐标的映射:手写 Camera2D 的 worldToScreen 与 y 轴翻转,实现视口矩形与相机跟随;给出横竖屏适配的 showAll / noBorder 两种缩放策略,并处理设备像素比 DPR 带来的模糊问题;最后对照 Cocos Creator 3.8 的 Camera、Canvas、view、screen 与 ResolutionPolicy。
本节把 drawImage 从三参讲到九参,讲清源矩形与目标矩形如何切出图集里的一帧;用纯 TypeScript 实现 Sprite 的锚点偏移与九宫格拉伸,给出图集 JSON 描述与切分函数;最后对照 Cocos Creator 3.8 的 Sprite、SpriteFrame、SpriteAtlas 与 UITransform,说明锚点与九宫格在编辑器里怎么配。
本节解释为什么同样的判定逻辑有的游戏跟手、有的发飘:在输入与游戏循环之间加一层时间缓冲。用 TimedBuffer 实现跳跃缓冲、土狼时间与连击窗口,把「手感」变成三个可调秒数,并用假时钟单测锁住落地前抢跳、离地后补跳等边界场景,最后对照 Cocos 3.8 的键盘与触摸输入。
本节把原始指针事件升级成手势:用位移阈值与时间阈值定义点击、双击、长按与滑动,用 Map 按 pointerId 跟踪多指轨迹,用两指间距比值算捏合缩放,并处理 touch-action 与默认行为。所有判定都用假事件流在 vitest 里断言,最后对照 Cocos 3.8 的 EventTouch 与 getAllTouches。
对象能组装、能跑了,但关卡数值还写死在代码里。本节为 mini2d 引入组件字段描述符(类型与默认值),实现 serializeComponent / deserializeGameObject 双向管线,用 JSON 配置驱动《方块冲刺》的敌人实例化;末节给出 Cocos Creator 3.8 的 _decorator、Prefab 与 JsonAsset 完整对照。
组件挂上去之后还什么都不会发生,本节把 mini2d 的组件系统接进主循环,定义 onLoad/onEnable/start/update/lateUpdate/onDisable/onDestroy 七个回调的固定顺序,用状态位保证只调用一次,讲清启用状态如何向子节点传播,并实现一套带订阅与退订的事件总线,末节给出 Cocos Creator 3.8 的生命周期与 EventTarget 对照。
前五章的渲染、时间、输入能力还散在几个类里,要让《方块冲刺》的玩家、敌人、金币各自动起来,还缺一层组织方式。本节从深继承的三个硬伤讲起,亲手为 mini2d 写出 GameObject 持有 Component 的实体-组件结构,实现 addComponent/getComponent 与组件注册表,最后给出 Cocos Creator 3.8 的 Component 对照。
本节用 Pointer Events 统一鼠标与触摸,讲清 client、canvas、device、screen、world 五种坐标空间的换算:getBoundingClientRect 校正画布偏移、DPR 对齐位图与 CSS 尺寸、相机逆矩阵把屏幕坐标还原成世界坐标,并用 vitest 断言往返一致,最后对照 Cocos 3.8 的 input 与 screenToWorld。
本节从浏览器原生 fillRect 起步,讲清 Canvas2D 的 y 轴向下坐标系这个新手第一坑;随后手写 2×3 仿射矩阵,用纯 TypeScript 实现平移、旋转、缩放与矩阵乘法,解释变换顺序为何不可交换,并深入 ctx.save/restore 的状态栈;最后把变换接进 mini2d 的节点渲染,并给出 Cocos Creator 3.8 中 Node 变换的对照写法。
《Cocos 游戏开发入门》全书导航页:说明本卷定位、读者画像与前置知识、八到十周学习节奏与三条阅读路径,交代贯穿项目《方块冲刺》与从零运行时 mini2d,讲清三层可运行性口径,并按五个部分列出 18 章 54 节的完整章节索引,另含序、前言、附录 A–D 与常见问题速查表,方便读者按需定位、跳读与随时查阅。
《Cocos 游戏开发入门》的序。从「引擎已经很成熟,为什么还要自己写一个 2D 运行时」谈起,说明引擎封装掉了哪些机制、亲手实现一遍能换来怎样的判断力,交代本卷「从零实现 + 每章 Cocos 3.8 对照」的写法与三层可运行性口径,并逐一澄清「学 Cocos 为何要写引擎」「是不是在造轮子」「能否跳过 mini2d」三个常见误解。
《Cocos 游戏开发入门》前言:说明本书的由来与四类目标读者、Cocos Creator 3.8.8 与 Node 26 等技术栈版本口径、四卷共 180 篇的整体布局与本卷所处位置,讲清本书不写的四类内容,给出三条阅读路径、环境自检命令与代码获取方式,帮助读者在动笔前建立正确预期。
本节写出 mini2d 的第一个主循环:从 requestAnimationFrame 的可变 dt,到固定步长累加器与 maxSubSteps 防死亡螺旋,再用 FakeTime 假时钟在 Node 里把整条循环复现成单测,最后对照 Cocos Creator 3.8 的 director 主循环与 Component.update。
游戏世界是离散采样的:一帧就是一次快照。本节把「一帧」的心智模型讲透——时间为什么是离散的、dt 从哪来、坐标系必须回答原点在哪与 y 轴朝哪、单位是什么这三个问题,并给出屏幕坐标(左上、y 向下)与世界坐标(中心、y 向上)的换算与一个可单测的往返实验。
本节把《方块冲刺》的环境搭起来:锁定 Node 26.5 + TypeScript 7 + vitest 5 + vite 8 + Playwright 1.59,讲清三层可运行性口径,给出仓库骨架与 package.json,重点说明 tsconfig 如何通过 types 接入 @cocos/creator-types@3.8.8,让 Cocos 脚本也过 tsc --noEmit 检查。