目录
Cocos Creator 3.8 2D 游戏开发知识点整理
Cocos Creator 3.8 2D 游戏开发知识点整理
1. Cocos Creator 3.8 概述
- 基于 TypeScript 和 JavaScript 开发
- 采用 ECS（实体-组件-系统）架构，便于管理游戏对象
- 提供 WebGL 和 Canvas 渲染模式，兼容 Web、原生、小游戏平台
- 支持 Box2D 和 Cannon.js 物理引擎
2. 2D 游戏核心组件
(1) 节点（Node）与组件（Component）
- Node（节点）：游戏对象的基本单位，可包含多个组件
- Component（组件）：添加到节点上的功能模块，如 Sprite、Collider、RigidBody
(2) 渲染组件
- Sprite（精灵）：渲染 图片、精灵帧动画
- Label（文本）：用于显示游戏内文字
- Graphics（绘图）：绘制自定义图形，如血条、特效
- Mask（遮罩）：用于实现裁剪效果
- SpriteAtlas（图集）：优化加载多个精灵
(3) UI 组件
- Button（按钮）：响应点击事件
- Layout（布局）：自动排列子节点
- ScrollView（滚动视图）：实现滚动列表
- ProgressBar（进度条）：如血条、加载进度
3. 动画系统
(1) 传统帧动画
- SpriteFrame Animation：通过精灵帧序列切换，实现动画
(2) 动画编辑器
- Animation 组件：支持关键帧动画
- 支持插值计算：位置、旋转、缩放、透明度
- 支持曲线控制（贝塞尔曲线）
(3) Spine 和 DragonBones
- Spine：骨骼动画，适合复杂角色
- DragonBones：阿里出品，适用于国风游戏
4. 物理系统
(1) 物理引擎
- 内置 Box2D（2D 物理），可实现重力、碰撞、反弹
- Cannon.js（3D 物理），可用于部分 2D 游戏
(2) 刚体（RigidBody2D）
- 动态（Dynamic）：受力影响，如角色
- 静态（Static）：不会移动，如地面
- 运动（Kinematic）：不受物理影响，如电梯
(3) 碰撞检测
- Collider 组件：如 BoxCollider、CircleCollider、PolygonCollider
- 监听碰撞回调：
onBeginContact、onEndContact
5. 输入系统
(1) 触摸与鼠标事件
- cc.Node 事件：
touchstart、touchmove、touchend - 系统事件：
mousedown、mousemove、mouseup
(2) 键盘输入
systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, callback, this);
(3) 摇杆控制
- 监听 Touch Move 事件，计算角度，控制角色方向
6. 资源管理
(1) 动态加载资源
resources.load("路径", cc.SpriteFrame, (err, spriteFrame) => {});assetManager.loadRemote("远程资源地址", callback);
(2) 预加载资源
resources.preload("路径", cc.SpriteFrame);
(3) 图集优化
- 使用 SpriteAtlas 合并多个小图，减少 draw call
7. 网络与数据存储
(1) 网络请求
- HTTP 请求：使用
cc.assetManager.loadRemote()加载远程资源 - WebSocket：适用于实时多人游戏
(2) 本地存储
- cc.sys.localStorage：存储 JSON 数据、用户配置
- FileSystem API（原生端）：存储本地文件
8. 性能优化
(1) Draw Call 优化
- 使用图集（SpriteAtlas）：减少批量绘制的开销
- 合并 UI 组件：避免 UI 频繁重绘
(2) 物理优化
- 减少碰撞检测数量
- 使用简单碰撞体（Box 代替 Polygon）
(3) 资源优化
- 压缩图片（TinyPNG、TexturePacker）
- 合理使用对象池（Object Pool） 复用节点
总结
Cocos Creator 3.8 提供了完整的 2D 游戏开发工具，包括 节点系统、动画系统、物理引擎、UI 系统、输入系统、资源管理 等。开发 2D 游戏时，需要合理利用 图集、动画优化、对象池、碰撞优化 来提升性能。