預製體
1.製作預製體,將節點拖入到assets文件下;
2.加載預製體 代碼加載和手動綁定
3.預製體對象實例化:cc.instantiate(預製體)
4.假如你有一個 飛機遊戲 他有源源不斷的×××,這時候
就可以把這個×××當成模板,然後不斷複製這個預製體.
5.把要當預製體的節點 複製到 資源管理器即可
6.在代碼裏面創建預製體
首先要獲得預製體對象 可以外部加載也可以綁定組件
cc.Class({ extends: cc.Component, properties: { item_prefab:{ type: cc.Prefab, default: null, }, },
把預製體拖動到這裏
start :function() { //實例化預製體 var itema = cc.instantiate(this.item_prefab); //加入到場景 this.node.addChild(itema); },
Mask組件 遮罩
1.Mask組件是提供viewport功能的一個組件,你可以想象通過
一個窗口去看外面的世界,只能看到這個窗口大小的視區.
2.Mask的形狀:矩形.圓形.圖片的Alpha制來做mask;
3.一個節點加上Mask組件後,他和他的子節點如果:
在這個範圍內就會顯示, 不在範圍的就不會顯示.會被裁剪掉.
4.面板屬性
Type類型
(1)RECT矩形
矩形的高度和寬度在size裏設置
(2)ELLIPSE橢圓
(3)IMAGE_STENCIL圖片
Inverted 反向遮罩 效果是相反的
首先使用矩形 在他下面添加一個子節點,無論子節點多大隻顯示這個範圍.
反向遮罩 他只裁剪 mask範圍內的
圓形
使用圖片來做遮罩,例如一個圓形頭像,就要這個圓形的遮罩圖
放到這裏
拖動修改就行
cc.Layout
1.佈局組件:
有些物體的佈局,可以不用我們寫死位置,可以根據內容來排版
比如垂直排版,水平排版,就不用手動去調整.
2佈局組件的面板屬性:
Type:排布類型
VERTICAL 垂直自動排布
他又多出幾個屬性
Top距離上面
Bottom 底部的距離
Spacing Y 兩個垂直節點 間距
Resize Mode縮放模式 默認不使用
但是有的元素會超出
CONTAINER 會自動對容器大小進行縮放
CHILDREN 對子節點大小縮放
GRID 先水平在垂直
cc.ScrollView
1滾動列表主要結構:
root->view(Mask裁剪超出範圍的內容)-->content(Layout)負責內容排版
2 滾動列表的每個選項
root(x,h,指定大小給Layout同)
3代碼裏面使用cc.ScrollView
將選項做成預製體
在代碼裏實例化預製體,加到這個content節點下
他有兩個子節點 一個是滾動條
還有一個view是 mask組件的 因爲我們要超過這個範圍的
讓他不能顯示的
每一項都是放在這個content下面的
item就是裏面的 視圖裏的一個項
直接在content裏添加一個 Layout佈局組件
首先要設置 size大小 因爲layout是根據這個來調整的
4.在代碼裏使用cc.ScrollView
//往scrollview裏添加 實際上就是添加到Content裏面
//添加10個 for(var i =0;i<10;i++){ //實例化 預設體 var opt_item = cc.instantiate(this.opt_item); opt_item.getChildByName("uname"). getComponent(cc.Label).string="中年人"; //把這個項添加到 content上面去 this.scrollView.content.addChild(opt_item); }