Cocos-js快速上手
1.访问节点和组件
节点(active
):在层级管理器中创建UI组件,空节点等。
组件(enabled
):资源管理器上创建的TS,JS脚本,物理材质,动画片段(不仅限于脚本)
节点本身没有类型,显示的类型由组件实现
this.node
获得组件所在的节点
getComponent
获取同一个节点上的其他组件
2.常用节点和组件API
2.1 节点API
说明 | API |
---|---|
激活关闭节点 | this.node.active |
更改节点父节点 | this.node.parent=parentNode / parentNode.addChild(this.node) |
索引节点的子节点 | this.node.children / this.node.childrenCount |
更改节点的位置 | this.node.x this.node.y / this.node.setPostion(x,y) |
旋转 | this.node.rotation / this.node.setRotation |
更改节点缩放 | this.node.scaleX this.node.scaleY / this.node.setScale(2, 2) |
更改节点尺寸 | this.node.width this.node.height / this.node.setContentSize(100, 100) |
更改节点锚点位置 | this.node.anchorX this.node.anchorY /this.node.setAnchorPoint(1, 0) |
颜色和不透明度 | this.node.color this.node.opacity |
3.生命周期回调
依赖于节点(active):__preload、onLoad、onDestroy
依赖于组件(enabled):onEnable、start、update、lateUpdate、onDisable
再到最终销毁的完整生命周期函数调用顺序为:onLoad
-> onEnable
-> start
-> update
-> lateUpdate
-> onDisable
-> onDestroy
onLoad:节点首次激活时触发
onEnable:当组件的 enabled
属性从 false
变为 true
时,或者所在节点的 active
属性从 false
变为 true
时激活。倘若节点第一次被创建且 enabled
为 true
,则会在 onLoad
之后,start
之前被调用。
start:组件第一次激活前,update
之前触发 (初始化一些需要经常修改的数据)
update:每一帧渲染前更新物体的行为
lateUpdate:动效(如动画、粒子、物理等)更新之后才进行一些额外操作
onDisable:当组件的 enabled
属性从 true
变为 false
时,或者所在节点的 active
属性从 true
变为 false
时,会激活 onDisable
回调
onDestroy:当组件或者所在节点调用了 destroy()
,则会调用 onDestroy
回调,并在当帧结束时统一回收组件。
4.创建和销毁节点
创建新节点:new cc.Node('Sprite')
克隆节点:cc.instantiate
销毁节点:node.destroy()
,可以通过 cc.isValid
判断当前节点是否已经被销毁
destroy和removeFromParent的区别:后者不会从内存中释放,导致内存泄漏
API获取节点
this.node:当前节点
this.node.parent:父节点
this.node.children:子节点
cc.find():全局查找节点
cc.find(’’,someNode):查找子节点
API获取组件
node.getComponent()
5.加载和切换场景
//加载切换场景
cc.director.loadScene("MyScene");
//预加载
cc.director.preloadScene("table", function () {cc.log("Next scene preloaded");
});
//v2.4以后增加了新的加载方式
bundle.loadScene('MyScene', function (err, scene) {cc.director.runScene(scene);
});
6.监听事件
6.1事件的监听与关闭
//参数1:事件名称 参数2:方法 参数3:this指向//开启监听
this.node.on('click',function(event){this.enabled = false
},this)//关闭监听
this.node.off('click', function(event){this.enabled = false
}, this);
6.2 触摸事件
触摸事件在移动平台和桌面平台都会触发,只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件
枚举对象定义 | 对应的事件名 | 事件触发的时机 |
---|---|---|
cc.Node.EventType.TOUCH_START | touchstart | 当手指触点落在目标节点区域内时 |
cc.Node.EventType.TOUCH_MOVE | touchmove | 当手指在屏幕上目标节点区域内移动时 |
cc.Node.EventType.TOUCH_END | touchend | 当手指在目标节点区域内离开屏幕时 |
cc.Node.EventType.TOUCH_CANCEL | touchcancel | 当手指在目标节点区域外离开屏幕时 |
触摸事件的重要API
如下
API名 | 类型 | 意义 |
---|---|---|
touch | cc.Touch | 与当前事件关联的触点对象 |
getID | Number | 获取触点的 ID,用于多点触摸的逻辑判断 |
getLocation | Object | 获取触点位置对象,对象包含 x 和 y 属性 |
getLocationX | Number | 获取触点的 X 轴位置 |
getLocationY | Number | 获取触点的 Y 轴位置 |
getPreviousLocation | Object | 获取触点上一次触发事件时的位置对象,对象包含 x 和 y 属性 |
getStartLocation | Object | 获取触点初始时的位置对象,对象包含 x 和 y 属性 |
getDelta | Object | 获取触点距离上一次事件移动的距离对象,对象包含 x 和 y 属性 |
注意:触摸事件支持多点触摸,每个触点都会有发送一次事件给事件监听器
触摸事件的冒泡过程与普通事件的冒泡过程并没有区别,可以调用event.stopPropagation()
可以主动停止冒泡过程。
6.3 鼠标事件
枚举对象定义 | 对应的事件名 | 事件触发的时机 |
---|---|---|
cc.Node.EventType.MOUSE_DOWN | mousedown | 当鼠标在目标节点区域按下时触发一次 |
cc.Node.EventType.MOUSE_ENTER | mouseenter | 鼠标移入目标节点区域时,不论是否按下 |
cc.Node.EventType.MOUSE_MOVE | mousemove | 当鼠标在目标节点在目标节点区域中移动时,不论是否按下 |
cc.Node.EventType.MOUSE_LEAVE | mouseleave | 当鼠标移出目标节点区域时,不论是否按下 |
cc.Node.EventType.MOUSE_UP | mouseup | 当鼠标从按下状态松开时触发一次 |
Node.EventType.MOUSE_WHEEL | mousewheel | 当鼠标滚轮滚动时 |
鼠标事件( cc.Event.EventMouse )的重要API
如下( cc.Event 标准事件 API 之外):
枚举对象定义 | 返回值类型 | 意义 |
---|---|---|
getScrollY | Number | 获取滚轮滚动的 Y 轴距离,只有滚动时才有效 |
getLocation | Object | 获取鼠标位置对象,对象包含 x 和 y 属性 |
getLocationX | Number | 获取鼠标的 X 轴位置 |
getLocationY | Number | 获取鼠标的 Y 轴位置 |
getPreviousLocation | Object | 获取鼠标事件上次触发时的位置对象,对象包含 x 和 y 属性 |
getDelta | Object | 获取鼠标距离上一次事件移动的距离对象,对象包含 x 和 y 属性 |
getButton | Number | cc.Event.EventMouse.BUTTON_LEFT 或 cc.Event.EventMouse.BUTTON_RIGHT 或 cc.Event.EventMouse.BUTTON_MIDDLE |
6.4 键盘事件与重力传感事件
键盘,设备重力传感器此类全局事件是通过函数cc.systemEvent.on(type, callback, target)
注册
cc.SystemEvent.EventType.KEY_DOWN
(键盘按下)cc.SystemEvent.EventType.KEY_UP
(键盘释放)cc.SystemEvent.EventType.DEVICEMOTION
(设备重力传感)
6.5 自定义事件
注意:emit只能传给自己,dispatchEvent可以向上冒泡
1.发送事件
//发射事件(性能考虑,最多只支持传递 5 个事件参数)
cc.Class({extends: cc.Component,onLoad () {// args are optional param.this.node.on('say-hello', function (msg) {console.log(msg);});},start () {// At most 5 args could be emit.this.node.emit('say-hello', 'Hello, this is Cocos Creator');},
});
//派送事件(采用冒泡派送的方式,不断传给上一级节点直至遇到event.stopPropagation()中断处理)// 节点 c 的组件脚本中
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );
// 节点 b 的组件脚本中
this.node.on('foobar', function (event) {event.stopPropagation();
});
7.缓动系统
cc.Action
cc.tween:链式调用,更简洁
API | 说明 |
---|---|
to | 绝对值计算(直接设置属性为结果) |
by | 相对值计算(累加属性为结果) |
then | 插入其他的缓动到队列中 |
repeat | 重复执行 |
delay | 延迟执行 |
sequence | action队列,按顺序执行 |
repeatForever | 停止stopAllByTarget |
parallel | 并行执行 |
call | 回调函数(动作执行完毕后调用) |
8.使用计时器
//开始一个计时器
component.schedule(function() {// 这里的 this 指向 componentthis.doSomething();}, 5);//更灵活的计时器// 以秒为单位的时间间隔var interval = 5;// 重复次数var repeat = 3;// 开始延时var delay = 10;component.schedule(function() {// 这里的 this 指向 componentthis.doSomething();}, interval, repeat, delay);//只执行一次的计时器component.scheduleOnce(function() {// 这里的 this 指向 componentthis.doSomething();}, 2);
API | |
---|---|
schedule | 开始一个计时器 |
scheduleOnce | 开始一个只执行一次的计时器 |
unschedule | 取消一个计时器 |
unscheduleAllCallbacks | 取消这个组件的所有计时器 |
9.音频播放
AudioEngine
与 AudioSource
都能播放音频,它们的区别在于 AudioSource
是组件,可以添加到场景中,由编辑器设置。而 AudioEngine
是引擎提供的纯 API,只能在脚本中进行调用。
//this.audioSourcecc.Class({extends: cc.Component,properties: {audioSource: {type: cc.AudioSource,default: null},},play: function () {this.audioSource.play();},pause: function () {this.audioSource.pause();},});
// cc.AudioEnginecc.Class({extends: cc.Component,properties: {audio: {default: null,type: cc.AudioClip}},onLoad: function () {this.current = cc.audioEngine.play(this.audio, false, 1);},onDestroy: function () {cc.audioEngine.stop(this.current);}});
10.CCClass进阶
1.原型对象参数说明
cc.Class({//类名,用于序列化//值类型:stringname:"Character",//基类,可以是任意创造好的cc.Class//值类型:Functionextends:cc.Component,//构造函数//值类型:Functionctor:function(){},//属性定义properties:{},//实例方法print:function(){cc.log(this.text)}//静态成员定义statics:{}// 提供给 Component 的子类专用的参数字段// 值类型:Objecteditor: {disallowMultiple: true}
})
2.构造函数
ctor
:定义构造函数,为了保证反序列化能始终正确运行,不允许定义构造参数
__ctor__
:允许定义构造参数,并且不会自动调用父构造函数(无特殊情况使用ctor)
3.判断类型
JavaScript原生instanceof
cc.isChildClassOf判断类的继承关系
4.继承
请注意,不论子类是否有定义构造函数,子类实例化前父类的构造函数都会被自动调用
重写方法:
var Shape = cc.Class({getName: function () {return "shape";}
});var Rect = cc.Class({extends: Shape,getName: function () {return "rect";}
});
5.GetSet方法
设定了get以后,这个属性就不能被序列化,也不能指定默认值,但仍然可以附带除了default
,serializable
外的大部分参数
如果没有和 get 一起定义,则 set 自身不能附带任何参数。和 get 一样,设定了 set 以后,这个属性就不能被序列化,也不能指定默认值。
前端模块化 | 说明 |
---|---|
AMD | 并行加载,提前执行(define return) |
CMD | 并行加载,延迟执行(define moudle export) |
Common.js | 后端NODE使用,同步加载 拷贝 |
ES6 | import 引用 必须在模块顶级 |
11.资源管理:Asset Bundle
AB包作为资源模块化工具,允许开发者按照项目需求将贴图,脚本,场景等资源划分在多个AB包中,然后在游戏运行过程中,按照需求去加载不同的AB包,以减少启动时需要加载的资源数量,从而减少首次下载和加载游戏时所需的事件,同时可以减少内存占用
AB包可以按照需求随意放置(远程服务器,本地,小游戏平台分包,跨项目服用,加载子项目中的AB包)
AB包是以文件夹为单位进行配置的,并且不支持嵌套不允许同名
AB包配置项 | 功能说明 |
---|---|
internal | 存放所有内置资源以及其依赖资源 |
main | 存放所有构建发布面板的参与构建场景中勾选的场景以及其依赖资源 |
resources | 存放resources目录下的所有资源以及其依赖资源 |
start-scene | 如果在构建发布面板中勾选了初始场景分包,则首场景将会被构建到 start-scene 中 |
Cocos-js快速上手相关推荐
- 正则表达式(JS快速上手篇)
正则表达式(JS快速上手篇) 正则表达式(RegExp)是一种字符串的匹配模式,可以按照一定规则从字符串中获取.替换指定子串,以下是JS中常用的正则方法. 一.创建方式 创建正则表达式有以下两种方式. ...
- 【Three.js】Three.js快速上手教程
1. Three.js简介 官网对 Three.js 的介绍非常简单:"Javascript 3D library". 即:three.js是JavaScript编写的WebGL第 ...
- Dva.js 快速上手指南
先说些废话 最近在开发React技术栈的项目产品,对于数据状态的管理使用了Dva.js,作为一个资深的ow玩家,我看到这个名字第一反应就是----这不是ow里的一个女英雄吗?仔细阅读了官方文档之后,发 ...
- Sortable.js快速上手
官网教程和demo Sortable.js GitHub Sortable仓库 Sortable是基于原生js的拖拽库,没有多余的依赖,使用感十分友好,Sortable.min.js 大小约44KB, ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- 前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [014]view和text组件和动画使用 常见的尺 ...
- 进击3D游戏界!Cocos Creator快速实现骨骼动画交互!
文章目录 前言 一.Cocos Creator简介? 二.快速上手Cocos Creator 1.任何语言学习,先概览一遍文档 2.跟随官方Demo,进行游戏的制作 三.如何自己实现骨骼模型和界面交互 ...
- 28 CoCos Creator-快速上手:制作第一个游戏
0. 原文 https://docs.cocos.com/creator/1.9/manual/zh/getting-started/quick-start.html 1. 快速上手:制作第一个游戏 ...
- react 快速上手开发_React中测试驱动开发的快速指南
react 快速上手开发 by Michał Baranowski 通过MichałBaranowski React中测试驱动开发的快速指南 (A quick guide to test-driven ...
- 快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)
(目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter. ...
最新文章
- HTML5 canvas画图
- Xcode6中如何对scrollview进行自动布局(autolayout)
- 面向对象编程OOP的三大特性
- 百度地图精确定位html,HTML5地理定位,百度地图API,知识点熟悉
- 360下载器怎么打开 360下载器使用方法
- 2015安徽省赛 G.你来擒孟获
- vue3 使用element-plus 表单校验
- 大一计算机php认证考试,2017年计算机基础大一考试试题【附答案】.doc
- hadoop数仓建设之日志采集
- 现代女性的半糖主义ZT
- 记一次微信支付回调失败的修复
- html 输入年份,判断是否是闰年
- 中国象棋游戏Chess(3) - 实现走棋规则
- Webpack前端资源加载/打包工具
- Elasticsearch:集群配置及异常解决
- PLC张力控制(开环闭环算法分析)
- Opencv3学习笔记(C++Python双语)---视屏读取与保存
- 标准化和归一化 超全详解
- Cython编译python为so 代码加密
- 安卓bmi项目_荐 Android|BMI体质计算器实现(附测试源码)
热门文章
- Unity 使用ContentSizeFitter刷新不及时的问题
- 实时大数据处理real-time big data processing (RTDP)框架:挑战与解决方案
- 《金融时报》:技术的“可为”与“不可为”
- 通信教程 | I²C基础原理及通信协议
- 手机流媒体服务器架设指南
- arr.map()的使用
- CF1070J Streets and Avenues in Berhattan
- Unity Mathf【Deg Rad】- 关于数学运算中的度与弧度
- 免费LOGO在线生成
- 自制简单U盘引导程序