cocos creator基础一文通(十二)--预制体 mask layout scrollView

1,513 阅读2分钟

预制体

一.创建预制体

1.创建预制体
将配置好的节点从节点树拖到资源管理器就可以创建预制体
创建好的预制体直接拖拽至节点树就可以创建预制体实例
2.拿到预制体对象
两种方法:<1>资源动态加载 //挖坑
<2> 绑定至属性面板 //老方法了
cc.Class({
    extends: cc.Component,
    properties: {
        item_frefab:{
            type:cc.Prefab,
            default:null,
        }
    },
    start () {
        console.log(this.item_frefab);
        var item=cc.instantiate(this.item_frefab);
        console.log(item);
        this.node.addChild(item);
    },
});
这样就找到了.
3. 代码创建预制体实例
cc.instance(预制体) //返回预制体对象
        var item=cc.instantiate(this.item_frefab);
        console.log(item);
        this.node.addChild(item);

Mask组件 (蒙版)

一. 添加mask组件

1.正方形蒙版 size设大小 Inverted 反向遮罩
2. 椭圆蒙版 segement确定圆的边数 size设大小 Inverted 反向遮罩
3.图片蒙版 //设置一张图片,图片a值小于...的会被蒙住

layout 布局

一. 添加layout组件

1.垂直布局 //resize mode:缩放容器还是缩放孩子
// padding:不用说了 和CSS一样 最后一项是元素间距
2.水平布局 //类似于垂直布局
3.先水平后垂直 和写字一样,写完一行再一行

滚动条

一. scrollView节点结构

  1. 先看scrollView本身 //本身就挂了sprite做背景 还带一个scrollview组件
2. scrollbar子节点 //
3. view子节点 //只有一个mask组件控制显示区域
view下子节点content是内容的纸张大小,并与滚动条相连
view的子节点item是真正的内容,如果他的高度超过 content ,滚动条也拖不到
所以,可以为content设置 layout组件,并设置为根据孩子调整,以便条目增加时,能滚动到
//注意控制content锚点,以控制拓展方向!!!!

二. scrollview应用

很适合做排行榜 但排行榜的条目不是固定的,所以..应该用预制体来做
把player做成预制体
然后,把scrollView节点和预制件都绑定给 挂脚本的节点
代码如下: 加了个按钮 按一下加一个玩家
cc.Class({
    extends: cc.Component,
    properties: {
        item_frefab:{
            type:cc.Prefab,
            default:null,
        },
        item_scroll:{
            type:cc.ScrollView,
            default:null,
        }
    },
    add_btn:function(){
        var item=cc.instantiate(this.item_frefab);
        this.item_scroll.content.addChild(item);
    },
});

三. 创建一个scroolbar

由于scrollview只带了一个垂直方向的 scrollbar ,且scrollbar不是标准的节点组件,只能自己添加了
1.创建一个新的空节点
2.为其添加属性精灵组件 cc.sprite 把背景图给他 精灵图显示模式应为:slice九宫格
3. 为它添加一个widget属性组件 确定位置 //(参见(十三))
4. 为它添加一个scrollbar属性组件 将其变为scrollbar
5. 这里需要一个handle 给他创建一个子节点 bar 并添加精灵属性组件,然后挂载scrollhandle图片(九宫格)
6. 将子节点 bar 给父节点的scrollbar属性组件做handle
7.这样一个scrollbar就做完了,此时可以把它挂载到scrollView上做水平拖拽条 别忘记开启水平拖拽 这样就实现了水平滚动条了