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);
- 只能用rgba()方法修改
-
九宫格: 设置该组件的
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.将该图片拖拽到
Target
Node中 -
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制作
- 1.新建一个sprite节点,命名。
- 2.选中这个节点,然后选择下面的
动画编辑器
选项卡 - 3.点击
添加Animation组件
- 4.根据提示,继续点击
新建Clip
- 5.会提示保存,我们输入
small
作为他的文件名,并点击保存 - 6.根据提示,点击
左上角按钮
开始编辑 - 7.点击属性列表中的
add property
按钮,选择添加cc.Sprite.spriteFrame
- 8.将序列帧图片一张一张地拖到
时间轴上
- 9.把剩余图片也拖上去
- 10.点
第一个节点
,准备预览
效果 - 11.确认效果后,点击动画编辑器
左上角的编辑按钮
,结束编辑 - 12.保存
动作动画篇
-
- 层级管理器 --父组件 – 添加组件 --animation
-
- 资源管理器 – 新建 animationclic:ScaleToShow
-
- 把【2】的ScaleToShow拖到【1】的animation组件中
-
- 去动画编辑器中操作
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 组件实例,完成对应功能
组件实例
自己开发组件类
- 新建组件类 – 》 被编辑器识别
- 实例化组件类实例-- 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;
}
});
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(); 注释掉