cocos开发总结

1:看一看下面这个网址,其中有关于cocos脚本编辑器visual studio code的代码提示的设置,挺好的,只要先把creator.d.ts文件用visual studio code打开,然后再用visual studio code打开cocos中的脚本文件就会有代码提示功能。

参考网址:

https://blog.csdn.net/stillwater123/article/details/79186404
https://docs.cocos.com/creator/manual/zh/getting-started/coding-setup.html

2:将一个脚本添加到一个组件上的方法:点击组件,然后在属性检查器中将脚本的"导入为插件"取消勾选,然后就可以将脚本直接拖到场景中的组件上了。

参考网址:

https://tieba.baidu.com/p/5525728250

3:什么是锚点,以下是官网游戏示例中对锚点的简单描述

接下来我们要对主角的属性进行一些设置,首先是改变 锚点(Anchor) 的位置。默认状态下,任何节点的锚点都会在节点的中心,也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果,所以现在我们需要把主角的锚点设置在脚下。在 属性检查器 里找到 Anchor 属性,把其中的 y 值设为 0,可以看到 场景编辑器 中,表示主角位置的 移动工具 的箭头出现在了主角脚下。
注意锚点的取值,当锚点的取值为(0,0)时表示锚点在节点的左下角,锚点的取值为(1,1)时表示锚点在节点的右上角,锚点的取值为(0.5,0.5)时表示锚点在节点的中心,以此类推。

4:执行一次update函数就是一帧,update函数中的函数体执行完之后才会继续执行下一次的update函数,这也就是说完成了一帧了,当前的update的函数体还没有执行完,那么就不会下一次的update函数,这时就会出现游戏卡顿的现象,也就是执行一帧的时间较长了。

5:在脚本文件中写完某个包含动作的函数后,必须调用this.node.runAction()方法才能让节点运动起来。

6:在js中,如果在某个函数中有this.accLeft = false这样类似的声明,那么accLeft可以在其他函数中,通过this.accLeft直接来引用,通过this相当于把accLeft声明为成员变量了,所以可以在其他函数中直接进行引用。

7:在函数的参数定义中,如果有target?: any这样类似的参数,其中?表示该参数可有可无。

8:注意脚本文件中,如果你按住ctrl+鼠标左键如果跳转到类或者是函数的定义处(即creator.d.ts文件中)的话,一般是写错了。

9:一个脚本中的this.变量(相当于public的成员变量),可以在另外一个脚本中直接使用,前提是先获取到脚本的实例。

10:组件脚本中属性的常用字段如下:

default:设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到
type:限定属性的数据类型
visible:设为 false 则不在属性检查器面板中显示该属性
serializable: 设为 false 则不序列化(保存)该属性
displayName:在属性检查器面板中显示成指定名字
tooltip:在属性检查器面板中添加属性的 tooltip

11:子节点的position是子节点的锚点以父节点的锚点为原点(0,0)得到的一组x,y

12:官方总结的注意点:

这里需要注意几个问题:

1:节点下的 y 属性对应的是锚点所在的 y 坐标,因为锚点默认在节点的中心,所以需要加上地面高度的一半才是地面的 y 坐标
2:instantiate 方法的作用是:克隆指定的任意类型的对象,或者从 Prefab 实例化出新节点,返回值为Node或者Object
3:Node下的addChild方法作用是将新节点建立在该节点的下一级,所以新节点的显示效果在该节点之上
4:Node下的setPosition方法 作用是设置节点在父节点坐标系中的位置,可以通过两种方式设置坐标点。一是传入两个数值 x 和 y,二是传入 cc.v2(x, y)(类型为 cc.Vec2 的对象)
5:通过Node下的getComponent方法可以得到该节点上挂载的组件引用

13:Sprite 组件的作用:渲染图片。

14:修改父节点的Opacity不透明度属性还会作用于子节点。

15:Cocos Creator 中的 节点(Node) 之间可以有父子关系的层级结构,我们修改节点的 位置(Position) 属性设定的节点位置是该节点相对于父节点的 本地坐标系 而非世界坐标系。最后在绘制整个场景时 Cocos Creator 会把这些节点的本地坐标映射成世界坐标系坐标。

16:锚点由 anchorX 和 anchorY 两个值表示,他们是通过节点尺寸计算锚点位置的乘数因子,范围都是 0 ~ 1 之间。(0.5, 0.5) 表示锚点位于节点长度乘 0.5 和宽度乘 0.5 的地方,即节点的中心。锚点属性设为 (0, 0) 时,锚点位于节点本地坐标系的初始原点位置,也就是节点约束框的左下角。当父节点的锚点位置确定后,所有子节点就会以父节点的锚点所在位置作为坐标系原点,不管有多少级节点,都继续按照层级高低依次处理,每个节点都使用父节点的坐标系和自身位置锚点属性来确定在场景空间中的位置。最外层的父节点的坐标是参考场景编辑器背景的刻度,世界坐标系的原点是屏幕左下角,也就是刻度的0,0点。

17:旋转的角度值为正时,节点顺时针旋转,角度值为负时,节点逆时针旋转,父节点旋转影响子节点,父节点缩放也影响子节点。

18:除了有具体图像渲染任务的节点之外,我们还会有一部分节点只负责挂载脚本,执行逻辑,不包含任何渲染相关内容。通常我们将这些节点放置在场景根层级,和 Canvas 节点并列。

19:以下代码用 cc.Class 创建了一个类型,并且赋给了 Sprite 变量。同时还将类名设为 "sprite",类名用于序列化,一般可以省略。

var Sprite = cc.Class({
    name: "sprite"
});

20:如下写法学习下:

var CeShi = cc.Class({
    extends: cc.Component,
    ctor: function () {

    },
    putongmethod: function () {

    }
})
var C = new CeShi()

21:简单声明如下所示:

        a:1,// number
        b:"zifuchuang",// string
        c:false,// boolean 
        d:null,// object
        e:cc.Vec2,//当声明的属性具备类型时(如:cc.Node,cc.Vec2 等),可以在声明处填写他们的构造函数来完成声明
        f:new cc.Vec2(5,3),//当声明属性的类型继承自 cc.ValueType 时(如:cc.Vec2,cc.Color 或 cc.Rect),除了上面的构造函数,还可以直接使用实例作为默认值
        g:[],// 不定义具体类型的数组
        h:[cc.Integer],//当声明属性是一个数组时,可以在声明处填写他们的类型或构造函数来完成声明

除了以上几种,其他的数据类型都要完整声明,当然后以上几种也可以写成完整声明的形式。

完整声明如下所示:

score: {
        default: 0,
        displayName: "Score (player)",
        tooltip: "The score of player",
    }

数组的完整声明如下所示:

names: {
        default: [],
        type: [cc.String]   // 用 type 指定数组的每个元素都是字符串类型
    },

下面是常用参数:

default: 设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到
type: 限定属性的数据类型,详见 CCClass 进阶参考:type 参数
visible: 设为 false 则不在 属性检查器 面板中显示该属性
serializable: 设为 false 则不序列化(保存)该属性
displayName: 在 属性检查器 面板中显示成指定名字
tooltip: 在 属性检查器 面板中添加属性的 Tooltip

22:声明周期函数的执行顺序:onLoad->start->update->lateUpdate->update->lateUpdate->...

23:var声明的是局部变量,代码如下所示:

start: function () {
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);
    node.parent = scene;
    node.setPosition(0, 0);
  },

24:动态加载资源要注意两点:一是所有需要通过脚本动态加载的资源,都必须放置在 resources 文件夹或它的子文件夹下;二是resources 需要在 assets 文件夹中手工创建,并且必须位于 assets 的根目录。注意:如果一份资源不需要由脚本 直接 动态加载,那么千万不要放在 resources 文件夹里。

25:Creator 提供了 cc.loader.loadRes 这个 API 来专门加载那些位于 resources 目录下的 Asset。loadRes一次只能加载单个 Asset。调用时,你只要传入相对 resources 的路径即可,并且路径的结尾处不能包含文件扩展名。

26:资源释放:loadRes 加载进来的单个资源如果需要释放,可以调用 cc.loader.releaseRes,releaseRes 可以传入和 loadRes 相同的路径和类型参数。此外,你也可以使用 cc.loader.releaseAsset 来释放特定的 Asset 实例。比如:cc.loader.releaseAsset(spriteFrame);

27:资源批量加载:cc.loader.loadResDir 可以加载相同路径下的多个资源。

28:派送事件:this.node.dispatchEvent 方法,通过该方法发射的事件,会进入事件派送阶段,采用冒泡派送的方式。冒泡派送会将事件从事件发起节点,不断地向上传递给他的父级节点,直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()。

29:事件对象

在事件监听回调中,开发者会接收到一个 cc.Event 类型的事件对象 event,stopPropagation 就是 cc.Event 的标准 API,其它重要的 API 包含:


API 名 类型 意义
type String 事件的类型(事件名)
target cc.Node 接收到事件的原始对象
currentTarget cc.Node 接收到事件的当前对象,事件在冒泡阶段当前对象可能与原始对象不同
getType Funciton 获取事件的类型
stopPropagation Function 停止冒泡阶段,事件将不会继续向父节点传递,当前节点的剩余监听器仍然会接收到事件
stopPropagationImmediate Function 立即停止事件的传递,事件将不会传给父节点以及当前节点的剩余监听器
getCurrentTarget Function 获取当前接收到事件的目标节点
detail Function 自定义事件的信息(属于 cc.Event.EventCustom)
setUserData Function 设置自定义事件的信息(属于 cc.Event.EventCustom)
getUserData Function 获取自定义事件的信息(属于 cc.Event.EventCustom)


30:鼠标事件类型和事件对象

鼠标事件在桌面平台才会触发,系统提供的事件类型如下:


枚举对象定义 对应的事件名 事件触发的时机
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' 当鼠标从按下状态松开时触发一次
cc.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


31:触摸事件类型和事件对象

触摸事件在移动平台和桌面平台都会触发,这样做的目的是为了更好得服务开发者在桌面平台调试,只需要监听触摸事件即可同时响应移动平台的触摸事件和桌面端的鼠标事件。系统提供的触摸事件类型如下:


枚举对象定义 对应的事件名 事件触发的时机
cc.Node.EventType.TOUCH_START 'touchstart' 当手指触点落在目标节点区域内时
cc.Node.EventType.TOUCH_MOVE 'touchmove' 当手指在屏幕上目标节点区域内移动时
cc.Node.EventType.TOUCH_END 'touchend' 当手指在目标节点区域内离开屏幕时
cc.Node.EventType.TOUCH_CANCEL 'touchcancel' 当手指在目标节点区域外离开屏幕时
触摸事件(cc.Event.EventTouch)的重要 API 如下(cc.Event 标准事件 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 属性
需要注意的是,触摸事件支持多点触摸,每个触点都会发送一次事件给事件监听器。


32:cc.Node 的其它事件

枚举对象定义 对应的事件名 事件触发的时机
无 'position-changed' 当位置属性修改时
无 'rotation-changed' 当旋转属性修改时
无 'scale-changed' 当缩放属性修改时
无 'size-changed' 当宽高属性修改时
无 'anchor-changed' 当锚点属性修改时


33:require 返回的就是被模块导出的对象,通常我们都会将结果立即存到一个变量(var Rotate)。传入 require 的字符串就是模块的文件名,这个名字不包含路径也不包含后缀,而且大小写敏感。

34:module.exports 的默认值:

当你的 module.exports 没有任何定义时,Creator 会自动优先将 exports 设置为脚本中定义的 Component。如果脚本没定义 Component 但是定义了别的类型的 CCClass,则自动把 exports 设为定义的 CCClass。如果只是普通的js脚本文件,没有继承任何CCClass,那么就需要用exports来设置要导出的数据了。module.exports 默认是一个空对象({}),可以直接往里面增加新的字段,有两种写法,如下所示:

第一种写法:

module.exports.foo = function () {
    cc.log("foo");
};

第二种写法:

module.exports = {
    FOO: function () {
        this.type = "foo";
    },
    bar: "bar"
};

35:以下这种写法学习一下:

applyOperation = function (f, a) {
    return f(a);
}
applyOperation(
    function(a){
      return a*a;
    },
    10
) // 100

36:this 的值到底是什么?

参考网址:https://zhuanlan.zhihu.com/p/23804247

37:静态变量或静态方法可以在原型对象的 statics 中声明:

代码如下:

var Sprite = cc.Class({
    statics: {
        // 声明静态变量
        count: 0,
        // 声明静态方法
        getBounds: function (spriteList) {
            // ...
        }
    }
});

38:属性(properties)不用在构造函数里定义,在构造函数被调用前,属性已经被赋为默认值了,可以在构造函数内访问到。如果属性的默认值无法在定义 CCClass 时提供,需要在运行时才能获得,你也可以在构造函数中重新给属性赋默认值。

39:visible 参数

默认情况下,是否显示在 属性检查器 取决于属性名是否以下划线 _ 开头。如果以下划线开头,则默认不显示在 属性检查器,否则默认显示。

如果要强制显示在 属性检查器,可以设置 visible 参数为 true:

properties: {
    _id: {      // 下划线开头原本会隐藏
        default: 0,
        visible: true
    }
}
如果要强制隐藏,可以设置 visible 参数为 false:
properties: {
    id: {       // 非下划线开头原本会显示
        default: 0,
        visible: false
    }
}

40:serializable 参数

指定了 default 默认值的属性默认情况下都会被序列化,序列化后就会将编辑器中设置好的值保存到场景等资源文件中,并且在加载场景时自动还原之前设置好的值。如果不想序列化,可以设置serializable: false。

temp_url: {
    default: "",
    serializable: false
}

41:override 参数

所有属性都将被子类继承,如果子类要覆盖父类同名属性,需要显式设置 override 参数,否则会有重名警告。

42:节点上各种组件的作用:

42.1:sprite组件用来展示图片;

42.2:label组件用来展示文本;

42.3:mask组件用来设置遮罩;

42.4:motionstreak组件用来给节点设置运动条纹;

42.5:particlesystem组件用来给节点设置例子系统;

42.6:widget组件是用来设置节点的位置的,相当于Android中的margin属性,Widget 默认的对齐参照物是父节点,注意,由于 Canvas 节点本身就有保持和屏幕大小一致的功能,因此不需要在 Canvas 上添加 Widget 组件,Widget 组件上开启某个方向的对齐之后,除了指定以像素为单位的边距以外,我们还可以输入百分比数值;

42.7:Layout(自动布局)组件可以挂载在任何节点上,将节点变成一个有自动布局功能的容器。所谓自动布局容器,就是能够自动将子节点按照一定规律排列,并可以根据节点内容的约束框总和调整自身尺寸的容器型节点;

cocos的api总结:


this.node.runAction()//让节点执行某个动作
this.node.addChild()//给当前节点添加子节点
this.node.x//当前节点的x坐标
this.node.width//当前节点的宽度
this.node.position//当前节点的位置,如this.node.position = cc.v2(100, 50),求当前节点的位置到另外一个节点的位置之间的距离this.node.position.sub(另外一个节点的坐标).mag()
this.node.setPosition(100, 50)//设置当前节点的position属性
this.node.rotation= 90;//更改节点旋转
this.node.setRotation(90)//更改节点旋转
this.node.scaleX = 2;//更改节点缩放
this.node.scaleY = 2;
this.node.setScale(2);//setScale 传入单个参数时,会同时修改 scaleX 和 scaleY。
this.node.setScale(2, 2);
this.node.setContentSize(100, 100);//更改节点尺寸
this.node.setContentSize(cc.size(100, 100));
this.node.width = 100;
this.node.height = 100;
this.node.anchorX = 1;//更改节点锚点位置
this.node.anchorY = 0;
this.node.setAnchorPoint(1, 0);
this.node.color = cc.Color.RED;//设置当前节点的颜色
this.node.opacity//当前节点的透明度
this.node.children//得到该节点下的所有子节点,注意该api只会返回节点的直接子节点,不会返回子节点的子节点
this.node.childrenCount//将返回节点的子节点数量,注意该api只会返回节点的直接子节点,不会返回子节点的子节点
this.node.getChildByName("...")//根据名字得到该节点下的某个子节点
this.node.active//设置节点的激活状态,默认是激活的
this.node.activeInHierarchy//查看当前节点是否激活
this.node.parent//给当前节点设置父节点
this.node.on()//给节点设置监听事件
this.node.once()//在监听函数响应后就会关闭监听事件
this.node.off()//关闭监听,off 方法的参数必须和 on 方法的参数一一对应,才能完成关闭。
this.node.emit()//发射事件
this.node.dispatchEvent()//发射事件,两者的区别在于,后者可以做事件传递。
this.node.destroy()//销毁某个节点
Node类型.setPosition()//给某个节点设置位置
Node类型.getPosition()//获取某个节点的位置
Node类型.addComponent()//给一个节点添加组件
Node类型.getComponent(组件名)//得到节点上的某个组件,然后可以通过.属性名来得到组件上的某个属性值,如this.player.getComponent('Player').jumpHeight,当获取某个实际并不存在的属性时,系统会临时创建该属性。
Node类型.stopAction()//停止一个动作
Node类型.stopAllActions()//停止某个节点的所有动作
Node类型.getActionByTag()//通过 tag 获取 action
Node类型.stopActionByTag()//通过 tag 停止一个动作


Action类型.setTag()//给 action 设置 tag
Action类型.easing(cc.easeIn(3.0));//给基础动作设置缓动动作,缓动动作不可以单独存在,它永远是为了修饰基础动作而存在的,它可以用来修改基础动作的时间曲线,让动作有快入、缓入、快出或其它更复杂的特效。需要注意的是,只有时间间隔动作才支持缓动。


具体的动作列表请查看:https://docs.cocos.com/creator/manual/zh/scripting/action-list.html


cc.moveBy()//移动到某个位置,相对移动
cc.moveTo(2, 100, 100)//移动到某个位置,绝对移动
cc.rotateBy() 用来旋转节点一定的角度;
cc.scaleTo() 用来缩放节点
cc.repeat()//用来多次重复一个动作,重复的次数由方法的第二个参数设定。
cc.repeatForever()//永远重复执行某一个动作,直到手动停止
cc.speed()//可以改变目标动作的执行速率,让动作更快或者更慢完成。
cc.delayTime()//给动作延迟一段时间
cc.audioEngine.playEffect()//播放某个音效
cc.callFunc()//执行某个回调函数,使用callFunc调用回调函数可以让函数转变为 cc 中的 Action(动作),这一用法在 cc 的动作系统里非常实用!注意: 在 cc.callFunc 中不应该停止自身动作,由于动作是不能被立即删除,如果在动作回调中暂停自身动作会引发一系列遍历问题,导致更严重的 bug。
cc.sequence()//顺序执行动作,将多个动作组合起来
cc.spawn()//同时执行多个动作
cc.macro.KEY.a//键盘上的A键
cc.macro.KEY.d//键盘上的D键
cc.Node.EventType.MOUSE_DOWN//鼠标按下的枚举值
cc.systemEvent.on()//监听用户输入,如监听键盘输入
cc.systemEvent.off()//取消监听用户输入
cc.SystemEvent.EventType.KEY_DOWN//按下键盘的事件类型
cc.SystemEvent.EventType.KEY_UP//松开键盘的事件类型
cc.SystemEvent.EventType.DEVICEMOTION//设备重力传感
cc.instantiate()//克隆指定的任意类型的对象或者从 Prefab 实例化出新节点
cc.v2()//返回一个向量,说白了就是一组x,y
cc.director.preloadScene("MyScene")//对场景进行预加载
cc.director.loadScene("MyScene")//通过场景名称进行加载场景。
cc.find("Cannon 01/Barrel/SFX", this.node);如果子节点的层次较深,还可以使用 cc.find,cc.find 将根据传入的路径进行逐级查找子节点。当 cc.find 只传入第一个参数时,将从场景根节点开始逐级查找,比如this.backNode = cc.find("Canvas/Menu/Back");
cc.director.getScene()//得到场景根节点
cc.isValid()//判断当点是否被销毁
cc.game.addPersistRootNode(myNode);//将节点标注为常驻节点
cc.game.removePersistRootNode(myNode);//取消一个节点的常驻属性,注意该api并不会立即销毁指定节点,只是将节点还原为可在场景切换时销毁的节点
cc.loader.loadRes("test assets/prefab")//加载resources文件夹下的资源,比如加载Prefab
cc.loader.releaseRes()//资源释放
cc.loader.releaseAsset()//释放特定的 Asset 实例
cc.loader.loadResDir//资源批量加载
cc.loader.load()//加载远程资源,loadRes 等 API 只适用于应用包内的资源和热更新的本地资源
cc.isChildClassOf()//来判断两个类的继承关系
cc.Camera.findCamera()//获取节点所在的第一个摄像机
Camera类型.containsNode()//检测节点是否被此摄像机影响。
Camera类型.render()//可以调用这个方法来手动渲染摄像机,比如截图的时候。
Camera类型.getCameraToWorldPoint(point, out);// 将一个摄像机坐标系下的点转换到世界坐标系下
Camera类型.getWorldToCameraPoint(point, out);// 将一个世界坐标系下的点转换到摄像机坐标系下
Camera类型.getCameraToWorldMatrix(out);// 获取摄像机坐标系到世界坐标系的矩阵
Camera类型.getWorldToCameraMatrix(out);// 获取世界坐标系到摄像机坐标系的矩阵


Component类型.setTimeout()//设置延时执行的代码,比如:setTimeout(function () {this.target.destroy();}.bind(this), 5000);
Component类型.setInterval()//设置延时执行的代码
Component类型.schedule()//开始一个计时器
Component类型.scheduleOnce()//开始一个只执行一次的计时器
Component类型.unschedule()//取消一个计时器
Component类型.unscheduleAllCallbacks()//取消这个组件的所有计时器,注意:cc.Node 不包含计时器相关 API,计时器的具体用法,请查看https://docs.cocos.com/creator/manual/zh/scripting/scheduler.html


NodePool类型.put()//向对象池中放入对象
NodePool类型.get()//获得对象池中的对象
NodePool类型.clear()//清空对象池中的对象
NodePool类型.size()//获取对象池中对象的个数

你可能感兴趣的:(cocos开发总结)