遮罩和圖層

預(yù)制體

1.制作預(yù)制體,將節(jié)點(diǎn)拖入到assets文件下;

2.加載預(yù)制體 代碼加載和手動(dòng)綁定

3.預(yù)制體對(duì)象實(shí)例化:cc.instantiate(預(yù)制體)

4.假如你有一個(gè) 飛機(jī)游戲 他有源源不斷的×××,這時(shí)候

就可以把這個(gè)×××當(dāng)成模板,然后不斷復(fù)制這個(gè)預(yù)制體.

5.把要當(dāng)預(yù)制體的節(jié)點(diǎn) 復(fù)制到 資源管理器即可

6.在代碼里面創(chuàng)建預(yù)制體

首先要獲得預(yù)制體對(duì)象 可以外部加載也可以綁定組件

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

把預(yù)制體拖動(dòng)到這里

    start :function() {
    //實(shí)例化預(yù)制體
    var itema = cc.instantiate(this.item_prefab);
    //加入到場(chǎng)景
    this.node.addChild(itema);
    },

Mask組件 遮罩

1.Mask組件是提供viewport功能的一個(gè)組件,你可以想象通過(guò)

一個(gè)窗口去看外面的世界,只能看到這個(gè)窗口大小的視區(qū).

2.Mask的形狀:矩形.圓形.圖片的Alpha制來(lái)做mask;

3.一個(gè)節(jié)點(diǎn)加上Mask組件后,他和他的子節(jié)點(diǎn)如果:

在這個(gè)范圍內(nèi)就會(huì)顯示, 不在范圍的就不會(huì)顯示.會(huì)被裁剪掉.

4.面板屬性 

Type類型

(1)RECT矩形  

矩形的高度和寬度在size里設(shè)置 

(2)ELLIPSE橢圓

(3)IMAGE_STENCIL圖片

Inverted 反向遮罩 效果是相反的

首先使用矩形 在他下面添加一個(gè)子節(jié)點(diǎn)，無(wú)論子節(jié)點(diǎn)多大只顯示這個(gè)范圍.

反向遮罩 他只裁剪 mask范圍內(nèi)的 

圓形

使用圖片來(lái)做遮罩,例如一個(gè)圓形頭像,就要這個(gè)圓形的遮罩圖

放到這里

拖動(dòng)修改就行

cc.Layout 

1.布局組件:

  有些物體的布局,可以不用我們寫(xiě)死位置,可以根據(jù)內(nèi)容來(lái)排版

比如垂直排版,水平排版,就不用手動(dòng)去調(diào)整.

2布局組件的面板屬性:

Type:排布類型

VERTICAL 垂直自動(dòng)排布

他又多出幾個(gè)屬性

Top距離上面

Bottom 底部的距離

Spacing Y 兩個(gè)垂直節(jié)點(diǎn) 間距 

Resize Mode縮放模式 默認(rèn)不使用

但是有的元素會(huì)超出

CONTAINER 會(huì)自動(dòng)對(duì)容器大小進(jìn)行縮放

CHILDREN 對(duì)子節(jié)點(diǎn)大小縮放

GRID 先水平在垂直

cc.ScrollView 

1滾動(dòng)列表主要結(jié)構(gòu):

root->view(Mask裁剪超出范圍的內(nèi)容)-->content(Layout)負(fù)責(zé)內(nèi)容排版

2 滾動(dòng)列表的每個(gè)選項(xiàng)

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

3代碼里面使用cc.ScrollView

將選項(xiàng)做成預(yù)制體

在代碼里實(shí)例化預(yù)制體,加到這個(gè)content節(jié)點(diǎn)下

他有兩個(gè)子節(jié)點(diǎn) 一個(gè)是滾動(dòng)條

還有一個(gè)view是 mask組件的  因?yàn)槲覀円^(guò)這個(gè)范圍的

 讓他不能顯示的

每一項(xiàng)都是放在這個(gè)content下面的

item就是里面的 視圖里的一個(gè)項(xiàng)

直接在content里添加一個(gè) Layout布局組件

首先要設(shè)置 size大小 因?yàn)閘ayout是根據(jù)這個(gè)來(lái)調(diào)整的

4.在代碼里使用cc.ScrollView

    //往scrollview里添加 實(shí)際上就是添加到Content里面

    //添加10個(gè)
    for(var i =0;i<10;i++){
    //實(shí)例化 預(yù)設(shè)體
    var opt_item = cc.instantiate(this.opt_item);
    opt_item.getChildByName("uname").
    getComponent(cc.Label).string="中年人";
    //把這個(gè)項(xiàng)添加到 content上面去
    this.scrollView.content.addChild(opt_item);
    }