2020/5/13 JS向分析cocos creater 范例集合部分case

常见单词：atlas 地图集 anchorPoint 锚点 AtlasSprite 精灵图集 slice 片(九宫格)

                tiled 平铺   trim 裁剪

JS向分析cocos creater 范例集合部分case

01_graphics/01_sprite

场景：AnchorPoint

用到的api：

convertToWorldSpaceAR

以及

convertToWorldSpace

这两者的区别在于

一般在creater中一个节点的默认坐标是相对于自己的父节点的锚点

一般一个节点的锚点默认在自己的0.5和0.5

 

对于一个节点

用convertToWorldSpace时,会把坐标转换为节点左下角相对于世界坐标系（0,0）的坐标

用convertToWorldSpaceAR时,会把坐标转换为节点锚点相对于世界坐标系（0,0）的坐标

 

场景：AtlasSprite

关于图片的来源

一种是来自单张图片

一种是来自图集

图集就是一张图片，显示不同的区域

图集做动画效率更高

不过现在二者打包后无二致

因为多个单张图片在打包后也会被生成一张精灵图

 

场景：ChangeColor

关于button的理解

有某一个节点想发生一些变化,如果不通过自身来触发，而是想通过button来触发

那么可以在这个节点本身封装一些函数里面使用this.node来调用改变自身属性的一些方法

然后在要触发该事件的button节点上

把Click Event的数量加一

然后把我们之前要改变的节点拖拽到cc.node处

第二个框是选择拖拽过来的节点的组件

我们就选择刚才封装函数所在的组件，然后第三个框就会有相应的刚才我们封装的函数

选择其中一个来触发

运行项目时，点击按钮就会触发这个事件

 

场景：FilledSprite

主要是理解了图像的填充渲染

一个sprite节点把他的type属性切换为FILLED即为填充模式

这个属性下面又有几个子属性

Fill type  可以选择渲染的方向 横向 纵向 或者扇形

Fill start  填充的起始位置 取值0~1 表示最初填充多少图像

Fill Range 填充量 可以取 -1~1, 表示相对于填充初始值，填充量发生的变化

 

场景：SimpleSprite SlicedSprite TiledSprite TrimmedSprite 小结

精灵图的一些基本属性

1. 场景中间显示一个 Sprite 图像

2. Sprite 周围有蓝色的 bounding box 紧贴图像

3. 修改 scale 属性时，Sprite 大小变化

4. 修改 anchor 位置时，Sprite 显示的位置变化

5. 点击 Sprite 资源，会高亮 Assets 面板里的贴图资源

6. 修改 size 时，Sprite 大小变化，而且 use original size 选项自动取消

7. 再次勾选 use original size 时，size 恢复到贴图尺寸

 

九宫格精灵(SliceSprite)

选择九宫格模式时这个九格框会生效

即当拉伸图片时只有中间那一块会发生变形，其他地方大小都不会改变

 

 

自动裁剪：

 

 

02_ui/01_widget

场景：AdvancedWidget AlignOnceWidget AutoResize WidgetAlign

理解一个组件widget

他的作用是把当前挂件进行一个定位

该定位相对于他的父节点

并且定位的方式有三种

当选择ONCE时

定位只生效一次

即进入页面时刷新一次，其父节点之后发生变化，他并不会跟随变化

当选择ON_WINDOW_RESIZE时

就是窗口改变时(游戏窗口,旋转之类的)它也会跟随刷新

选择ALWAYS时，即无论何时它的位置始终在父节点的那个相对位置，本例中为距离父节点顶部10%

 

场景：AlignOnceWidget AnimatedWidget

这里涉及到动画组件Animation

要对某一个节点添加动画时

可以给该节点添加一个Animation组件

给该动画添加动画短片

新建clip文件后

编辑动画

添加属性

然后添加关键帧制定要实现的动画

 

02_ui/02_label

场景：AlignFontLabel

Label的文本对齐方式

 

场景：BitmapFontLabel

文本的自动换行

 

场景: LabelAtlas

引入字体文件改变字体样式

 

场景：SystemFontLabel

勾选上就会使用系统字体，并且清楚该节点调用的font文件

 

02_ui/03_button

场景：ButtonInScroll

按钮作为滚动条视窗内容

给按钮添加点击事件

把封装好按钮点击触发内容事件的节点拖拽进第一个框

第二个框选择这个节点引入的组件

第三个框选择所选组件的触发函数

在这个节点上又绑定了点击的按钮节点

所以是一个互相绑定

 

场景：ButtonSizeMode

这是按钮的事件触发范围取决于这个按钮的像素的大小

如图，左边选择了trimmed，即按钮的像素与图像一致，他去除了透明区域，这是理想型

而右图像素大小包括了框内的所有像素点，即它没有去除那些透明的像素点，所以会造成鼠标在红色圆形外，在框内也可以触发事件(运行时看不见框)

 

场景：ButtonTransition
关于按钮状态改变时的过渡方式

按钮的交互状态：

另外toggle复选框组件有一个默认属性Is Checked

当设置为false时，按钮无法产生交互效果

设置为true时

按钮默认有3种过渡方式

一：颜色变化

二：切换按钮精灵图

三：改变按钮scale比例

选择对应的过渡方式设置相关的属性值

 

02_ui/04_progressbar

场景：progressbar

进度条相关

这个ProgressBarCtrl节点引入了ProgressBarCtrl的js组件

里面引入了对应的进度条的节点

然后进行相应的控制

与按钮的工作模式类似

 

02_ui/05_scrollView

场景：ListView

  

看一下这个ScrollView控件的结构

首先是一个大盒子用来与外界隔离

然后里面包含一个ScrollBar(滚动条)和一个View

ScrollBar里又有一个Bar（滚轮） View里包含Content(内容存放的地方)

暂不多说，我也不是很看得懂

 

场景：ScrollView

主要是让我们理解他的几个属性

 

02_ui/06_layout

场景：Layout_None=>Layout_None_Basic

主要提到这两个布局属性

 

 

当父节点（容器）type选择none时：

缩放模式为none时，子节点可以随意变化，不会影响父节点

缩放模式为container时，子节点可以随意变化，父节点会随着子节点变化

缩放模式不能选择为children

当父节点（容器）type选择horizontal时：

缩放模式为none时，子节点水平方向排布固定(即x坐标固定)，只能调节子节点的纵向坐标

缩放模式为container时，子节点水平方向排布固定(即x坐标固定)，但父节点的框不会随之改动

缩放模式为children时，子节点会随父节点大小的改变等比例缩放

当父节点（容器）type选择vertical时：

缩放模式为none时，子节点垂直方向排布固定(即y坐标固定)，只能调节子节点的横向坐标

缩放模式为container时，子节点垂直方向排布固定(即y坐标固定)，但父节点的框不会随之改动

缩放模式为children时，子节点会随父节点大小的改变等比例缩放

当父节点（容器）type选择grid时：

       该模式下，子节点的位置无法改变，被限制在了固定的网格中

       相应的缩放模式描述起来麻烦，不过并不难，不写了哎呀

 

 

场景：Layout_ScrollViewGrid和Layout_ScrollViewNormal

这两个场景主要是把scrollView组件和layout布局结合起来了

即把layout布局容器作为ScrollView控件中的content

相应的一些属性都是之前的使用过的，用过就会了

 

02_ui/15_mask