Prefab、Mask、Layout、Scrollview组件的使用

前言

在Cocos Creator游戏开发中，Prefab、Mask、Layout、Scrollview的使用是必不可少的，下面我们逐一讲解。

一、 预制体cc.Prefab的使用

1: 制作预制体: 将节点拖入到assets文件夹下;

2: 加载预制体: 代码加载(统一在资源加载时讲解)与手动绑定;

3: 预制体对象实例化: cc.instantiate;

const = cc._decorator;@*ccclass*export default class BulletMgr extends *cc*.*Component* {

 @property()

 bulletPrefab : *cc*.*Prefab* = null;

 onLoad () {

     for(let i=0; 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 = cc._decorator;@*ccclass*export default class GameMgr extends *cc*.*Component* {

 @property()myScrollView : *cc*.*ScrollView* = null;

 @property()userItemPrefab : *cc*.*Prefab* = null;

 onLoad () {

     *this*.myScrollView = *this*.node.getChildByName("UserScrollView").getComponent(cc.ScrollView);

     // 动态往滚动视图中添加子项

     for(let i=0; i

         let userItem : *cc*.*Node* = cc.instantiate(*this*.userItemPrefab);

         *this*.myScrollView**.content**.addChild(userItem);

     }

 }}

往cc.ScrollView的属性content对应的就是滚动列表中的子项的父容器。