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) {

    // },
});