CocosCreator 2.4.8 实战：用TypeScript手搓一个《飞机大战》，附完整源码和避坑点

CocosCreator 2.4.8 TypeScript实战深度解析《飞机大战》开发全流程当谈到2D游戏开发入门项目时《飞机大战》无疑是经典中的经典。这款游戏不仅玩法简单直观更包含了游戏开发中最核心的模块角色控制、碰撞检测、对象池管理、UI交互等。本文将基于CocosCreator 2.4.8版本使用TypeScript从零开始构建一个完整的飞机大战游戏重点解析那些官方文档中不会告诉你的实战技巧和性能优化细节。1. 项目架构设计与资源准备在动手编码之前合理的项目结构规划能避免后期大量重构。我们采用模块化设计思路将游戏分为以下几个核心组件GameManager: 游戏全局状态管理PlayerController: 玩家飞机控制与射击逻辑EnemySpawner: 敌机生成与移动控制BulletSystem: 子弹对象池与碰撞处理BackgroundScroller: 无限背景滚动实现UIManager: 分数显示与游戏状态UI资源目录结构建议如下/resources /audio shot.mp3 explosion.mp3 /prefabs player.prefab enemy.prefab bullet.prefab /textures bg_01.png bg_02.png bg_03.png提示所有动态加载的资源必须放在resources目录下这是CocosCreator的硬性规定2. 核心游戏逻辑实现2.1 玩家控制系统玩家飞机的移动控制需要同时考虑触摸屏和键盘两种输入方式。以下是基于TypeScript的混合控制实现const { ccclass, property } cc._decorator; ccclass export default class PlayerController extends cc.Component { property(cc.Prefab) bulletPrefab: cc.Prefab null; private touchOffset: cc.Vec2 cc.v2(0, 0); private isDead: boolean false; onLoad() { // 触摸控制 this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this); this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this); // 键盘控制 cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); } private onTouchStart(event: cc.Event.EventTouch) { const touchPos this.node.parent.convertToNodeSpaceAR(event.getLocation()); this.touchOffset this.node.position.sub(touchPos); } private onTouchMove(event: cc.Event.EventTouch) { if (this.isDead) return; const touchPos this.node.parent.convertToNodeSpaceAR(event.getLocation()); this.node.position touchPos.add(this.touchOffset); // 边界检查 this.clampPosition(); } private onKeyDown(event: cc.Event.EventKeyboard) { const moveSpeed 10; switch(event.keyCode) { case cc.macro.KEY.a: this.node.x - moveSpeed; break; case cc.macro.KEY.d: this.node.x moveSpeed; break; // 其他按键处理... } this.clampPosition(); } private clampPosition() { const visibleRect cc.view.getVisibleSize(); this.node.x cc.misc.clampf(this.node.x, -visibleRect.width/2, visibleRect.width/2); this.node.y cc.misc.clampf(this.node.y, -visibleRect.height/2, visibleRect.height/2); } }2.2 敌机生成系统敌机生成需要考虑性能优化避免频繁的节点创建销毁。我们采用对象池技术ccclass export default class EnemySpawner extends cc.Component { property(cc.Prefab) enemyPrefab: cc.Prefab null; property spawnInterval: number 1.5; private enemyPool: cc.NodePool new cc.NodePool(); onLoad() { // 初始化对象池 for (let i 0; i 10; i) { let enemy cc.instantiate(this.enemyPrefab); this.enemyPool.put(enemy); } this.schedule(this.spawnEnemy, this.spawnInterval); } private spawnEnemy() { let enemy: cc.Node null; if (this.enemyPool.size() 0) { enemy this.enemyPool.get(); } else { enemy cc.instantiate(this.enemyPrefab); } enemy.parent this.node.parent; enemy.position this.getRandomSpawnPosition(); // 重置敌机状态 enemy.getComponent(Enemy).init(); } private getRandomSpawnPosition(): cc.Vec2 { const visibleRect cc.view.getVisibleSize(); return cc.v2( (Math.random() - 0.5) * visibleRect.width, visibleRect.height / 2 100 ); } public returnEnemy(enemy: cc.Node) { this.enemyPool.put(enemy); } }3. 高级功能实现3.1 无限背景滚动实现平滑的无限背景滚动需要考虑以下关键点使用三张相同的背景图首尾相接当一张图完全移出屏幕时将其重置到队列最上方确保无缝衔接避免视觉跳跃ccclass export default class BackgroundScroller extends cc.Component { property scrollSpeed: number 50; private bgHeight: number 0; onLoad() { this.bgHeight this.node.children[0].height; } update(dt: number) { for (let bgNode of this.node.children) { bgNode.y - this.scrollSpeed * dt; if (bgNode.y -this.bgHeight) { bgNode.y this.bgHeight * 3; } } } }3.2 碰撞检测优化CocosCreator的碰撞系统需要注意以下性能陷阱优化点错误做法正确做法碰撞组件使用大尺寸碰撞框精确匹配精灵轮廓碰撞分组所有对象同一分组合理设置碰撞矩阵物理系统全程开启物理调试仅在开发时调试// 碰撞分组配置示例 cc.director.getCollisionManager().enabled true; cc.director.getCollisionManager().enabledDebugDraw false; enum CollisionGroup { PLAYER 1 1, ENEMY 1 2, PLAYER_BULLET 1 3, ENEMY_BULLET 1 4 } // 在游戏初始化时配置碰撞矩阵 cc.CollisionManager.instance.setCollisionMatrix( CollisionGroup.PLAYER, CollisionGroup.ENEMY | CollisionGroup.ENEMY_BULLET );4. 性能优化与调试技巧4.1 资源加载策略CocosCreator的资源加载有几个常见误区需要避免错误做法在update中动态加载资源正确做法游戏启动时预加载所有必要资源// 预加载示例 cc.resources.preloadDir(textures, cc.SpriteFrame, (err, assets) { if (err) { cc.error(err); return; } // 资源加载完成回调 }); // 使用已加载的资源 cc.resources.load(textures/bg_01, cc.SpriteFrame, (err, spriteFrame) { this.node.getComponent(cc.Sprite).spriteFrame spriteFrame; });4.2 内存管理要点JavaScript虽然有垃圾回收机制但在游戏开发中仍需注意及时销毁不再需要的节点移除所有事件监听清空对象池// 正确的销毁流程示例 destroyEnemy(enemy: cc.Node) { // 1. 停止所有动作 enemy.stopAllActions(); // 2. 移除事件监听 enemy.off(cc.Node.EventType.TOUCH_START); // 3. 从父节点移除 enemy.removeFromParent(); // 4. 回收到对象池 this.enemyPool.put(enemy); }在项目开发过程中我遇到最棘手的问题是触摸事件在移动端的响应延迟。最终发现是因为没有正确处理触摸事件的冒泡机制导致父节点拦截了部分事件。解决方案是在关键节点上设置node.setContentSize(cc.size(0, 0))并禁用触摸事件node.setTouchEnabled(false)。