前言
在Cocos Creator游戲開發(fā)中驴娃，Prefab奏候、Mask、Layout唇敞、Scrollview的使用是必不可少的蔗草，下面我們逐一講解。
一疆柔、 預(yù)制體cc.Prefab的使用
1: 制作預(yù)制體: 將節(jié)點拖入到assets文件夾下;
2: 加載預(yù)制體: 代碼加載(統(tǒng)一在資源加載時講解)與手動綁定;
3: 預(yù)制體對象實例化: cc.instantiate;
const {ccclass, property} = cc._decorator;
@*ccclass*
export default class BulletMgr extends *cc*.*Component* {
@property({type:cc.*Prefab*, tooltip:"子彈預(yù)制體"})
bulletPrefab : *cc*.*Prefab* = null;
onLoad () {
for(let i=0; i<5; i++){
let bullet : *cc*.*Node* = cc.instantiate(*this*.bulletPrefab);
*this*.node.addChild(bullet);
bullet.x = Math.random()*cc.winSize.width - cc.winSize.width/2;
}
}
}
二咒精、 Mask遮罩組件的使用
1: Mask組件是提供viewport功能的一個組件，你可以想象通過一個窗口去看外面的世界旷档，只能看到這個窗口大小的視區(qū);
2: Mask的形狀: 矩形, 圓形, 圖片的Alpha值來做mask;
3: 一個節(jié)點加上Mask組件后模叙，它和它的孩子在這個范圍內(nèi)的會顯示，不在這個范圍內(nèi)的不顯示;
三鞋屈、 cc.Layout布局組件的使用
1: 布局組件
有些物體的布局范咨，可以不用我們寫死位置故觅，可以根據(jù)內(nèi)容來排版。
比如垂直排版, 水平排版等渠啊，這樣的話输吏，就是不用我們自己調(diào)整給我們排好非常方便;
2: 布局組件的面板屬性:
ResizeMode:
None不會對子節(jié)點和容器進行大小縮放
Child: 對子節(jié)點的大小進行縮放;
CONTAINER:對容器的大小進行縮放; 常用的
布局類型: 水平，垂直, GRID布局
四替蛉、 cc.ScrollView滾動列表的使用
1: 滾動列表的主要結(jié)構(gòu):
root->view(Mask裁剪超出范圍的內(nèi)容) ---> content(Layout)負責內(nèi)容排版;
2: 滾動列表的每個選項:
root(w, h,指定大小贯溅，好給Layout用)
3: 代碼里面使用cc.ScrollView
step1: 將選項做成預(yù)制體
step2: 在代碼里面new 出預(yù)制體,加入到content節(jié)點下;
const {ccclass, property} = cc._decorator;
@*ccclass*
export default class GameMgr extends *cc*.*Component* {
@property({type:cc.*ScrollView*, tooltip:"滾動視圖組件"})
myScrollView : *cc*.*ScrollView* = null;
@property({type:cc.*Prefab*, tooltip:"滾動視圖里面的子項預(yù)制體"})
userItemPrefab : *cc*.*Prefab* = null;
onLoad () {
*this*.myScrollView = *this*.node.getChildByName("UserScrollView").getComponent(cc.ScrollView);
// 動態(tài)往滾動視圖中添加子項
for(let i=0; i<10; i++){
let userItem : *cc*.*Node* = cc.instantiate(*this*.userItemPrefab);
*this*.myScrollView**.content**.addChild(userItem);
}
}
}
往cc.ScrollView的屬性content對應(yīng)的就是滾動列表中的子項的父容器。
