基于cocos2d-x的实现翻页效果的方法及装置与流程

本发明涉及计算机技术领域，特别涉及基于cocos2d-x的实现翻页效果的方法及装置。

背景技术：

目前的翻页效果是利用orbitcamera(轨迹动画)来实现的，每个精灵结点都有一个摄像机，由于摄像机的角度不同，所呈现出的精灵的渲染图形也不同，通过旋转摄像机的角度，来改变精灵的渲染位置，达到改变精灵形状的效果，使精灵从水平方向旋转到垂直方向，以实现翻页效果。

而现有技术中精灵形状无法自由变形，只能固定缩放，而且翻页效果不够立体，导致用户体验差。

技术实现要素：

(一)要解决的技术问题

为了解决现有技术的上述问题，本发明提供一种基于cocos2d-x的实现翻页效果的方法及装置，能够在翻页过程中能够更随意的改变图片形状且翻页的效果更为立体，用户体验好。

(二)技术方案

为了达到上述目的，本发明采用的一种技术方案为：

基于cocos2d-x的实现翻页效果的方法，包括步骤：

s1、通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；

s2、翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；

s3、翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果。

为了达到上述目的，本发明采用的另一种技术方案为：

基于cocos2d-x的实现翻页效果的装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：

s1、通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；

s2、翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；

s3、翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果。

(三)有益效果

本发明的有益效果在于：通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果，能够在翻页过程中能够更随意的改变图片形状且翻页的效果更为立体，用户体验好。

附图说明

图1为本发明实施例的基于cocos2d-x的实现翻页效果的方法流程图；

图2为本发明实施例的基于cocos2d-x的实现翻页效果的装置的整体结构示意图。

【附图标记说明】

1：基于cocos2d-x的实现翻页效果的装置；

2：存储器；

3：处理器。

具体实施方式

为了更好的解释本发明，以便于理解，下面结合附图，通过具体实施方式，对本发明作详细描述。

实施例一

请参照图1，基于cocos2d-x的实现翻页效果的方法，包括步骤：

s1、通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；

步骤s1具体为：

通过拍照的方式，将需要翻页的页面的图片的截图保存下来的图片作为网格精灵的渲染图片，选取页面上一个图标结点，设置该结点为网格精灵。

s2、翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；

步骤s2还包括：

根据滑动的距离与完成翻页需要滑动的距离之间的比例，设置网格精灵的纹理坐标，改变图片形状，完成翻页。

所述的根据滑动的距离与完成翻页需要滑动的距离之间的比例，设置网格精灵的纹理坐标，改变图片形状，完成翻页具体为：

在翻页时，设置网格精灵的纹理坐标，使图片由矩形形变为梯形，并且梯形的高逐渐变小，直到翻页进度达到一半的时候，梯形的高度为0，图片形变为一条直线，随后梯形的高度逐渐变大，图形逐渐展开，直到翻页完成，又形变回矩形。

s3、翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果。

具体地，普通精灵结点包括页面结点和图标结点，网格精灵(polysprite)的形变无法级联到其子节点，需要翻页的书本页面上有页面结点和中间的图标结点，图标结点加载在页面结点上，是页面结点的子结点，如果只把页面结点设为网格精灵(polysprite)，则发生形变时不会级联到图标结点，图标结点不会发生形变，此时的翻页效果较差，为了实现更好的翻页效果，只能把图标结点也设为网格精灵(polysprite)，这时已有两个网格精灵(polysprite)，如若页面上有更多的结点，为了实现翻页效果，也必须把他们全都设为网格精灵(polysprite)，由于网格精灵(polysprite)发生形变时的设置纹理坐标操作计算量较大，数量越多，计算量就会成倍的增长，这容易造成性能较差的机子发生卡顿，故网格精灵(polysprite)的数量不宜设置太多，综合考虑，采取拍照的方式，将需要进行翻页的页面截图保存下来的图片作为网格精灵(polysprite)的渲染图片，只设置一个网格精灵(polysprite)，对它进行操作来实现翻页效果，在翻页开始时隐藏页面上的所有结点，因为已有设置的网格精灵(polysprite)用来代替，在翻页完成以后，再将之前隐藏的结点显示出来，将操作的网格精灵(polysprite)隐藏起来。

实施例二

请参照图2，基于cocos2d-x的实现翻页效果的装置1，包括存储器2、处理器3及存储在存储器2上并可在处理器3上运行的计算机程序，所述处理器3执行所述程序时实现实施例一中的各个步骤。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

技术特征：

1.基于cocos2d-x的实现翻页效果的方法，其特征在于，包括步骤：

s1、通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；

s2、翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；

s3、翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果。

2.根据权利要求1所述的基于cocos2d-x的实现翻页效果的方法，其特征在于，步骤s1具体为：

通过拍照的方式，将需要翻页的页面的图片的截图保存下来的图片作为网格精灵的渲染图片，选取页面上一个图标结点，设置该结点为网格精灵。

3.根据权利要求1所述的基于cocos2d-x的实现翻页效果的方法，其特征在于，步骤s2还包括：

根据滑动的距离与完成翻页需要滑动的距离之间的比例，设置网格精灵的纹理坐标，改变图片形状，完成翻页。

4.根据权利要求3所述的基于cocos2d-x的实现翻页效果的方法，其特征在于，所述的根据滑动的距离与完成翻页需要滑动的距离之间的比例，设置网格精灵的纹理坐标，改变图片形状，完成翻页具体为：

在翻页时，设置网格精灵的纹理坐标，使图片由矩形形变为梯形，并且梯形的高逐渐变小，直到翻页进度达到一半的时候，梯形的高度为0，图片形变为一条直线，随后梯形的高度逐渐变大，图形逐渐展开，直到翻页完成，又形变回矩形。

5.基于cocos2d-x的实现翻页效果的装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现以下步骤：

s1、通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；

s2、翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；

s3、翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果。

6.根据权利要求5所述的基于cocos2d-x的实现翻页效果的装置，其特征在于，步骤s1具体为：

通过拍照的方式，将需要翻页的页面的图片的截图保存下来的图片作为网格精灵的渲染图片，选取页面上一个图标结点，设置该结点为网格精灵。

7.根据权利要求5所述的基于cocos2d-x的实现翻页效果的装置，其特征在于，步骤s2还包括：

根据滑动的距离与完成翻页需要滑动的距离之间的比例，设置网格精灵的纹理坐标，改变图片形状，完成翻页。

8.根据权利要求7所述的基于cocos2d-x的实现翻页效果的装置，其特征在于，所述的根据滑动的距离与完成翻页需要滑动的距离之间的比例，设置网格精灵的纹理坐标，改变图片形状，完成翻页具体为：

在翻页时，设置网格精灵的纹理坐标，使图片由矩形形变为梯形，并且梯形的高逐渐变小，直到翻页进度达到一半的时候，梯形的高度为0，图片形变为一条直线，随后梯形的高度逐渐变大，图形逐渐展开，直到翻页完成，又形变回矩形。

技术总结
本发明提供的基于cocos2d‑x的实现翻页效果的方法及装置，通过拍照的方式，将需要进行翻页的页面的图片作为网格精灵的渲染图片，并设置网格精灵；翻页开始时，隐藏页面上的所有的普通精灵结点，通过所设置的网格精灵进行替代；翻页完成后，显示所隐藏的普通精灵结点，并将网格精灵隐藏，实现翻页效果，能够在翻页过程中能够更随意的改变图片形状且翻页的效果更为立体，用户体验好。

技术研发人员：黄昕;唐光宇;闫乃永;卢学明
受保护的技术使用者：宝宝巴士股份有限公司
技术研发日：2021.04.21
技术公布日：2021.07.30