cocos creator基础-(十二)预制体、Mask、Layout 、ScorllView组件使用

1: 理解预制体使用;

2: 掌握Mask组件做圆形图像和裁剪;

3: 掌握Layout组件做布局;

4: 掌握滚动列表的使用和代码加入选项到滚动列表

预制体

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

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

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

Mask组件

1: Mask组件是提供viewport功能的一个组件，你可以想象通过一个窗口去看外面的世界,

只能看到这个窗口大小的视区;

2: Mask的形状: 矩形, 圆形, 图片的Alpha值来做mask;

3: 一个节点加上Mask组件后，它和它的孩子在这个范围内的会显示，不在这个范围内的不

显示;

cc.Layout

1: 布局组件

有些物体的布局，可以不用我们写死位置，可以根据内容来排版

比如垂直排版, 水平排版等，这样的话，就是不用我们自己调整给我们排好非常方便;

2: 布局组件的面板属性:

ResizeMode:

Node不会对子节点和容器进行大小缩放

Child: 对子节点的大小进行缩放;

CONTAINER:对容器的大小进行缩放; 常用的

布局类型: 水平，垂直, GRID布局

cc.ScrollView

1: 滚动列表的主要结构:

root->view(Mask裁剪超出范围的内容) ---> content(Layout)负责内容排版;

2: 滚动列表的每个选项:

root(w, h,制定大小，好给Layout用)

3: 代码里面使用cc.ScrollView

step1: 将选项做成预制体

step2: 在代码里面new 出选项预制体,加入到content节点下;

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        item_prefab: {

            type: cc.Prefab,

            default: null,

        },

        opt_item_prefab: {

            type: cc.Prefab,

            default: null,

        },

        scrollview: {

            type: cc.ScrollView,

            default: null,

        },

    },

    // use this for initialization

    onLoad: function () {

        var item = cc.instantiate(this.item_prefab);

        this.node.addChild(item);

        for(var i = 0; i < 10; i ++) {

            var opt_item = cc.instantiate(this.opt_item_prefab);

            this.scrollview.content.addChild(opt_item);

        }

    },

    // called every frame, uncomment this function to activate update callback

    // update: function (dt) {

    // },

});

我也创建了个cocos creator的学习交流群欢迎大家一起来学习点击链接加入群聊【cocos/unity交流群】