1. 程式人生 > >微信小遊戲-CocosCreator 基礎(十三)

微信小遊戲-CocosCreator 基礎(十三)

預製體 1: 製作預製體: 將節點拖入到assets資料夾下; 2: 載入預知體: 程式碼載入(統一在資源載入時講解)與手動繫結; 3: 預製體物件例項化: cc.instantiate; =============================================== Mask  : 遮罩 (設定在父物體上,可以遮罩著子物體超出範圍) Type :型別 Inverted:反轉 segements:邊的個數 //圓型一般為64 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節點下; ======================================================

圖片Type ,設定閥值,控制子節點顯示 

文字佈局

節點佈局 父物體LayOut Resize Mode : ConTain //不改變子節點大小,改變父節點大小 CHildren//不改變父節點,改變子節點 ScrollView:要先設定子節點大小 ScrollView View  =》寬度和高度一致 ScrollView View Content =》寬度 一致

========================================= JS: cc.Class({     extends: cc.Component,

    properties: {

        item_prefab: {             type: cc.Prefab,             default: null,         },

        opt_item_prefab: {             type: cc.Prefab,             default: null,         },

        scrollview: {             type: cc.ScrollView,             default: null,         },     },

       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);         }     },

   });