cocos2dx第二周学习笔记

1.熟悉cocos studio相关组件

Label,菜单,按钮,复选框,进度条,滑动条,文本框,三大容器(基础容器,滑动容器,翻页容器)

label标签：

BMFont: 是一个使用位图字体创建的标签类型，位图字体中的字符由点阵组成，使用这种字体标签性能很好，但是不适合缩放，缩放会导致失真，标签中的每一个字符都是一个单独的sprite，也就是说精灵的属性（旋转，缩放，着色等）控制都适用于每一个字符。创建需要.fnt和.png两个文件

TTF:该字体不需要为每种尺寸和颜色单独使用字体文件，比较方便。但它渲染速度较慢，更改标签属性消耗性能很大，可创建ttfconfig对象设置所有标签的共同属性，创建这种标签，需要创建.ttf文件名，文本字符串和字体大小

SystemFont:使用系统默认字体，默认大小的标签类型

进度条要设置进度才会显示

三大容器：

2.熟悉时间调度器

全局定时器 节点定时器

全局定时器：侧重点在全局，不依赖于某一个场景或者节点，其提供了三种调度器以供使用

（1）全局帧调度器: schduleUpdateGlobal(listener)

 顾名思义，全局帧调度器是游戏的每一帧都会触发的调度器。主要是在碰撞检测等每一帧都需要计算的地方。全局帧调度器不依赖任何场景，因此可以在整个游戏范围内实现较为精确的全局计时

（2）全局自定义调度器:schduleGlobal(listener,interval)

全局帧调度器是全局自定义调度器的特例，自定义调度器可以指定调度时间，提供更高的灵活性。

由于引擎的调度机制，自定义时间间隔必须大于两帧的间隔，否则两帧内的多次调用会被合并成一次调用。所以自定义时间间隔应在1/60s以上（引擎默认每秒刷新60帧）

3）全局延时调度器:performWithDelayGlobal(listener,time)

若在游戏中某些场合，只想实现一个单次的延时调用，就需要延迟调度器。scheduler.performWithDelayGlobal()会在等待指定时间后执行一次回调函数，然后自动取消该scheduler

节点定时器：侧重点在节点，节点定时器只能在节点中使用，由node负责定时器的生命周期，当node销毁的时候，会自动注销节点名下所有的定时器

（1）节点自定义调度器

由于引擎的调度机制，自定义时间间隔必须大于两帧的间隔，否则两帧内的多次调用会被合并成一次调用。所以自定义时间间隔应在1/60s以上（引擎默认每秒刷新60帧    self:schedule(function () print("scheduler") end, 1.0)

（2）节点延时调度器

延时调度器等待指定的时间后执行一次回调函数

self:performWithDelay(function() print("performWithDelay") end , 1.0)

3.事件分发机制

创建事件监听器-用来实现触发后的处理逻辑

事件监听器添加到事件分发器_eventDispatcher，所有事件监听器由该分发器统一管理

quick框架的事件按功能与用途

其分为：触摸事件、键盘事件、节点事件、帧事件、加速计事件等

触摸事件(单点,多点,吞噬)

单点事件：一个地方的检测

多点事件：多个地方的检测

吞噬：node相应触摸后，就会阻止该事件继续传递给node的父对象（更下层的node），称为事件吞噬，setTouchSwallowEnabled()可以改变这个行为，默认为true，设置为false，可以继续传递

禁用触摸：setTouchEnabled（）是否允许node响应触摸，默认为false，该节点虽然被禁止，但不影响子节点的响应，

                    setTouchCaptureEnabled（）检查是否允许node捕获触摸，默认为true，当设置为false时，该node与所有的子节点node均无法触发触摸事件

setTouchEnabled只影响当前节点，setTouchCaptureEnabled影响当前和所有子节点

触摸事件的三个阶段：1）捕获，2）触发，3）冒泡

1.遍历所有相应的触摸Node，找出显示层级最高，并且触摸区域包含触摸的位置 的那个Node。该Node称为TargetNode(目标Node)

2.检查targetnode 的isTouchCaptureEnabled结果，返回false则重复（1） 这个阶段叫捕获
3.在targetnode触发事件，这个阶段叫触发

4.返回false，表示targetnode不响应事件，重复步骤（1）开始查找符合条件的Node

5.targetnode触发事件完毕，检查isTouchSwallowEnabled。如果为true取消冒泡阶段

6.从targetnode开始往其父node触发事件，直到某个Node返回false或者事件吞噬，这个阶段叫冒泡。

冒泡的补充：

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

以下仅做了解即可

键盘事件

节点事件

 node进入和退出场景时触发，加入一个层或者其他的node时，添加清除数据时会触发

帧事件

每一帧会触发

4.裁剪与遮罩

ClippingRectangleNode,ClippingNode,Layout

 三者介绍

Cocos2d-Lua: 裁剪

前两者，以及缩放bug

 【Cocos2d-x】3.3 ClippingRectangleNode与ClippingNode 以及 ClippingRectangleNode BUG-CSDN博客

	ClippingRectangleNode	ClippingNode
裁剪区域	只能为矩形	任意图形
效率	高	低，使用较多时，容易导致低端机掉帧
适用场景	出现数量较多，且对裁剪图形要求不高时	出现数量少，对裁剪区域要求较高时。（例如游戏新手引导）
灵活性	使用简单，灵活性低	较为灵活

ClippingNode(裁剪节点)可以用来对节点进行裁剪。ClippingNode是Node的子类，可以像普通节点一样放入Layer，Scene，Node中。

主要是根据一个模板(Stencil)切割图片的节点，生成任何形状的节点显示。

ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。

此处以把裁剪节点直接放在Layer上为例，可以这样理解裁剪节点（ClippingNode）、底板（Child）、模板（Stencil）之间的关系。模板可以是任意类型的节点，但是我们通常使用DrawNode类型的节点来作为裁剪节点的模板。
从组成上来说：“裁剪节点” = “底板” + “模板”。裁剪节点有两个重要的组成部分，裁剪的模板Stencil，
以及裁剪的对象，即模板（通常模板作为裁剪节点的孩子节点）。
从作用效果上来说，“裁剪节点” = “底板” - “模板”。因为以模板来进行挖洞，模板剩余的部分即为裁剪节点的显示效果部分
 

cc.ClippingRectangleNode 使用 OpenGL 的 GL_SCISSOR_TEST 裁剪测试进行矩形裁剪，多用于UI框架中，比如：ScrollView。

cc.ClippingNode 使用 GL_STENCIL_TEST 模版测试进行像素裁剪，多用于特效中

ccui.layout也可以进行裁剪，设置好一个展示的矩形区域后，这个区域就是裁剪后的可视区域

layout:setClippingEnabled(true)--false 不裁剪   相当于编辑器里的不勾选裁剪区域

Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。

5.界面适配的基本概念

 cocos2dx的屏幕适配_lemon-l的博客-CSDN博客

cocos2d 屏幕適配_cocos2dx 3.2 屏幕适配的理解_云湖浪子YZ25T的博客-CSDN博客

SHOW_ALL与FIXED_WIDTH，FIXED_HEGITH的不同：

使用FIXED_WIDTH(FIXED_HEGITH)方式，在保证了长宽缩放比例一致的情况下，修改了设计分辨率的尺寸！

修改设计分辨率会带来两方面的影响：

1，屏幕中的UI元素的坐标改变了。例如FIXED_WIDHT时，当设计尺寸为1280*720的时候，把一个元素放到中心点640*360的位置，随着屏幕实际分辨率的变化，这个元素可能已经不在中心点的位置，可能往上平移了。所以如果UI元素有跟背景位置相关联的时候，就不能直接写绝对坐标了，而是要使这个坐标值能够适应这种屏幕变化。

2，绘制区域改变了。改变设计分辨率就意味着绘制区域的改变，如果资源的分辨率没有改变，并且这个资源是对齐到屏幕中心点位置，那么屏幕上下(或者左右)就会留有黑边。为什么会有黑边，因为绘制区域已经大于资源的分辨率了，例如FIXED_WIDTH时，设计尺寸和资源(一张背景图)分辨率都是1280*720，屏幕分辨率是1280*800，那么setDesignResolutionSize后，设计分辨率就变成了1280*800，这张背景图放到屏幕中心点后，高度与设计分辨率差了80，所以上下会有40像素区域没有任何图像可以绘制的。这就造成了跟使用SHOW_ALL一样的效果，但实质上却是区别很大，SHOW_ALL的黑边不能绘制，FIXED_XXX的黑边只是因为资源分辨率不够，而没有被绘制。如果这时候，把这张资源分辨率换成1280*800，就会发现没有黑边了。完美适配屏幕。

使用FIXED_XXX需要注意的问题：

1，使用一张更大的背景图，例如当前设计分辨率是1280*720，使用FIXED_WIDTH方式，想要适配主流屏幕，背景图至少需要使用1280*960分辨率，4：3的屏幕应该是市场上长宽比最小的了。这样屏幕上下就不会有黑边存在。

2，尽量不使用绝对坐标，但如果元素的位置是跟屏幕底部有关，那也可以使用绝对坐标。例如游戏分为上，中，下三部分区域，下面的区域不变，如果屏幕高度变化了，中间的区域就相对拉大一点(具体也要跟设计背景图以及游戏本身表现有关)。这样的话，最下面部分的UI元素完全可以使用绝对坐标。同样，也可以使用屏幕中心点上下偏移多少坐标，来设置元素位置。

3，使用visibleSize，它返回的始终是根据当前设备分辨率调整的可视区域的分辨率。

4，如果还是想使用1280*720来设计坐标值，可以写个宏来计算坐标的偏移量。根据当前可视区域的高度与设计尺寸(1280*720，不是引擎修改后的尺寸)的高度比来计算元素在拉伸后的坐标。
 

6,音乐和音效

 Cocos2d-x音乐和音效概述_cocos使用的音乐系统-CSDN博客

摄像机通过六个平面确定视口的大小，近裁面和远裁面

1.熟悉cocos studio相关组件

Label,菜单,按钮,复选框,进度条,滑动条,文本框,三大容器(基础容器,滑动容器,翻页容器)

label标签：

BMFont: 是一个使用位图字体创建的标签类型，位图字体中的字符由点阵组成，使用这种字体标签性能很好，但是不适合缩放，缩放会导致失真，标签中的每一个字符都是一个单独的sprite，也就是说精灵的属性（旋转，缩放，着色等）控制都适用于每一个字符。创建需要.fnt和.png两个文件

TTF:该字体不需要为每种尺寸和颜色单独使用字体文件，比较方便。但它渲染速度较慢，更改标签属性消耗性能很大，可创建ttfconfig对象设置所有标签的共同属性，创建这种标签，需要创建.ttf文件名，文本字符串和字体大小

SystemFont:使用系统默认字体，默认大小的标签类型

进度条要设置进度才会显示

三大容器：

2.熟悉时间调度器

全局定时器 节点定时器

全局定时器：侧重点在全局，不依赖于某一个场景或者节点，其提供了三种调度器以供使用

（1）全局帧调度器: schduleUpdateGlobal(listener)

 顾名思义，全局帧调度器是游戏的每一帧都会触发的调度器。主要是在碰撞检测等每一帧都需要计算的地方。全局帧调度器不依赖任何场景，因此可以在整个游戏范围内实现较为精确的全局计时

（2）全局自定义调度器:schduleGlobal(listener,interval)

全局帧调度器是全局自定义调度器的特例，自定义调度器可以指定调度时间，提供更高的灵活性。

由于引擎的调度机制，自定义时间间隔必须大于两帧的间隔，否则两帧内的多次调用会被合并成一次调用。所以自定义时间间隔应在1/60s以上（引擎默认每秒刷新60帧）

3）全局延时调度器:performWithDelayGlobal(listener,time)

若在游戏中某些场合，只想实现一个单次的延时调用，就需要延迟调度器。scheduler.performWithDelayGlobal()会在等待指定时间后执行一次回调函数，然后自动取消该scheduler

节点定时器：侧重点在节点，节点定时器只能在节点中使用，由node负责定时器的生命周期，当node销毁的时候，会自动注销节点名下所有的定时器

（1）节点自定义调度器

由于引擎的调度机制，自定义时间间隔必须大于两帧的间隔，否则两帧内的多次调用会被合并成一次调用。所以自定义时间间隔应在1/60s以上（引擎默认每秒刷新60帧    self:schedule(function () print("scheduler") end, 1.0)

（2）节点延时调度器

延时调度器等待指定的时间后执行一次回调函数

self:performWithDelay(function() print("performWithDelay") end , 1.0)

3.事件分发机制

创建事件监听器-用来实现触发后的处理逻辑

事件监听器添加到事件分发器_eventDispatcher，所有事件监听器由该分发器统一管理

quick框架的事件按功能与用途

其分为：触摸事件、键盘事件、节点事件、帧事件、加速计事件等

触摸事件(单点,多点,吞噬)

单点事件：一个地方的检测

多点事件：多个地方的检测

吞噬：node相应触摸后，就会阻止该事件继续传递给node的父对象（更下层的node），称为事件吞噬，setTouchSwallowEnabled()可以改变这个行为，默认为true，设置为false，可以继续传递

禁用触摸：setTouchEnabled（）是否允许node响应触摸，默认为false，该节点虽然被禁止，但不影响子节点的响应，

                    setTouchCaptureEnabled（）检查是否允许node捕获触摸，默认为true，当设置为false时，该node与所有的子节点node均无法触发触摸事件

setTouchEnabled只影响当前节点，setTouchCaptureEnabled影响当前和所有子节点

触摸事件的三个阶段：1）捕获，2）触发，3）冒泡

1.遍历所有相应的触摸Node，找出显示层级最高，并且触摸区域包含触摸的位置 的那个Node。该Node称为TargetNode(目标Node)

2.检查targetnode 的isTouchCaptureEnabled结果，返回false则重复（1） 这个阶段叫捕获
3.在targetnode触发事件，这个阶段叫触发

4.返回false，表示targetnode不响应事件，重复步骤（1）开始查找符合条件的Node

5.targetnode触发事件完毕，检查isTouchSwallowEnabled。如果为true取消冒泡阶段

6.从targetnode开始往其父node触发事件，直到某个Node返回false或者事件吞噬，这个阶段叫冒泡。

冒泡的补充：

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

以下仅做了解即可

键盘事件

节点事件

 node进入和退出场景时触发，加入一个层或者其他的node时，添加清除数据时会触发

帧事件

每一帧会触发

4.裁剪与遮罩

ClippingRectangleNode,ClippingNode,Layout

 三者介绍

Cocos2d-Lua: 裁剪

前两者，以及缩放bug

 【Cocos2d-x】3.3 ClippingRectangleNode与ClippingNode 以及 ClippingRectangleNode BUG-CSDN博客

	ClippingRectangleNode	ClippingNode
裁剪区域	只能为矩形	任意图形
效率	高	低，使用较多时，容易导致低端机掉帧
适用场景	出现数量较多，且对裁剪图形要求不高时	出现数量少，对裁剪区域要求较高时。（例如游戏新手引导）
灵活性	使用简单，灵活性低	较为灵活

ClippingNode(裁剪节点)可以用来对节点进行裁剪。ClippingNode是Node的子类，可以像普通节点一样放入Layer，Scene，Node中。

主要是根据一个模板(Stencil)切割图片的节点，生成任何形状的节点显示。

ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。

此处以把裁剪节点直接放在Layer上为例，可以这样理解裁剪节点（ClippingNode）、底板（Child）、模板（Stencil）之间的关系。模板可以是任意类型的节点，但是我们通常使用DrawNode类型的节点来作为裁剪节点的模板。
从组成上来说：“裁剪节点” = “底板” + “模板”。裁剪节点有两个重要的组成部分，裁剪的模板Stencil，
以及裁剪的对象，即模板（通常模板作为裁剪节点的孩子节点）。
从作用效果上来说，“裁剪节点” = “底板” - “模板”。因为以模板来进行挖洞，模板剩余的部分即为裁剪节点的显示效果部分
 

cc.ClippingRectangleNode 使用 OpenGL 的 GL_SCISSOR_TEST 裁剪测试进行矩形裁剪，多用于UI框架中，比如：ScrollView。

cc.ClippingNode 使用 GL_STENCIL_TEST 模版测试进行像素裁剪，多用于特效中

ccui.layout也可以进行裁剪，设置好一个展示的矩形区域后，这个区域就是裁剪后的可视区域

layout:setClippingEnabled(true)--false 不裁剪   相当于编辑器里的不勾选裁剪区域

Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。

5.界面适配的基本概念

 cocos2dx的屏幕适配_lemon-l的博客-CSDN博客

cocos2d 屏幕適配_cocos2dx 3.2 屏幕适配的理解_云湖浪子YZ25T的博客-CSDN博客

SHOW_ALL与FIXED_WIDTH，FIXED_HEGITH的不同：

使用FIXED_WIDTH(FIXED_HEGITH)方式，在保证了长宽缩放比例一致的情况下，修改了设计分辨率的尺寸！

修改设计分辨率会带来两方面的影响：

1，屏幕中的UI元素的坐标改变了。例如FIXED_WIDHT时，当设计尺寸为1280*720的时候，把一个元素放到中心点640*360的位置，随着屏幕实际分辨率的变化，这个元素可能已经不在中心点的位置，可能往上平移了。所以如果UI元素有跟背景位置相关联的时候，就不能直接写绝对坐标了，而是要使这个坐标值能够适应这种屏幕变化。

2，绘制区域改变了。改变设计分辨率就意味着绘制区域的改变，如果资源的分辨率没有改变，并且这个资源是对齐到屏幕中心点位置，那么屏幕上下(或者左右)就会留有黑边。为什么会有黑边，因为绘制区域已经大于资源的分辨率了，例如FIXED_WIDTH时，设计尺寸和资源(一张背景图)分辨率都是1280*720，屏幕分辨率是1280*800，那么setDesignResolutionSize后，设计分辨率就变成了1280*800，这张背景图放到屏幕中心点后，高度与设计分辨率差了80，所以上下会有40像素区域没有任何图像可以绘制的。这就造成了跟使用SHOW_ALL一样的效果，但实质上却是区别很大，SHOW_ALL的黑边不能绘制，FIXED_XXX的黑边只是因为资源分辨率不够，而没有被绘制。如果这时候，把这张资源分辨率换成1280*800，就会发现没有黑边了。完美适配屏幕。

使用FIXED_XXX需要注意的问题：

1，使用一张更大的背景图，例如当前设计分辨率是1280*720，使用FIXED_WIDTH方式，想要适配主流屏幕，背景图至少需要使用1280*960分辨率，4：3的屏幕应该是市场上长宽比最小的了。这样屏幕上下就不会有黑边存在。

2，尽量不使用绝对坐标，但如果元素的位置是跟屏幕底部有关，那也可以使用绝对坐标。例如游戏分为上，中，下三部分区域，下面的区域不变，如果屏幕高度变化了，中间的区域就相对拉大一点(具体也要跟设计背景图以及游戏本身表现有关)。这样的话，最下面部分的UI元素完全可以使用绝对坐标。同样，也可以使用屏幕中心点上下偏移多少坐标，来设置元素位置。

3，使用visibleSize，它返回的始终是根据当前设备分辨率调整的可视区域的分辨率。

4，如果还是想使用1280*720来设计坐标值，可以写个宏来计算坐标的偏移量。根据当前可视区域的高度与设计尺寸(1280*720，不是引擎修改后的尺寸)的高度比来计算元素在拉伸后的坐标。
 

6,音乐和音效

 Cocos2d-x音乐和音效概述_cocos使用的音乐系统-CSDN博客

摄像机通过六个平面确定视口的大小，近裁面和远裁面