前言
在Cocos Creator游戏开发中，Prefab、Mask、Layout、Scrollview的使用是必不可少的，下面我们逐一讲解。
一、 预制体cc.Prefab的使用
1: 制作预制体: 将节点拖入到assets文件夹下;
2: 加载预制体: 代码加载(统一在资源加载时讲解)与手动绑定;
3: 预制体对象实例化: cc.instantiate;
const {ccclass, property} = cc._decorator;
@*ccclass*
export default class BulletMgr extends *cc*.*Component* {
@property({type:cc.*Prefab*, tooltip:"子弹预制体"})
bulletPrefab : *cc*.*Prefab* = null;
onLoad () {
for(let i=0; i<5; i++){
let bullet : *cc*.*Node* = cc.instantiate(*this*.bulletPrefab);
*this*.node.addChild(bullet);
bullet.x = Math.random()*cc.winSize.width - cc.winSize.width/2;
}
}
}
二、 Mask遮罩组件的使用
1: Mask组件是提供viewport功能的一个组件，你可以想象通过一个窗口去看外面的世界，只能看到这个窗口大小的视区;
2: Mask的形状: 矩形, 圆形, 图片的Alpha值来做mask;
3: 一个节点加上Mask组件后，它和它的孩子在这个范围内的会显示，不在这个范围内的不显示;
三、 cc.Layout布局组件的使用
1: 布局组件
有些物体的布局，可以不用我们写死位置，可以根据内容来排版。
比如垂直排版, 水平排版等，这样的话，就是不用我们自己调整给我们排好非常方便;
2: 布局组件的面板属性:
ResizeMode:
None不会对子节点和容器进行大小缩放
Child: 对子节点的大小进行缩放;
CONTAINER:对容器的大小进行缩放; 常用的
布局类型: 水平，垂直, GRID布局
四、 cc.ScrollView滚动列表的使用
1: 滚动列表的主要结构:
root->view(Mask裁剪超出范围的内容) ---> content(Layout)负责内容排版;
2: 滚动列表的每个选项:
root(w, h,指定大小，好给Layout用)
3: 代码里面使用cc.ScrollView
step1: 将选项做成预制体
step2: 在代码里面new 出预制体,加入到content节点下;
const {ccclass, property} = cc._decorator;
@*ccclass*
export default class GameMgr extends *cc*.*Component* {
@property({type:cc.*ScrollView*, tooltip:"滚动视图组件"})
myScrollView : *cc*.*ScrollView* = null;
@property({type:cc.*Prefab*, tooltip:"滚动视图里面的子项预制体"})
userItemPrefab : *cc*.*Prefab* = null;
onLoad () {
*this*.myScrollView = *this*.node.getChildByName("UserScrollView").getComponent(cc.ScrollView);
// 动态往滚动视图中添加子项
for(let i=0; i<10; i++){
let userItem : *cc*.*Node* = cc.instantiate(*this*.userItemPrefab);
*this*.myScrollView**.content**.addChild(userItem);
}
}
}
往cc.ScrollView的属性content对应的就是滚动列表中的子项的父容器。
