微信小遊戲-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); } },
});