cocos creator学习（三）预制节点

前言

前两篇
cocos creator学习（一）页面+动画
cocos creator学习（二）js绑定动画
写了从开始到完成一个简单的动画的过程，这篇写预制节点

制作预制节点

将想要让他成为预制节点的这个层级直接从层级管理器拖拽到资源管理器，即可变为预制节点（因为我的预制节点放在自己创建的prefab文件夹里，所以我直接拖拽到文件夹里了）

为了让没看过前两篇的人好理解，我稍微解释一下，层级管理器里面的back是一个马路的背景，5是一个小人儿，已经绑定了走路的动画。

在js里声明预制节点

因为需要将预制节点追加到名为back的层级上显示，所以back也需要声明（这里生命的back把default:null省略了）

和cocos creator学习（二）js绑定动画同样的操作，在资源管理器里，右键单击我们创建的scripts文件夹，然后新建一个JavaScript文件并命名，我在之前已经创建了名为exam的js文件，所以这里就直接用了。

双击打开js文件，在exam.js里面的properties中声明背景back和小人儿ren

back :cc.Node,
ren:{
type:cc.Prefab,
default:null,
}

在cocos里绑定脚本并一一对应

打开cocos creator，点击层级管理器的canvas，在属性检查器里点击添加组件→用户脚本组件→exam，则会给canvas绑定这个组件，那这时候我们会发现足见下面有三个值：

一个是script，后面的是exam（exam上面的小提示是script类型）
一个是back，后面是空的（类型为Node）
还有一个是ren，后面也是空的（类型为Prefab）

这里的类型都是在js脚本中定义过的。
那么现在我们从层级管理器中将对应的back拖拽到back的后面，5（已经变成蓝色的预制节点的5或者在资源管理器中prefab文件夹里前面小图标是个方块的5）拖拽到ren的后面就可以了。

获取预制节点位置

点击层级管理器中的5，在属性检查器里可以看到他的position为（-67，-306）

注意：预制节点的位置是他的中心点和他父级中心点的位移，所以一定要将预制节点拖入他的父级中后再看位置

将预制节点实例化后放入场景

这一步是在js脚本中做的，

// 实例化一个预制节点
let ren1 = cc.instantiate(this.ren);

// 设置该组件位置，这里的-67，-306就是刚才获取到的预制节点的位置
ren1.setPosition(-67,-306);

// 在层级back中追加该组件
this.back.addChild(ren1);

检查预制节点添加是否成功

然后我们在cocos里点击层级管理器中的5，将它的属性检查器中名字前面的对号点掉。可以看到场景编辑器里已经没有小人儿的存在了

当我们点击cocos页面上方中间的播放按钮后，发现小人儿还是出现在页面中，证明预制节点添加成功了！

但是同样的发现一个问题，预制节点并没有执行动画，就是说他是静止的

预制节点执行动画

刚才我们已经把预制节点实例化并赋值给ren1了，添加到层级back的是实例化后的预制节点，那么执行动画也要这个实例化后的预制节点来执行

在js文件中，实例化该预制节点后，添加一行：
ren1.getComponent(cc.Animation).play(“ren”);

如下图：

这样保存后再打开浏览器查看，发现小人儿已经在动了。

---

cocos笔记链接：
cocos creator学习（一）页面+动画
cocos creator学习（二）js绑定动画
cocos creator学习（三）预制节点
cocos creator学习（四）全局变量+类之间的函数调用
cocos creator学习（五）定时器
cocos creator学习（六）组件Mask（超出部分隐藏）
cocos creator学习（七）音乐
cocos creator学习（八）自动图集+构建发布h5
cocos creator学习（九）构建后更改图片和层级设置
cocos creator学习（十）cocos自带扩展插件-压缩