初识小游戏-CocosCreator

微信小游戏

学习开发微信小游戏最初用微信开发工具，遇到很多问题；后来了解开始使用第三方游戏引擎开发。如CocosCreator、Egret等。CocosCreator和Egret各有优缺点吧。

CocosCreator

JavaScript脚本化
组件化、数据驱动（分离数据与功能）
场景（文件资源）
执行（读取场景和脚本进行执行）

工具

工具.png

层级管理器(子、父节点组件的层次调整)
资源管理器（资源:UUID唯一标示）
属性检查器（组件属性设置）
场景编辑器（组件展示）
组件代码块（拖动代码块到属性检查器，生成组件代码块）
运行展示（浏览器）
创建

层级管理器->创建空节点->
层级管理器->创建渲染节点->Sprite(精灵\单色 \图片)、Label(文字)、ParticleSystem(粒子)、RichText、TiledMap(地图)
层级管理器->创建UI节点->Layout(布局)、Button(按钮)、Canvas(画布)、ScrollView（滚动视图）、Slider(滑动器)、PageView(页面视图)、ProgressBar（进度条）、Toggle(复选按钮)、ToggleContainer(单选按钮)、EditBox（输入框）、WebView(网页视图)、VideoPlayer(播放器)

UI

Sprite

Sprite 精灵用于展示图片
Sprite单色用于设置纯颜色背景

Label

用于展示文字
SHRINK属性（根据宽高自适应改变文字大小，使其全部展示）
RESIZE-HEIGHT(适用于大段文字，自适应高度)

ScrollView

content
自制ScrollBar
1.添加组件ScrollBar
2.制作Scrollbar(添加图片)->将资源拖至ScrollBar的Handle中
3.Sprite图片可在属性检查器中进行编辑
复用模块动态内容列表
1.层级管理器ScrollView->content->Item(sprite+label)
2.在属性检查器中的ListItem中设置Item的内容

代码展示:

cc.Class({
extends:cc.Component,
properties:{
    slotPrefab:{
        default:null,
        type:cc.Prefab
    },
    scrollView:{
        default:null,
        type:cc.ScrollView
    },
    totalCount:0
},
init:function(home){
    this.heroSlots = [];
    this.home = home;
    for(let i=0;i<this.totalCount;++i){
        let heroSlot = this.addHeroSlot();
        this.heroSlots.push(heroSlot);
    }
},
addHeroSlot:function(){
    let heroSlot = cc.instantiate(this.slotPrefab);
    this.scrollView.content.addChild(heroSlot);
    return heroSlot;
},
show:function(){
    this.node.emit('fade-in');
    this.home.toggleHomeBtns(false);
},
hide:function(){
    this.node.emit('fade-out');
    this.home.toggleHomeBtns(true);
}
})

组件

Widget（对齐）

子节点对父节点对相对位置
针对不同分辨率做适配所用
属性检查器->添加组件->节点->Widget

Layout(自动布局)

LayoutType子节点排列方式、排列方向
Resize:父节点根据自节点自适应宽高
Padding:内边距
Spacing：子节点间的间距

组件化开发

将资源管理器中的脚本拖至到层级管理器中对应的属性检查器中生成组件

动画

编辑动画

动画编辑器
文件->构建场景->Animation->Clips
节点->动画组件->设置样式

过程:

动画编辑器->添加AnimationClip-sheep-anim-run(命名)->addproperty-cc.Sprite.spriteFrame-拖动图片到动画编辑器中
运行展示动画

JavaScript脚本控制动画

为动画添加脚本控制组件
层级管理器(按钮) ->属性检查器(ClickEvents:Target(目标动画节点)、Component(脚本文件)、Handler(JS中动画方法))
勾掉Play on load

代码示意:

cc.Class({
  extends:cc.Component,
  properties:{
      anim:cc.Animation
  },
  playRun:function(){
    this.anim.play('sheep-anime-run');//动画编辑的名称
  },
  playJump:function(){
    this.anim.play('sheep-anime-jump');
  }
})

打包

文件->构建发布->名称、平台、包名、发布路径、初始场景、参与构建场景、预览URL->构建
web打包：直接打包即可
原生打包：系统偏好设置，打包->构建

远程文件

资源管理:

游戏包体<4MB直接上传
代码库+远程资源支持
远程资源的版本管理

基于md5 cash一个远程版本管理

将res文件放至服务器上
远程资源路径md5
引用下载本地的资源 ->运行游戏
文件（包内文件-缓存文件-下载文件）

碎图转化为合图

使用TexturePacker合成图片
可减少包的大小

发布到微信小游戏

a.Creator偏好设置中设置微信开发者路径
b.构建面板中设置项目名和appid
c.构建发布
d.点击运行打开微信开发工具
e.预览部署

Cocos 数据统计（Cocos Analytics）

Cocos 数据统计用于记录玩家的游戏行为，并且在后台提供了数据分析支持。Cocos Creator 能一键集成数据统计的 SDK，目前支持网页预览以及发布到 Web，iOS 和安卓平台。

打开 项目设置 面板，位于菜单栏 - 项目 - 项目设置。在服务一栏可以勾选 Cocos 数据统计 的配置项;