CocosCreator新手教程——cc.Node基础常用接口（API）

2023-05-16

CocosCreator开发笔记——cc.Node基础常用接口（API）

一、常用属性

cc.Class({
  extends: cc.Component,
 
  properties: {
    sprite: {
      default: null,
      type: cc.SpriteFrame,
    },
  },
 
  start: function () {
    var node = new cc.Node('newNode');//新建newNode节点
    var sp = node.addComponent(cc.Sprite);//为节点添加精灵组件
    sp.spriteFrame = this.sprite;//更改精灵组件的精灵帧
    
    node.parent = this.node;//将节点的父节点（属性）设为当前节点
    
    node.setPosition(0,0);//设置节点位置（相对于父节点锚点）
    node.x =100;//设置节点的X轴位置（相对于父节点锚点）
	node.y =100;//设置节点的Y轴位置（相对于父节点锚点）
	
	node.rotation = 90;//逆时针旋转90度（相对原图片）
	node.rotation = -90;//顺时针旋转90度（相对原图片）
	node.rotation = 0;//将角度还原
	
	node.scale = 2;//将节点放大倍数改为2
	node.scaleX = 0.5;//X轴缩放倍数
	node.scaleY = 0.5;//Y轴缩放倍数

	node.opacity = 255;//节点透明度（0～255）
	
	node.color = new cc.Color(255, 255, 255);//节点颜色默认为白色，数值为：（255，255，255）
	
	node.anchorX = 0;//设置节点锚点（0～1）左下为（0，0）右上为（1，1）
	node.anchorY = 0;
	
	node.width = 100;//节点宽度
	node.height = 100;//节点长度
	
	node.name = "New Node";//用于获取或更改节点名字

	var children = node.children;//获取节点的所有子节点
	for (var i = 0; i < children.length; ++i) {
   		 cc.log("Node: " + children[i]);
	}
	var count = node.childrenCount;//获取节点子节点数量
	
	node.active = false;//设置节点的激活状态（值得注意的是，一个节点的父节点如果不被激活，那么即使它自身设为激活，它仍然无法激活。）
	var isActive = node.activeInHierarchy;//用于检查节点的激活状态
	
	var isValid = node.isValid;//该对象是否可用（被 destroy 后将不可用）
	//当一个对象的 destroy 调用以后，会在这一帧结束后才真正销毁。因此从下一帧开始 isValid 就会返回 false，而当前帧内 isValid 仍然会是 true。如果希望判断当前帧是否调用过 destroy，请使用 cc.isValid(obj, true)
	
	node.group = "palyer";//将节点的组改为玩家（用于碰撞检测）
  },
});

二、常用方法

1.注册事件

在节点上注册指定类型的回调函数，也可以设置 target 用于绑定响应函数的 this 对象。
鼠标或触摸事件会被系统调用 dispatchEvent 方法触发

//在节点上注册指定类型的回调函数,当发生事件时调用绑定的callback
this.node.on(cc.Node.EventType.TOUCH_START, this.memberFunction, this);  
node.on(cc.Node.EventType.TOUCH_START, callback, this);//触摸按下
node.on(cc.Node.EventType.TOUCH_MOVE, callback, this);//触摸移动
node.on(cc.Node.EventType.TOUCH_END, callback, this);//触摸结束
node.on(cc.Node.EventType.TOUCH_CANCEL, callback, this);//取消
node.on(cc.Node.EventType.ANCHOR_CHANGED, callback);
node.on(cc.Node.EventType.COLOR_CHANGED, callback);

注册节点的特定事件类型回调，回调会在第一时间被触发后删除自身。

node.once(cc.Node.EventType.ANCHOR_CHANGED, callback);

删除之前与同类型，回调，目标或 useCapture 注册的回调。

this.node.off(cc.Node.EventType.TOUCH_START, this.memberFunction, this);
node.off(cc.Node.EventType.TOUCH_START, callback, this.node);
node.off(cc.Node.EventType.ANCHOR_CHANGED, callback, this);

移除目标上的所有注册事件。

node.targetOff(target);

暂停当前节点上注册的所有节点系统事件，节点系统事件包含触摸和鼠标事件。如果传递 recursive 为 true，那么这个 API 将暂停本节点和它的子树上所有节点的节点系统事件。

node.pauseSystemEvents(true);

恢复当前节点上注册的所有节点系统事件，节点系统事件包含触摸和鼠标事件。如果传递 recursive 为 true，那么这个 API 将恢复本节点和它的子树上所有节点的节点系统事件。

node.resumeSystemEvents(true);

2.动作

执行并返回该执行的动作。该节点将会变成动作的目标。
调用 runAction 时，节点自身处于不激活状态将不会有任何效果。
注意：你不应该修改 runAction 后的动作，将无法发挥作用，如果想进行修改，请在定义 action 时加入。

var action = cc.scaleTo(0.2, 1, 0.6);
node.runAction(action);
node.runAction(action).repeatForever(); // fail
node.runAction(action.repeatForever()); // right

暂停本节点上所有正在运行的动作。和 cc.director.getActionManager().pauseTarget(node); 等价。

node.pauseAllActions();

恢复运行本节点上所有暂停的动作。和 cc.director.getActionManager().resumeTarget(node); 等价。

node.resumeAllActions();

停止并且移除所有正在运行的动作列表。

node.stopAllActions();

停止并移除指定的动作。

var action = cc.scaleTo(0.2, 1, 0.6);
node.stopAction(action);

停止并且移除指定标签的动作。

node.stopAction(1);

通过标签获取指定动作。

var action = node.getActionByTag(1);

3.修改属性

获取节点在父节点坐标系中的位置（x, y）。

cc.log("Node Position: " + node.getPosition());

设置节点在父节点坐标系中的位置。
可以通过两种方式设置坐标点：

1）传入 2 个数值 x 和 y。
2）传入 cc.v2(x, y) 类型为 cc.Vec2 的对象。

node.setPosition(cc.v2(0, 0));
node.setPosition(0, 0);

获取节点的缩放。当 X 轴和 Y 轴有相同的缩放数值时。

cc.log("Node Scale: " + node.getScale());

设置节点的缩放比例，默认值为 1.0。这个函数可以在同一时间修改 X 和 Y 缩放。

node.setScale(cc.v2(1, 1));
node.setScale(1);

设置该节点以局部坐标系 Z 轴为轴进行旋转的角度。

node.setRotation(-20);

获取该节点以局部坐标系 Z 轴为轴进行旋转的角度。

node.getRotation();

获取节点自身大小，不受该节点是否被缩放或者旋转的影响。

cc.log("Content Size: " + node.getContentSize());

设置节点原始大小，不受该节点是否被缩放或者旋转的影响。

node.setContentSize(cc.size(100, 100));
node.setContentSize(100, 100);

获取节点锚点，用百分比表示。
锚点应用于所有变换和坐标点的操作，它就像在节点上连接其父节点的大头针。
锚点是标准化的，就像百分比一样。(0，0) 表示左下角，(1，1) 表示右上角。
但是你可以使用比（1，1）更高的值或者比（0，0）更低的值。
默认的锚点是（0.5，0.5），因此它开始于节点的中心位置。
注意：Creator 中的锚点仅用于定位所在的节点，子节点的定位不受影响。

cc.log("Node AnchorPoint: " + node.getAnchorPoint());

设置锚点的百分比。

node.setAnchorPoint(cc.v2(1, 1));
node.setAnchorPoint(1, 1);

4.坐标

将一个点转换到节点 (局部) 坐标系，并加上锚点的坐标。
也就是说返回的坐标是相对于节点包围盒左下角的坐标。
这个 API 的设计是为了和 cocos2d-x 中行为一致，更多情况下你可能需要使用 convertToNodeSpaceAR。

var newVec2 = node.convertToNodeSpace(cc.v2(100, 100));

将一个相对于节点左下角的坐标位置转换到世界空间坐标系。这个 API 的设计是为了和 cocos2d-x 中行为一致，更多情况下你可能需要使用 convertToWorldSpaceAR

var newVec2 = node.convertToWorldSpace(cc.v2(100, 100));

将一个点转换到节点 (局部) 空间坐标系，这个坐标系以锚点为原点。

var newVec2 = node.convertToNodeSpaceAR(cc.v2(100, 100));

将节点坐标系下的一个点转换到世界空间坐标系。

var newVec2 = node.convertToWorldSpaceAR(cc.v2(100, 100));

5.获取包围盒

返回父节坐标系下的轴向对齐的包围盒。

var boundingBox = node.getBoundingBox();

返回节点在世界坐标系下的对齐轴向的包围盒（AABB）。
该边框包含自身和已激活的子节点的世界边框。

var newRect = node.getBoundingBoxToWorld();

6.针对节点操作

添加子节点，并且可以修改该节点的局部 Z 顺序和名字。

node.addChild(newNode, 1, "node")

停止所有正在播放的动作和计时器。

node.cleanup();

获取该节点的父节点。

var parent = this.node.getParent();

设置该节点的父节点。

node.setParent(newNode);

属性配置函数。在 attrs 的所有属性将被设置为节点属性。

var attrs = { key: 0, num: 100 };
node.attr(attrs);

通过 uuid 获取节点的子节点。

var child = node.getChildByUuid(uuid);

通过名称获取节点的子节点。

var child = node.getChildByName("Test Node");

遍历该节点的子树里的所有节点并按规则执行回调函数。对子树中的所有节点，包含当前节点，会执行两次回调，prefunc 会在访问它的子节点之前调用，postfunc 会在访问所有子节点之后调用。这个函数的实现不是基于递归的，而是基于栈展开递归的方式。请不要在 walk 过程中对任何其他的节点嵌套执行 walk。

node.walk(function (target) {
    console.log('Walked through node ' + target.name + ' for the first time');
}, function (target) {
    console.log('Walked through node ' + target.name + ' after walked all children in its sub tree');
});

从父节点中删除该节点。如果不传入 cleanup 参数或者传入 true，那么这个节点上所有绑定的事件、action 都会被删除。
因此建议调用这个 API 时总是传入 false 参数。
如果这个节点是一个孤节点，那么什么都不会发生。

node.removeFromParent();
node.removeFromParent(false);

移除节点中指定的子节点，是否需要清理所有正在运行的行为取决于 cleanup 参数。
如果 cleanup 参数不传入，默认为 true 表示清理。

node.removeChild(newNode);
node.removeChild(newNode, false);

移除节点所有的子节点，是否需要清理所有正在运行的行为取决于 cleanup 参数。
如果 cleanup 参数不传入，默认为 true 表示清理。

node.removeAllChildren();
node.removeAllChildren(false);

是否是指定节点的子节点？

node.isChildOf(newNode);

销毁所有子节点，并释放所有它们对其它对象的引用。
实际销毁操作会延迟到当前帧渲染前执行。

node.destroyAllChildren();

销毁该对象，并释放所有它对其它对象的引用。
实际销毁操作会延迟到当前帧渲染前执行。从下一帧开始，该对象将不再可用。您可以在访问对象之前使用 cc.isValid(obj) 来检查对象是否已被销毁。

obj.destroy();

7.组件

获取节点上指定类型的组件，如果节点有附加指定类型的组件，则返回，如果没有则为空。
传入参数也可以是脚本的名称。

// get sprite component.
var sprite = node.getComponent(cc.Sprite);
// get custom test calss.
var test = node.getComponent("Test");

返回节点上指定类型的所有组件。

var sprites = node.getComponents(cc.Sprite);
var tests = node.getComponents("Test");

递归查找所有子节点中第一个匹配指定类型的组件。

var sprite = node.getComponentInChildren(cc.Sprite);
var Test = node.getComponentInChildren("Test");

递归查找自身或所有子节点中指定类型的组件

var sprites = node.getComponentsInChildren(cc.Sprite);
var tests = node.getComponentsInChildren("Test");

向节点添加一个指定类型的组件类，你还可以通过传入脚本的名称来添加组件。

var sprite = node.addComponent(cc.Sprite);
var test = node.addComponent("Test");

删除节点上的指定组件，传入参数可以是一个组件构造函数或组件名，也可以是已经获得的组件引用。如果你已经获得组件引用，你也可以直接调用 component.destroy()

node.removeComponent(cc.Sprite);
var Test = require("Test");
node.removeComponent(Test);

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)