具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：在Laya引擎中解析GIF格式资源为对应的帧序列图片，并能使用原生控件进行播放。

本发明涉及的技术术语解释:

请参照图1，本发明提供Laya引擎播放GIF格式资源的方法，包括：

加载GIF格式资源至内存中；

在Laya引擎中解析所述GIF格式资源，获取对应的序列帧图片；

通过方式一或方式二播放所述序列帧图片；所述方式一为将所述序列帧图片加载至动画控件；所述方式二为将序列帧图片加载至编写了帧动画控件的Image图片控件中。

从上述描述可知，本发明的有益效果在于：本发明能够克服现有技术Laya引擎中仅支持laya资源的播放，且Laya资源制作难度高的问题。本发明通过在Laya引擎中动态解析GIF格式图片资源，实现laya引擎对GIF格式图片资源的支持，从而扩展了laya引擎支持的资源类型，提高了实用性，实现了功能的扩展。

进一步地，所述在Laya引擎中解析所述GIF格式资源，获取对应的序列帧图片，具体为：

通过Laya引擎的图片控件加载所述GIF格式资源；

将所述GIF格式资源设置为允许跨域；

通过加载并解析设置后的GIF格式资源的GIF格式二进制资源，获取图像数据；

解析并解码所述图像数据，得到所述GIF格式资源的每一帧对应的像素数据；

绘制每一帧像素数据至画布控件上，再转码得到所述GIF格式资源对应的序列帧图片。

由上述描述可知，实现了在Laya引擎中对GIF格式资源的拆帧，使其被Laya引擎支持。

进一步地，

所述解析并解码所述图像数据，得到所述GIF格式资源的每一帧对应的像素数据，具体为：

读取图像数据的属性信息，获取块信息；

依据二进制长度，对每个块的图像数据进行解析转义，得到所述GIF格式资源的每一帧对应的像素数据。

由上述描述可知，依据二进制长度将每个块的流数据转化为对应的RGB颜色值，从而获取GIF格式图片每帧的像素数据。

进一步地，所述通过Laya引擎的图片控件加载所述GIF格式资源，之前，还包括：

验证所述GIF格式资源的格式是否为GIF格式。

由上述描述可知，通过简单的验证待解析的资源是否为GIF格式，能够有效排除部分非GIF格式资源，避免后续加载解析处理过程出错，从而减少性能消耗。

进一步地，所述编写了帧动画控件的Image图片控件，具体为：

使用Image图片控件，实现针对帧动画图片在固定或特定时间间隔逐张绘制图像的方法。

由上述描述可知，在Laya的Image图片控件基础上，编写帧动画控件，能够支持修改显示的宽高，控制播放间隔。

进一步地，所述加载GIF格式资源至内存中，具体为：

通过画布控件将GIF格式资源加载到内存中。

由上述描述可知，直接使用原生的Canvas画布控件便可完成GIF格式资源的加载。

进一步地，所述方法还包括：

定时清除内存中存储的GIF格式资源。

由上述描述可知，通过定时清理过期资源，实现资源的及时回收，避免影响系统性能。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时能够实现下述Laya引擎播放GIF格式资源的方法所包含的步骤：

加载GIF格式资源至内存中；

在Laya引擎中解析所述GIF格式资源，获取对应的序列帧图片；

通过方式一或方式二播放所述序列帧图片；其中，方式一为将所述序列帧图片加载至动画控件；方式二为将序列帧图片加载至编写了帧动画控件的Image图片控件中。

进一步地，所述在Laya引擎中解析所述GIF格式资源，获取对应的序列帧图片，具体为：

通过Laya引擎的图片控件加载所述GIF格式资源；

将所述GIF格式资源设置为允许跨域；

通过加载并解码设置后的GIF格式资源的GIF格式二进制资源，获取图像数据；

解析并解析所述图像数据，得到所述GIF格式资源的每一帧对应的像素数据；

绘制每一帧像素数据至画布控件上，再转码得到所述GIF格式资源对应的序列帧图片。

进一步地，

所述解析并解码所述图像数据，得到所述GIF格式资源的每一帧对应的像素数据，具体为：

读取图像数据的属性信息，获取块信息；

依据二进制长度，对每个块的图像数据进行解析转义，得到所述GIF格式资源的每一帧对应的像素数据。

进一步地，所述通过Laya引擎的图片控件加载所述GIF格式资源，之前，还包括：

验证所述GIF格式资源的格式是否为GIF格式。

进一步地，所述加载GIF格式资源至内存中，具体为：

通过画布控件将GIF格式资源加载到内存中。

进一步地，所述方法还包括：

定时清除内存中存储的GIF格式资源。

从上述描述可知，对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。所述程序在被处理器执行后，同样能够实现对应各方法的有益效果。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

实施例一

请参照图2，本实施例提供一种Laya引擎播放GIF格式资源的方法，实现Laya引擎对GIF格式资源的支持，从而不再局限于仅支持单一资源格式，扩展了Laya引擎的功能。

方法包括：

S1：加载GIF格式资源至内存中；

具体使用JavaScript原生的Canvas画布控件将GIF格式图片加载到内存中。

S2：在Laya引擎中解析所述GIF格式资源，获取对应的序列帧图片；即，解析GIF格式资源并且导出base64图片编码格式的单帧图片存放在内存中。

解析过程如下：

S2.1：简单验证加载进来的所谓GIF资源的格式后缀转小写后是否为.gif；若是，则执行下一步；若否，则结束流程，并提示加载的资源非GIF格式。

在具体解析算法中会有对应的格式查错处理，该步骤旨在排除部分非GIF格式资源，避免后续的加载解析处理，减少性能消耗。

S2.2：在Laya中用HTML5原生的HTMLImageElement图片控件装载该图片资源；

S2.3：使用原生XMLHttpRequest设置资源允许跨域属性后，请求加载资源回调的response属性，即GIF格式图像资源；

S2.4：对XMLHttpRequest请求到的资源的response属性进行解析，读取图像数据；

S2.5：解析并解码上述图像数据，得到所述GIF对应每一帧的像素数据；

S2.6：将每帧像素数据绘制到画布HTMLCanvasElement画布控件上，再转码成Laya中可直接显示的图片格式资源，由此获取到GIF格式资源对应的序列帧图片。

在一具体实例中，所述S2.5具体通过以下过程实现：

读取图像数据后，首先去除头部header特定字段以及版本号；然后读取一些特殊属性，特殊属性中包含有多少Block块及具体Block块信息；然后将每个Block块对应二进制长度的Stream流数据进行解析和解码，即将对应块长度的图像数据按每3个单位字节转化为1个RGB颜色值。由此可以得到GIF格式图片每帧对应的流数据，最终得到序列帧图片。该数据可在Laya中使用Laya.Image图片控件或者Laya.Animation动画控件播放，由此解析以LZW格式压缩的GIF文件。

上述步骤S2的具体实现方式，证明了可以在Laya引擎中实现对GIF格式图片资源的拆帧，使其在后续能直接在Laya引擎中播放。

S3：在Laya引擎中播放所述GIF格式资源。

在本实施中，同时提供两种播放方式：

如图2中的S3所示，方式一为直接使用Laya引擎的Animation控件加载步骤S2导出的序列帧图片进行播放，以此实现Laya引擎播放GIF格式图片资源。该播放方式适用于GIF格式图片资源尺寸与显示尺寸相符的场景，因为该方式下，图片显示的宽高无法修改，只能与源GIF资源保持一致，其无法控制播放间隔。

如图2中的S3’所示，方式二为首先在Laya的Image图片控件基础上，编写帧动画控件；然后再加载步骤S2导出的序列帧图片进行播放。该方式解决了方式一存在的问题，能够对GIF格式图片资源的尺寸和播放间隔进行调整。

在一具体实例中，方式二所述的在Laya的Image图片控件基础上，指的是使用Image图片控件，实现针对帧动画图片在固定或特定时间间隔逐张绘制图像的方法。S4：定时清除内存中存储的GIF格式资源。

GIF格式图片资源普遍较大，加载与解析可能会造成卡顿，因此优选在应用载入阶段完成。同时，还将定时回收内存中存储的GIF格式资源，及其解析得到的序列帧图片资源。以此，能够维持系统性能处于良好状态。

实施例二

本实施例对实施例一的步骤S2的具体实现方式做进一步限定：

1、创建一个XMLHttpRequest对象(XMLHttpRequest对象用于在后台与服务器交换数据)，调用open(“GET”,GIF资源地址,true)方法，初始化HTTP请求参数，设置XMLHttpRequest的属性overrideMimeType为"text/plain；charset＝x-user-defined"(将响应数据按照纯文本格式来解析，字符集替换为用户自己定义的字符集，使得XMLHttpRequest以纯文本格式来解析接收到的blob数据，最终用户通过this.response拿到的就是图片文件对应的二进制字符串)。调用XMLHttpRequest.send()方法(发送HTTP请求，使用传递给open()方法的参数，以及传递给该方法的可选请求体)。在XMLHttpRequest对象的onload方法取到通过this.response拿到的就是图片文件对应的二进制字符串。

上述对应实施例一的S2.2-2.4。

2、由上述1中获取二进制字符串暂存在stream二进制变量中，创建pos数值变量指向当前读取的字节数。

2.1、pos向右移3位，读取3个字节，得到文件标识”GIF”，即该文件为GIF格式图片文件。

2.2、pos向右移3位，读取3个字节，得到文件版本号”87a”或”89a”区分早期版本和新版本。

2.3、pos向右移2位，读取2个字节，将2位比特数组转换为不带符号的正整数得到GIF图片宽度(width)。

2.4、pos向右移2位，读取2个字节，将2位比特数组转换为不带符号的正整数得到GIF图片高度(height)。

2.5、pos向右移1位，读取1个字节，对比该比特字节的二进制标识(1个byte字节有8位长度的二进制标识)。第1位为全局颜色表标志，即为1时表明全局颜色表有定义；第2～4位代表颜色表中每种基色位长(需要+1)，为111时，每个颜色用8bit表示，即我们熟悉的RGB表示法，一个颜色三字节；第5位表示是否对颜色表里的颜色进行优先度排序，把常用的排在前面，这个主要是为了适应一些颜色解析度低的早期渲染器，现在已经很少使用了。第6位表示颜色表的长度，计算规则是值+1作为2的幂，得到的数字就是颜色表的项数，取最大值111时，项数＝256，也就是说GIF格式最多支持256色的位图，再乘以第2～4位算出的字节数，就是调色盘的总长度。

2.6、pos向右移1位，读取1个字节，定义了图像透明区域的背景色在调色盘里的索引。

2.7、pos向右移1位，读取1个字节，定义了像素宽高比，一般为0。

2.8、pos向右移调色盘总长度位，读取调色盘总长度对应的字节数得到调色盘的所有颜色值GCT(Global Color Table)。

3、读取图形控制扩展块数据，这一部分是可选的(需要89a版本)，可以放在一个图象块(图象标识符)或文本扩展块的前面，用来控制跟在它后面的第一个图象(或文本)的渲染(Render)形式。pos向右移1位，读取1字节：

3.1、若该字节为0x21，标识这是一个扩展块，pos向右移1位，读取1字节：

3.1.1、若为0xF9，标识这是一个图形控制扩展块；pos向右移1位，读取1字节该字节为块大小，不包括终结器，固定值是4；pos向右移1位，读取1字节，二进制0～2位为保留项，二进制3～5位为处置方法(disposalMethod：0-不使用处置方法，1-不处置图形，把图形从当前位置移去，2-回复到背景色，3-回复到先前状态，4～7-自定义)，二进制第6位为用户数据标志，二进制第7位为透明色标志(transparencyFlag)；pos向右移2位，读取2字节为延时时间(delayTime)，单位1/100秒，如果值不为1，表示暂停规定的时间后再继续往下处理数据流；pos向右移1位，读取1个字节为透明色索引值(transparencyIndex)；pos向右移1位，读取1字节为标识块终结，固定值0。

3.1.2、若为0xFE，标识这是一个注释块；注释块中有一个或多个数据块组成，pos向右移1位，读取1字节，若大于零，则为该数据块大小，读取对应字节数即为该数据块内容，若为0标识注释块结束，循环读取直到注释块结束。

3.1.3、若为0x01，标识这是一个图形文本扩展块；pos向右移1位，读取1字节为块大小，固定值12；pos向右移2位，读取2字节为文本框逻辑屏幕的左边界距离；pos向右移2位，读取2字节为文本框离逻辑屏幕的上边界距离；pos向右移2位，读取2字节为文本框高度；pos向右移2位，读取2字节为文本框高度；pos向右移1位，读取1字节为字符单元格宽度；pos向右移1位，读取1字节为字符单元格高度；pos向右移1位，读取1字节为文本前景色索引；pos向右移1位，读取1字节为文本背景色索引；文本数据块中有一个或多个数据块组成，pos向右移1位，读取1字节，若大于零，则为该数据块大小，读取对应字节数即为该数据块内容，若为0标识注释块结束，循环读取直到标识注释块结束。

3.1.4、若为0xFF，标识这是一个应用程序扩展块；pos向右移1位，读取1字节为块大小，固定值11；pos向右移8位，读取8字节用来鉴别应用程序自身的标识(8个连续ASCII字符)；pos向右移3位，读取3字节应用程序定义的特殊标识码(3个连续ASCII字符)；应用程序数据块中有一个或多个数据块组成，pos向右移1位，读取1字节，若大于零，则为该数据块大小，读取对应字节数即为该数据块内容，若为0标识注释块结束，循环读取直到标识注释块结束。

3.2、若为0x2C，则为图像标识符开始；pos向右移2位，读取2字节为X方向偏移量；pos向右移2位，读取2字节为Y方向偏移量；pos向右移2位，读取2字节为图像宽度；

pos向右移2位，读取2字节为图像高度；pos向右移1位，读取1字节，二进制第0位为局部颜色列表标识(lctFlag)，二进制第1位为交织标识，置位时图象数据使用交织方式排列，否则使用顺序排列，二进制第2位为分类标识，如果置位表示紧跟着的局部颜色列表分类排列，二进制3～4位保留，必须初始化0，二进制5～7位为局部颜色列表大小(lctSize)；若lctFlag开启，则需要将2的lctSize+1次方字节数转化为RGB值对应的局部颜色列表(lct)。

3.3、pos向右移1位，读取1字节为LZW编码初始码表大小的位数(lzwMinCodeSize)；图像数据块中有一个或多个数据块组成，pos向右移1位，读取1字节，若大于零，则为该数据块大小，读取对应字节数即为该数据块内容，若为0标识注释块结束，循环读取直到标识注释块结束。读取到LZW压缩的图像编码数据(lzwData)。

3.4、LZW算法又叫“串表压缩算法”就是通过建立一个字符串表，用较短的代码来表示较长的字符串来实现压缩。LZW解压算法步骤：

a、声明临时变量解码数据指针(tempPos)为0，创建动态像素数据输出数值数组(output)；

b、声明临时变量清除码(clearCode)为1的lzwMinCodeSize向左位运算，即(2的lzwMinCodeSize次方)；

c、声明临时变量结束码(eoiCode)为clearCode加1，判断码大小(codeSize)为lzwMinCodeSize加1；

d、创建动态数据数组(dict)，声明临时变量判断码(code)和上一次的判断吗(last)；

e、开启循环函数当当前的code为eoiCoded的时候返回output；

f、循环函数中：

f.1、记录last为code(记录上一次的判断码)；

f.2、获取判断码，即将lzwData的数据读取1个字符，将其转化成ASCII码字符(是基于拉丁字母的一套电脑编码系统，主要用于显示现代英语和其他西欧语言)，读取它的前7个字节，由二进制转化为十进制即该字符对应的判断码；

f.3、判断当前code是否为clearCode，若是将dict清除，若是codeSize重新赋值lzwMinCodeSize加1，将dict赋值为codeSize长度的每位是对应索引值的数组，且将dict数组的clearCode为置为空数组，eoiCode置为空值，跳过当前循环进去下一次循环；

f.4、当获取到的code小于dict数组的长度且last不等于code，dict数组末尾添加上dict数组的last索引的数组连接到当前dict数组的code索引的数组的第1个数组；

f.5、output数组末尾添加上dict数组的code索引的数组；

f.6、若当前dict数组的长度等于2的codeSize次方长度且codeSize小于12时，需要将codeSize加1；

g、最后返回的output数组即为解压后的当前帧图片像素数据。

4、处理图像数据。

4.1、创建一个HTML画布控件(tmpCanvas，用来在网页上绘制图像以及处理每一像素的像素数据)，使用tmpCanvas.getContext(“2d”)获取其context对象(frame，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法)。

4.2、声明临时变量currIdx标记当前处理的是第几帧，若currIdx不为第1帧，判断lastDisposalMethod(上一帧的处置方法，会在清除当前帧后等于disposalMethod)，若lastDisposalMethod不等于3则将disposalRestoreFromIdx(回复到第几帧)记录为上一帧，若lastDisposalMethod等于3，判断disposalRestoreFromIdx不为空将frame.putImageData(frames[disposalRestoreFromIdx].data,0,0)输入上一帧的图像数据，反之调用frame.clearRect将绘制图像区域清空。若lastDisposalMethod为2，也是将绘制图像区域清空。frames用来存放每帧的图片数据。

4.3、声明变量transparency(透明度)，若transparencyFlag打开，则transparency为transparencyIndex，否则为null；声明变量ct(当前颜色列表)，若lctFlag打开，则使用lct反之使用gct。

4.4、创建一个临时的图片数据结构(imgData)由frame.getImageData获取当前帧的图片数据获得，遍历该图像数据的每一个像素，判断当前的像素值(pixel)，若pixel不等于transparency，则

imgData[pixelIndex*4+0]＝ct[pixcel][0]；

imgData[pixelIndex*4+1]＝ct[pixcel][1]；

imgData[pixelIndex*4+2]＝ct[pixcel][2]；

imgData[pixelIndex*4+3]＝255；

即将每个像素点的值从对应的颜色列表中获取，第四位为透明度(有判断transparency此处全部为不透明255)，pixelIndex为遍历的像素点索引。

4.5、将frame.putImageData(imgData)再次将imgData写入画布内容中。

4.6、调用tmpCanvas.toDataURL(“image/png”)即可将图像数据转化为前缀为data:协议的URL，其允许内容创建者向文档中嵌入小文件，该文件类型即可被文中的Laya.Image直接用来显示图像内容。

4.7、将将imgData存储到frames中，以便剩下的帧处理处置方法。

5、重复3与4的步骤直到获取到最后一个为0的字节，即标志GIF的所有帧解析完成。

上述对应实施例一的S2.5-2.6。上述的2.1～2.2对应解析文件头，2.3～2.8对应解析调色板数据区，3对应解析图像数据区，4对应解析图像数据区，5对应解析结束标志区。

实施例三

本实施例对应实施例一，提供一具体运用场景：

在Edbox项目中，由于目标用户是普通玩家，学生等。他们不具备能制作Laya格式的特效资源的能力，但是有能力从网络上下载、制作动态表情包，甚至使用Photoshop等工具制作一些GIF资源等。当该类特效资源制作好后会上传到项目的资源服务器，在实际游戏中可以根据该类资源的标识码(项目中资源对应的标识码)，从资源服务器上获取到下载地址，即可GIF图片资源在网页上加载。

根据项目中的资源标识码获取到资源库中对应的资源URL，在Laya中简单判断URL的资源后缀是否是.gif，若否则资源类型错误，反之开始资源解析。创建XMLHttpRequest对象设置跨域属性，若不设置跨域属性可能导致资源无法下载或无法在前端中对资源数据进行解析处理。在Laya中创建一个XMLHttpRequest对象，加载URL，在加载完成回调里面对返回的资源的responseText资源内容进行解析。分辨按具体流程中的解析过程解析文件头，逻辑屏幕描述区，调色板数据区，图像数据区，结束标志区后，将解析后创建HTMLCanvas用来加载图像数据区的内容，分别把每帧对应的图片数据转化为Laya.Image图片控件可以使用的前缀为data:协议的URL以及获取每帧对应的时延。在实际游戏中若要实际按照GIF资源每帧时延处理，需要自定义帧动画控件，即按照解析出来的GIF单帧时延播放GIF资源，同时自定义脚本能根据自定义需求修改每帧展示的图片大小以及位置。若无硬性要求，可使用Laya.Animation动画控件加载对应的帧数据，该帧动画控件无法设置帧间隔以及特效播放大小。图像数据在上述两种类型资源控件中加载后即可根据需求在特定时机以及特定区域展示GIF资源特效。最后根据实际游戏需求管理GIF资源数据。

实施例四

本实施例对应实施例一和实施例三，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时能够实现上述实施例一至实施例三所述的Laya引擎播放GIF格式资源的方法所包含的步骤。具体的步骤内容在此不进行复述，详情请参阅实施例一和实施例三的记载。

综上所述，本发明提供的Laya引擎播放GIF格式资源的方法、存储介质，能使Laya引擎支持GIF格式资源的直接播放，从而更具普遍适用性，提高Laya引擎的实用性；能够在Laya引擎中动态解析和播放，实施方式简便、减少交互，提高了解析效率；能够基于二进制比特数据进行动态解析获取序列帧，解析准确率高；能够及时回收无效资源，确保系统性能良好。

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