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文件直接往属性框拖进去就加上了

// animationclickfunction的.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
1. 资源管理器 – 新建 animationclic:ScaleToShow
1. 把【2】的ScaleToShow拖到【1】的animation组件中
1. 去动画编辑器中操作

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   物理引擎，使用Box2dparticleSystem  粒子资源 数据
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(); 注释掉

小游戏开发--Cocos引擎相关推荐

小游戏开发怎么选游戏引擎
前言小游戏开发怎么选游戏引擎微信小游戏现在非常的火,当我们下定决心做微信小游戏开发的时候, 面临我们的第一个问题是怎么选一个H5的游戏引擎, 那么今天本尊就来给大家分析一下目前能开发各大平台H5小 ...
Cocos Crator开发攻略，小游戏开发全过程
COCOS微信小游戏开发完整记录 -> 结尾有惊喜背景因为我个人喜欢游戏,一直想做一小游戏,但是一直拖着,没时间做,现在终于在周末空闲时间做了一个微信小游戏. 第一次写技术文章,篇幅可能较长 ...
盘点小游戏开发引擎
游戏越来越成为人们生活必不可少的一部分,游戏的类型也愈加丰富,进行游戏的方式也越来越便捷.而小程序技术的推广使得游戏的开发又多了一种选择.小程序上的小游戏无需下载安装,即点即玩,似乎更加符合现代人的需 ...
白鹭引擎正式支持微信小游戏开发
12月28日微信迎来更新,正式上线小游戏,并开放了小游戏开发文档和开发者工具.在微信发布新版本后,白鹭引擎立即添加了对于微信小游戏开发的支持,开发者只需要使用白鹭引擎的最新版本,通过使用白鹭引擎完整工 ...
白鹭引擎拉伸高度_答疑汇总|白鹭引擎架构师开源中国社区分享微信小游戏开发技巧...
原标题:答疑汇总|白鹭引擎架构师开源中国社区分享微信小游戏开发技巧 1月31日-2月6日,开源中国社区邀请白鹭引擎首席架构师王泽以"微信小游戏开发技巧分享"为主题,为广大开发者带来 ...
动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据
主题场景切换场景间数据传递方式小游戏全局背景音效特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...
【第二届青训营-寒假前端场】- 「小游戏开发」笔记
前端场景下的游戏开发开发角色和链路为什么要用游戏引擎前端过渡到游戏开发游戏引擎市面上常见游戏引擎特定类型的客户端游戏引擎 The NVL Maker **RPG Maker** Web游戏 ...
我的小游戏开发之路|腾讯TGideas周桂华（花叔）
作者:云加社区(QcloudCommunity) Cocos 经授权进行转载! 在8月17日,"小程序·云开发"系列沙龙(小游戏专场)的现场,周桂华老师(花叔)从个人学习路径构建出 ...
你踩过几个？盘点微信H5小游戏开发中的那些坑
眼下小游戏特别火,不少团队也陆续启动了微信小游戏的项目,并于立项前期进行技术预研究.但从微信官方文档看 , 却能发现不少坑. 一.运行环境的坑首先微信小游戏是一个不同于浏览器的 JavaScript ...

小游戏开发--Cocos引擎

canvas 设计尺寸：720*1280

Warning

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

基础篇

常用方法：

编辑器

背包点击传参方法：

组件

API

放大缩小

做动态列表滑动框

cocos绑定节点

cocos的点击事件

prefab篇

动画篇

动画基础

Animation制作

动作动画篇

Animation使用

animation注意！

制作动态生成内容的列表

生命周期回调函数：

报错 warning

tiledMap

发布到微信小游戏平台

打包模块解释

学习

封装

点击跳转场景

绑定键盘事件

官方教程笔记

随笔

游戏动画的本质

小游戏包体不超过4M

小游戏资源管理

制作动态生成内容的列表

角色路径设置：

加载http图片

vConsole 关闭 调试信息

小游戏开发--Cocos引擎相关推荐

最新文章

热门文章

vConsole 关闭调试信息