生命周期回调函数：

节点：指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相反。

常用方法：

当前游戏窗口的大小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';
无限循环旋转 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很简单，只要你在层级管理器视图创建的任意节点->拖动到->资源管理器视图即可完成创建

Animation制作

参考：animation动画制作

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

制作动态生成内容的列表

官方教程

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

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

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

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脚本。

报错 warning

打包文件过大 设置 -- 模块中除前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加地图

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函数
按钮响应事件

发布到微信小游戏平台

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

学习

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

点击跳转场景

  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.setRotaion is not a function报错！！！先检查是不是单词拼写出错
this.follower.position获取节点的位置

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

sprite 显示图片

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

组件实例

自己开发组件类

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

游戏动画的本质

每次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;
  }
});

小游戏开发--Cocos引擎

生命周期回调函数：

常用方法：

Animation制作

制作动态生成内容的列表

Animation使用

animation 注意！

报错 warning

tiledMap

cocos操作某节点

cocos的点击事件

发布到微信小游戏平台

学习

点击跳转场景

绑定键盘事件

官方教程笔记

随笔

游戏动画的本质

小游戏包体不超过4M

小游戏资源管理

制作动态生成内容的列表

猜你喜欢