CocosCreator 代码组件(创建销毁节点、访问节点和组件) (第四篇)

Stella981
• 阅读 646

前言:
在游戏开发中,我么都是通过代码来控制场景中的节点,下面讲解怎么用代码,创建节点、销毁节点、访问节点、访问组件。


一、创建和销毁节点

1. 创建节点

除了通过场景编辑器创建节点外,我们也可以在脚本中动态创建节点。通过 new cc.Node() 并将它加入到场景中,可以实现整个创建过程。

cc.Class({
   
   
   
    extends: cc.Component,
    properties: {
   
   
   
        sprite:{
   
   
     //关联编辑器
            type: cc.SpriteFrame,
            default: null,
        }
    },
    start () {
   
   
   
        var newnode=new cc.Node("Sprite");  //创建一个新的节点
        var sp=newnode.addComponent(cc.Sprite);   //给新节点添加一个<Sprite组件>
        sp.spriteFrame=this.sprite;  // 更改组件的图片
        newnode.parent=this.node;  // 将新节点作为当前节点的子节点
        this.node.addChild(newnode);  // 将新节点作为当前节点的子节点
        newnode.color=cc.Color.RED;  //设置新节点的颜色
    },
});

2. 克隆已有节点

可以通过 cc.instantiate 方法完成.

cc.Class({
   
   
   
    extends: cc.Component,
    properties: {
   
   
   
        enemy:{
   
   
    // 关联编辑器
            type: cc.Node,
            default: null,
        },
    },
    start () {
   
   
   
        var scenes=cc.director.getScene(); // 获得当前场景
        var node=new cc.instantiate(this.enemy); // 克隆enemy节点
        node.parent=this.scenes;  // 将克隆节点加到场景中
        node.setPosition(cc.v2(100,100));  //设置节点位置
    },
});

3. 创建预制节点

和克隆已有节点相似,你可以设置一个预制(Prefab)并通过 cc.instantiate 生成节点。

cc.Class({
   
   
   
    extends: cc.Component,
    properties: {
   
   
   
        enemy:{
   
   
   
            type: cc.Prefab,  //类型,预制体
            default: null,
        },
    },
    start: function (){
   
   
   
        var scene=cc.director.getScene();
        var node=cc.instantiate(this.enemy);   // 创建预制体
        node.parent=scene;
        node.setPosition(0,0);
    },
});

4. 销毁节点

通过 node.destroy() 函数,可以销毁节点。
注意:
销毁节点并不会立刻被移除,而是在当前帧逻辑更新结束后,统一执行。当一个节点销毁后,该节点就处于无效状态,可以通过 cc.isValid 判断当前节点是否已经被销毁。

cc.Class({
   
   
   
  extends: cc.Component,
  properties: {
   
   
   
    target: cc.Node,
  },
  start: function () {
   
   
   
    // 5 秒后销毁目标节点
    setTimeout(function () {
   
   
   
      this.target.destroy();  //销毁节点
    }.bind(this), 5000);
  },
  update: function (dt) {
   
   
   
    if (cc.isValid(this.target)) {
   
   
     //判断是否消除
      this.target.rotation += dt * 10.0;
    }
  },
});

5. destroy 和 removeFromParent 的区别

调用一个节点的 removeFromParent 后,它不一定就能完全从内存中释放,因为有可能由于一些逻辑上的问题,导致程序中仍然引用到了这个对象。
因此如果一个节点不再使用了,请直接调用它的 destroy 而不是 removeFromParent 。
destroy 不但会激活组件上的 onDestroy ,还会降低内存泄露的几率,同时减轻内存泄露时的后果。

node.removeFromParent();  // 将节点从父亲节点移除
this.node.removeAllChildren();  // 移除所有孩子节点

二、访问节点和组件

1. 访问组件所在的节点

在组件方法里访问 this.node 变量;

var node = this.node;

2. 查找子节点

如果用 属性检查器 来一个一个将它们关联到这个脚本上,那工作就会很繁琐。
为了更好地统一管理这些对象,我们可以把它们放到一个统一的父物体下,然后通过父物体来获得所有的子物体:

// 查找孩子节点【为一个数组】
 var cannons = this.node.children;
 
// getChildByName :出现同名,则返回第一个
this.node.getChildByName("name");

//如果子节点的层次较深,你还可以使用  cc.find , cc.find  将根据传入的路径进行逐级查找:
cc.find("Cannon 01/Barrel/SFX", this.node);
//全局名字查找,当  cc.find  只传入第一个参数时,将从场景根节点开始逐级查找:
this.backNode = cc.find("Canvas/Menu/Back");

3. 获得其它组件

获得同一个节点上的其它组 getComponent 这个 API。

start: function () {
   
   
   
    var label = this.getComponent(cc.Label);// 获取Label组件
    
    //获取代码组件:SinRotate.js 里声明的组件,类名就是  SinRotate 
    var rotate = this.getComponent("SinRotate");
    
    //在节点上也有一个  getComponent  方法,它们的作用是一样的:
    cc.log(this.node.getComponent(cc.Label) === this.getComponent(cc.Label));  // true

    //删除组件
    this.destroy();
}

4.利用属性检查器设置节点

首先在代码里面声明属性,然后将目标节点拉拽到属性检查器中!
CocosCreator 代码组件(创建销毁节点、访问节点和组件) (第四篇)

cc.Class({
   
   
   
    extends: cc.Component,
    properties: {
   
   
   
        // 声明 player 属性
        player: {
   
   
   
            default: null,
            type: cc.Node
        }
    }
});

在上面的例子中,如果你将属性的 type 声明为 Player 组件,当你拖动节点 Player Node 到 属性检查器,player 属性就会被设置为 这个节点里面的 Player 组件 。这样你就不需要再自己调用 getComponent 啦

var Player = require("Player");
cc.Class({
   
   
   
    extends: cc.Component,
    properties: {
   
   
   
        // 声明 player 属性,这次直接是组件类型
        player: {
   
   
   
            default: null,
            type: Player
        }
    },

    start: function () {
   
   
   
        var playerComp = this.player;
        this.checkPlayer(playerComp);
    },
});

推荐阅读:
CocosCreator 代码组件(创建与使用、cc.Class类型、生命周期函数)(第三篇)
CocosCreator 触摸事件、鼠标事件、键盘事件、重力传感事件、自定义事件 (第五篇)

本文同步分享在 博客“战 胜”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
tidb损坏tikv节点怎么恢复集群
tikv节点宕机(机器再起不来),或者数据节点被rmrf 掉了怎么办正常情况下tikv节点down掉了。此时不要去执行store delete store\_id。数据一般可以正常访问,但是如果永久损坏的tikv节点。我们总想要把它移除。如何移除呢? (移除kv节点过程中,如果kv节点健康在线,可以实现动态移除。如果kv节点不可用,可能导致访
Wesley13 Wesley13
3年前
java堆排序(大根堆)
实现堆排序的算法思路是先创建堆,也就是从叶子节点起对每一层的孩子节点及其对应位置的父亲节点进行比较,较大的孩子节点替换较小的父亲节点,一级一级比较替换,就创建出了大根堆,小根堆反之。创建好大根堆以后,我们,将整棵树的根节点与最后最后一个节点替换位置,然后去除最后一个节点,在创建一个新的大根堆,以此类推,完成排序。代码如下:/\\\<p堆排
菜园前端 菜园前端
1年前
DOM 文档对象模型使用教程来喽!
原文链接:HTML模板html我是网站标题访问节点通过id访问指定节点getElementByIdjavascriptvarnodedocument.getElementById('box')通过name访问指定节点getElementsByNamejav
Stella981 Stella981
3年前
CocosCreator 搭建场景和坐标系转换(第二篇)
前言:我们在玩随便一个游戏时,都会发现游戏有很多个的界面,比如(登录界面、主菜单界面,游戏界面、商店界面等),其实这都是一个个的场景,我们通过代码来控制不同场景之间的切换。一个场景里面会有很多的节点组成,为制作出多种多样的节点,我们是通过在节点上挂载不同的组件来实现。在搭建场景时,需要用到一个重要概念坐标,这个坐标包括
Wesley13 Wesley13
3年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Wesley13 Wesley13
3年前
uikiller使用手册(一)
一、前言uikiller是使用名命规则来控制UI节点、组件和触摸事件,减少UI相关的代码与编辑器设置,实现原理是提前对UI树的遍历。在CocosCreator中UI编程基于组件模式,我根据自己的项目经验,将组件分为两类:法宝型与结界型。法宝型组件法宝型组件:以装饰宿主节点为己任,从不控制其它节点。特
Wesley13 Wesley13
3年前
JQ动态生成节点绑定事件无效问题
最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点动态节点绑定方法添加动态节点刷新后点击动态节点方法失效。<!DOCTYPEhtml<html<head</head<body
Wesley13 Wesley13
3年前
IPFS环境搭建节点安装
ipfs(InterPlanetaryFileSystem,星际文件系统),本文介绍节点软件ipfs环境搭建和使用方法,学习ipfsapi在nodejs代码中访问ipfs网络。一、ipfs节点安装与使用1.1下载节点软件到官网下载windows版的ipfs节点软件:32位(https://
Stella981 Stella981
3年前
Neo4j学习笔记(2)——手动索引和模式索引
和关系数据库一样,Neo4j同样可以创建索引来加快查找速度。在关系数据库中创建索引需要索引字段和指向记录的指针,通过索引可以快速查找到表中的行。在Neo4j中,其索引是通过属性来创建,便于快速查找节点或者关系。手动索引先来说一下怎样创建手动索引。创建索引采用显示创建,就像添加节点一样添加索引项,一个索引项标识的是一个节点或
菜园前端 菜园前端
1年前
什么是二叉树?
原文链接:什么是二叉树?树中每个节点最多只能有两个子节点,在JavaScript中一般都是通过Object来模拟二叉树。常用操作前序遍历中序遍历后序遍历前序遍历根左右。口诀:1.访问根节点2.对根节点的左子树进行前序遍历3.对根节点的右子树进行前序遍历通过