1000字范文 > 小游戏开发--Cocos引擎

小游戏开发--Cocos引擎

时间：2020-11-09 23:34:09

相关推荐

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

// 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 ponent.EventHandler();clickEventHandler.target = this.btn;ponent = "03_yuErItem_prefab"; // 文件名clickEventHandler.handler = "btnClick2";clickEventHandler.customEventData = itemInfo.baitId; //this.btn.getComponent(cc.Button).clickEvents[0]=clickEventHandler;

如果你要通过这种方式绑定的话，使用ponent = ponent;设置组件名称还不够,你还需要设置组件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中建的单独存放本地资源的一个nodecc.Class({extends: ponent,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: ponent,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: ponent,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:CONTAINERvertical: 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.根据提示，继续点击新建Clip5.会提示保存，我们输入small作为他的文件名，并点击保存6.根据提示，点击左上角按钮开始编辑7.点击属性列表中的add property按钮，选择添加cc.Sprite.spriteFrame8.将序列帧图片一张一张地拖到时间轴上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: ponent,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；组件：指ponent。

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./miniprogram/en/dev/devtools/cli.html

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

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

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

解决方法：Widgth

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

打包模块解释

colider Dynamic Atlas 动态合图DragonBones 骨骼动画资源Graphics 绘图组件，对应cocos2dx上的DrawNodeGeom 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,场景页面绑定的脚本

ItemTemplate.js,prefab绑定的脚本

cc.Class({extends: ponent,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);});