cocos creator--Prefab、Mask、Layou

前言

在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对应的就是滚动列表中的子项的父容器。