sanyuelanv/cocoCreator-FlappyBird

熟悉CocoCreator

游戏编辑器的认识

层级编辑器
属性编辑器
资源编辑器
场景编辑器
动画编辑器
控制台：关闭预览服务器
构建发布：发布平台
项目设置：模块设置 / 项目预览
编好设置：开启微信小游戏开发 / 脚本编辑器设置(建议使用VS)

2。游戏开发的流程

按照设计图分场景 / 节点 / 组件
按照功能编写脚本：自己的事情自己做，统一到场景的update处更新

flappy bird 实战

项目 -> 项目设置 -> 项目预览
创建并选中选中第一个场景：资源管理器 / 层级管理器（Z轴） / 场景编辑器（平面）
分析设计稿：三张设计稿

├── 开始    
│   ├── 背景
│   ├── 地板   
│   ├── 最高分
│   ├── logo
│   ├── 开始按钮
│   ├── 小鸟
│      
├── 游戏中
│   ├── 背景
│   ├── 地板
│   ├── 当前分数
│   ├── 小鸟
│   ├── 管道
│
├── 结束
│   ├── 背景
│   ├── 地板
│   ├── 当前分数
│   ├── 小鸟
│   ├── 管道
│   ├── 失败文案

按照上图的三个情况，由于这个游戏是单场景的游戏，所以可以把相同的抽出来。那么在 层级管理器 的表现就如下图所示

├── Canvas
│   ├── background  //背景
│   ├── floor   //地板节点集合
│   │   ├── floor //地板
│   │   ├── floor //地板
│   │
│   ├── startMenu
│   │   ├── btnPlayer   // 开始按钮
│   │   ├── logo       //logo
│   │   ├── highScore // 最高分
│   │
│   ├── pipes  // 管道
│   ├── bird   // 小鸟
│   ├── score //当前分数
│   ├── over //失败文案

创建节点: 把素材从 资源管理器 拖动到 层级管理器
编写游戏脚本，游戏脚本和以往的程序不一样。由于这个游戏编辑器帮我们做了很多工作。所以我们不需要从main入口去一步一步的编写程序。只需要专注的编写当前节点的逻辑。每一个节点都可以挂载一个脚本，至于怎么去安排这些脚本，官方没有很好的一个标准。从个人开发习惯来说：在每一个scene的canvas 节点上面挂载一个脚本：用来控制整个场景的游戏逻辑。
1. 设置属性：在properties设置的值，都会反映到属性检查器去。在那里可以可视化修改这些值。获取canvas 里面的元素也是通过这个可视化操作来进行。下面实现简单的游戏开始逻辑。点击开始按钮，然后游戏开始菜单的内容消失掉，从而出现当前分数。（后续会加上小鸟开始运动，管道开始出现等等等。）
  创建一个main的脚本。在 btnPlayer 的 属性检查器 里面添加 button。click Events 改成 1。从 层级管理器 把 canvas 拖下来，选中 Main 和 onStartGame
```
  // main.js
  //创建两个属性
  properties: {
    // 开始游戏菜单节点
    startMenu:{
      default:null,
      type:cc.Node
    },
    // 当前分数标签
    scoreText: {
        default: null,
        type: cc.Label
    },
  },

  onStartGame(){
    // 隐藏 开始游戏菜单节点
    this.startMenu.active = false
    // 显示 当前分数节点
    this.scoreText.string = "score:0"
  },
```
1. 定义地板的行为: 创建floor.js。回到图形化界面去把floor下的两个floor子组件拉到这两个属性那里。之后在脚本编写逻辑代码
```
  properties: {
    floors:{
      default: [],
      type:[cc.Node]
    }
  },
```
1. 定义小鸟的行为：创建bird.js
  添加动画：可视化界面操作添加逻辑：定义属性，编写逻辑：下坠，点击上升，触地死亡
2. 生产管道定时创建管道 预制资源（Prefab）/ 对象池移动管道 / 检测和小鸟是否碰撞 / 判断小鸟是否通过 / 回收资源
3. 加分加分动画：action 的使用最高分：读取存储

sanyuelanv / cocoCreator-FlappyBird

熟悉CocoCreator

flappy bird 实战

About

Languages