Cocos Creator 2D游戏开发入门：从零构建跳一跳类平台游戏

1. 项目概述与核心价值如果你一直想尝试游戏开发但被Unity、Unreal Engine这些庞然大物吓退或者觉得写代码太枯燥那么Cocos Creator绝对是你踏入游戏开发世界最友好的那扇门。作为一个拥有十多年经验的开发者我见过太多新手在复杂的3D坐标系、物理引擎和渲染管线中迷失方向而Cocos Creator特别是它的2D部分完美地解决了这个问题。它让你能像搭积木一样通过可视化的拖拽和简单的脚本逻辑快速构建出可玩性十足的2D游戏。这个“从零开始构建你的第一个2D游戏”项目核心目标不是让你成为引擎专家而是让你在1-2小时内亲手体验一个完整游戏从无到有的诞生过程。我们将制作一个经典的“跳一跳”类平台游戏玩家控制角色在随机生成的地板上跳跃目标是跳得尽可能远。在这个过程中你会直观地理解游戏开发的核心循环场景搭建 - 角色控制 - 游戏逻辑 - 用户交互 - 状态管理。Cocos Creator的“组件化”和“数据驱动”设计理念会让你发现游戏开发原来可以如此直观和高效。2. 环境搭建与项目初始化2.1 Cocos Creator安装与Dashboard使用第一步永远是安装工具。访问Cocos官网下载Cocos Dashboard这是管理所有Cocos Creator版本和项目的控制中心。我强烈建议新手直接安装最新的LTS长期支持版本比如目前的v3.8.x。LTS版本意味着更高的稳定性和社区支持能避免你在学习初期就踩到新版本的“坑”。安装完成后打开Dashboard你会看到一个非常清晰的管理界面。这里我分享一个关键技巧为你的Cocos项目单独建立一个文件夹不要和你的其他文档、代码混在一起。因为Cocos Creator项目会生成大量资源文件图片、脚本、场景等一个独立的目录能让你后续的版本管理比如用Git和项目备份变得异常轻松。在Dashboard中点击“新建项目”你会看到各种模板。对于纯2D游戏选择“Empty(2D)”。不要被“3D”、“3D 2D”这些选项迷惑对于第一个项目保持纯粹能极大降低认知负担。给你的项目起个有意义的名字比如MyFirst2DJumpGame然后选择刚才创建好的专用文件夹作为项目路径。2.2 认识编辑器界面你的游戏创作工作台项目创建成功后主编辑器界面会让你有点眼花缭乱但别慌我们只需要先关注四个核心面板场景编辑器 (Scene): 中间最大的区域。这是你搭建游戏世界的画布所有角色、地板、UI元素都会在这里摆放和预览。层级管理器 (Hierarchy): 通常位于左上。这里以树状结构列出了场景中所有的节点Node。你可以把它理解为你游戏世界的“家族谱系”父节点和子节点的关系决定了它们的相对位置和显示顺序。资源管理器 (Assets): 通常位于左下。这是你的项目“仓库”所有图片、脚本、音效、预制体等资源都存放在这里。一个良好的习惯是从这里开始创建和管理资源而不是在操作系统中直接复制粘贴文件。属性检查器 (Inspector): 通常位于右侧。这是整个编辑器的“控制台”。当你选中层级管理器或场景编辑器中的任何一个节点时它的所有属性位置、大小、颜色、挂载的脚本等都会在这里显示和编辑。实操心得刚开始把80%的注意力放在“层级管理器”和“属性检查器”的配合使用上。在层级管理器选中节点在属性检查器调整参数然后在场景编辑器查看效果这是最基础也是最核心的工作流。3. 构建游戏世界场景、角色与地板3.1 创建游戏主角Player我们的主角是一个简单的方块。在层级管理器空白处右键选择“创建 - 渲染节点 - Sprite”。Sprite是Cocos Creator中用于显示2D图片的基本组件。把它重命名为“Player”。为了让主角更醒目我们需要给它“上色”。在属性检查器中找到“Sprite”组件下的“Color”属性把它调成红色。然后我们需要一个更精细的结构让“Player”节点作为一个空的容器而真正的“身体”作为它的子节点。这样设计的好处是未来如果你想给角色加个帽子或武器直接挂在Player节点下即可逻辑清晰。所以在“Player”节点下再创建一个Sprite子节点命名为“Body”。把Body的“Color”也设为红色并将其Y轴坐标Position Y调整为40。这样Player节点的中心点在(0,0)而红色的Body显示在它上方40单位的位置视觉上就是一个浮空的方块为后续的跳跃动画留出空间。3.2 编写主角控制器PlayerController游戏不能动起来就是一张图片。我们需要为Player添加行为逻辑。在资源管理器的assets目录下右键创建一个Scripts文件夹用于存放所有脚本。然后在Scripts文件夹内右键选择“创建 - TypeScript”命名为PlayerController。TypeScript是Cocos Creator的官方脚本语言它是JavaScript的超集增加了类型系统能在你写代码时就提示很多错误对新手非常友好。双击打开这个脚本你会看到一个基础的组件模板。我们的主角需要实现以下核心逻辑响应输入监听鼠标点击判断是左键跳1步还是右键跳2步。跳跃运动让角色从一个地板中心点平滑移动到下一个点。播放动画在跳跃时播放对应的跳跃动画。首先在PlayerController类中定义跳跃所需的状态变量private _startJump: boolean false; // 是否开始跳跃 private _jumpStep: number 0; // 本次跳跃的步数1或2 private _jumpTime: number 0.1; // 跳跃动画的总时长 private _curJumpTime: number 0; // 当前已跳跃的时间 private _curJumpSpeed: number 0; // 当前跳跃速度 private _curPos: Vec3 new Vec3(); // 角色当前位置 private _targetPos: Vec3 new Vec3(); // 跳跃目标位置 private _deltaPos: Vec3 new Vec3(); // 每帧位移量然后在start方法中监听鼠标事件start() { // 监听鼠标抬起事件 input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this); } onMouseUp(event: EventMouse) { if (this._startJump) return; // 如果正在跳则忽略新输入 if (event.getButton() 0) { // 左键 this.jumpByStep(1); } else if (event.getButton() 2) { // 右键 this.jumpByStep(2); } }jumpByStep方法是核心它根据步数计算跳跃参数jumpByStep(step: number) { this._startJump true; this._jumpStep step; this._curJumpTime 0; // 计算跳跃速度总距离 / 总时间 this._curJumpSpeed (step * BLOCK_SIZE) / this._jumpTime; // 获取当前位置计算目标位置 this.node.getPosition(this._curPos); this._targetPos.set(this._curPos.x step * BLOCK_SIZE, this._curPos.y, this._curPos.z); }这里出现了一个BLOCK_SIZE我们定义它为40。这是因为Cocos的坐标单位是“像素”但我们的游戏逻辑单位是“格子”。一个格子宽40像素这样角色每次跳跃step步实际移动距离就是step * 40像素。最后在update方法中实现每帧的位移更新这是游戏循环的核心update(deltaTime: number) { if (this._startJump) { this._curJumpTime deltaTime; // 累积跳跃时间 if (this._curJumpTime this._jumpTime) { // 跳跃结束强制定位到目标点防止小数误差 this.node.setPosition(this._targetPos); this._startJump false; this.onOnceJumpEnd(); // 通知跳跃结束 } else { // 跳跃过程中根据速度和时间计算本帧位移 this.node.getPosition(this._curPos); this._deltaPos.x this._curJumpSpeed * deltaTime; Vec3.add(this._curPos, this._curPos, this._deltaPos); // 当前位置 位移 this.node.setPosition(this._curPos); // 应用新位置 } } }写完脚本后将其从资源管理器拖拽到层级管理器的“Player”节点上脚本就成功挂载了。点击编辑器上方的三角形“运行”按钮你应该能看到一个红色方块点击鼠标左键或右键它会向右移动1格或2格。3.3 制作可复用的地板预制体Prefab地板是游戏中会大量重复出现的物体使用预制体Prefab是唯一正确的选择。预制体可以理解为“游戏对象的模板”一次制作无限实例化。首先在场景中创建一个新的Sprite节点命名为“Block”也调成白色大小和Player的Body保持一致。然后将这个Block节点从层级管理器直接拖拽到资源管理器的assets目录下。你会看到它变成了一个蓝色的预制体资源而场景中的那个Block节点颜色也变蓝了这表示它已经是预制体的一个实例。关键技巧永远不要在场景中直接复制节点来创建重复物体。正确做法是1制作预制体2在资源管理器中复制预制体资源3将复制出的预制体拖入场景。或者更好的方式是像我们接下来要做的——用代码动态生成。现在你可以把场景中那个蓝色的Block实例删掉了。我们之后将通过脚本用这个预制体来生成整个地板。3.4 动态生成游戏地图GameManager一个固定不变的地图太无聊了。我们需要一个“大脑”来管理游戏全局状态和动态生成随机地图。创建另一个脚本GameManager。首先定义地图数据。我们用数组来存储一列地板的类型enum BlockType { BT_NONE, // 0: 空洞跳上去就失败 BT_STONE, // 1: 实地板 } private _road: BlockType[] []; // 存储地板类型的数组地图生成算法是游戏可玩性的关键。一个简单的规则是保证玩家不会连续遇到两个空洞否则必死增加随机性。generateRoad() { // 1. 清空当前所有地板 this.node.removeAllChildren(); this._road []; // 2. 第一格永远是实地确保玩家起点安全 this._road.push(BlockType.BT_STONE); // 3. 循环生成后续地板 for (let i 1; i this.roadLength; i) { if (this._road[i-1] BlockType.BT_NONE) { // 如果前一格是空洞这一格必须是实地防止连续空洞 this._road.push(BlockType.BT_STONE); } else { // 否则随机生成实地或空洞各50%几率 this._road.push(Math.floor(Math.random() * 2)); } } // 4. 根据数组数据实例化预制体创建视觉上的地板 for (let j 0; j this._road.length; j) { if (this._road[j] BlockType.BT_STONE) { const block instantiate(this.boxPrefab); // 实例化预制体 this.node.addChild(block); // 添加到场景 block.setPosition(j * BLOCK_SIZE, 0, 0); // 设置位置 } // 如果是BT_NONE则不创建任何物体即“空洞” } }在GameManager的属性检查器中将我们之前创建的Block预制体拖拽到boxPrefab属性栏上。然后在场景中创建一个空节点命名为“GameManager”将GameManager脚本挂载上去并将roadLength设置为比如50。运行游戏你会看到一条随机生成的、中间可能有空洞的地板道路。4. 让游戏“活”起来动画、UI与状态管理4.1 为角色添加跳跃动画静态的移动很生硬我们需要动画。Cocos Creator的动画系统非常强大但入门很简单。选中Player节点下的Body子节点在属性检查器中点击“添加组件 - Animation”。你会看到多了一个Animation组件。在资源管理器创建Animations文件夹然后右键“创建 - AnimationClip”命名为oneStep。双击这个动画文件编辑器下方会打开动画编辑器。点击“添加属性”选择Body节点的Position属性。这时时间轴上会出现一条轨道。我们将制作一个简单的上下跳动动画在第0帧点击Position Y旁边的“钻石”图标添加关键帧值保持为40。将时间线拖到第5帧总时长约0.1秒将Position Y改为60并添加关键帧。将时间线拖到第10帧将Position Y改回40添加关键帧。这样一个“上升-下降”的跳跃动画就做好了。保存动画。回到Body节点的Animation组件将oneStep动画剪辑拖入Clips数组。最后在PlayerController脚本的jumpByStep方法中在开始跳跃时播放动画this.BodyAnim.play(‘oneStep’);。记得在脚本顶部用property(Animation)声明BodyAnim属性并在编辑器中把Body节点的Animation组件拖拽赋值。4.2 创建游戏UI界面游戏需要开始界面和计分板。这里的关键是理解Cocos Creator的渲染排序和摄像机。创建UI Canvas在层级管理器右键“创建 - UI - Canvas”命名为UICanvas。所有UI元素都必须放在某个Canvas下。制作开始菜单在UICanvas下创建空节点StartMenu。为其添加一个Sprite子节点作为背景Bg使用内置的default_panel图片并将类型改为SLICED以便拉伸。再添加一个Button节点作为“开始游戏”按钮和一个Label节点作为游戏标题。制作计分板在UICanvas下再创建一个Label节点StepsLabel用于显示当前步数。将其放置在屏幕左上角。深度解析为什么需要两个Canvas我们的游戏场景有一个主摄像机跟着角色移动。如果UI和场景物体混在一起UI也会跟着摄像机移动。因此最佳实践是场景物体角色、地板放在默认的Canvas节点下由主摄像机渲染UI元素放在独立的UICanvas节点下由一个专门渲染UI的、不动的摄像机渲染。你需要调整两个摄像机的Visibility属性让主摄像机只渲染DEFAULT层UI摄像机只渲染UI_2D层并确保两个Canvas节点分别位于正确的层。这是新手最容易混淆和出错的地方之一。4.3 实现游戏状态管理一个完整的游戏需要有明确的状态流转。我们定义三个状态enum GameState { GS_INIT, // 初始化/重置 GS_PLAYING, // 游戏中 GS_END, // 游戏结束本例中简化为直接回到GS_INIT }在GameManager中实现状态切换setCurState(state: GameState) { switch(state) { case GameState.GS_INIT: // 显示开始菜单生成新地图重置角色位置和分数禁用角色输入 this.startMenu.active true; this.generateRoad(); this.playerCtrl.node.setPosition(Vec3.ZERO); this.playerCtrl.reset(); this.stepsLabel.string ‘0’; this.playerCtrl.setInputActive(false); break; case GameState.GS_PLAYING: // 隐藏开始菜单启用角色输入 this.startMenu.active false; this.playerCtrl.setInputActive(true); break; case GameState.GS_END: // 可以在这里显示结算界面本例中直接回到初始化 this.setCurState(GameState.GS_INIT); break; } }PlayerController中的setInputActive方法用于开关鼠标监听防止在菜单界面误操作角色。4.4 连接一切事件驱动与游戏逻辑闭环现在我们需要把角色跳跃、计分、胜负判断串联起来。角色跳跃结束事件在PlayerController的update中当跳跃完成时触发一个自定义事件。onOnceJumpEnd() { this.node.emit(‘JumpEnd’, this._curMoveIndex); // 发出事件并传递当前步数索引 }GameManager监听事件并判断胜负在GameManager的start中监听角色发出的事件。start() { this.playerCtrl.node.on(‘JumpEnd’, this.onPlayerJumpEnd, this); } onPlayerJumpEnd(moveIndex: number) { // 更新UI步数 this.stepsLabel.string moveIndex.toString(); // 判断如果跳到了空洞(BT_NONE)上或者跳完了所有地板则游戏结束 if (moveIndex this._road.length || this._road[moveIndex] BlockType.BT_NONE) { this.setCurState(GameState.GS_END); } }按钮驱动状态切换为开始菜单的按钮添加点击事件。在按钮的Click Events属性中点击“”将GameManager节点拖入并选择组件中的onStartButtonClicked方法。在这个方法里只需调用this.setCurState(GameState.GS_PLAYING)。至此一个功能完整的游戏闭环就形成了点击开始按钮 - 进入游戏状态 - 玩家点击鼠标控制跳跃 - 每次跳跃后更新分数并判断是否踩空 - 游戏结束回到开始界面。5. 项目优化、调试与发布准备5.1 性能与代码优化点虽然我们的第一个游戏很小但养成好习惯至关重要。预制体动态加载当地图很长时一次性实例化所有地板即使不可见会浪费内存。成熟的游戏会使用“对象池”技术回收屏幕外的地板复用它们出现在前方。动画缓存频繁播放的动画如跳跃可以预加载到内存中避免实时加载造成的卡顿。事件监听清理在GameManager或PlayerController的onDestroy方法中记得用input.off或node.off移除事件监听防止内存泄漏。常量管理像BLOCK_SIZE这样的魔法数字应该统一定义在Constants.ts这样的文件中方便全局修改。5.2 常见问题与调试技巧节点不显示首先检查节点是否在正确的Canvas下其次检查节点的Active属性是否为true最后检查渲染层级和摄像机Visibility设置。脚本报错“Property ‘xxx’ does not exist on type ‘yyy’”这通常是TypeScript类型错误。检查属性声明property的类型是否正确以及编辑器中拖拽赋值的节点或组件是否匹配。动画播放不正常检查Animation组件的Clips数组是否正确赋值了动画剪辑检查脚本中播放动画的名称字符串是否与剪辑文件名完全一致注意大小写。按钮点击无反应检查按钮的Interactable是否为true检查Click Events是否正确绑定了节点和方法。一个快速调试方法是在绑定方法内加一句console.log(‘Clicked!’)看是否有输出。使用浏览器开发者工具Cocos Creator的Web预览模式可以直接在Chrome的开发者工具F12中查看Console控制台的日志和错误信息这是最强大的调试手段。5.3 构建与发布你的第一个游戏当游戏调试无误后就可以尝试发布了。点击编辑器顶部的“项目 - 构建发布”。Web Mobile这是最简单的发布方式生成一个可以在手机浏览器中运行的HTML5版本。你只需要一个静态服务器甚至直接双击打开的index.html文件就能运行。构建模板选择“默认”或“无压缩”模板进行调试选择“MD5 Cache”用于正式发布它可以给资源文件命名添加哈希值利于浏览器缓存。小游戏平台Cocos Creator对微信小游戏、字节跳动小游戏等有非常好的支持。构建时选择对应平台并按照官方文档配置AppID等信息即可。发布后你会得到一个build目录里面的内容就是你的游戏成品。将它分享给朋友告诉他们“看这是我做的第一个游戏”这个项目麻雀虽小五脏俱全。你不仅学会了使用Cocos Creator的核心编辑器功能还实践了游戏对象创建、组件化脚本、物理运动模拟、动画系统、UI系统、事件通信、状态管理和简单的游戏算法。以此为起点你可以尝试添加更多功能比如给角色换上真正的精灵图、添加跳跃音效、设计不同类型的陷阱和道具、引入分数排行榜等等。游戏开发的世界大门已经向你敞开。