Cocos Creator基础(十三)预制体(cc.Prefab)+Mask+Layout

创建预制体

1: 制作预制体: 将节点拖入到assets文件夹下

创建一个sprite节点,然后将其拖到下方的assets文件下。直接生成一个预制体
在这里插入图片描述

2: 加载预知体: 代码加载(统一在资源加载时讲解)与手动绑定

这里是传送门(本章可以不用了解)

3: 预制体对象实例化: cc.instantiate

代码定义一个预制体变量,将创建好的预制体与其绑定,就可以使用代码对其操作了
在这里插入图片描述

    properties: {
        item_prefab: { //到界面将预制体绑定到这个 预制体 变量下
            default: null,
            type: cc.Prefab
        }
    },
    onLoad() {
        var item = cc.instantiate(this.item_prefab);  //找到预制体
        this.node.addChild(item) //将预制体添加到当前节点下
    },

mask 视窗/遮罩

1: Mask组件是提供viewport功能的一个组件,你可以想象通过一个窗口去看外面的世界,只能看到这个窗口大小的视区;
2: Mask的形状: 矩形, 圆形, 图片的Alpha值来做mask;
3: 一个节点加上Mask组件后,它和它的孩子在这个范围内的会显示,不在这个范围内的不
显示;

1,创建一个空组件,添加mask组件。

RECT(矩形) ELLIPSE(圆形) IMAGE STENCIL(图片)
inverted (与之前遮罩内容相反)

在这里插入图片描述

2,mask下创建一个子组件

子组件如果有超出父mask的部分,将不会显示,如下子组件400X400,只会展示200X200的部分。
在这里插入图片描述

3,取反向遮罩部分

在这里插入图片描述

4,圆形遮罩

圆形遮罩默认将其边分为64等分,可以调节参数。
在这里插入图片描述
设置成6的时候
在这里插入图片描述

5,图片

mask上挂载一个底片它有一个阈值,下面的子组件有一张头像,调节当前阈值,只有当调节头像阈值大于或等于mask底片的阈值的时候,才会绘制内容。
在这里插入图片描述

Layout 布局

  1. 布局组件
    有些物体的布局,可以不用我们写死位置,可以根据内容来排榜
    比如垂直排版, 水平排版等,这样的话,就是不用我们自己调整给我们排好非常方便;

  2. 布局组件的面板属性:
    ResizeMode:
    Node不会对子节点和容器进行大小缩放
    Child: 对子节点的大小进行缩放;
    CONTAINER:对容器的大小进行缩放; 常用的
    布局类型: 水平,垂直, GRID布局
    在这里插入图片描述
    在这里插入图片描述

ScrollView(Mask+Layout)

1: 滚动列表的主要结构:
root->view(Mask裁剪超出范围的内容) —> content(Layout)负责内容排版;
2: 滚动列表的每个选项:
root(w, h,制定大小,好给Layout用)
3: 代码里面使用cc.ScrollView
step1: 将选项做成预制体
step2: 在代码里面new 出预制体,加入到content节点下;

1,定义scrollView组件

创建一个scrollView组件,定义一个参数与其绑定

        scrollview: {
            default: null,
            type: cc.ScrollView
        },

在这里插入图片描述
在这里插入图片描述

2,Layout定义排版方式

做排行,将content添加一个Layout组件,用来布局,垂直排列。
在这里插入图片描述

3,列表元素做成预制体

将排行具体内容做成预制体,在代码定义一个参数,将预制与其绑定。

        item_prefab: { //到界面将预制体绑定到这个 预制体 变量下
            default: null,
            type: cc.Prefab
        },

4,代码动态生成列表

        for (var i = 0; i < 10; i++) {
            var item = cc.instantiate(this.item_prefab);
            cc.log(this.item_prefab.data)
            this.scrollview.content.addChild(item)
        }

5,效果图

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页