遮罩和圖層

預製體


1.製作預製體,將節點拖入到assets文件下;

2.加載預製體 代碼加載和手動綁定

3.預製體對象實例化:cc.instantiate(預製體)

4.假如你有一個 飛機遊戲 他有源源不斷的×××,這時候

就可以把這個×××當成模板,然後不斷複製這個預製體.


5.把要當預製體的節點 複製到 資源管理器即可

blob.png



6.在代碼裏面創建預製體

首先要獲得預製體對象 可以外部加載也可以綁定組件

cc.Class({
    extends: cc.Component,
    properties: {
    item_prefab:{
    type: cc.Prefab,
    default: null,
    },
    
    },

把預製體拖動到這裏
blob.png



    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類型

blob.png

(1)RECT矩形  

矩形的高度和寬度在size裏設置 blob.png


(2)ELLIPSE橢圓

(3)IMAGE_STENCIL圖片


Inverted 反向遮罩 效果是相反的


首先使用矩形 在他下面添加一個子節點,無論子節點多大隻顯示這個範圍.

blob.png

blob.png  blob.png

反向遮罩 他只裁剪 mask範圍內的 

blob.png

圓形

blob.png


使用圖片來做遮罩,例如一個圓形頭像,就要這個圓形的遮罩圖

blob.png

放到這裏

blob.png

拖動修改就行

blob.png




cc.Layout 


1.佈局組件:

  有些物體的佈局,可以不用我們寫死位置,可以根據內容來排版

比如垂直排版,水平排版,就不用手動去調整.

2佈局組件的面板屬性:

blob.png

Type:排布類型

VERTICAL 垂直自動排布

他又多出幾個屬性

Top距離上面

Bottom 底部的距離

Spacing Y 兩個垂直節點 間距 

blob.png

blob.png



Resize Mode縮放模式 默認不使用

但是有的元素會超出

blob.png

CONTAINER 會自動對容器大小進行縮放

CHILDREN 對子節點大小縮放




GRID 先水平在垂直

blob.png






cc.ScrollView 


1滾動列表主要結構:

root->view(Mask裁剪超出範圍的內容)-->content(Layout)負責內容排版

2 滾動列表的每個選項

root(x,h,指定大小給Layout同)

3代碼裏面使用cc.ScrollView

將選項做成預製體

在代碼裏實例化預製體,加到這個content節點下


他有兩個子節點 一個是滾動條

blob.png


還有一個view是 mask組件的  因爲我們要超過這個範圍的

 讓他不能顯示的

blob.png


每一項都是放在這個content下面的

blob.png


item就是裏面的 視圖裏的一個項

blob.png


直接在content裏添加一個 Layout佈局組件


首先要設置 size大小 因爲layout是根據這個來調整的

blob.png


blob.png




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


blob.png








發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章