生命周期回调函数:
节点:指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);
- 只能用rgba()方法修改
- 九宫格: 设置该组件的
sprite -- type -- 为 sliced
模式,点后边的编辑即可 - 字体描边:添加组件–
LabelOutline
- 圆角矩形:
cc.Graphics.roundRect(x,y,width,heigt,radius); cc.Graphics.stroke();
- prefab-“预制体”:创建Prefab很简单,只要你在层级管理器视图创建的任意节点->拖动到->资源管理器视图即可完成创建
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.将该图片拖拽到
Target
Node中 - 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;
}
});