小游戏开发--Cocos引擎

canvas 设计尺寸：720*1280

Cocos Creator 屏幕适配:

• 通常竖屏手机游戏采用Fit Width，横屏手机采用Fit Height，PC端全屏采用Show All。

Warning

• that.time = (that.time + 0.1).toFixed(1);保留一位小数
• getComponent: Type must be non-nil就是找不到getComponent(中)的组件
• provisional headers are shown 原因：服务器停了，或etc的hosts把localhost映射到其他地方，注释即可
• 使用await/async报错 regeneratorRuntime is not defined
• 打包到微信小游戏的scrollview内容，层级在最上边，滑动会显示在上边，是因为打包构建时模块没选全【mask】组件未选中
• CC_JSB
  • 通过 CC_JSB 来判断是否为 native 环境（模拟器）。
  • 通过 cc.sys.isMobile 来判断是否为手机环境。`
    parent.parent.

js 方法 prefab中执行主程序的方法

this.node.parent.parent.getComponent('02_fishing').hideFish();

• this.node是prefab这个节点，.parent.parent是主程序节点，.getComponent('02_fishing')是主程序Canvas的js，最后执行.hideFish()函数；
• cc.find('Menu').getChildByName('RankList').getComponent('03_yuEr_rankList_scrollView').getInterList();
• this.content.removeAllChildren();移出所有子节点

基础篇

• js文件直接往属性框拖进去就加上了

// animationclick
  function的.bind(this)    就相当于之前的 
   var that =this

• this.node.active=false就是把这个的属性去掉，就相当于没有这个组件
• 点击事件命名 onclick scale Hide
• 开发者–工作流,都加上–打断点–调试
• 对比效果图–设置透明度.
• 用到的只有assets文件夹
• 鼠标右键，中间键按住可以拖动界面
• IDE、安装debug、插件.方便调试–cc.log打印
• cc.spawn 同步执行
• cc.sequence 顺序执行动作
• 缓动运动比如框从外边移进来，不马上停止。晃一下才停
• button的点击事件可以传入参数.例很多的按钮，绑定一个点击事件传参，去执行不同的事情
• editbox输入框:可设默认值、切换键盘password等模式、输入内容调起相应事件
• 音效–music
• 图片赋值：

this.node.getchildname() // 可获取子节点  不要重名
this.node.spriteframe   =  this.mytuji.getspriteframe(imgname)

• cc.director.preloadScene('MyPackage', function () {cc.log('Next scene preloaded');});预加载下个场景
• 圆角矩形
  cc.Graphics.roundRect(x,y,width,heigt,radius); cc.Graphics.stroke();
• 全局脚本–选中某个js文件，在属性查看器中选中为–导入为插件
• 关于cocos creator 2.0的废除cc.p接口Sorry, 将cc.p改成cc.Vec2就行了
• 调试方法：谷歌浏览器控制台–preformance性能面板-左上角按钮开始-结束，结束截取一部分，在Bottom-Up看哪些函数占用CPU多。
• 内存快照–那个类型的对象占的内存多

常用方法：

• 当前游戏窗口的大小cc.winSize

• 旋转this.follower.angle = that.rotations;

• 实例：cc.instantiate克隆指定的任意类型的对象，或者从 Prefab 实例化出新节点。

• 适配：Widgth移动端小游戏中，每一个canvas内组件，为了适配相对位置，添加Widgth，使其相对页面边缘固定，适配不同机型

• 跳转场景cc.director.loadScene("MyPackage");

• 修改字体文本内容：this.goldLabel.getComponent(cc.Label).string = "倒计时";``this.goldLabel.textKey = '400';
that.part1.node.getChildByName('num').getComponent(cc.Label).string = item.chipNum;

• 删除节点左右子节点this.fish.removeAllChildren();

• 无限循环旋转 cc.repeatForever(cc.rotateBy(2, -360));

• 修改字体颜色

  • 只能用rgba()方法修改this.fishLabel.color = cc.color(33,109,133,255);
  • 不能用this.fishLabel.color = '#216D85';
  • 查找到Label的node，然后直接给color赋值
  • this.node.getChildByName('myname').color = new cc.color(255,255,0,255);

• 九宫格： 设置该组件的sprite -- type -- 为 sliced 模式，点后边的编辑即可

• 字体描边：添加组件–LabelOutline

• 圆角矩形：cc.Graphics.roundRect(x,y,width,heigt,radius); cc.Graphics.stroke();

• prefab-“预制体”：创建Prefab很简单，只要你在层级管理器视图创建的任意节点->拖动到->资源管理器视图即可完成创建

• progressbar 进度条

  • type–fill Type 填充方向–可选扇形/横向/竖向

• 横竖屏： 文件-设置-预览

• 外部脚本编辑器：文件-设置-数据编辑-外部脚本编辑器（就是编辑js的webstrom）-选择已有js编辑器

编辑器

• 属性检查器
  • materials 材料
  • skew 斜
  • sliced 切片
  • target 指定button的背景节点
  • interactable

背包点击传参方法：

• 1.prefab.js中：

that.btn.on('click', function (e) {
  console.log('这是点击事件-' + itemInfo.baitId);
})

• 2.prefab动态加载的时候把ID存在 prefab._data 里

cc.Class({
    init(){
    this.node._data = itemInfo.baitId;
    },
    onClick(e){
    var id = e.currentTarget._prefab.root._data;
    cosnole.log(id)
    }
})

• 3.不推荐

    var clickEventHandler = new cc.Component.EventHandler();
    clickEventHandler.target = this.btn;
    clickEventHandler.component = "03_yuErItem_prefab"; // 文件名
    clickEventHandler.handler = "btnClick2";
    clickEventHandler.customEventData = itemInfo.baitId; //
    this.btn.getComponent(cc.Button).clickEvents[0]=clickEventHandler;

如果你要通过这种方式绑定的话，使用 clickEventHandler.component = event.component;设置组件名称还不够,你还需要设置组件ID，来确定这是要监听的组件。
不过这个是一个私有的属性，得使用 clickEventHandler['_componentId'] = 组件的ID; 来赋值。(注意:新版本才有这个问题，教程可能使用的是旧版本的creator，所以才能生效)
当然，实际上写代码 不太推荐用这种方法来绑定点击事件（这是给编辑器Button用的）。
你直接使用 cc.node.on(cc.Node.EventType.TOUCH_XXXX,()=>{ //todo })，这种监听方式就可以任意添加点击事件了。

// 触摸开始
    that.btn.on(cc.Node.EventType.TOUCH_START, function (event) {
      console.log('这是点击事件-' + itemInfo.baitId);
    }, that.node);

组件

刚体RigidBody：物理组件 – Rigid Body
碰撞盒子PhysicsBoxColider：物理组件 – Colider – Box
关节组件RopeJoint：物理组件 – Joint – Rope

API

• 缓动系统tween
  • to：对属性进行绝对值计算，最终的运行结果即是设置的属性值
  • by：对属性进行相对值计算，最终的运行结果是设置的属性值加上开始运行时节点的属性值

cc.tween(node)
  .to(1, {scale: 2})      // node.scale === 2
  .by(1, {scale: 2})      // node.scale === 4 (2+2)
  .by(1, {scale: 1})      // node.scale === 5
  .to(1, {scale: 2})      // node.scale === 2
  .start()

this.jumpAc = cc.tween(this.role).to(.5, {y: 200}).to(0.5, {y: 38});
this.jumpAc.start(); // 执行
this.jumpAc.stop(); //立即停止

this.runAction(cc.scaleTo(transDuration, scaleNum)); 执行动画
cc.tween(this.bg【就是节点this.background】).to(0.5,{scale: bgsc}).start(); tween用法替代runAction
可以替代var fishM1 = cc.scaleTo(0.5, bgsc, bgsc); this.bg.runAction(fishM1);
this.node.scale = 0.5;
this.effectTween = cc.tween(this.node).to(0.3,{scaleX:1.0,scaleY:1.0},{progress:null,easing:"backInOut"}).start();

cc.tween(that.yinDaoShuaiGan).delay(0.5).to(0.2, {opacity: 255}).call(() => {
      that.flagShuaigan = 0;
      that.flagZhuan = 0;
      that.flagTanyu = 0;
    }).start();

放大缩小

cc.scaleTo(transDuration, scaleNum); 在 transDuration 时间内放大、缩小到 scaleNum 倍
cc.scaleTo(transDuration, xScale,yScale); //在 transDuration 时间内x放大、xScale倍,y轴变化yScale倍
this.stopAllActions(); // 停止并且移除所有正在运行的动作列表

做动态列表滑动框

scroll view上的 sprite节点要删掉，否则背景是白色。删掉就是透明的
注意scrollBar 和 bar上的宽高也要设置

cocos绑定节点

必须在properties中添加上
canvas: cc.Node, tabChecked: { default: null, type: cc.Node },才可以绑定

cocos的点击事件

• 1.创建click.js脚本

• 2.在脚本中创建click(){}函数

• 3.在Canvas的属性管理器中，添加click.js的脚本

• 4.在场景中创建空节点、图片节点、或button节点等

• 5.在节点的属性管理器中添加button组件

• 6.将该图片拖拽到TargetNode中

• 7.将Click Events改为1

• 8.将Canvas拖拽到Node中

• 9.在后边的下拉框中选择click.js脚本

• 10.在后边的下拉框中选择click函数
  按钮响应事件

• sprite 精灵

prefab篇

• 1.建立prefab后，单独给prefab挂载一个js。

/*****************/
/*  item.js   */
/*****************/
var Menu = require('Menu');  // menu为Sence中建的单独存放本地资源的一个node
cc.Class({
    extends: cc.Component,
    properties: {
        yuErImg:cc.Sprite,
        yuErLevel:cc.Label,
        fishingLevel:cc.Label,
        num:cc.Label,
    },
    init(rank,itemInfo){
        var that = this;
        console.log(JSON.stringify(itemInfo));
        that.yuErLevel.string = itemInfo.yuErLevel + '级';
        that.fishingLevel.string = itemInfo.fishingLevel + '级';
        that.num.string = '×' + itemInfo.num;
        this.yuErImg.spriteFrame = Menu.instance.yuErImgs[itemInfo.id];
    },
});

• 2.在场景中单独建立一个Node(Menu)，绑定menu.js。Menu文件名和其内容要对应，否则引用不了。

/*****************/
/*   menu.js     */
/*****************/
var Menu = cc.Class({
    extends: cc.Component,
    properties: {
        yuErImgs:[cc.SpriteFrame]
    },
    statics: {
        instance: null
    },
    onLoad () {
        Menu.instance = this;
    },
    start () {
        Menu.instance = this;
    },
});

• 3.场景中Node(Menu)下新建一个Node(rankList),绑定rankList.js。并依次在场景中将Node绑定

/*****************/
/*   RankList.js     */
/*****************/
cc.Class({
  extends: cc.Component,
  properties: {
    scrollView: cc.ScrollView,
    prefabRankItem: cc.Prefab,
    rankConunt: 0
  },
  onLoad() {
    this.content = this.scrollView.content;
    console.log('【RankList】---');
    this.getList();
  },
  getList() {
    var that = this;
    //    http 获取list内容
    var list = [];
    that.rankConunt = list.length;
    that.populateList(list);
  },
  populateList(list) {
    for (var i = 0; i < this.rankConunt; ++i) {
      var playerInfo = list[i];
      var item = cc.instantiate(this.prefabRankItem);
      //RankItems 为prefab绑定的js的名称
      item.getComponent('RankItems').init(i, playerInfo);
      // item.getComponent('RankItem').init(i,playerInfo);
      this.content.addChild(item);
      this.scheduleOnce(this.setoffsetset,0);  // 设置滚动到顶部
    }
    console.log(list);
  },
  setoffsetset(){
      this.scrollView.scrollToOffset(cc.v2(0,0));
    },
});

• 4.场景中ScrollView的content加layout、和widget组件

layout设置：
type:VERTICAL.
RESIZE:CONTAINER
vertical: bottom to top

• 5.注意prefab中的position x\y设置为0,0,.

动画篇

动画基础

• 可修改内容的位置，缩放，显示隐藏
• 可以插入帧事件
• 动画,1.5秒是15帧
• abimation组件里就能设置他的播放模式，不用代码。如循环播放
• -1.先在canvas中添加animation;
  -2.再到资源浏览器中添加anomation文件夹
  -3. 把【2】的ScaleToShow拖到【1】的animation组件中
  -4. 去动画编辑器中操作

Animation制作

参考：animation动画制作

• 1.新建一个sprite节点，命名。
• 2.选中这个节点，然后选择下面的动画编辑器选项卡
• 3.点击添加Animation组件
• 4.根据提示，继续点击新建Clip
• 5.会提示保存，我们输入small作为他的文件名，并点击保存
• 6.根据提示，点击左上角按钮开始编辑
• 7.点击属性列表中的add property按钮，选择添加cc.Sprite.spriteFrame
• 8.将序列帧图片一张一张地拖到时间轴上
• 9.把剩余图片也拖上去
• 10.点第一个节点，准备预览效果
• 11.确认效果后，点击动画编辑器左上角的编辑按钮，结束编辑
• 12.保存

动作动画篇

• 1. 层级管理器 --父组件 – 添加组件 --animation
• 2. 资源管理器 – 新建 animationclic:ScaleToShow
• 3. 把【2】的ScaleToShow拖到【1】的animation组件中
• 4. 去动画编辑器中操作

Animation使用

• 1.为节点添加上Animation组件
• 2.将Clips后面的数字改为1，按回车使其生效，会看到发生了变化
• 3.将刚才制作的动画small，拖拽到回车生成的sprite中
• 4.给节点添加脚本
• 5.在脚本onLoad中加入代码：
• 6.可添加多个动画。运行.play('idle')即可

var animations = this.getComponent(cc.Animation);
animations.play('animationDemo')
// 设置动画循环次数为无限次
ani.repeatCount = Infinity;

animation注意！

• 在 canvas中新建一个Sprite,在此节点上添加animation和绑定js脚本。

制作动态生成内容的列表

官方教程

• 1.制作预制模板prefab,将预制体中的资源都添加进去
• 2.模板组件绑定: 新建.js脚本，并将其添加到刚才制作的prefab模板上，在properties中将各属性声明。例：

cc.Class({
    extends: cc.Component,
    properties: {
        id: 0,
        icon: cc.Sprite,
        itemName: cc.Label,
        itemPrice: cc.Label
    }
});

for (var i = 0; i < this.items.length; ++i) {
    var item = cc.instantiate(this.ItemPrefab);
    // var data = this.items[i];
    this.node.addChild(item);
}

• 3.将模板文件，从层级管理器视图拖动到资源管理器视图。完成prefab制作。
• 4.在场景模板中,添加ItemPrefab: cc.Prefab,将prefab拖动绑定到场景中。
• 5.在场景模板中，添加layout组件，设置prefab排列方式。
• 5.在场景绑定的.js文件中，拿到数据，循环遍历，然后把每一组数据放到新建的prefab里面
• 6.代码示例建本页底

生命周期回调函数：

节点：指cc.Node；组件：指cc.Component。

• onLoad：脚本组件绑定的节点所在场景加载时系统回调一次（或者节点active从false变为true时系统回调一次）。可在这里获取场景中其它节点，并可以初始化一些不常改变的属性。
• start：只在第一次update前系统回调一次。这里可以初始化一些经常改变的属性。
• update(dt)：每一帧渲染前系统回调，主要用于处理逻辑。dt为上一帧到当前帧时间ms间隔。
• lateUpdate(dt)：每一帧渲染后系统回调，用于处理逻辑。dt为上一帧到当前帧时间ms间隔。
• onDestroy：组件或者节点调用了destroy()函数，在帧结束时系统回调。或者场景切换或销毁时系统回调。主要用于资源回收。
• onEnable：组件的enabled从false变为true是系统回调一次；节点active从false变为true时系统回调一次。
• onDisable：和onEnable相反。

报错 warning

• 页面某个元素不存在，可能是位置不在显示区域内。 position : x： 2552

• this.follower.setRotaion is not a function报错！！！先检查是不是单词拼写出错

• 打包文件过大 设置 -- 模块中除前4个，其余都选

• MINFPS[22]RT-FPS[1]EX-FPS[31] — 此为小游戏性能显示，关闭小程序调试即可

• 微信小游戏限制图片尺寸最大为2048*2048

• 方法过时:
  'cc.Node.setRotation(Number)' is deprecated, please use 'cc.Node.angle or cc.Node.setRotation(quat)' instead
  使用this.follower.angle = that.rotations;解决

tiledMap

• 1.新建场景 – 在属性管理器中新建用户脚本 – 把新建的tiledmap选中
• 2.script加脚本，curMap加地图

发布到微信小游戏平台

• 1.打开项目

• 2.1 创建项目 – 点击Canvas – 设置宽高 – Fit Height/width (固定宽度、固定高度)

• 把要用的background图片拖动到Canvas下，修改尺寸

• 2.文件 – 设置 – 原生开发环境 – WechatGame 程序路径 – 目录选择【微信开发者】工具的安装目录

• 3.项目 – 构建发布 – 发布平台 – 微信小游戏

• 4.设备方向:Portrait

• 5.Md5 Cache: 勾选上

• 6.调试模式: 勾选上

• 7.构建 – 运行【如果报错：】

• 报错：微信小程序 工具的服务端口已关闭 解决方案IDE service port disabled. To use CLI Call, open IDE -> Settings -> Security Settings, and set Service Port On. For more details see: https://developers.weixin.qq.com/miniprogram/en/dev/devtools/cli.html

• 解决方法:在微信开发者工具中 – 最开始打开项目首页的设置项 – 安全 – 开启

• 注意！ 打包到小游戏页面有帧率显示—解决方法–在cocos打包设置处–关闭调试模式选项

• 打包到小游戏时，无法完全适配所有手机屏幕大小。

  • 解决方法：Widgth

• 横竖屏在构建发布时可以选择：设备方向

打包模块解释

colider 
Dynamic Atlas  动态合图
DragonBones  骨骼动画资源

Graphics   绘图组件，对应cocos2dx上的DrawNode
Geom Utils  基础几何 方向包围盒。
Intersection  碰撞检测辅助类，用于测试形状与形状是否相交

mask  遮罩控件
mesh  指定渲染所用的网格资源
motionStreak  拖尾）是运动轨迹，用于在游戏对象的运动轨迹上实现拖尾渐隐效果。
NodePool  对象池

Native Socket  标准网络接口 长连接

Physics   物理引擎，使用Box2d

particleSystem  粒子资源 数据
RichText  富文本
renderer Texture  渲染到纹理（

Spine Skeleton  2d骨骼动画
StudioComponent  支持studio导入的项目
videoPlayer   视频播放器

学习

• 1.先去官方示例给的demo中找类似功能demo。
• 2.再去官方手册找功能介绍、说明。
• 3.去网上找示例。

封装

• 页面跳转

cc.Class({
    goToPage(e,value){
        console.log(value);
        cc.director.loadScene(value);
    },
})

点击跳转场景

cc.Class({
  btnClick1(event, customEventData) {
    //这里 event 是一个 Touch Event 对象，你可以通过 event.target 取到事件的发送节点
    var node = event.target;
    var button = node.getComponent(cc.Button);
    //这里的 customEventData 参数就等于你之前设置的 "click1 user data"
    cc.log("node=", node.name, " event=", event.type, " data=", customEventData);
    cc.director.loadScene("MyPackage");
  }
})

绑定键盘事件

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);

// 初始化键盘输入监听
  onKeyDown(event){
    switch (event.keyCode) {
      case cc.macro.KEY.a:
        console.log('aaa')
        break;
      case cc.macro.KEY.d:
        console.log('dddd')
        break
    }
  },

官方教程笔记

随笔

属性管理器：
anchor锚点，就是节点的中心点
Vec2（表示 2D 向量和坐标）类型的对象

this.node.runAction(cc.rotateBy(2,360)) 操作
this.follower.position获取节点的位置

节点 – 节点规范 – 用英文或英文缩写命名
每个游戏角色的远点，放在相应位置
修改原点

sprite 显示图片

给角色加一个功能，实际上是new 组件实例,完成对应功能

组件实例

自己开发组件类

1. 新建组件类 – 》 被编辑器识别
2. 实例化组件类实例-- new 组件类 – 加到节点上 “给节点添加一个组件
3. 固定入口被引擎调用

游戏动画的本质

每次update 修改一下我们的位置;

小游戏包体不超过4M

小游戏资源管理

---

服务器分布式部署

---

制作动态生成内容的列表

itemList.js,场景页面绑定的脚本

var Item = cc.Class({
  name: 'Item',
  properties: {
    id: 0,
    itemName: '测试',
    itemPrice: 0,
    iconSF: cc.SpriteFrame
  },
});

cc.Class({
  extends: cc.Component,
  properties: {
    items: {
      default: [],
      type: Item,
    },
    ItemPrefab: cc.Prefab
  },
  onLoad() {
    for (var i = 0; i < this.items.length; ++i) {
      var item = cc.instantiate(this.ItemPrefab);
      // var data = this.items[i];
      this.node.addChild(item);
     /* item.getComponent('ItemTemplate').init({
        id: data.id,
        itemName: data.itemName,
        itemPrice: data.itemPrice,
        iconSF: data.iconSF
      });*/
    }
  },
  start() {  }
});

ItemTemplate.js,prefab绑定的脚本

cc.Class({
  extends: cc.Component,

  properties: {
    id: 0,
    icon: cc.Sprite,
    itemName: cc.Label,
    itemPrice: cc.Label
  },

  start() {  },
  init: function (data) {
    this.id = data.id;
    this.icon.spriteFrame = data.iconSF;
    this.itemName.string = data.itemName;
    this.itemPrice.string = data.itemPrice;
  }
});

---

getComponent(cc.Label)   // 当中传的是cc.Label或cc.Sprit

---

#cocos3D

角色路径设置：

使用unity里专用路径编辑工具，编辑我们的曲线的路径，—>路径数据导出来给cocos使用

加载http图片

 var rawData = JSON.parse(res.rawData);
var iconUrl = rawData.avatarUrl;
iconUrl = iconUrl + "?.jpg";
console.log('---iconUrl:', iconUrl);

// 下载玩家头像
cc.loader.load(iconUrl, function(err, texture){
    var sprite = self.userIcon.getComponent(cc.Sprite);
    sprite.spriteFrame = new cc.SpriteFrame(texture);
});

vConsole 关闭 调试信息

Creator 1.10.1 web上调试 vConsole 默认打开，咋关闭？

在 C:\CocosCreator\resources\static\preview-templates 中找到 index.jade 文件
将 vConsole = new VConsole(); 注释掉