一种在2D游戏中实现3D表现的方法及装置

摘要

本发明公开了一种在2D游戏中实现3D表现的方法及装置，该方法包括以下步骤：在2D游戏场景中设置3D渲染区域，在所述3D渲染区域显示多个2D图片，将所述多个2D图片渲染成相邻图片的两侧边缘顺次连接在一起的折叠册页的3D表现形式；响应触屏上的滑动手势时，将所述折叠册页向由所述滑动手势确定的方向展开，并依据所述滑动手势的状态和各2D图片在所述折叠册页中的排布顺序及图片的尺寸，实时地确定各2D图片的展开位置和展开角度，并将各2D图片渲染成与其展开位置和展开角度实时对应的3D表现形式。本发明可在2D游戏场景中实现真切、新颖的3D效果展示，提升玩家体验。

说明书

技术领域

本发明涉及一种在2D游戏中实现3D表现的方法及装置。

背景技术

在手机游戏中，需要在界面中展示同类型的多张图片，并提供线索可 以估算浏览进度与图片总量，保证便捷良好的浏览体验。一般传统的做法 是：单纯平面效果展示，图片平铺，采用多页点击切换浏览或者多屏滑动 浏览(常见上下滑动型、左右滑动型)，并伴有数字显示页码总量或滑动进 度条。

对于在手机游戏中查看多张相同规格图片的交互设计，现有的一种技 术方案采用以下处理方式：

1、规划好一页可以平铺显示该规格图片的数量(假设为N)；

2、图片总数<＝N则一页完全显示；

3、图片总数>N则多页显示，支持点击或滑动进行翻页。

如图1所示，以某手机游戏的卡牌图片展示功能为例，处理方式如下：

1、设定每页显示8张卡牌，卡牌平铺于每一页；

2、此种类卡牌的数量<＝8则一页完全显示；

3、此种类卡牌的数量>8，则点击下一页按钮，翻页显示下一页的图 片；

4、界面以“书”为意象拟物，模拟书的翻页视觉效果，给予2D视图的 3D表现。

这种处理方式在手游中对浏览同规格图片的交互设计，实现了透视、 堆叠的3D视觉效果，满足了用户查看图片的基本需求。但是，这种方案 有以下几个缺点：

1、当图片数量非常少，不足一页，则无法展示翻页视觉效果；而图 片数量非常多的时候，需要不断地点击按钮实现翻页，每次的点击操作和 翻页视觉表现，都打断了流畅的浏览体验。

2、此种技术方案表现对图片的大小有所限制，如果图片太大，每页 所容纳图片小于3张，则势必造成不断地点击翻页。

3、该方案对于图片总数量的表现，一般需要文字显示当前所在页面 和页面总数量，很难用界面视觉隐喻表现进行潜意识信息传达。

对于在手机游戏中查看多张相同规格图片的交互设计，另一种常用的 技术方案采用以下处理方式：

1、将所有图片规则排列，排列X行横向发展，或排列Y列纵向发展；

2、响应用户手势操作，将图片流以固定方向显示在屏幕规定区域， 滑动查看多屏内容。

如图2a至图2b所示，以某手机游戏的物品图片展示功能为例，处理 方式如下：

1、所有菱形图片以两行交错排列横向延伸，图片流多至N屏，如图 2a所示；

2、左右滑动显示所有的图片，切换进入界面时伴有菱形图片旋转的动 效，营造立体效果，如图2b所示。

该技术方案在手游中对浏览同规格图片的交互设计，实现了翻转的3D 视觉效果，满足了用户查看图片的基本需求。但是，这种方案亦有以下不 足之处：展示效果比较常规，3D视觉表现相对较弱，滑动过程中仍然是平 面显示效果。

发明内容

本发明的主要目的在于克服现有技术的不足，提供一种在2D游戏中 实现3D表现的方法，在2D游戏场景中实现真切、新颖的3D效果展示， 提升玩家体验。

为实现上述目的，本发明采用以下技术方案：

一种在2D游戏中实现3D表现的方法，包括以下步骤：

在2D游戏场景中设置3D渲染区域，在所述3D渲染区域显示多个2D 图片，将所述多个2D图片渲染成相邻图片的两侧边缘顺次连接在一起的 折叠册页的3D表现形式；

响应触屏上的滑动手势时，将所述折叠册页向由所述滑动手势确定的 方向展开，并依据所述滑动手势的状态和各2D图片在所述折叠册页中的 排布顺序及图片的尺寸，实时地确定各2D图片的展开位置和展开角度， 并将各2D图片渲染成与其展开位置和展开角度实时对应的3D表现形式。

进一步地：

所述滑动手势的状态包括所述滑动手势行进的方向、距离、速度、加 速度以及按压触屏的力度中的一种或多种。

响应触屏上的滑动手势时，所述折叠册页所显示的折叠厚度随着所述 滑动手势的进行而相应地减小，藉此表现尚未展开角度的剩余图片的数量。

所述方法还包括：对2D游戏场景进行分层，其中将2D游戏场景中所 述折叠册页所在的区域设置为采用3D渲染策略的3D渲染层，其对应所述 3D渲染区域，并将2D游戏场景中的背景区域设置为采用2D渲染策略的 2D渲染层，其中所述3D渲染层覆盖在所述2D渲染层之上。

对所述2D渲染层采用正交投影方式进行投影，对所述3D渲染层采用 透视投影方式进行投影，将所述3D渲染层的投影画面覆盖在所述2D渲染 层的投影画面上，实现所述2D渲染层和所述3D渲染层的场景叠加。

所述2D渲染层和所述3D渲染层的场景叠加包括：

绘制2D渲染层到颜色缓冲区，将2D渲染层的所有像素深度设为最大 深度而形成为所述2D游戏场景的背景；

绘制3D渲染层到颜色缓冲区，将3D渲染层的所有像素深度设为小于 所述最大深度，使得3D渲染层投影生成的画面覆盖背景所在2D渲染层的 相应区域，产生2D画面上的3D视觉效果。

一种在2D游戏中实现3D表现的装置，包括：

3D渲染区域设置模块，其在2D游戏场景中设置3D渲染区域，在所 述3D渲染区域显示多个2D图片，将所述多个2D图片渲染成相邻图片的 两侧边缘顺次连接在一起的折叠册页的3D表现形式；

滑动手势响应模块，其响应触屏上的滑动手势时，将所述折叠册页向 由所述滑动手势确定的方向展开，并依据所述滑动手势的状态和各2D图 片在所述折叠册页中的排布顺序及图片的尺寸，实时地确定各2D图片的 展开位置和展开角度，并将各2D图片渲染成与其展开位置和展开角度实 时对应的3D表现形式。

所述装置还包括游戏场景分层模块，其对2D游戏场景进行分层，将 2D游戏场景中所述折叠册页所在的区域设置为采用3D渲染策略的3D渲 染层，其对应所述3D渲染区域，并将2D游戏场景中的背景区域设置为采 用2D渲染策略的2D渲染层，其中所述3D渲染层覆盖在所述2D渲染层 之上。

所述装置还包括游戏场景叠加模块，其对所述2D渲染层采用正交投 影方式进行投影，对所述3D渲染层采用透视投影方式进行投影，将所述 3D渲染层的投影画面覆盖在所述2D渲染层的投影画面上，实现所述2D 渲染层和所述3D渲染层的场景叠加。

所述游戏场景叠加模块包括：

背景生成模块，其绘制2D渲染层到颜色缓冲区，将2D渲染层的所有 像素深度设为最大深度而形成为所述2D游戏场景的背景；

前景覆盖模块，其绘制3D渲染层到颜色缓冲区，将3D渲染层的所 有像素深度设为小于所述最大深度，使得3D渲染层投影生成的画面覆盖 背景所在2D渲染层的相应区域，产生2D画面上的3D视觉效果。

本发明的有益效果：

本发明提出一种在2D游戏中实现3D表现的方法，在2D游戏场景中 设置3D渲染区域，在3D渲染区域显示多个2D图片，将这些图片渲染成 相邻图片的两侧边缘顺次连接在一起的折叠册页的3D表现形式；当响应 触屏上的滑动手势时，本发明所采用的3D表现为，使折叠册页向由滑动 手势确定的方向展开，并依据滑动手势的状态和各2D图片的尺寸及其在 折叠册页中的排布顺序，实时地确定各2D图片的展开位置和展开角度， 进而按照对应的展开位置和展开角度对各2D图片进行3D渲染。与现有技 术相比，本发明以类似于中国古代奏折为视觉意象进行3D表现的整体设 计，2D图片分布于每个奏折折面，依据折面的展开角度进行透视表现。由 此，本发明避免了图片展示时过于规则化的排布展示，减少了玩家浏览图 片时的视觉疲劳感，让界面充满趣味，让玩家更加有情景代入感；而且， 在玩家进行滑动拖拽等页面操作时，本发明能够进行更为真切的3D效果 展示，例如透视、凸起、堆叠等效果，保证界面视觉形象鲜活，避免不停 进行平面滑动的枯燥感。本发明的具体优势体着重体现在以下方面：

1、基于这种视觉意象进行3D表现的设计，有利于通过2D图片展示 出该视觉意象，并提高界面整体性表现，避免了过于规则化的排布展示， 减少了用户浏览大量图片时的视觉疲劳感，让界面充满趣味；

2、利用3D渲染方式，在2D图片的基础上实现了图片的平铺、透视、 凸起、堆叠等3D展示效果，高度模拟现实，保证界面视觉形象鲜活，对 玩家而言更具有情景代入感；

3、以折叠册页式的动态画面展示各图片的3D状态，可流畅响应用户 的滑动拖拽手势操作，游戏意境独特，并具有良好的操作体验。

在进一步的实施例中，通过对2D游戏场景分层，实现对不同层的场 景采用不同的渲染策略。在2D游戏中增加3D场景存在以下问题：如果全 部采用3D效果，顶点数量较多，场景的渲染复杂，渲染开销要高于2D场 景，而且会产生大量的锯齿，而2D渲染是没有锯齿的。在本发明优选实 施例中，通过分层处理，对背景区域采用普通2D渲染策略，对折叠册页 区域采用3D渲染策略，并最终将两个分层进行叠加。采用这种策略既加 入了3D视觉效果，又避免了大量顶点渲染开销和锯齿的产生，显著提高 了游戏画面的处理效率。

附图说明

图1为现有的一种方案在2D游戏中实现3D表现的游戏实景示意图；

图2a至图2b为现有的另一种方案在2D游戏中实现3D表现的游戏实 景示意图；

图3为本发明实施例在2D游戏中实现3D表现的方法的流程图；

图4为根据本发明方法的一个游戏实景示例图；

图5为本发明实施例中根据投影分区确定视点的示意图。

具体实施方式

以下对本发明的实施方式作详细说明。应该强调的是，下述说明仅仅 是示例性的，而不是为了限制本发明的范围及其应用。

参阅图3和图4，在一种实施例中，一种在2D游戏中实现3D表现的 方法，包括以下步骤：

S1、在2D游戏场景中设置3D渲染区域，在所述3D渲染区域显示多 个2D图片，将所述多个2D图片渲染成相邻图片的两侧边缘顺次连接在一 起的折叠册页的3D表现形式；

S2、响应触屏上的滑动手势时，将所述折叠册页向由所述滑动手势确 定的方向展开，并依据所述滑动手势的状态和各2D图片在所述折叠册页 中的排布顺序及图片尺寸，实时地确定各2D图片的展开位置和展开角度， 并将各2D图片渲染成与其展开位置和展开角度实时对应的3D表现形式。

上述方法可以但不限于应用在手机、平板电脑及游戏机等移动终端上 实现2D游戏的3D表现。

根据上述方法，针对2D游戏场景，在其中设置3D渲染区域，显示多 个2D图片，将这些图片渲染成相邻图片的两侧边缘顺次连接在一起的折 叠册页的3D表现形式；当响应触屏上的滑动手势时，该方法所采用的3D 表现为，使折叠册页向由滑动手势确定的方向展开，并依据滑动手势的状 态和各2D图片的尺寸及其在折叠册页中的排布顺序，实时地确定各2D图 片的展开位置和展开角度，进而按照对应的展开位置和展开角度对各2D 图片进行3D渲染。该方法以类似于中国古代奏折为视觉意象进行3D表现 的整体设计，不同2D图片分布于每个奏折折面，依据折面的展开角度进 行透视表现。由此，该方法避免了多个图片展示时过于规则化的排布展示， 减少了玩家浏览图片时的视觉疲劳感，让游戏界面充满趣味，让玩家更加 有情景代入感；而且，在玩家进行滑动拖拽等页面操作时能够进行更为真 切的3D效果展示，例如透视、凸起、堆叠等效果，保证界面视觉形象鲜 活，避免不停进行平面滑动的枯燥感。

参阅图4，在典型的实施例中，所述多个2D图片的规格(尺寸、形状 等)相同，从而能够更好地表现出中国古代奏折的视觉意象。当然，各图 片的规格不同也是可行的。

在一些实施例中，确定所述滑动手势的状态的参数可以包括所述滑动 手势行进的方向、距离、速度、加速度以及按压触屏的力度等一种或多种。 例如，可以仅依据滑动手势的行进方向和行进距离来确定折叠册页展开的 程度，其中，处于折叠册页的前部(是否处于前部依据滑动手势的方向来 确定)的图片先展开角度并向滑动手势的方向产生移位，其中，根据滑动 手势的行进方向和行进距离确定已展开的图片的展开角度的大小和移位的 距离。另外，还可以引入滑动手势的其他状态参数，如速度、加速度等， 来确定折叠册页的展开状态。例如，可以预定义超过某一加速度阈值的滑 动手势能够触发折叠册页某种较大程度展开和/或以某个较快速度的展开， 并可依据各2D图片在折叠册页中的排布关系及图片尺寸，进一步实时确 定折叠册页中各图片的移位位置和展开角度。在另一个较佳的实施例中， 还可以检测滑动手势对触屏的触摸压力，将触摸压力作为影响折叠册页的 展开程度和展开速度的参数。例如，可以预定义超过某一压力阈值的滑动 手势能够触发折叠册页某种较大程度展开和/或以某个较快速度的展开。

参阅图4，在优选的实施例中，响应触屏上的滑动手势时，所述折叠 册页所显示的折叠厚度随着所述滑动手势的进行而相应地减小，藉此表现 尚未展开角度的剩余图片的数量。

在优选的实施例中，所述方法还包括：对2D游戏场景进行分层，其 中将2D游戏场景中所述折叠册页所在的区域设置为采用3D渲染策略的 3D渲染层，其对应所述3D渲染区域，并将2D游戏场景中的背景区域设 置为采用2D渲染策略的2D渲染层，其中所述3D渲染层覆盖在所述2D 渲染层之上。以往，在2D游戏中增加3D表现效果时存在以下问题：如果 全部采用3D效果，顶点数量较多，场景的渲染复杂，渲染开销要高于2D 场景，而且会产生大量的锯齿，而2D渲染是没有锯齿的。在上述优选实 施例中，通过分层处理，对背景区域采用普通2D渲染策略，对折叠册页 区域采用3D渲染策略，并最终将两个分层进行叠加。采用这种策略既能 够加入3D视觉效果，又避免了大量顶点渲染开销和锯齿的产生，显著提 高了游戏画面的处理效率。

进一步地，可以对所述2D渲染层采用正交投影方式进行投影，对所 述3D渲染层采用透视投影方式进行投影，后者可采用例如两点透视原理 实现，并且，将所述3D渲染层的投影画面覆盖在所述2D渲染层的投影画 面上，从而实现所述2D渲染层和所述3D渲染层的场景叠加。

如图5所示，在一些实施例中，3D渲染层的投影可以按照以下几何关 系实现：

确定投影矩形区域的长度/宽度L；

确定长度/宽度方向上的视角的大小a；

根据投影区域大小和视角大小求得视点到投影区域的投影距离S：

S＝L/2tana；

另外，可以通过不断调整视点到投影面的投影距离S，同时观察其投 影效果，来确定最优的投影距离S。

在更优选的实施例中，所述2D渲染层和所述3D渲染层的场景叠加包 括以下步骤：

绘制2D渲染层到颜色缓冲区，将2D渲染层的所有像素深度设为最大 深度而形成为所述2D游戏场景的背景；

绘制3D渲染层到颜色缓冲区，将3D渲染层的所有像素深度设为小于 所述最大深度，使得3D渲染层投影生成的画面覆盖背景所在2D渲染层的 相应区域，产生2D画面上的3D视觉效果。

实际处理中，可以通过以下处理过程来实现。

首先，绘制2D渲染层到显示设备的存储空间的颜色缓冲区中(缓冲 区是显示设备中一块存储空间，包括颜色缓冲区，深度缓冲区和模板缓冲 区)，将所有像素深度设为最大深度，即1。

深度即该象素点在3D世界中距离相机视点的距离。在深度缓冲区中 存储将要绘制在屏幕上的每个像素的深度值，深度值越大，则离相机视点 越远。绘制画面时，根据深度缓冲的深度值来确定绘制物体的顺序。

绘制3D场景到颜色缓冲区，由于3D渲染层的所有像素深度小于最 大深度，使得3D渲染层投影生成的画面会覆盖背景所在2D渲染层中相应 的区域，这样就将3D渲染层和2D渲染层有效的融合在一起，产生最终的 2D界面的3D视觉效果。

参见如图4所示的实例，本发明实施例所能够实现的效果包括：

1、由多个图片连成的折叠册页式的3D表现形式，整体表现出古代奏 折的视觉意象，规格相同的图片分布于每个奏折折面，依据折面的展开角 度进行透视表现。产生的立体表现运用透视视觉原理达到，即奏折式的图 片页面采用近大远小的两点透视原理进行形变，从而达到立体的视觉效果。

2、响应滑动手势的过程中，折叠册页以半展开形式铺于屏幕，展开 的部分可以以不同的展开角度展示图片，未展开部分可以根据其显示的厚 度判断尚未展开的剩余图片的数量。

3、折叠册页响应滑动手势时，从一侧拖出未展开的图片，展示出变 化的效果，当滑动手势结束时，展开部分的图片可按照对应的展开角度以 折面形式表现静态的3D透视效果。

在另一种实施例中，一种在2D游戏中实现3D表现的装置，包括：

3D渲染区域设置模块，其在2D游戏场景中设置3D渲染区域，在所 述3D渲染区域显示多个2D图片，将所述多个2D图片渲染成相邻图片的 两侧边缘顺次连接在一起的折叠册页的3D表现形式；

滑动手势响应模块，其响应触屏上的滑动手势时，将所述折叠册页向 由所述滑动手势确定的方向展开，并依据所述滑动手势的状态和各2D图 片在所述折叠册页中的排布顺序，实时地确定各2D图片的展开位置和展 开角度，并将各2D图片渲染成与其展开位置和展开角度实时对应的3D表 现形式。

在优选的实施例中，所述装置还包括游戏场景分层模块，其对2D游 戏场景进行分层，将2D游戏场景中所述折叠册页所在的区域设置为采用 3D渲染策略的3D渲染层，其对应所述3D渲染区域，并将2D游戏场景 中的背景区域设置为采用2D渲染策略的2D渲染层，其中所述3D渲染层 覆盖在所述2D渲染层之上。

在优选的实施例中，所述装置还包括游戏场景叠加模块，其对所述2D 渲染层采用正交投影方式进行投影，对所述3D渲染层采用透视投影方式 进行投影，将所述3D渲染层的投影画面覆盖在所述2D渲染层的投影画面 上，实现所述2D渲染层和所述3D渲染层的场景叠加。

所述游戏场景叠加模块包括：

背景生成模块，其绘制2D渲染层到颜色缓冲区，将2D渲染层的所有 像素深度设为最大深度而形成为所述2D游戏场景的背景；

前景覆盖模块，其绘制3D渲染层到颜色缓冲区，将3D渲染层的所 有像素深度设为小于所述最大深度，使得3D渲染层投影生成的画面覆盖 背景所在2D渲染层的相应区域，产生2D画面上的3D视觉效果。

以上内容是结合具体/优选的实施方式对本发明所作的进一步详细说 明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术 领域的普通技术人员来说，在不脱离本发明构思的前提下，其还可以对这 些已描述的实施方式做出若干替代或变型，而这些替代或变型方式都应当 视为属于本发明的保护范围。