信息显示方法及装置、存储介质、处理器、终端与流程

文档序号:15046875发布日期:2018-07-27 22:52阅读:139来源:国知局

本发明涉及游戏领域,具体而言,涉及一种信息显示方法及装置、存储介质、处理器、终端。



背景技术:

在终端(比如手机)游戏中,用户界面(userinterface,简称ui)是用户游戏过程中最常接触的部分,也是用户对于游戏最直观的感受,因此ui的表现很大程度上决定了用户对于游戏的第一印象。现有主流终端游戏的ui界面主要以简单的操作控件,文字图片显示和序列帧动画为主。这类ui的特点是简洁大方,能够提供基础的交互和显示功能,但存在着可交互性一般,显示方式比较单一的缺点,不足以给用户留下较深的印象。

相关技术总存在一些实现动画效果的方案,包括:

一、序列帧动画的方案:大部分游戏的ui界面都是采用序列帧动画来提示视觉效果。序列帧动画技术在实现上是一种较为简单的解决方案,只需要针对用户不同的操作播放不同的动画即可。但如果需要丰富的交互效果就必须有非常大量的动画,且动画的表现形式都是事先在cocos工程项目中固定的。这种方式存在以下技术缺陷:无法实现一些特殊的效果表现,例如水雾凝结和擦除、手指按压雾气印记、动态流水效果等;为了针对不同操作方式和不同按钮的表现效果,需要大量的ui资源支持;大范围的序列帧动画会增大内存的消耗,且这种消耗无法通过脚本避免,也不能较好地进行性能适配。

二、使用draw接口绘制轨迹:通过opengl-es自动的draw()接口或者cocos2dx提供的drawprimitives()接口可以在u层绘制出轨迹,也就能大致模拟画图和擦除痕迹的效果。不过这类方法对规则图像的绘制支持比较好,自定义的轨迹需要一点点拼接,容易出现锯齿现象,而且绘制是在原来的图层上增加新的颜色,无法模拟出擦除后留下背景的效果。这种方式存在如下技术缺陷:绘制是在原来的基础上覆盖颜色像素点,无法模拟出擦除后留下背景的效果;对于不规则的形状绘制,需要通过一系列点来组成形状,具有严重的锯齿效果,且消耗较大;很难实现痕迹消失的过程,若用变量记录的方式来使用脚本控制显示的痕迹,逻辑复杂且消耗巨大。

三、rendertexture实现擦除效果:rendertexture是cocos2dx中提供的用于动态渲染纹理的类,通过rendertexture的begin()和end()方法,以及被绘制元素的visit()方法,可以选择性地将可视元素绘制在texture上。rendertexture的一大用处是可以快速实现屏幕截图,也可以通过设置各个元素之间的blend方式来实现绘图或者橡皮擦的功能。但rendertexture的擦除功能有一个缺陷就是无法模拟出复原的过程,且无法在可擦除内容和不可擦除内容在同一区域内叠加显示,另外对不同平台的支持也不太好。这种方式存在以下技术缺陷:rendertexture最大的难点是无法复原图像,因为擦除功能需要将橡皮擦sprite的blend设成(gl_one,gl_zero)方式,一旦gl_zero作用到原来的背景时,背景像素信息就会丢失,即使重新绘制背景层也无法模拟出慢慢恢复的过程;rendertexture还有一个问题就是在不同的设备上,可能存在问题,尤其的安卓设备会有显示不正确的bug。

针对上述的问题,目前尚未提出有效的解决方案。



技术实现要素:

本发明实施例提供了一种信息显示方法及装置、存储介质、处理器、终端,以至少解决相关技术中用户界面的可交互性不高的技术问题。

根据本发明实施例的一个方面,提供了一种信息显示方法,应用于呈现一图形用户界面的终端,包括:在图形用户界面的预设交互区域内模拟凝结并显示一特定雾状体,检测预设交互区域内的第一触摸操作,获取第一触摸操作的第一位置信息;根据第一位置信息创建第一模板;获取特定雾状体的图片底板,根据第一模板对特定雾状体的图片底板进行裁剪;在预设交互区域内显示裁剪后的图片底板的剩余像素。

可选地,预设交互区域内模拟凝结特定雾状体通过以下方式实现:调整特定雾状体的图片底板的透明度,并在预设交互区域内进行显示。

可选地,在检测预设交互区域内的第一触摸操作之后,方法还包括:获取第一触摸操作的多个触摸点,其中,多个触摸点在预设交互区域内形成第一预定轨迹。

可选地,根据位置信息创建第一模板包括:根据多个触摸点的位置信息创建多个第一模板,其中,一个触摸点对应创建一个第一模板,第一模板的形状与对应的触摸点的形状相同;或根据第一预定轨迹创建第一模板,其中,第一模板的形状与第一预定轨迹相同。

可选地,在预设交互区域内显示裁剪后的图片底板的剩余像素之后,方法还包括:将第一模板的大小逐渐缩小为零,以便对特定雾状体的剩余像素进行恢复处理并在预设交互区域内进行显示。

可选地,将第一模板的大小逐渐缩小为零,以便对特定雾状体的剩余像素进行恢复处理并在预设交互区域内进行显示包括:在第一模板的大小逐渐缩小为零的过程中,利用过程中的第一模板对图片底板进行裁剪,在预设交互区域内显示裁剪后的图片底板的剩余像素。

可选地,方法还包括:获取第一触摸操作的第一时长,随着第一时长的增长,第一模板逐渐增大,雾状体所显示的面积逐渐减小,其中,第一时长为第一触摸操作作用于预设交互区域的时长;和/或当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第二时长,随着第二时长的增长,第一模板逐渐缩小,雾状体所显示的面积逐渐减小,其中,第二时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长。

可选地,方法还包括:检测预设交互区域内的第二触摸操作;获取第二触摸操作的第二位置信息;在与第二位置信息对应的位置上根据液体颗粒图案创建具有液体颗粒效果的第二模板;在第二触摸操作的触摸点离开预设交互区域的情况下,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒。

可选地,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒包括:在与第二位置信息对应的位置处,显示第二模板并隐藏预设交互区域中背景图片的像素内容。

可选地,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒之后,方法还包括:控制液体颗粒在预设交互区域内趋向终端的重力方向移动;在液体颗粒移动到预设交互区域的边界时释放液体颗粒。

可选地,控制液体颗粒在预设交互区域内沿终端的重力方向移动包括:减小第二模板在预设交互区域内的纵轴方向的坐标;为第二模板在预设交互区域内的横轴方向的坐标添加偏移量;其中,横轴方向为预设交互区域所在平面内与终端的重力方向垂直的方向,纵轴方向为预设交互区域所在平面内与横轴方向垂直的方向。

可选地,在液体颗粒移动到预设交互区域的边界时释放液体颗粒包括:在第二模板移动到预设交互区域的边界时,从列表中移除第二模板。

可选地,在检测预设交互区域内的第一触摸操作之后,方法还包括:在距离第一位置预定距离的第二位置处凝结特定雾状体;获取第一触摸操作的第三时长,随着第三时长的增长,在第二位置处凝结的雾状体逐渐淡入,其中,第三时长为第一触摸操作作用于预设交互区域的时长;和/或当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第四时长,随着第四时长的增长,在第二位置处凝结的雾状体逐渐淡入,其中,第四时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长。

可选地,在距离第一位置预定距离的第二位置处凝结特定雾状体包括:在第二位置处创建指定图片,其中,指定图片中与第二位置对应的区域透明,指定图片中除了区域对应的其他区域凝结有特定雾状体。

可选地,检测预设交互区域内的第三触摸操作,获取第三触摸操作的第三位置信息;修改与第三位置信息对应的第三位置处控件的状态。

可选地,在修改与第三位置信息对应的第三位置处控件的状态之后,方法还包括:在第三触摸操作的触摸点离开预设交互区域的时间超过预定阈值的情况下,将控件的状态恢复到初始状态。

可选地,修改与第三位置信息对应的第三位置处控件的状态包括:减小控件的图片的透明度。

可选地,将控件的状态恢复到初始状态包括:将控件的图片的透明度恢复到图片的初始透明度。

根据本发明实施例的一个方面,提供了一种信息显示装置,应用于呈现一图形用户界面的终端,包括:第一检测模块,用于在图形用户界面的预设交互区域内模拟凝结并显示一特定雾状体,检测预设交互区域内的第一触摸操作,获取第一触摸操作的第一位置信息;第一创建模块,用于根据第一位置信息创建第一模板;裁剪模块,用于获取特定雾状体的图片底板以及根据第一模板对特定雾状体的图片底板进行裁剪;第一显示模块,用于在预设交互区域内显示裁剪后的图片底板的剩余像素。

可选地,装置还包括:缩小模块,用于将第一模板的大小逐渐缩小为零,以便对特定雾状体的剩余像素进行恢复处理并在预设交互区域内进行显示。

可选地,装置还包括:第二检测模块,用于检测预设交互区域内的第二触摸操作,以及获取第二触摸操作的第二位置信息;第二创建模块,用于在与第二位置信息对应的位置上根据液体颗粒图案创建具有液体颗粒效果的第二模板;第二显示模块,用于在第二触摸操作的触摸点离开预设交互区域的情况下,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒。

可选地,装置还包括:凝结模块,用于在距离第一位置预定距离的第二位置处凝结特定雾状体;第一获取模块,用于获取第一触摸操作的第三时长,其中,随着第三时长的增长,在第二位置处凝结的雾状体逐渐淡入,第三时长为第一触摸操作作用于预设交互区域的时长;和/或用于当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第四时长,其中,随着第四时长的增长,在第二位置处凝结的雾状体逐渐淡入,第四时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长。

可选地,装置还包括:第三检测模块,用于检测预设交互区域内的第三触摸操作,获取第三触摸操作的第三位置信息;修改模块,用于修改与第三位置信息对应的第三位置处控件的状态。

根据本发明实施例的一个方面,提供了一种存储介质,所述存储介质包括存储的程序,其中,在所述程序运行时控制所述存储介质所在设备执行上述任意一项所述的信息显示方法。

根据本发明实施例的一个方面,提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行上述任意一项所述的信息显示方法。

根据本发明实施例的一个方面,提供了一种终端,包括:一个或多个处理器,存储器,显示装置以及一个或多个程序,其中,所述一个或多个程序被存储在所述存储器中,并且被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行上述任意一项所述的信息显示方法。

在本发明实施例中,采用在图形用户界面的交互区域内被模拟凝结特定雾状体的情况下,基于第一触摸操作作用于交互区域的第一位置信息创建第一模板,根据创建的第一模板对该特定雾状体的图片模板进行裁剪,并在预设交互区域内显示裁剪后的图片底板的剩余像素的方式,实现了擦除第一触摸操作作用于交互区域的位置处的特定雾状体的目的,即通过采用上述模板裁剪的方式来实现上述特定雾状体的擦除,由于第一触摸操作作用于交互区域的位置,第一模板的大小可以影响上述特定雾状体的擦除位置以及擦除面积,因而可以带来更多的显示效果,增加了界面的可交互性,进而解决了相关技术中用户界面的可交互性不高的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解,构成本申请的一部分,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:

图1是根据本发明实施例提供的信息显示方法的流程示意图;

图2是根据本发明优选实施例提供的ui界面的示意图;

图3是根据本发明优选实施例提供的ui界面按压后的ui界面的示意图;

图4是根据本发明优选实施例提供的擦除水雾形成清晰的轨迹的示意图;

图5是根据本发明优选实施例提供的clippingnode的方案的结构示意图;

图6是根据本发明优选实施例提供的手指按压产生周边雾气的示意图;

图7是根据本发明优选实施例提供的水滴流淌模拟的示意图;

图8是根据本发明优选实施例提供的按钮的消散的示意图;

图9(a)是根据本发明优选实施例提供的状态栏图标带有水雾元素的示意图;

图9(b)是根据本发明优选实施例提供的玩家在游戏过程中状态发生变化时的一个状态对应的状态栏图标的示意图;

图10是根据本发明实施例提供的信息显示装置的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分的实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。

需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明实施例,提供了一种信息显示方法的方法实施例,需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例提供的信息显示方法的流程示意图,该方法可以应用于呈现一图形用户界面的终端,如图1所示,该方法包括如下步骤:

步骤s102,在图形用户界面的预设交互区域内模拟凝结并显示一特定雾状体,检测预设交互区域内的第一触摸操作,获取第一触摸操作的第一位置信息;

步骤s104,根据第一位置信息创建第一模板;

步骤s106,获取特定雾状体的图片底板,根据第一模板对特定雾状体的图片底板进行裁剪;

步骤s108,在预设交互区域内显示裁剪后的图片底板的剩余像素。

通过上述步骤,采用在图形用户界面的交互区域内被模拟凝结特定雾状体的情况下,基于第一触摸操作作用于交互区域的第一位置信息创建第一模板,根据创建的第一模板对该特定雾状体的图片模板进行裁剪,并在预设交互区域内显示裁剪后的图片底板的剩余像素的方式,实现了擦除第一触摸操作作用于交互区域的位置处的特定雾状体的目的,即通过采用上述模板裁剪的方式来实现上述特定雾状体的擦除,由于第一触摸操作作用于交互区域的位置,第一模板的大小可以影响上述特定雾状体的擦除位置以及擦除面积,因而可以带来更多的显示效果,增加了界面的可交互性,进而解决了相关技术中用户界面的可交互性不高的技术问题。

可选地,在本实施例中,上述终端可以包括但不限于以下至少之一:手机、平板电脑、笔记本电脑、台式pc机、数字电视及其他需要显示数据的硬件设备。

可选地,在本实施例中,上述特定雾状体可以但不限于水雾,油污等雾状类的液体。上述第一触摸操作可以是但不限于上述按压操作,点击操作,滑动操作等。

需要说明的是,上述第一位置信息可以是上述第一触摸操作作用于上述预设交互区域内的位置的信息,上述第一模板的大小可以由上述第一触摸操作作用于所述交互区域的力(即上述屏幕感知的压力)确定,但并不限于此。

需要说明的是,上述步骤s102-步骤s108可以认为是利用clippingnode的方案来实现的,上述图片底板可以相当于该clippingnode的方案中的底板node,上述第一模板可以认为是clippingnode的方案中的模板node,而上述步骤s108可以认为是采用倒置显示的方式将底板上除模板之外的其他信息显示出来。即将clippingnode的方案应用到特定雾状体的擦除过程,相比于现有技术中的方案可以得到更多的显示效果。

在本发明的一个实施例中,预设交互区域内模拟凝结特定雾状体通过以下方式实现:调整特定雾状体的图片底板的透明度,并在预设交互区域内进行显示。以上述特定雾状体为水雾为例,那么上述图片底板可以是水雾背景图片。

可选地,在随着第一触摸操作的触摸点在屏幕上的移动,上述交互区域内会形成对应的擦除轨迹,因而,在本发明的一个实施例中,在上述步骤s102中检测到第一触摸操作之后,上述方法还包括:获取第一触摸操作的多个触摸点,其中,多个触摸点在预设交互区域内形成第一预定轨迹。上述步骤s104可以表现为:根据多个触摸点的位置信息创建多个第一模板,其中,一个触摸点对应创建一个第一模板,第一模板的形状与对应的触摸点的形状相同;或根据第一预定轨迹创建第一模板,其中,第一模板的形状与第一预定轨迹相同。即可以通过移动第一模板或连续创建多个模板的方式来对应形成擦除轨迹。

为了更好地增加交互效果,可以在擦除特定雾状体后进行缓慢恢复,在本发明的一个实施例中,在上述步骤s108之后,上述方法还可以包括:将第一模板的大小逐渐缩小为零,以便对特定雾状体的剩余像素进行恢复处理并在预设交互区域内进行显示。

需要说明的是,将第一模板的大小逐渐缩小为零,以便对特定雾状体的剩余像素进行恢复处理并在预设交互区域内进行显示可以表现为:在第一模板的大小逐渐缩小为零的过程中,利用过程中的第一模板对图片底板进行裁剪,在预设交互区域内显示裁剪后的图片底板的剩余像素。

需要说明的是,可以通过定时器的定时来逐渐改变第一模板的大小,或者通过例如cocos引擎自带的动画函数来实现,但并不限于此。

可选地,为了实现在长按屏幕时擦除区域扩散,在本发明的一个实施例中,上述方法还可以包括:获取第一触摸操作的第一时长,随着第一时长的增长,第一模板逐渐增大,雾状体所显示的面积逐渐减小,其中,第一时长为第一触摸操作作用于预设交互区域的时长。和/或,为了实现在松手时擦除区域缩小,上述方法还可以包括:当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第二时长,随着第二时长的增长,第一模板逐渐缩小,雾状体所显示的面积逐渐减小,其中,第二时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长。

在本发明的一个实施例中,上述方法还可以包括:检测预设交互区域内的第二触摸操作;获取第二触摸操作的第二位置信息;在与第二位置信息对应的位置上根据液体颗粒图案创建具有液体颗粒效果的第二模板;在第二触摸操作的触摸点离开预设交互区域的情况下,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒。通过增加液体颗粒的生成过程,提高了更好的交互性。

需要说明的是,检测上述第二触摸操作的步骤可以在步骤s102之前,之后或同时执行,并不限于此。上述液体颗粒可以是水滴、油滴等并不限于此。

需要说明的是,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒可以表现为:在与第二位置信息对应的位置处,显示第二模板并隐藏预设交互区域中背景图片的像素内容。

为了方便统一管理,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒之后,上述方法还可以包括:将生成的液体颗粒添加到列表中。例如,可创建一个或多个列表对生成的各种形态的液体颗粒或特定雾状体相应的模板进行存储,在首次获取到模板时,将其纳入列表中,在液体颗粒或特定雾状体在预设交互区域内消失或移动至屏幕边缘即将消失时,相应地从列表中删除对应的模板。

为了增加用户与界面的交互性,增加界面的动态变化,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒之后,上述方法还可以包括:控制液体颗粒在预设交互区域内趋向终端的重力方向移动;在液体颗粒移动到预设交互区域的边界时释放液体颗粒。即实现生成的液体颗粒对着重力影响向下流淌的过程。

可选地,控制液体颗粒在预设交互区域内沿终端的重力方向移动可以表现为:减小第二模板在预设交互区域内的纵轴方向的坐标;为第二模板在预设交互区域内的横轴方向的坐标添加偏移量;其中,横轴方向为预设交互区域所在平面内与终端的重力方向垂直的方向,纵轴方向为预设交互区域所在平面内与横轴方向垂直的方向。

需要说明的是,上述偏移量可以是随机的。通过在横轴方向添加随机的偏移量,纵轴方向减小坐标的方式来模拟上述液体颗粒随重力向下的过程。

可选地,在液体颗粒移动到预设交互区域的边界时释放液体颗粒可以表现为:在第二模板移动到预设交互区域的边界时,从列表中移除第二模板。即当上述液体颗粒移动到超出屏幕范围时该释放上述液体颗粒。

在本发明的一个实施例中,在上述步骤s102中检测第一触摸操作之后,上述方法还包括:在距离第一位置预定距离的第二位置处凝结特定雾状体;获取第一触摸操作的第三时长,随着第三时长的增长,在第二位置处凝结的雾状体逐渐淡入,其中,第三时长为第一触摸操作作用于预设交互区域的时长;和/或当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第四时长,随着第四时长的增长,在第二位置处凝结的雾状体逐渐淡入,其中,第四时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长。即实现了在所述第一指定区域的四周凝结所述特定雾状体,且所述四周凝结的所述特定雾状体随所述第一触摸操作作用于预设交互区域的时间长短而变化,在所述第一触摸操作的触摸点离开预设交互区域的情况下,四周凝结的所述特定雾状体随时间逐渐淡去。

需要说明的是,在距离第一位置预定距离的第二位置处凝结特定雾状体可以表现为:在第二位置处创建指定图片,其中,指定图片中与第二位置对应的区域透明,指定图片中除了区域对应的其他区域凝结有特定雾状体。

通过上述方式可以实现在屏幕的某个位置长按时,除了产生擦除效果之前可以在周边产生雾气,松手时或触摸点离开屏幕时周边产生的雾气慢慢淡出。

在本发明的一个实施例中,上述方法还可以包括:检测预设交互区域内的第三触摸操作,获取第三触摸操作的第三位置信息;修改与第三位置信息对应的第三位置处控件的状态。

需要说明的是,上述检测第三触摸操作的步骤可与上述步骤s102之前,之后或同时执行,并不限于此。需要说明的是,上述控件的状态可以包括清晰状态,模糊状态,但并不限于此。需要说明的是,上述修改与第三位置信息对应的第三位置处控件的状态可以表现为:上述控件变得模糊。需要说明的是,控件变模糊的程度可以根据控件的图片进行调整,在该状态下,用户无法感知控件。

可选地,修改与第三位置信息对应的第三位置处控件的状态可以通过以下方式实现:减小所述控件的图片的透明度。

需要说明的是,在修改与第三位置信息对应的第三位置处控件的状态之后,上述方法还包括:在第三触摸操作的触摸点离开预设交互区域的时间超过预定阈值的情况下,将控件的状态恢复到初始状态。需要说明的是,该初始状态可以认为是清晰的状态,即上述控件是清晰的。通过该方式显现了控件的复原过程。

可选地,将所述控件的状态恢复到初始状态可以通过以下方式实现:将所述控件的图片的透明度恢复到图片的初始透明度。

需要说明的是,上述步骤的执行主体可以是终端,但并不限于此。

为了更好地理解本发明实施例,以下结合优选的实施例进行描述,在该优选实施例中,上述特定雾状体可以为水雾,上述液体颗粒可以为水滴。

该优选实施例提供的技术方案实现了一种类似于自然现象中水雾的表现形式,提升了用户和ui界面之间的交互性,增加了ui界面的动态变化,达到了让玩家身临其境的效果,营造了一种和场景相符合的气氛。

本发明优选实施例采用一种全新的可擦除式的水雾主题ui交互效果,基于cocos2dx引擎技术,实现了一种类似于自然现象中水雾的表现形式。可擦除的水雾ui交互界面提升了用户和ui界面之间的交互性,增加ui界面的动态变化,以达到让玩家身临其境的效果,营造出一种和场景相符合的气氛。图2是根据本发明优选实施例提供的ui界面的示意图,图3是根据本发明优选实施例提供的ui界面按压后的ui界面的示意图。

具体地,该技术方案包括:

(1)水雾的擦除和凝结

随着时间或者游戏进度的推移,通过改变水雾背景图(相当于上述图片底板)的透明度,可以在ui的交互区域内凝结出一层类似水雾的效果,用户可以通过手指滑动屏幕的方式擦去凝结在屏幕上的雾气从而获取更清晰的视觉效果。被擦除的部分会有明显的擦拭痕迹,且随着时间的流逝,被擦除的水雾又会重新凝结。图4是根据本发明优选实施例提供的擦除水雾形成清晰的轨迹的示意图,如图4所示,用户拖动摇杆擦除了部分水雾,形成清晰的轨迹,轨迹会随着时间从最开始被擦除的地方慢慢凝结成完整的水雾。这部分功能主要使用clippingnode裁剪节点完成,通过设置裁剪节点中需要裁剪的部分,达到擦除的效果。

水雾的擦除和缓慢恢复可以通过以下方式具体实现:

模拟一种能通过滑动擦除和缓慢复原的效果,本优选实施例采用基于clippingnode的方案。clippingnode是cocos2dx中的自带的裁剪节点,图5是根据本发明优选实施例提供的clippingnode的方案的结构示意图,如图5所示,其核心思想是通过设置stencil模板、底板、layer三层,使用模板从底板上获取对应位置的像素信息,然后绘制到layer上。同时,clippingnode还支持倒置显示inverted(即把底板上除模板之外的信息显示在layer上),透明度阈值alphathreshold(只有alpha大于阈值的像素会被绘制在layer上)。另外,在clippingnode中,其子节点childs会被当做默认的底板。

clippingnode方案中的擦除部分都是通过cocosui的node节点来实现,可以自由地控制位置、大小和显示时间,因此就能制作出更多的显示效果。

基础的擦除效果通过clippingnode来实现,通过将cocos工程中预设好的需要擦除的图片(必须是sprite,相当于上述预设交互区域,或者上述图片底板)设为底板node。用户点击屏幕的时候在屏幕对应位置上创建模板node(相当于上述第一模板),利用模板node对底板node进行裁剪,通过倒置显示的方式将裁剪后的内容显示在layer上,从而实现在擦除效果。随着用户在屏幕上滑动,可以通过脚本移动模板或者连续创建多个模板来达到连接成一条擦除的轨迹(相当于上述擦除轨迹)。而要实现雾气的凝结效果,只需要随着时间将模板node逐渐缩小即可,直到模板node的大小变为0,则此处的擦除痕迹消失,雾气又重新凝结成一个整体。此操作可以通过定时器来改变大小,也可以使用cocos自带的动画函数实现。实测显示,只要模板node设置的不是太小,只需要每2帧或者3帧创建一次模板即可达到视觉上的连续效果,除非用户以超快的方式滑动屏幕。

具体步骤包括:

1)使用cocos2dx引擎创建clippingnode节点的步骤:

a,获取cocos工程中的水雾背景图:

b,创建一个空的clippingnode节点;

c,将节点位置设置到背景所在位置;

d,将节点裁剪模式设为倒置显示;

e,将空的clippingnode节点添加到显示屏幕上;

f,新建一个模板node(相当于上述第一模板),并添加到clippingnode中;

g,设置底板,就是被擦除的部分;

h,将原工程中的节点从原来的父节点移至新的clippingnode节点下:

至此为止,clippingnode的创建工作就完成了。

2)擦除步骤:

a,通过特定路径下的图片来创建一个特殊图案的node;

b,根据手指在屏幕按压的强度和位置来设置图片node的大小和和位置;

c,将图片node添加到clippingnode中的模板node(相当于上述第一模板)中;

d,使用cocos自带的动画函数来控制模板的变化;

f,由于是动态创建的node,为了防止内存泄露,在动画结束消失后必须释放内存。

上述优选实施例,如果需要将擦除的区域连成一条轨迹,则需要在检测用户手指在屏幕上的位置,然后根据不同操作做不同处理,例如长按时擦除区域扩散,松手时擦除区域缩小,移动时擦除区域跟着移动或者在新的地方创建新的擦除区域。

(2)、手指按压效果

模拟现实中用户在水雾表面用力按压时产生的周边雾气效果。图6是根据本发明优选实施例提供的手指按压产生周边雾气的示意图,如图6所示,在用户进行长按操作时会产生一圈明显的按压雾气。雾气随着按压时间的长短变化,且当用户停止按压后,周围的雾气会渐渐淡去,配合之前的擦除和凝结效果,可以模拟出雾气往中间凝结的现象。这部分主要通过动态sprite的创建和控制来实现。

手指在一个位置长按时,除了产生上述的擦除效果,还会在周边产生雾气的,主要通过在按压处动态创建一张中间透明四周有纹理的图片,加上淡入淡出和大小变化的效果来实现。

主要实现逻辑如下:

1)判断按压处是否在ui交互界面内;

2)在按压处创建一张图片;

3)将图片随着时间淡入;

4)松手时,图片会慢慢淡出;

5)按压时水印中间擦除部分随着时间变大;

6)在这套方案中,每一帧范围会增大0.01,直到最大值0.5;

7)松手时重置水印大小。

(3)、动态水滴效果

在水雾效果的基础上加入了动态的水滴效果,水滴会以一定规则生成在雾气界面上,生成的水滴会随着重力影响慢慢向下流淌,流淌过程中会擦去途径部分的雾气。水滴生成的规则可以根据需求制定,常见的可以根据时间随机生成,或者用户按压拖动的过程中生成。图7是根据本发明优选实施例提供的水滴流淌模拟的示意图,如图7所示。在游戏过程中,右侧的主操作区域内会随机出现水滴,并沿着屏幕往下流淌。这功能在擦除的基础上,采用算法动态生成水滴并模拟流淌过程。

水滴效果就是在水雾擦除效果的基础上增加了水滴的动态生成规则,和水滴流淌轨迹的模拟来实现的。其中,生成规则主要包括:在用户按压每超过一定时间时(这个时间可以是一定范围内的随机数),即在按压处产生一个用于水滴效果的模板,水滴的大小可以根据按压时间的长短做适当调整;在用户松手时生成一个水滴;水滴生成之间有最小时间间隔的限制。

另外,为了模拟水滴受重力影响和表面张力影响的效果,水滴的速度和方向都会在一个范围内做一个随机的变化,但无论如何变化,水滴总是呈现一个往下流淌的趋势,当流淌的轨迹超出屏幕显示范围时,水滴将被删除。其中,产生水滴方法如下:

1)判断水滴生成的位置是否在水雾ui的交互区域内;

2)如果不在ui交互区域内就不产生水滴;

3)通过特定路径下的水滴图案创建一个水滴模板node(相当于上述第二模板);

4)设置水滴模板的大小和位置;

5)设置水滴的混合选项,使得有水滴的地方只不显示原先的背景图案;

6)将水滴加入到一个列表中,进行统一管理.

水滴流淌规则如下:

1)从列表中获取到具体的水滴模板node;

2)在横向做一个随机的偏移量,纵向通过逐渐减小纵坐标来模拟随着重力向下的过程;

3)根据生成的随机数改变水滴的位置;

4)超出屏幕范围时释放水滴对象;

(4)按钮的消散和复原效果

不同于一般的按钮点击效果,水雾ui的按钮点击效果模拟了一种类似消散和复原的效果。图8是根据本发明优选实施例提供的按钮的消散的示意图,如图8所示,当用户点击ui交互区域内的按钮后,按钮会立刻像图中第2个按钮一般变得模糊,模糊的程度可以根据ui控件的图片进行调整,此时意味着用户无法感知按钮的作用,也不能再次点击按钮。直到按钮慢慢恢复成原来的样子,又变成可感知和可交互的状态。此功能采用将多个控件以特定的blend方式混合,从而达到预期的功能。

按键的消散和复原效果则使用两张图以一定的blend方式进行混合得到,比单纯的按钮点击态效果更容易控制。

1)消散的过程

a,先保持原状态一段时间,在这段时间后开始消散过程,慢慢减低透明度:

b,如果不需要保持一段时间,则立刻开始消散过程:

2)复原的过程

a,先保持一段时间,在这段时间后开始复原,慢慢增加透明度:

b,如果不需要保持一段时间,则立刻开始复原过程。

需要说明的是,上述效果主要存在于ui界面的核心交互区域(类似摇杆、技能和攻击按钮等区域)。但是这些具有特殊表现的ui界面无法覆盖整个交互流程,因此其他次要的ui区域可以通过图片和动画的方式来模拟水雾ui的显示和交互效果,以达到整体视觉上的统一。图9(a)是根据本发明优选实施例提供的状态栏图标带有水雾元素的示意图,图9(b)是根据本发明优选实施例提供的玩家在游戏过程中状态发生变化时的一个状态对应的状态栏图标的示意图,如图9(a)和图9(b)所示,在ui界面右上角显示游戏信息的状态栏图标从设计上带有水雾元素,状态发生变化时会有缩放和透明度变化的动画来模拟模糊的效果,并达到警示的功能。

需要说明的是,本发明优选实施例提供的水雾ui方案主要为了营造一种冰冷的气氛,模拟在寒冷条件下的一些自然现象。较强的交互性和动态变化是其最大的特点。而采用clippingnode为核心来实现这套方案,可以达到以下几个效果:

1)可以比较完美地模拟出雾气擦除和凝结的效果。

2)可以通过脚本方便地对效果的程度进行控制,在特定场合对一些效果的使用和表现进行取舍,能够更好地进行高低配的适配。

此解决方案实现的效率相对于采用draw()和rendertexture方案,实现逻辑上更加清晰简洁。

其中,对效率的影响主要存在于两个方面:

(1)clippingnode的大小,由于clippingnode的需要绘制背景图,因此背景图的大小就影响到绘制的效率。在实际使用中,只在核心的操作区域(左侧摇杆和右侧按键)运用了擦除的效果,可以降低绘制带来的消耗。

(2)动态模板节点的数量,为了保证擦除效果视觉上的连续性,采用较大的节点可以降低创建的频率。另外,由于流水效果会动态创建较多数量的节点,因此可以改变规则适当降低水滴生成的数量。为了减少创建和销毁的消耗时间,可以为模板节点创建一个缓存队列。

本发明实施例还提供了一种信息显示装置,图10是根据本发明实施例提供的信息显示装置的结构框图,应用于呈现一图形用户界面的终端,如图10所示,该显示装置包括:

第一检测模块1002,用于在图形用户界面的预设交互区域内模拟凝结并显示一特定雾状体,检测预设交互区域内的第一触摸操作,获取第一触摸操作的第一位置信息;

第一创建模块1004,与上述第一检测模块1002连接,用于根据第一位置信息创建第一模板;

裁剪模块1006,与上述第一创建模块1004连接,用于获取特定雾状体的图片底板以及根据第一模板对特定雾状体的图片底板进行裁剪;

第一显示模块1008,与上述裁剪模块1006连接,用于在预设交互区域内显示裁剪后的图片底板的剩余像素。

通过上述装置,采用在图形用户界面的交互区域内被模拟凝结特定雾状体的情况下,基于第一触摸操作作用于交互区域的第一位置信息创建第一模板,根据创建的第一模板对该特定雾状体的图片模板进行裁剪,并在预设交互区域内显示裁剪后的图片底板的剩余像素的方式,实现了擦除第一触摸操作作用于交互区域的位置处的特定雾状体的目的,即通过采用上述模板裁剪的方式来实现上述特定雾状体的擦除,由于第一触摸操作作用于交互区域的位置,第一模板的大小可以影响上述特定雾状体的擦除位置以及擦除面积,因而可以带来更多的显示效果,增加了界面的可交互性,进而解决了相关技术中用户界面的可交互性不高的技术问题。

在本发明的一个实施例中,上述装置还可以包括:模拟模块,用于预设交互区域内模拟凝结特定雾状体;具体可以表现为:上述模拟模块,调整特定雾状体的图片底板的透明度,并在预设交互区域内进行显示。

需要说明的是,在随着第一触摸操作的触摸点在屏幕上的移动,上述交互区域内会形成对应的擦除轨迹,因而,在本发明的一个实施例中,上述装置还包括:第二获取模块,与上述第一检测模块1002连接,用于获取第一触摸操作的多个触摸点,其中,多个触摸点在预设交互区域内形成第一预定轨迹。上述第一创建模块1004还可以用于根据多个触摸点的位置信息创建多个第一模板,其中,一个触摸点对应创建一个第一模板,第一模板的形状与对应的触摸点的形状相同;或根据第一预定轨迹创建第一模板,其中,第一模板的形状与第一预定轨迹相同。即可以通过移动第一模板或连续创建多个模板的方式来对应形成擦除轨迹。

在本发明的一个实施例中,上述装置还包括:缩小模块,与上述第一创建模块1004连接,用于将第一模板的大小逐渐缩小为零,以便对特定雾状体的剩余像素进行恢复处理并在预设交互区域内进行显示。

需要署名的是,上述缩小模块还用于在第一模板的大小逐渐缩小为零的过程中,利用过程中的第一模板对图片底板进行裁剪,在预设交互区域内显示裁剪后的图片底板的剩余像素。

上述装置还可以包括:第三获取模块,与上述检测模块1002连接,用于获取第一触摸操作的第一时长,随着第一时长的增长,第一模板逐渐增大,雾状体所显示的面积逐渐减小,其中,第一时长为第一触摸操作作用于预设交互区域的时长;和/或,当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第二时长,随着第二时长的增长,第一模板逐渐缩小,雾状体所显示的面积逐渐减小,其中,第二时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长

在本发明的一个实施例中,上述装置还可以包括:第二检测模块,用于检测预设交互区域内的第二触摸操作,以及获取第二触摸操作的第二位置信息;第二创建模块,与上述第二检测模块连接,用于在与第二位置信息对应的位置上根据液体颗粒图案创建具有液体颗粒效果的第二模板;第二显示模块,与上述第二创建模块连接,用于在第二触摸操作的触摸点离开预设交互区域的情况下,在与第二位置信息对应的位置上显示由第二模板模拟生成的液体颗粒。

需要说明的是,上述第二显示模块还用于在与第二位置信息对应的位置处,显示第二模板并隐藏预设交互区域中背景图片的像素内容。

上述装置还包括:添加模块,与所述第二显示模块连接,用于将生成的液体颗粒添加到列表中。

为了增加用户与界面的交互性,增加界面的动态变化,在本发明的一个实施例中,上述装置还包括:控制模块,与上述第二显示模块连接,用于控制液体颗粒在预设交互区域内趋向终端的重力方向移动;释放模块,与上述控制模块连接,在液体颗粒移动到预设交互区域的边界时释放液体颗粒。

需呀说明的是,上述控制模块还用于减小第二模板在预设交互区域内的纵轴方向的坐标;为第二模板在预设交互区域内的横轴方向的坐标添加偏移量;其中,横轴方向为预设交互区域所在平面内与终端的重力方向垂直的方向,纵轴方向为预设交互区域所在平面内与横轴方向垂直的方向。上述释放模块还用于在第二模板移动到预设交互区域的边界时,从列表中移除第二模板。即当上述液体颗粒移动到超出屏幕范围时该释放上述液体颗粒。

在本发明的一个实施例中,上述装置还包括:凝结模块,与上述第一检测模块1002连接,用于在距离第一位置预定距离的第二位置处凝结特定雾状体;第一获取模块,与上述凝结模块连接,用于获取第一触摸操作的第三时长,其中,随着第三时长的增长,在第二位置处凝结的雾状体逐渐淡入,第三时长为第一触摸操作作用于预设交互区域的时长;和/或用于当第一触摸操作结束且第一触摸操作的触摸点离开预设交互区域时,获取所第四时长,其中,随着第四时长的增长,在第二位置处凝结的雾状体逐渐淡入,第四时长为当前时刻与触摸点离开预设交互区域的时刻之间的时长。

需要说明的是,上述凝结模块还用于在第二位置处创建指定图片,其中,指定图片中与第二位置对应的区域透明,指定图片中除了区域对应的其他区域凝结有特定雾状体。

在本发明的一个实施例中,上述装置还包括:第三检测模块,用于检测预设交互区域内的第三触摸操作,获取第三触摸操作的第三位置信息;修改模块,与上述第三检测模块连接,用于修改与第三位置信息对应的第三位置处控件的状态。

需要说明的是,上述第三检测模块可以与上述第一检测模块1002连接或不连接,并不限于此。

需要说明的是,上述修改模块还用于减小所述控件的图片的透明度。

需要说明的是,上述装置还包括:恢复模块,与上述第三检测模块连接,用于在第三触摸操作的触摸点离开预设交互区域的时间超过预定阈值的情况下,将控件的状态恢复到初始状态。需要说明的是,上述恢复模块还用于将所述控件的图片的透明度恢复到图片的初始透明度。

需要说明的是,上述装置可以位于终端中,但并不限于此。

需要说明的是,上述各个模块是可以通过软件或硬件来实现的,对于后者,可以通过以下方式实现,但不限于此:上述模块均位于同一处理器中;或者,上述各个模块以任意组合的形式分别位于不同的处理器中。

本发明实施例,提供了一种存储介质,所述存储介质包括存储的程序,其中,在所述程序运行时控制所述存储介质所在设备执行上述任意一项所述的信息显示方法。

本发明实施例,提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行上述任意一项所述的信息显示方法。

本发明实施例,提供了一种终端,包括:一个或多个处理器,存储器,显示装置以及一个或多个程序,其中,所述一个或多个程序被存储在所述存储器中,并且被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行上述任意一项所述的信息显示方法。

上述本发明实施例序号仅仅为了描述,不代表实施例的优劣。

在本发明的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中,应该理解到,所揭露的技术内容,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,可以为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:u盘、只读存储器(rom,read-onlymemory)、随机存取存储器(ram,randomaccessmemory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1