阅读说明：本技术 Laya引擎播放GIF格式资源的方法、存储介质 (Method for playing GIF format resource by Laya engine and storage medium ) 是由 刘德建 刘芳华 林琛 于 2020-04-24 设计创作，主要内容包括：本发明提供Laya引擎播放GIF格式资源的方法、存储介质,方法包括：加载GIF格式资源至内存中；在Laya引擎中解析所述GIF格式资源,获取对应的序列帧图片；通过方式一或方式二播放所述序列帧图片；所述方式一为将所述序列帧图片加载至动画控件；所述方式二为将序列帧图片加载至编写了帧动画控件的Image图片控件中。本发明能使Laya引擎支持GIF格式资源的直接播放,从而更具普遍适用性,提高Laya引擎的实用性；能够在Laya引擎中动态解析和播放,实施方式简便、减少交互,提高了解析效率；能够基于二进制比特数据进行动态解析获取序列帧,解析准确率高；能够及时回收无效资源,确保系统性能良好。(The invention provides a method and a storage medium for playing GIF (graphic interchange Format) resources by a Laya engine, wherein the method comprises the following steps: loading GIF format resources into a memory; analyzing the GIF format resource in a Laya engine to obtain a corresponding sequence frame picture; playing the sequence frame picture by a first mode or a second mode; the first mode is to load the sequence frame picture to an animation control; and the second mode is to load the sequence frame picture into the Image picture control in which the frame animation control is written. The invention can enable the Laya engine to support the direct playing of the GIF format resource, thereby having more universal applicability and improving the practicability of the Laya engine; the dynamic analysis and playing can be realized in the Laya engine, the implementation mode is simple and convenient, the interaction is reduced, and the analysis efficiency is improved; the sequence frame can be obtained by dynamic analysis based on binary bit data, and the analysis accuracy is high; invalid resources can be timely recovered, and good system performance is ensured.)

A method for playing GIF-formatted assets by Laya engine, comprising:

loading GIF format resources into a memory;

analyzing the GIF format resource in a Laya engine to obtain a corresponding sequence frame picture;

playing the sequence frame picture by a first mode or a second mode; the first mode is to load the sequence frame picture to an animation control; and the second mode is to load the sequence frame picture into the Image picture control in which the frame animation control is written.

2. The method for playing GIF-formatted resources by Laya engine as claimed in claim 1, wherein the parsing of the GIF-formatted resources in the Laya engine to obtain the corresponding sequence frame pictures specifically comprises:

loading the GIF format resource through a picture control of a Laya engine;

setting the GIF format resource to be allowed to cross domains;

acquiring image data by loading and analyzing the set GIF format binary resource of the GIF format resource;

analyzing and decoding the image data to obtain pixel data corresponding to each frame of the GIF format resource;

and drawing each frame of pixel data to a canvas control, and transcoding to obtain a sequence frame picture corresponding to the GIF format resource.

3. The method for playing GIF-formatted resources by Laya engine as claimed in claim 2, wherein the parsing and decoding the image data to obtain the pixel data corresponding to each frame of the GIF-formatted resources comprises:

reading attribute information of image data to obtain block information;

and analyzing and escaping the image data of each block according to the binary length to obtain pixel data corresponding to each frame of the GIF format resource.

4. The method of claim 2, wherein the loading of the GIF-formatted asset via the picture control of the Laya engine further comprises:

and verifying whether the format of the GIF format resource is the GIF format.

5. The method for playing GIF-formatted resources by Laya engine of claim 1, wherein the loading GIF-formatted resources into the memory specifically comprises:

and loading the GIF format resource into the memory through the canvas control.

6. The method of claim 1, wherein the Laya engine plays GIF-formatted assets, the method further comprising:

and clearing the GIF format resources stored in the memory at regular time.

7. A computer readable storage medium, on which a computer program is stored, wherein the program, when executed by a processor, is capable of implementing the steps included in the method for playing the GIF-format asset by the Laya engine of any one of claims 1 to 6.

Technical Field

The invention relates to the field of Laya engines, in particular to a method and a storage medium for playing GIF (graphic interchange Format) resources by a Laya engine.

Background

The Laya game engine is a game engine based on development of an Html5 game, bottom rendering is realized based on an Html5 native Canvas or WebGL, and direct display of GIF format picture resources by an Html5 native control cannot be supported due to partial limitation problems. If the picture control of Laya is directly used to play the GIF format resource, the picture can only stay in the first frame. An alternative is that the animation resources in the Laya format can be made using LayaIDE. However, resources in this format belong to the specific resources of the Laya engine, and currently, ordinary users or non-Laya engine production artists do not have the ability to produce such resources.

When a game production team can only provide a universal GIF special effect or animation resource due to hard requirements or resource providers, the Laya game engine cannot normally show the resource in the prior art.

In the prior art, a method for making a Laya sequence frame Animation by using LayaIDE in a Laya game engine is provided, and Animation playing is used; the method comprises the steps of selecting a component in batch to drag the component to a time axis, directly creating and finishing the frame-by-frame animation, and optimizing the frame-by-frame animation by using the function of a time axis animation editor. Both the above two methods are the Laya frame animation and Laya atlas resources respectively made by Laya IDE, the resources belong to the special resources of the Laya engine, and the problem that ordinary users or non-Laya engine making artists cannot make the resources is also existed.

Therefore, there is a need to provide a technical solution for directly playing the most common and popular GIF format picture resources in the Laya engine.

Disclosure of Invention

The technical problem to be solved by the invention is as follows: a method and a storage medium for playing GIF-format resources by a Laya engine are provided, the type of the played resources supported by the Laya engine is expanded, and the functions of the Laya engine are optimized.

In order to solve the technical problems, the invention adopts the technical scheme that:

the method for playing the GIF-format resource by the Laya engine comprises the following steps:

loading GIF format resources into a memory;

analyzing the GIF format resource in a Laya engine to obtain a corresponding sequence frame picture;

playing the sequence frame picture by a first mode or a second mode; the first mode is to load the sequence frame picture to an animation control; and the second mode is to load the sequence frame picture into the Image picture control in which the frame animation control is written.

The invention provides another technical scheme as follows:

a computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, is capable of implementing the steps included in the method for playing back GIF-formatted assets by the Laya engine as described in any one of the above.

The invention has the beneficial effects that: compared with the existing Laya engine which can only play the Laya resources (Laya frame animation or Laya atlas resources), the Laya engine has the defects of high difficulty in manufacturing the resources and limitation. The invention expands the resource playing type of the Laya engine, so that the Laya engine can play the ubiquitous GIF-format picture resource, is not limited to only supporting the resource playing of a single format any more, obviously improves the practicability of the Laya engine and can well meet more requirements.

Drawings

FIG. 1 is a flowchart illustrating a method for playing GIF-formatted resources by a Laya engine according to an embodiment of the present invention;

fig. 2 is a flowchart illustrating a method for playing GIF-formatted resources by the Laya engine according to an embodiment of the present invention.

Detailed Description

In order to explain technical contents, achieved objects, and effects of the present invention in detail, the following description is made with reference to the accompanying drawings in combination with the embodiments.

The most key concept of the invention is as follows: and analyzing the GIF format resources into corresponding frame sequence pictures in a Laya engine, and playing the pictures by using a native control.

The technical terms related to the invention are explained as follows:

referring to fig. 1, the present invention provides a method for playing GIF-formatted resources by Laya engine, comprising:

loading GIF format resources into a memory;

analyzing the GIF format resource in a Laya engine to obtain a corresponding sequence frame picture;

playing the sequence frame picture by a first mode or a second mode; the first mode is to load the sequence frame picture to an animation control; and the second mode is to load the sequence frame picture into the Image picture control in which the frame animation control is written.

From the above description, the beneficial effects of the present invention are: the invention can overcome the problems that only the playing of the Laya resources is supported in the Laya engine in the prior art and the manufacturing difficulty of the Laya resources is high. According to the invention, the GIF format picture resource is dynamically analyzed in the Laya engine, so that the Laya engine supports the GIF format picture resource, the resource types supported by the Laya engine are expanded, the practicability is improved, and the expansion of functions is realized.

Further, the analyzing the GIF format resource in the Laya engine to obtain the corresponding sequence frame picture specifically includes:

loading the GIF format resource through a picture control of a Laya engine;

setting the GIF format resource to be allowed to cross domains;

acquiring image data by loading and analyzing the set GIF format binary resource of the GIF format resource;

analyzing and decoding the image data to obtain pixel data corresponding to each frame of the GIF format resource;

and drawing each frame of pixel data to a canvas control, and transcoding to obtain a sequence frame picture corresponding to the GIF format resource.

As can be seen from the above description, the unframing of GIF-formatted resources in the Laya engine is implemented so as to be supported by the Laya engine.

Further, the air conditioner is provided with a fan,

analyzing and decoding the image data to obtain pixel data corresponding to each frame of the GIF format resource, specifically:

reading attribute information of image data to obtain block information;

and analyzing and escaping the image data of each block according to the binary length to obtain pixel data corresponding to each frame of the GIF format resource.

As can be seen from the above description, the stream data of each block is converted into corresponding RGB color values according to the binary length, so as to obtain the pixel data of each frame of the GIF format picture.

Further, the loading the GIF-format resource through the picture control of the Laya engine, before, further comprising:

and verifying whether the format of the GIF format resource is the GIF format.

According to the description, whether the resource to be analyzed is in the GIF format or not is simply verified, so that part of non-GIF format resources can be effectively eliminated, errors in the subsequent loading and analyzing processing process are avoided, and the performance consumption is reduced.

Further, the Image picture control in which the frame animation control is written specifically includes:

and the Image picture control is used for realizing a method for drawing the images one by one at fixed or specific time intervals aiming at the frame animation picture.

It can be known from the above description that writing a frame animation control based on the Image picture control of Laya can support modifying the width and height of the display and control the playing interval.

Further, the loading of the GIF format resource into the memory specifically includes:

and loading the GIF format resource into the memory through the canvas control.

As can be seen from the above description, loading of the GIF formatted resources can be accomplished directly using the native Canvas control.

Further, the method further comprises:

and clearing the GIF format resources stored in the memory at regular time.

According to the description, the outdated resources are cleaned regularly, so that the resources are recovered in time, and the influence on the system performance is avoided.

The invention provides another technical scheme as follows:

a computer-readable storage medium, on which a computer program is stored, which when executed by a processor, is capable of implementing the steps included in a method for playing a GIF-formatted asset by a Laya engine as follows:

loading GIF format resources into a memory;

analyzing the GIF format resource in a Laya engine to obtain a corresponding sequence frame picture;

playing the sequence frame picture by a first mode or a second mode; loading the sequence frame picture to an animation control in a first mode; and the second mode is to load the sequence frame picture into the Image picture control in which the frame animation control is written.

Further, the analyzing the GIF format resource in the Laya engine to obtain the corresponding sequence frame picture specifically includes:

loading the GIF format resource through a picture control of a Laya engine;

setting the GIF format resource to be allowed to cross domains;

acquiring image data by loading and decoding the set GIF format binary resource of the GIF format resource;

analyzing and analyzing the image data to obtain pixel data corresponding to each frame of the GIF format resource;

and drawing each frame of pixel data to a canvas control, and transcoding to obtain a sequence frame picture corresponding to the GIF format resource.

Further, the air conditioner is provided with a fan,

analyzing and decoding the image data to obtain pixel data corresponding to each frame of the GIF format resource, specifically:

reading attribute information of image data to obtain block information;

and analyzing and escaping the image data of each block according to the binary length to obtain pixel data corresponding to each frame of the GIF format resource.

Further, the loading the GIF-format resource through the picture control of the Laya engine, before, further comprising:

and verifying whether the format of the GIF format resource is the GIF format.

Further, the loading of the GIF format resource into the memory specifically includes:

and loading the GIF format resource into the memory through the canvas control.

Further, the method further comprises:

and clearing the GIF format resources stored in the memory at regular time.

As can be understood from the above description, those skilled in the art can understand that all or part of the processes in the above technical solutions can be implemented by instructing related hardware through a computer program, where the program can be stored in a computer-readable storage medium, and when executed, the program can include the processes of the above methods. The program can also achieve advantageous effects corresponding to the respective methods after being executed by a processor.

The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.

Example one

Referring to fig. 2, the present embodiment provides a method for playing GIF-format resources by Laya engine, so as to realize the support of GIF-format resources by Laya engine, and thus the method is not limited to only supporting a single resource format, and expands the functions of Laya engine.

The method comprises the following steps:

s1: loading GIF format resources into a memory;

specifically, a JavaScript native Canvas control is used to load the GIF format picture into the memory.

S2: analyzing the GIF format resource in a Laya engine to obtain a corresponding sequence frame picture; that is, a single-frame picture in which the GIF format resource is parsed and the base64 picture encoding format is derived is stored in the memory.

The analysis process is as follows:

s2.1: simply verifying whether the format suffix loaded into the GIF resource is lower case or not; if yes, executing the next step; if not, the process is ended, and the loaded resource is prompted to be in a non-GIF format.

Corresponding format debugging processing exists in a specific analysis algorithm, and the step aims to eliminate partial non-GIF format resources, avoid subsequent loading analysis processing and reduce performance consumption.

S2.2: loading the picture resource with HTML5 native HTMLImageElement picture control in Laya;

s2.3: after setting the resource permission cross-domain attribute by using the native XMLHttpRequest, requesting to load a response attribute of the resource callback, namely the GIF format image resource;

s2.4: analyzing a response attribute of the resource requested by the XMLHttpRequest, and reading image data;

s2.5: analyzing and decoding the image data to obtain pixel data of each frame corresponding to the GIF;

s2.6: and drawing each frame of pixel data on a canvas HTMLCanvaseElement canvas control, and transcoding the pixel data into a picture format resource which can be directly displayed in Laya, thereby obtaining a sequence frame picture corresponding to the GIF format resource.

In a specific example, the S2.5 is specifically realized by the following processes:

after reading the image data, firstly removing a header specific field and a version number; reading some special attributes, wherein the special attributes comprise the Block blocks and specific Block information; and then, analyzing and decoding Stream data with a binary length corresponding to each Block Block, namely converting the image data with the corresponding Block length into 1 RGB color value according to every 3 unit bytes. Therefore, stream data corresponding to each frame of the picture in the GIF format can be obtained, and the picture in the sequence frame is finally obtained. This data can be played in Laya using Laya. image picture control or Laya. animation control, thereby parsing the GIF file compressed in LZW format.

The specific implementation manner of the step S2 proves that the framing of the GIF format picture resource can be implemented in the Laya engine, so that the GIF format picture resource can be directly played in the Laya engine subsequently.

S3: playing the GIF-formatted asset in the Laya engine.

In this embodiment, two playing modes are provided simultaneously:

as shown in S3 in fig. 2, the first way is to directly use the Animation control of the Laya engine to load the sequence frame pictures derived in step S2 for playing, so as to implement the Laya engine to play the GIF format picture resources. The playing mode is suitable for scenes with the sizes of the image resources in the GIF format consistent with the display sizes, because the width and the height of the image display cannot be modified in the mode, the image display can only be consistent with the source GIF resources, and the playing interval cannot be controlled.

As shown in S3' of fig. 2, the second way is to write a frame animation control on the basis of the Image picture control of Laya; and then the sequence frame pictures derived in step S2 are loaded for playing. The method solves the problem existing in the first method, and can adjust the size and the playing interval of the GIF format picture resource.

In a specific example, the manner two described above, based on the Image picture control of Laya, refers to a method for implementing a method of drawing images one by one at a fixed or specific time interval for frame animation pictures by using the Image picture control. S4: and clearing the GIF format resources stored in the memory at regular time.

The GIF format picture resources are generally large, and loading and parsing may cause a jam, and therefore are preferably completed in the application loading stage. Meanwhile, the GIF format resources stored in the memory and the sequence frame picture resources obtained by analyzing the GIF format resources are recovered at regular time. Thus, system performance can be maintained in a good state.

Example two

The embodiment further defines a specific implementation manner of step S2 in the first embodiment:

1. creating an XMLHttpRequest object (the XMLHttpRequest object is used for exchanging data with a server in the background), calling an open (GET, GIF resource address, true) method, initializing HTTP request parameters, and setting an attribute overrideMimeType of the XMLHttpRequest to 'text/plane'; charset ═ x-user-defined "(response data is parsed in plain text format, the character set is replaced with the user's own defined character set, so that XMLHttpRequest parses the received blob data in plain text format, what the end user gets through this. Send () method is called (send HTTP request, use parameters passed to open () method, and optional requestor passed to this method). The onload method of the XMLHttpRequest object takes the binary string corresponding to the picture file taken by this.

S2.2-2.4 of the first corresponding embodiment.

2. And (3) temporarily storing the binary character string obtained from the step 1 in a stream binary variable, and creating a pos value variable to point to the currently read byte number.

2.1, shifting pos to the right by 3 bits, and reading 3 bytes to obtain a file identifier 'GIF', namely the file is a GIF format picture file.

2.2, pos shifts 3 bits to the right, reads 3 bytes, gets the file version number "87 a" or "89 a" to distinguish the early version from the new version.

2.3, pos shifts 2 bits to the right, reads 2 bytes, converts the 2-bit array into a positive integer without sign to obtain the GIF picture width (width).

2.4, pos shifts 2 bits to the right, reads 2 bytes, converts the 2-bit array into a positive integer without sign to get the height (height) of the GIF picture.

2.5, pos shifts 1 bit to the right, reads 1 byte, compares the binary identification of the byte of this bit (1 byte has binary identification of 8 bits in length). The 1 st bit is a global color table mark, namely, the 1 st bit indicates that the global color table has definition; the 2 nd to 4 th bits represent the bit length (needing +1) of each primary color in the color table, and when the bit length is 111, each color is represented by 8 bits, namely, the familiar RGB representation method is one color with three bytes; bit 5 indicates whether to prioritize colors in the color table, with common ones in front, which is mainly to accommodate early renderers with low color resolution and is now rarely used. The 6 th bit represents the length of the color chart, the calculation rule is that the value +1 is a power of 2, the obtained number is the number of terms of the color chart, when the maximum value 111 is taken, the number of terms is 256, that is, the GIF format supports 256-color bitmaps at most, and the number of bytes calculated by multiplying the 2 nd to 4 th bits is the total length of the palette.

2.6 pos shifts 1 bit to the right, reading 1 byte, defining the index of the background color of the transparent area of the image in the palette.

2.7 pos shifts 1 bit to the right, reading 1 byte, defining a pixel aspect ratio, typically 0.

2.8, shifting pos to the right by the total length bit of the palette, and reading the byte number corresponding to the total length of the palette to obtain all Color values GCT (Global Color Table) of the palette.

3. The graphics control extension block data, which is optional (requiring version 89 a), is read and may be placed in front of an image block (image identifier) or text extension block to control the rendering (Render) of the first image (or text) following it. pos shifts 1 bit to the right, reading 1 byte:

3.1, if the byte is 0x21, identify this as an extended block, shift pos 1 bit to the right, read 1 byte:

3.1.1, if 0xF9, identifying this as a graphics control extension block; pos is shifted to the right by 1 bit, 1 byte is read, the byte is of a block size, a terminator is not included, and the fixed value is 4; pos is shifted to the right by 1 bit, 1 byte is read, binary 0-2 bits are reserved items, binary 3-5 bits are a disposal method (dispusalmethod: 0-no disposal method is used, 1-no disposal of a graph is performed, the graph is removed from the current position, 2-the graph is returned to the background color, 3-the graph is returned to the previous state, 4-7-self definition is performed), binary 6 th bit is a user data mark, and binary 7 th bit is a transparent color mark (transparency flag); pos is shifted to the right by 2 bits, 2 bytes are read as delay time (delayTime), the unit is 1/100 seconds, and if the value is not 1, the data stream is paused for a specified time and then is continuously processed downwards; pos shifts 1 bit to the right, reads 1 byte as a transparent color index value (transparency index); pos is shifted to the right by 1 bit, and reading 1 byte is the end of the identification block, fixed value 0.

3.1.2, if the value is 0xFE, identifying that the value is a comment block; and if the number of bytes is 0, marking the end of the comment block, and circularly reading until the end of the comment block.

3.1.3, if 0x01, identifying that the block is a graphic text extension block; pos shifts right by 1 bit, reads 1 byte as a block size, fixed value 12; pos shifts 2 bits to the right, reads 2 bytes as the left boundary distance of the text box logical screen; pos is shifted to the right by 2 bits, and 2 bytes are read as the upper boundary distance between the text box and the logic screen; pos is shifted to the right by 2 bits, and 2 bytes are read as the height of a text box; pos is shifted to the right by 2 bits, and 2 bytes are read as the height of a text box; pos shifts to the right by 1 bit, and reads 1 byte as the character cell width; pos is shifted to the right by 1 bit, and 1 byte is read as the height of a character cell; pos is shifted to the right by 1 bit, and 1 byte is read as a text foreground color index; pos is shifted to the right by 1 bit, and 1 byte is read as a text background color index; the text data block is composed of one or more data blocks, pos shifts 1 bit to the right, 1 byte is read, if the number is larger than zero, the size of the data block is the size of the data block, the number of corresponding bytes is read to be the content of the data block, if the number is 0, the annotation block is marked, and the reading is circulated until the annotation block is marked.

3.1.4, if 0xFF, identifying that the block is an application extension block; pos shifts right by 1 bit, reads 1 byte as a block size, fixed value 11; pos shifts 8 bits to the right, reads 8 bytes to identify the application itself (8 consecutive ASCII characters); pos shifts 3 bits to the right, reads the 3 byte application defined special identification code (3 consecutive ASCII characters); and if the number of bytes is 0, marking the end of the comment block, and circularly reading until marking the end of the comment block.

3.2, if 0x2C, start with the image identifier; pos is shifted to the right by 2 bits, and 2 bytes are read as an X-direction offset; pos is shifted to the right by 2 bits, and 2 bytes are read as Y-direction offset; pos is shifted to the right by 2 bits, and 2 bytes are read as the image width;

pos is shifted to the right by 2 bits, and 2 bytes are read as the image height; pos is shifted to the right by 1 bit, 1 byte is read, the 0 th bit of the binary system is a local color list identifier (lctFlag), the 1 st bit of the binary system is an interleaving identifier, the image data is arranged in an interleaving mode during setting, otherwise, the binary system is arranged in sequence, the 2 nd bit of the binary system is a classification identifier, if the setting indicates that the following local color list is arranged in a classification mode, 3-4 bits of the binary system are reserved, 0 must be initialized, and 5-7 bits of the binary system are local color list size (lctSize); if lctFlag is turned on, it is necessary to convert the lctSize +1 th byte count of 2 into a local color list corresponding to the RGB value (lct).

3.3, pos shifts 1 bit to the right, reads 1 byte of lzwMinCodeSize; the image data block is composed of one or more data blocks, pos is shifted to the right by 1 bit, 1 byte is read, if the pos is larger than zero, the size of the data block is the size of the data block, the corresponding byte number is read to be the content of the data block, if the pos is 0, the annotation block is marked to be ended, and the reading is circulated until the annotation block is marked to be ended. LZW compressed image encoded data (lzwData) is read.

3.4 the LZW algorithm, also called "string table compression algorithm", is to implement compression by building a string table, with shorter codes representing longer strings. LZW decompression algorithm step:

a. declaring a temporary variable decoding data pointer (tempPos) to be 0, and creating a dynamic pixel data output numerical value array (output);

b. lzwMinCodeSize, which declares the temporary variable clear code (clearCode) as 1, operates to the left, i.e., (lzwMinCodeSize power of 2);

c. declare that the temporary variable end code (eoiCode) is clearCode plus 1, and the judgment code size (codeSize) is lzwMinCodeSize plus 1;

d. creating a dynamic data array (ditt), and declaring a temporary variable judgment code (code) and a last judgment code (last);

e. starting a loop function and returning output when the current code is eoiCoded;

f. in the round function:

f.1, recording last as code (recording the judgment code of the last time);

f.2, acquiring a judgment code, namely reading 1 character from the data of lzwData, converting the character into an ASCII code character (a set of computer coding system based on Latin letters and mainly used for displaying modern English and other Western European languages), reading the first 7 bytes of the character, and converting the binary system into a decimal system, namely the judgment code corresponding to the character;

f.3, judging whether the current code is clearCode, if so, removing dit, if so, reassigning lzwMinCodeSize to the codeSize and adding 1, assigning dit as an array of which each bit of the length of the codeSize corresponds to an index value, setting the clearCode of the dit array as a null array, setting the eoiCode as a null value, and skipping the current cycle into the next cycle;

f.4, when the obtained code is smaller than the length of the dit array and last is not equal to the code, connecting the array with last index of the dit array added at the end of the dit array to the 1 st array of the array with code index of the current dit array;

f.5, adding a code index array of the fact array at the end of the output array;

f.6, if the length of the current ditt array is equal to the length of 2 codeSize power and the codeSize is less than 12, adding 1 to the codeSize;

g. and finally, the returned output array is pixel data of the decompressed current frame picture.

4. The image data is processed.

4.1, create an HTML canvas control (tmpCanvas, used to draw images on a web page and process the pixel data for each pixel), use tmpCanvas. getContext ("2 d") to get its context object (frame, with various drawing paths, rectangles, circles, characters, and methods to add images).

4.2, declaring a temporary variable currIdx to mark that the current frame is currently processed, if currIdx is not the 1 st frame, determining that lastDisposalMethod (the handling method of the previous frame is equal to disposalMethod after clearing the current frame), if lastDisposalMethod is not equal to 3, recording disposalmeomix (reverting to the several frames) as the previous frame, if lastDisposalMethod is equal to 3, determining that disposalmeomix is not null, inputting image data of the previous frame, if frame [ disposalmethx ]. data,0,0), otherwise, calling frame. If lastdisposal method is 2, the rendering image area is also cleared. frames are used to store the picture data for each frame.

4.3, declaring a variable transparency, wherein if the transparency is opened, the transparency is transplarencyIndex, and otherwise, the transparency is null; variable ct (current color list) is declared and if lctFlag is open lct is used and gct is used instead.

And 4.4, creating a temporary picture data structure (imgData), acquiring the picture data of the current frame by the getImageData, traversing each pixel of the image data, judging the current pixel value (pixel), and if the pixel is not equal to the transparency, judging that the current pixel value (pixel) is not equal to the 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；

That is, the value of each pixel is obtained from the corresponding color list, the fourth bit is transparency (all of which are opaque 255 if transparency is judged), and the pixelIndex is the index of the traversed pixel.

Putimagedata (imgData) again writes imgData into the canvas contents.

Protocol URLs, which allow content creators to embed small files into documents, the file type being directly usable by laya. image in the text to display image content.

4.7, storing imgData into frames for the rest of the frame processing handling method.

5. Repeating the steps 3 and 4 until the last byte of 0 is acquired, namely all frames of the flag GIF are parsed.

S2.5-2.6 of the first corresponding embodiment. The above 2.1 to 2.2 correspond to the parsing header, 2.3 to 2.8 correspond to the parsing palette data area, 3 corresponds to the parsing image data area, 4 corresponds to the parsing image data area, and 5 corresponds to the parsing end flag area.

EXAMPLE III

This embodiment provides a specific application scenario corresponding to the first embodiment:

in the Edbox project, since the target user is a general player, a student, or the like. They do not have the ability to make specific resources in the Laya format, but have the ability to download and make dynamic emoticons from the internet, even make some GIF resources using tools such as Photoshop, etc. After the special-effect resources are manufactured, the special-effect resources are uploaded to a resource server of the project, and in an actual game, a download address can be obtained from the resource server according to identification codes of the resources (identification codes corresponding to the resources in the project), so that the GIF picture resources can be loaded on a webpage.

And acquiring a corresponding resource URL in the resource library according to the resource identification code in the project, simply judging whether a resource suffix of the URL is [ gif ] in Laya, and if not, starting resource analysis if the resource type is wrong. And (3) creating an XMLHttpRequest object and setting a cross-domain attribute, wherein if the cross-domain attribute is not set, the resource cannot be downloaded or the resource data cannot be analyzed in the front end. And creating an XMLHttpRequest object in Laya, loading a URL, and analyzing the responseText resource content of the returned resource in the callback after loading. Resolving a file header, a logic screen description area, a palette data area, an image data area and an end mark area which are analyzed according to an analysis process in a specific flow, creating an HTMLcanvas for loading the content of the image data area after analysis, and respectively converting picture data corresponding to each frame into prefix data which can be used by a Laya image picture control, wherein the prefix data is URL of a protocol and time delay corresponding to each frame is obtained. In the actual game, if the time delay of each frame of the GIF resource is to be processed actually, a frame animation control needs to be customized, namely the GIF resource is played according to the analyzed single-frame time delay of the GIF, and meanwhile, the size and the position of the picture displayed by each frame can be modified according to the customized requirement by a customized script. If no hard requirement exists, corresponding frame data can be loaded by using a Laya animation control, and the frame animation control cannot set the frame interval and the special effect playing size. After the image data are loaded in the two types of resource controls, the GIF resource special effect can be displayed in a specific time and a specific area according to requirements. And finally, managing the GIF resource data according to the actual game requirements.

Example four

This embodiment corresponds to the first embodiment and the third embodiment, and provides a computer-readable storage medium, on which a computer program is stored, where the computer program is capable of implementing, when executed by a processor, the steps included in the method for playing the GIF-format resource by the Laya engine described in the first to third embodiments. The detailed steps are not repeated here, and refer to the descriptions of the first embodiment and the third embodiment for details.

In summary, the method and the storage medium for playing the GIF-format resource by the Laya engine provided by the present invention can enable the Laya engine to support the direct playing of the GIF-format resource, thereby having more general applicability and improving the practicability of the Laya engine; the dynamic analysis and playing can be realized in the Laya engine, the implementation mode is simple and convenient, the interaction is reduced, and the analysis efficiency is improved; the sequence frame can be obtained by dynamic analysis based on binary bit data, and the analysis accuracy is high; invalid resources can be timely recovered, and good system performance is ensured.

The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all equivalent changes made by using the contents of the present specification and the drawings, or applied directly or indirectly to the related technical fields, are included in the scope of the present invention.