Cocos Creator_官方案例解析_01_graphics_ui

01_graphics/01_sprite
AnchorPoint(锚点)
AR.js：

cc.Class({
    extends: cc.Component,
    properties: {
        posAR: cc.Label, //两个文本标签，用于描述位置信息
        pos: cc.Label,
        goldAR: cc.Node,//两个节点，用于赋值对象。
        gold: cc.Node
    },
    onLoad: function () {
        //声明goldAR的父节点对象
        var sheep = this.goldAR.parent;
        var posAR = sheep.convertToWorldSpaceAR(cc.v2(this.goldAR.x, this.goldAR.y));
        //parseInt将字符串装换成整数（直接舍去小数位），带有“0x”前缀的字符串被认为是十六进制。其余所有字符串都被认为是十进制。
        this.posAR.string = '(' + parseInt(posAR.x) + ', ' + parseInt(posAR.y) + ')';   
        sheep = this.goldAR.parent;
        var pos = sheep.convertToWorldSpace(cc.v2(this.gold.x, this.gold.y));
        this.pos.string = '(' + parseInt(pos.x) + ', ' + parseInt(pos.y) + ')';
    },
});

AtlasSprite（图集）
精灵组件下的Atlas为精灵图集资源，Sprite Frame为图片资源。
一旦图集确定，那么呈现图片只能是图集中的一员。
FilledSprite（可填充精灵）
设置一定的填充起始位置和方法，能够以一定比率裁剪显示图片。
Fill Typet表示填充方向，一共有三种类型（水平，垂直，和扇形）。
Fill Centert表示填充中心。（左下角为（0,0）右上角为（1,1））。
Fill Start表示填充起始位置。（范围为0~1）
FillRange表示填充总量。（范围为0~1）
FilledSpriteControl

cc.Class({
    extends: cc.Component,
    properties: {
        speed: 0.1,
        horizontal: {
            default: null,
            type: cc.Sprite
        },
        vertical: {
            default: null,
            type: cc.Sprite
        },
        radial_round: {
            default: null,
            type: cc.Sprite
        },
        radial_semicircle: {
            default: null,
            type: cc.Sprite
        }
    },
    update: function (dt) {
        // 更新填充开始
        this._updataFillStart(this.horizontal, dt);
        this._updataFillStart(this.vertical, dt);
        // 更新填充范围
        this._updateFillRange(this.radial_round, 1, dt);
        this._updateFillRange(this.radial_semicircle, 0.5, dt);
    },
    _updataFillStart: function (sprite, dt) {
        var fillStart = sprite.fillStart;
        fillStart = fillStart > 0 ? fillStart -= (dt * this.speed) : 1;
        sprite.fillStart = fillStart;
    },
    _updateFillRange: function (sprite, range, dt) {
        var fillRange = sprite.fillRange;
        fillRange = fillRange < range ? fillRange += (dt * this.speed) : 0;
        sprite.fillRange = fillRange;
    }
});

SimpleSprite（基础精灵）
修改尺寸会整体拉伸图像，适用于序列帧动画和普通动画。
SlicedSprite（九宫格精灵）
修改尺寸时四个角的区域不会拉伸，适用于UI按钮和面板背景。

编辑图片调整九宫格，组件发生改变时四个角不会被拉伸。
TiledSprite（平铺精灵）
修改尺寸时会不断平铺原始大小的图片。
可以实现单一进度条效果。
TrimmedSprite（自动裁剪）

使用自动裁剪可以使动画开起来更为连贯，圆润。
PS：
指定Sprite所在节点的尺寸，CUSTOM表示自定义尺寸，TRIMMED表示取原始图片裁剪透明像素后的尺寸，RAW表示取原始图片为剪裁的尺寸。

01_graphics/02_particle
AutoRemoveParticle(自动删除粒子)
粒子播放完毕自动销毁所在节点。
TogleParticle（粒子的播放）
粒子系统的播放和停止。
myParticle.resetSystem();
myParticle.stopSystem();

01_graphics/03_texture_format
webp-test（网页纹理）
网页纹理（.webp后缀）区别于其他精灵纹理（.png或者.plist）。

02_ui/01_widget

AdvancedWidget(高级组件)
Widget组件：使组件基于父节点某边间隔特定像素值或者百分值。

AlignOnceWidget（对齐模式）
AlignOnce：只生效一次，当组件进行修改时，对其方式依旧是依照没有修改之前的位置。

AnimatedWidget（动画组件）
需要同时具备Animator和Widget组件，且AlignOnce为false状态。

AntoResize（自动调节大小）
在九宫格（SLICED）渲染模式下，选择CUSTOM类型尺寸。会对组件进行一些修改。（button的默认模式就是这种类型。）

WidgetAlign（小部件对齐）
使用Widget对齐即。对齐和对象中心点有关和Anchor无关。以右上角为中心点进行对齐。

02_ui/02_label
AlignFontLabel（调整文本字体）
Label（文本组件），提供了水平（Horizontal Align）和垂直（Vertical Align）对齐方式（有三种格式，左，右，中），可以修改文字大小（Font Size）和间隔距离（Line Height）。文字排版方式（Overflow）也有三种（节点约束框之外的文字会被截断。自动依据节点约束框缩小文字。根据文本内容自动更新节点的height属性。） 自动换行（Enable Wrap）和字体设置。

BitmapFontLabel（文字排版方式）
文字排版方式（Overflow）的三种方法配合上自动换行有多种展现形式。

LabelAtlas（文本字体）
在resources/font文件夹下导入的字体资源的使用会限制文本框内的文字显示，例如这里的数字标签只会识别数字其他类型自动删除。

SystemFontLabel（系统文本字体）
系统默认字体可以识别所有文本。LabelOutline（文本标识线）用于对字体进行边框修饰。只可以修改默认字体。

02_ui/03_button
ButtoninScroll（按钮滚动）
将按钮放置在ScrollView（提供滑动功能）/View（遮罩功能）/Content/下即可实现滑动列表功能。

Buttoninteractable（按钮交互）
按钮下的interactable勾选时表示按钮可以触发，反之则不可以触发。

SimpleButton（简单按钮）
Transition类型，表示了当按钮被按时的变化现象。
NONE没有变化
COLOR颜色变化
SPRITE图片变化
SCALE尺寸变化

02_ui/04_progressbar
progressbar（进度条）
progressbar进度条下的Progress表示可修改的范围（0~1）。Reverse表示反向修改整体形状。

02_ui/05_ListView
ListView （列表视图）

cc.Class({
    extends: cc.Component,
    properties: {
        itemTemplate: { // 项目模板以实例化其他项目
            default: null,
            type: cc.Node
        },
        scrollView: {
        	default: null,
        	type: cc.ScrollView
        },
        spawnCount: 0, //我们实际产生了多少项
        totalCount: 0, //我们需要多少项
        spacing: 0, //每一项之间的空间
        bufferZone: 0, //当项目不在缓冲区域时，我们将其重新定位
        lblScrollEvent: cc.Label,//判断信息文本
        btnAddItem: cc.Button, //添加，移动，跳转按钮。
        btnRemoveItem: cc.Button,
        btnJumpToPosition: cc.Button,
        lblJumpPosition: cc.Label,
        lblTotalItems: cc.Label, //生成个数。
    },
    // use this for initialization
    onLoad: function () {
    	this.content = this.scrollView.content;
        this.items = []; // 存储衍生产品的数组
    	this.initialize();// 初始创建
        this.updateTimer = 0;
        this.updateInterval = 0.2;
        this.lastContentPosY = 0; // 使用这个变量来检测我们是否向上或向下滚动
    },
    initialize: function () {
        this.content.height = this.totalCount * (this.itemTemplate.height + this.spacing) + this.spacing; // 得到总含量高（个数*（Size.H+设置的间宽））
    	for (let i = 0; i < this.spawnCount; ++i) { // 衍生产品，我们只需要做一次，节点。
    		let item = cc.instantiate(this.itemTemplate);
    		this.content.addChild(item); //添加至规定节点下。
            item.setPosition(0, -item.height * (0.5 + i) - this.spacing * (i + 1)); //以content的节点位置（锚点位置）为中心点，左下角为0,0
            item.getComponent('Item').updateItem(i, i);            
            this.items.push(item);//添加至数组里。
    	}
    },
    getPositionInView: function (item) { // 在scrollview的节点空间中获取项目位置
        let worldPos = item.parent.convertToWorldSpaceAR(item.position);
        let viewPos = this.scrollView.node.convertToNodeSpaceAR(worldPos);
        return viewPos;
    },
    // 循环对子物体进行调整。
    update: function(dt) {
        this.updateTimer += dt;
        if (this.updateTimer < this.updateInterval) return; // 我们不需要计算每一帧的数学
        this.updateTimer = 0;
        let items = this.items;
        let buffer = this.bufferZone;
        let isDown = this.scrollView.content.y < this.lastContentPosY; // 滚动方向
        let offset = (this.itemTemplate.height + this.spacing) * items.length;
        for (let i = 0; i < items.length; ++i) {
            let viewPos = this.getPositionInView(items[i]);
            if (isDown) {
                // 如果离开缓冲区，而不是到达内容的顶部
                if (viewPos.y < -buffer && items[i].y + offset < 0) {
                    items[i].setPositionY(items[i].y + offset );
                    let item = items[i].getComponent('Item');
                    let itemId = item.itemID - items.length; //更新 项id
                    item.updateItem(i, itemId);
                }
            } else {
                // 如果离开缓冲区，而不是到达内容的底部
                if (viewPos.y > buffer && items[i].y - offset > -this.content.height) {
                    items[i].setPositionY(items[i].y - offset );
                    let item = items[i].getComponent('Item');
                    let itemId = item.itemID + items.length;
                    item.updateItem(i, itemId);
                }
            }
        }
        // 更新 lastContentPosY
        this.lastContentPosY = this.scrollView.content.y;        
        this.lblTotalItems.textKey = "Total Items: " + this.totalCount;
    },
    scrollEvent: function(sender, event) {
        switch(event) {
            case 0: 
               this.lblScrollEvent.string = "Scroll to Top"; 
               break;
            case 1: 
               this.lblScrollEvent.string = "Scroll to Bottom"; 
               break;
            case 2: 
               this.lblScrollEvent.string = "Scroll to Left"; 
               break;
            case 3: 
               this.lblScrollEvent.string = "Scroll to Right"; 
               break;
            case 4: 
               this.lblScrollEvent.string = "Scrolling"; 
               break;
            case 5: 
               this.lblScrollEvent.string = "Bounce Top"; 
               break;
            case 6: 
               this.lblScrollEvent.string = "Bounce bottom"; 
               break;
            case 7: 
               this.lblScrollEvent.string = "Bounce left"; 
               break;
            case 8: 
               this.lblScrollEvent.string = "Bounce right"; 
               break;
            case 9: 
               this.lblScrollEvent.string = "Auto scroll ended"; 
               break;
        }
    },
    //添加方法。
    addItem: function() {
        this.content.height = (this.totalCount + 1) * (this.itemTemplate.height + this.spacing) + this.spacing; // 得到总含量高
        this.totalCount = this.totalCount + 1;
    },
    //删除方法。
    removeItem: function() {
        if (this.totalCount - 1 < 30) {
            cc.error("can't remove item less than 30!");
            return;
        }
        this.content.height = (this.totalCount - 1) * (this.itemTemplate.height + this.spacing) + this.spacing; // 得到总含量高
        this.totalCount = this.totalCount - 1;
    },
    //跳转至0,500这个位置。
    scrollToFixedPosition: function () {
        this.scrollView.scrollToOffset(cc.p(0, 126+60), 2);
    }
});

ScrollView（滚动视图）
Horizontal 水平滚动
Vertical 垂直滚动
inertia 惯性滚动
Brake 弹性
Elastic 允许滚过界
Bounce 回弹持续的时间（过界后恢复到正常的时间）

02_ui/06_layout
layout_None_Basic（ 常规布局）
layout对子节点进行规律的布局。

layout_None_Grid（网格布局）
网格排布需要设计多个限制值。排列方式也是多种多样。

layout_None_Horizontal_Vertical（水平和垂直布局）

动态添加布局组件：

var info = cc.Class({
    name: 'info',
    properties: {
        target: cc.Node,
        num: 0
    }
});
//5 3 10 12
cc.Class({
    extends: cc.Component,
    properties: {
        itemTemp: {
            default: null,
            type: cc.Prefab
        },
        targetAry: {
            default: [],
            type: [info]
        }
    },
    onLoad: function () {
        this._curTime = 0;
        this._curIndex = 0;
    },
    _createItem: function (parentNode, idx) {
        var item = cc.instantiate(this.itemTemp);
        var label = item.getComponentInChildren(cc.Label);
        label.string = idx;
        item.parent = parentNode;
    },
    update: function (dt) {
        this._curTime += dt;
        if (this._curTime >= 1) {
            this._curTime = 0;
            for (var i = 0; i < this.targetAry.length; ++i) {
                var num = this.targetAry[i].num;
                var target = this.targetAry[i].target;
                if (target && this._curIndex < num) {
                    this._createItem(target, this._curIndex);
                }
            }
            this._curIndex++;
        }
    }
});

layout_ScrollViewGrid（布局和列表组合）
在列表的content节点上添加Layout组件，就可实现在列表中添加规律可滑动布局的组件。

02_ui/07_change_canvas_anchor
BottomLeftAnchor（锚点）
位置信息是由锚点中心控制的。一个对象不同的锚点，同样的位置信息，呈现的现象不一样。

02_ui/08_editBox
EditBoxTabindex（编辑框标签索引）
editBox（输入框），用于用户输入信息时使用。

EditBox（输入框）
输入框组件可以修改背景。修改移动设备上回车按键的样式。
input Flag 指定输入标识（可以指定输入方式为密码或者单词首字母大写）；
input Mode 指定输入模式（ANY表示多行输入，其它都是单行输入，移动平台上还可以指定键盘样式）。
Max Length 输入框最大允许输入的字符个数；

02_ui/09_videoplayer
fullscreenVideo（全屏设置）

videoPlayer（常规功能）

  this.videoPlayer.isFullscreen = true; //全屏模式
  this.videoPlayer.enabled = !this.videoPlayer.enabled;//画布是否开启
  this.videoPlayer.play(); //播放
  this.videoPlayer.pause();  //暂停播放且可以继续播放
  this.videoPlayer.stop();  //视频停止播放且时间归零
  this.videoPlayer.keepAspectRatio = !this.videoPlayer.keepAspectRatio;   //是否开启保持视频的宽高比
  this.videoPlayer.resourceType = 0;
   this.videoPlayer.url = "http://benchmark.cocos2d-x.org/cocosvideo.mp4";
   this.videoPlayer.play();  //重新播放

02_ui/10_webview
webview（网页视图事件组件）

  webview: cc.WebView,
  this.webview.url = this.url.string;  //打开网址

cc.sys.openURL('Http://www.baidu.com')  //嵌套网页  

02_ui/11_richtext
*RichTextEvent（文本点击事件，系统事件监听）

  Creator 文本点击事件
  
  toclickme:function (event) {
        var clickPosition = event.touch.getLocation(); //返回以当前节点的锚点为坐标原点的鼠标坐标返回值类型: cc.Vec2()
        //parseFloat将字符串转换为四舍五入值，toFixed（x）x只能是2的整数次幂。     
        this.to.string = "Clicked at: " +parseFloat(clickPosition.x.toFixed())
            + ", y = " + parseFloat(clickPosition.y.toFixed(4));
    }

RichTextImage（图片点击事件）

RichText（富文本）（官方地址：https://docs.cocos.com/creator/manual/zh/components/richtext.html?h=richtext）

02_ui/12_slider
Slider（滑动条）


滑动监听修改音乐大小，实现调节音乐大小

 music: cc.AudioSource,
 slider_h: cc.Slider,
 
  this._updateMusicVolume(this.slider_h.progress);
  
 onSliderHEvent (sender, eventType) {
        this._updateMusicVolume(sender.progress);
    }
  _updateMusicVolume (progress) {
        this.music.volume = progress;
    },   

滑动监听修改图片opacity值大小，实现调节图片透明度

 image: cc.Node,
 image: cc.Node,
 
 this._updateImageOpacity(this.slider_v.progress);
 
onSliderVEvent (sender, eventType) {
        this._updateImageOpacity(sender.progress);
    },
_updateImageOpacity (progress) {
        this.image.opacity = progress * 255;
    },

02_ui/13_toggle
Toggle（开关组件）

ToggleGroup（开关组组件）
Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。
is Checked 初始设置开关是否开启 配合ToggleGroup 使用时，一般只开启组合内的一个，及默认开启状态。
一般的构造结构如下：（ToggleGroup 为父节点，Toggle 为并列子节点，统一美观）

02_ui/14_pageView
PageView_Free_Horizontal（横向页面视图）

PageView_Unified_Horizontal（横向页面视图增删改）

02_ui/15_mask
Mask_ELLIPSE（规则遮罩）

Segements（椭圆遮罩的曲线细分数）的大小决定了遮罩的形状3为三角形，4为正方形，数值越大越圆。

Mask_IMAGE_STENCIL（遮罩内显示图片范围，默认为白色）
Sprite Frame 为遮罩图片形状

Mask_NESTED（组合遮罩）

Mask_RECT（矩形遮罩）