Geek Answers Handbook

How to set gif to function

I am creating a game, and in my game, when HERO stays with MONSTER, a gif will appear to scare the player. But I do not know how to do this. I tried to put PHP or HTML code, but it does not work ... AtualizaTela2() function. This is my main code:

 <!DOCTYPE HTML> <html> <head> <title>Hero Escape Game</title> <script language="JavaScript" type="text/javascript"> var objCanvas=null; // object that represents the canvas var objContexto=null; // Hero positioning control var xHero=300; var yHero=100; // Monster positioning control var xMonster=620; var yMonster=0; var imgFundo2 = new Image(); imgFundo2.src = "Images/Pista2.png"; var imgMonster = new Image(); imgMonster.src = "Images/Monster.png"; var imgHero = new Image(); imgHero.src = "Images/Hero.png"; function AtualizaTela2(){ if((xHero >= xMonster-10)&&(xHero <= xMonster + 10)) { /*gif here*/ } objContexto.drawImage(imgFundo2,0,0); objContexto.drawImage(imgHero, xHero, yHero); objContexto.drawImage(imgMonster, xMonster, yMonster); function Iniciar(){ objCanvas = document.getElementById("meuCanvas"); objContexto = objCanvas.getContext("2d"); AtualizaTela2(); } /* the function HeroMovement() and MonsterMovement() are not here */ } </script> </head> <body onLoad="Iniciar();" onkeydown="HeroMovement(event);"> <canvas id="meuCanvas" width="1233" height="507" style="border:1px solid #000000;"> Seu browser não suporta o elemento CANVAS, atualize-se!!! </canvas><BR> </body> </html>

This is simplified code because the real code is very big!

Thanks for the help!:)

+7
javascript html gif canvas
source share
5 answers

Upload and play GIF images on canvas.

Sorry, the answer exceeded the size limit; I had to delete most of the detailed code comments.

I will not go into details, as the whole process is rather complicated.

The only way to get GIF animations in the canvas is to decode the GIF image in javascript. Fortunately, the format is not too complicated with data placed in blocks that contain image size, color pallets, time information, a comment box, and how to draw frames.

Custom download and GIF player.

The following example contains an object named GIF that will create custom-format GIFs from URLs that can play GIFs, just like video plays. You can also randomly access all GIF frames in any order.

There are many callbacks and options. The comments contain basic usage information, and the code shows how to load the gif. There are functions pause and play , seek(timeInSeconds) and seekFrame(frameNumber) , properties to control playSpeed and much more. There are no shuttle event events since access is immediate.

  var myGif = GIF(); myGif.load("GIFurl.gif");

After loading

  ctx.drawImage(myGif.image,0,0); // will draw the playing gif image

Or access frames through the frames buffer

  ctx.drawImage(myGif.frames[0].image,0,0); // draw frame 0 only.

Go to the end of the GIF to see all the comments with options.

GIF must be the same domain or have a CORS header

In the demo version of the gif from the wiki commons and contains more than 250 frames, some low-maintenance devices will have problems with this, since each frame is converted to a full RGBA image, which makes the loaded GIF significantly larger than the size of the gif file.

Demo

Loads a gif displaying frames and the number of frames as loaded. When loading in the background, 100 particles with random access frames playing at independent speeds and independent directions are displayed.

A foreground image is a gif playing with a frame rate embedded in a file.

The code is as is, as an example, and NOT for commercial use.

 const ctx = canvas.getContext("2d"); var myGif; // Can not load gif cross domain unless it has CORS header const gifURL = "https://upload.wikimedia.org/wikipedia/commons/a/a2/Wax_fire.gif"; // timeout just waits till script has been parsed and executed // then starts loading a gif setTimeout(()=>{ myGif = GIF(); // creates a new gif myGif.onerror = function(e){ console.log("Gif loading error " + e.type); } myGif.load(gifURL); },0); // Function draws an image function drawImage(image,x,y,scale,rot){ ctx.setTransform(scale,0,0,scale,x,y); ctx.rotate(rot); ctx.drawImage(image,-image.width / 2, -image.height / 2); } // helper functions const rand = (min = 1, max = min + (min = 0)) => Math.random() * (max - min) + min; const setOf =(c,C)=>{var a=[],i=0;while(i<c){a.push(C(i++))}return a}; const eachOf =(a,C)=>{var i=0;const l=a.length;while(i<l && C(a[i],i++,l)!==true);return i}; const mod = (v,m) => ((v % m) + m) % m; // create 100 particles const particles = setOf(100,() => { return { x : rand(innerWidth), y : rand(innerHeight), scale : rand(0.15, 0.5), rot : rand(Math.PI * 2), frame : 0, frameRate : rand(-2,2), dr : rand(-0.1,0.1), dx : rand(-4,4), dy : rand(-4,4), }; }); // Animate and draw 100 particles function drawParticles(){ eachOf(particles, part => { part.x += part.dx; part.y += part.dy; part.rot += part.dr; part.frame += part.frameRate; part.x = mod(part.x,innerWidth); part.y = mod(part.y,innerHeight); var frame = mod(part.frame ,myGif.frames.length) | 0; drawImage(myGif.frames[frame].image,part.x,part.y,part.scale,part.rot); }); } var w = canvas.width; var h = canvas.height; var cw = w / 2; // center var ch = h / 2; // main update function function update(timer) { ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform if (w !== innerWidth || h !== innerHeight) { cw = (w = canvas.width = innerWidth) / 2; ch = (h = canvas.height = innerHeight) / 2; } else { ctx.clearRect(0, 0, w, h); } if(myGif) { // If gif object defined if(!myGif.loading){ // if loaded // draw random access to gif frames drawParticles(); drawImage(myGif.image,cw,ch,1,0); // displays the current frame. }else if(myGif.lastFrame !== null){ // Shows frames as they load ctx.drawImage(myGif.lastFrame.image,0,0); ctx.fillStyle = "white"; ctx.fillText("GIF loading frame " + myGif.frames.length ,10,21); ctx.fillText("GIF loading frame " + myGif.frames.length,10,19); ctx.fillText("GIF loading frame " + myGif.frames.length,9,20); ctx.fillText("GIF loading frame " + myGif.frames.length,11,20); ctx.fillStyle = "black"; ctx.fillText("GIF loading frame " + myGif.frames.length,10,20); } }else{ ctx.fillText("Waiting for GIF image ",10,20); } requestAnimationFrame(update); } requestAnimationFrame(update); /*============================================================================ Gif Decoder and player for use with Canvas API's **NOT** for commercial use. To use var myGif = GIF(); // creates a new gif var myGif = new GIF(); // will work as well but not needed as GIF() returns the correct reference already. myGif.load("myGif.gif"); // set URL and load myGif.onload = function(event){ // fires when loading is complete //event.type = "load" //event.path array containing a reference to the gif } myGif.onprogress = function(event){ // Note this function is not bound to myGif //event.bytesRead bytes decoded //event.totalBytes total bytes //event.frame index of last frame decoded } myGif.onerror = function(event){ // fires if there is a problem loading. this = myGif //event.type a description of the error //event.path array containing a reference to the gif } Once loaded the gif can be displayed if(!myGif.loading){ ctx.drawImage(myGif.image,0,0); } You can display the last frame loaded during loading if(myGif.lastFrame !== null){ ctx.drawImage(myGif.lastFrame.image,0,0); } To access all the frames var gifFrames = myGif.frames; // an array of frames. A frame holds various frame associated items. myGif.frame[0].image; // the first frames image myGif.frame[0].delay; // time in milliseconds frame is displayed for Gifs use various methods to reduce the file size. The loaded frames do not maintain the optimisations and hold the full resolution frames as DOM images. This mean the memory footprint of a decode gif will be many time larger than the Gif file. */ const GIF = function () { // **NOT** for commercial use. var timerID; // timer handle for set time out usage var st; // holds the stream object when loading. var interlaceOffsets = [0, 4, 2, 1]; // used in de-interlacing. var interlaceSteps = [8, 8, 4, 2]; var interlacedBufSize; // this holds a buffer to de interlace. Created on the first frame and when size changed var deinterlaceBuf; var pixelBufSize; // this holds a buffer for pixels. Created on the first frame and when size changed var pixelBuf; const GIF_FILE = { // gif file data headers GCExt : 0xF9, COMMENT : 0xFE, APPExt : 0xFF, UNKNOWN : 0x01, // not sure what this is but need to skip it in parser IMAGE : 0x2C, EOF : 59, // This is entered as decimal EXT : 0x21, }; // simple buffered stream used to read from the file var Stream = function (data) { this.data = new Uint8ClampedArray(data); this.pos = 0; var len = this.data.length; this.getString = function (count) { // returns a string from current pos of len count var s = ""; while (count--) { s += String.fromCharCode(this.data[this.pos++]) } return s; }; this.readSubBlocks = function () { // reads a set of blocks as a string var size, count, data = ""; do { count = size = this.data[this.pos++]; while (count--) { data += String.fromCharCode(this.data[this.pos++]) } } while (size !== 0 && this.pos < len); return data; } this.readSubBlocksB = function () { // reads a set of blocks as binary var size, count, data = []; do { count = size = this.data[this.pos++]; while (count--) { data.push(this.data[this.pos++]);} } while (size !== 0 && this.pos < len); return data; } }; // LZW decoder uncompressed each frames pixels // this needs to be optimised. // minSize is the min dictionary as powers of two // size and data is the compressed pixels function lzwDecode(minSize, data) { var i, pixelPos, pos, clear, eod, size, done, dic, code, last, d, len; pos = pixelPos = 0; dic = []; clear = 1 << minSize; eod = clear + 1; size = minSize + 1; done = false; while (!done) { // JavaScript optimisers like a clear exit though I never use 'done' apart from fooling the optimiser last = code; code = 0; for (i = 0; i < size; i++) { if (data[pos >> 3] & (1 << (pos & 7))) { code |= 1 << i } pos++; } if (code === clear) { // clear and reset the dictionary dic = []; size = minSize + 1; for (i = 0; i < clear; i++) { dic[i] = [i] } dic[clear] = []; dic[eod] = null; } else { if (code === eod) { done = true; return } if (code >= dic.length) { dic.push(dic[last].concat(dic[last][0])) } else if (last !== clear) { dic.push(dic[last].concat(dic[code][0])) } d = dic[code]; len = d.length; for (i = 0; i < len; i++) { pixelBuf[pixelPos++] = d[i] } if (dic.length === (1 << size) && size < 12) { size++ } } } }; function parseColourTable(count) { // get a colour table of length count Each entry is 3 bytes, for RGB. var colours = []; for (var i = 0; i < count; i++) { colours.push([st.data[st.pos++], st.data[st.pos++], st.data[st.pos++]]) } return colours; } function parse (){ // read the header. This is the starting point of the decode and async calls parseBlock var bitField; st.pos += 6; gif.width = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); gif.height = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); bitField = st.data[st.pos++]; gif.colorRes = (bitField & 0b1110000) >> 4; gif.globalColourCount = 1 << ((bitField & 0b111) + 1); gif.bgColourIndex = st.data[st.pos++]; st.pos++; // ignoring pixel aspect ratio. if not 0, aspectRatio = (pixelAspectRatio + 15) / 64 if (bitField & 0b10000000) { gif.globalColourTable = parseColourTable(gif.globalColourCount) } // global colour flag setTimeout(parseBlock, 0); } function parseAppExt() { // get application specific data. Netscape added iterations and terminator. Ignoring that st.pos += 1; if ('NETSCAPE' === st.getString(8)) { st.pos += 8 } // ignoring this data. iterations (word) and terminator (byte) else { st.pos += 3; // 3 bytes of string usually "2.0" when identifier is NETSCAPE st.readSubBlocks(); // unknown app extension } }; function parseGCExt() { // get GC data var bitField; st.pos++; bitField = st.data[st.pos++]; gif.disposalMethod = (bitField & 0b11100) >> 2; gif.transparencyGiven = bitField & 0b1 ? true : false; // ignoring bit two that is marked as userInput??? gif.delayTime = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); gif.transparencyIndex = st.data[st.pos++]; st.pos++; }; function parseImg() { // decodes image data to create the indexed pixel image var deinterlace, frame, bitField; deinterlace = function (width) { // de interlace pixel data if needed var lines, fromLine, pass, toline; lines = pixelBufSize / width; fromLine = 0; if (interlacedBufSize !== pixelBufSize) { // create the buffer if size changed or undefined. deinterlaceBuf = new Uint8Array(pixelBufSize); interlacedBufSize = pixelBufSize; } for (pass = 0; pass < 4; pass++) { for (toLine = interlaceOffsets[pass]; toLine < lines; toLine += interlaceSteps[pass]) { deinterlaceBuf.set(pixelBuf.subArray(fromLine, fromLine + width), toLine * width); fromLine += width; } } }; frame = {} gif.frames.push(frame); frame.disposalMethod = gif.disposalMethod; frame.time = gif.length; frame.delay = gif.delayTime * 10; gif.length += frame.delay; if (gif.transparencyGiven) { frame.transparencyIndex = gif.transparencyIndex } else { frame.transparencyIndex = undefined } frame.leftPos = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); frame.topPos = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); frame.width = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); frame.height = (st.data[st.pos++]) + ((st.data[st.pos++]) << 8); bitField = st.data[st.pos++]; frame.localColourTableFlag = bitField & 0b10000000 ? true : false; if (frame.localColourTableFlag) { frame.localColourTable = parseColourTable(1 << ((bitField & 0b111) + 1)) } if (pixelBufSize !== frame.width * frame.height) { // create a pixel buffer if not yet created or if current frame size is different from previous pixelBuf = new Uint8Array(frame.width * frame.height); pixelBufSize = frame.width * frame.height; } lzwDecode(st.data[st.pos++], st.readSubBlocksB()); // decode the pixels if (bitField & 0b1000000) { // de interlace if needed frame.interlaced = true; deinterlace(frame.width); } else { frame.interlaced = false } processFrame(frame); // convert to canvas image }; function processFrame(frame) { // creates a RGBA canvas image from the indexed pixel data. var ct, cData, dat, pixCount, ind, useT, i, pixel, pDat, col, frame, ti; frame.image = document.createElement('canvas'); frame.image.width = gif.width; frame.image.height = gif.height; frame.image.ctx = frame.image.getContext("2d"); ct = frame.localColourTableFlag ? frame.localColourTable : gif.globalColourTable; if (gif.lastFrame === null) { gif.lastFrame = frame } useT = (gif.lastFrame.disposalMethod === 2 || gif.lastFrame.disposalMethod === 3) ? true : false; if (!useT) { frame.image.ctx.drawImage(gif.lastFrame.image, 0, 0, gif.width, gif.height) } cData = frame.image.ctx.getImageData(frame.leftPos, frame.topPos, frame.width, frame.height); ti = frame.transparencyIndex; dat = cData.data; if (frame.interlaced) { pDat = deinterlaceBuf } else { pDat = pixelBuf } pixCount = pDat.length; ind = 0; for (i = 0; i < pixCount; i++) { pixel = pDat[i]; col = ct[pixel]; if (ti !== pixel) { dat[ind++] = col[0]; dat[ind++] = col[1]; dat[ind++] = col[2]; dat[ind++] = 255; // Opaque. } else if (useT) { dat[ind + 3] = 0; // Transparent. ind += 4; } else { ind += 4 } } frame.image.ctx.putImageData(cData, frame.leftPos, frame.topPos); gif.lastFrame = frame; if (!gif.waitTillDone && typeof gif.onload === "function") { doOnloadEvent() }// if !waitTillDone the call onload now after first frame is loaded }; // **NOT** for commercial use. function finnished() { // called when the load has completed gif.loading = false; gif.frameCount = gif.frames.length; gif.lastFrame = null; st = undefined; gif.complete = true; gif.disposalMethod = undefined; gif.transparencyGiven = undefined; gif.delayTime = undefined; gif.transparencyIndex = undefined; gif.waitTillDone = undefined; pixelBuf = undefined; // dereference pixel buffer deinterlaceBuf = undefined; // dereference interlace buff (may or may not be used); pixelBufSize = undefined; deinterlaceBuf = undefined; gif.currentFrame = 0; if (gif.frames.length > 0) { gif.image = gif.frames[0].image } doOnloadEvent(); if (typeof gif.onloadall === "function") { (gif.onloadall.bind(gif))({ type : 'loadall', path : [gif] }); } if (gif.playOnLoad) { gif.play() } } function canceled () { // called if the load has been cancelled finnished(); if (typeof gif.cancelCallback === "function") { (gif.cancelCallback.bind(gif))({ type : 'canceled', path : [gif] }) } } function parseExt() { // parse extended blocks const blockID = st.data[st.pos++]; if(blockID === GIF_FILE.GCExt) { parseGCExt() } else if(blockID === GIF_FILE.COMMENT) { gif.comment += st.readSubBlocks() } else if(blockID === GIF_FILE.APPExt) { parseAppExt() } else { if(blockID === GIF_FILE.UNKNOWN) { st.pos += 13; } // skip unknow block st.readSubBlocks(); } } function parseBlock() { // parsing the blocks if (gif.cancel !== undefined && gif.cancel === true) { canceled(); return } const blockId = st.data[st.pos++]; if(blockId === GIF_FILE.IMAGE ){ // image block parseImg(); if (gif.firstFrameOnly) { finnished(); return } }else if(blockId === GIF_FILE.EOF) { finnished(); return } else { parseExt() } if (typeof gif.onprogress === "function") { gif.onprogress({ bytesRead : st.pos, totalBytes : st.data.length, frame : gif.frames.length }); } setTimeout(parseBlock, 0); // parsing frame async so processes can get some time in. }; function cancelLoad(callback) { // cancels the loading. This will cancel the load before the next frame is decoded if (gif.complete) { return false } gif.cancelCallback = callback; gif.cancel = true; return true; } function error(type) { if (typeof gif.onerror === "function") { (gif.onerror.bind(this))({ type : type, path : [this] }) } gif.onload = gif.onerror = undefined; gif.loading = false; } function doOnloadEvent() { // fire onload event if set gif.currentFrame = 0; gif.nextFrameAt = gif.lastFrameAt = new Date().valueOf(); // just sets the time now if (typeof gif.onload === "function") { (gif.onload.bind(gif))({ type : 'load', path : [gif] }) } gif.onerror = gif.onload = undefined; } function dataLoaded(data) { // Data loaded create stream and parse st = new Stream(data); parse(); } function loadGif(filename) { // starts the load var ajax = new XMLHttpRequest(); ajax.responseType = "arraybuffer"; ajax.onload = function (e) { if (e.target.status === 404) { error("File not found") } else if(e.target.status >= 200 && e.target.status < 300 ) { dataLoaded(ajax.response) } else { error("Loading error : " + e.target.status) } }; ajax.open('GET', filename, true); ajax.send(); ajax.onerror = function (e) { error("File error") }; this.src = filename; this.loading = true; } function play() { // starts play if paused if (!gif.playing) { gif.paused = false; gif.playing = true; playing(); } } function pause() { // stops play gif.paused = true; gif.playing = false; clearTimeout(timerID); } function togglePlay(){ if(gif.paused || !gif.playing){ gif.play() } else{ gif.pause() } } function seekFrame(frame) { // seeks to frame number. clearTimeout(timerID); gif.currentFrame = frame % gif.frames.length; if (gif.playing) { playing() } else { gif.image = gif.frames[gif.currentFrame].image } } function seek(time) { // time in Seconds // seek to frame that would be displayed at time clearTimeout(timerID); if (time < 0) { time = 0 } time *= 1000; // in ms time %= gif.length; var frame = 0; while (time > gif.frames[frame].time + gif.frames[frame].delay && frame < gif.frames.length) { frame += 1 } gif.currentFrame = frame; if (gif.playing) { playing() } else { gif.image = gif.frames[gif.currentFrame].image} } function playing() { var delay; var frame; if (gif.playSpeed === 0) { gif.pause(); return; } else { if (gif.playSpeed < 0) { gif.currentFrame -= 1; if (gif.currentFrame < 0) {gif.currentFrame = gif.frames.length - 1 } frame = gif.currentFrame; frame -= 1; if (frame < 0) { frame = gif.frames.length - 1 } delay = -gif.frames[frame].delay * 1 / gif.playSpeed; } else { gif.currentFrame += 1; gif.currentFrame %= gif.frames.length; delay = gif.frames[gif.currentFrame].delay * 1 / gif.playSpeed; } gif.image = gif.frames[gif.currentFrame].image; timerID = setTimeout(playing, delay); } } var gif = { // the gif image object onload : null, // fire on load. Use waitTillDone = true to have load fire at end or false to fire on first frame onerror : null, // fires on error onprogress : null, // fires a load progress event onloadall : null, // event fires when all frames have loaded and gif is ready paused : false, // true if paused playing : false, // true if playing waitTillDone : true, // If true onload will fire when all frames loaded, if false, onload will fire when first frame has loaded loading : false, // true if still loading firstFrameOnly : false, // if true only load the first frame width : null, // width in pixels height : null, // height in pixels frames : [], // array of frames comment : "", // comments if found in file. Note I remember that some gifs have comments per frame if so this will be all comment concatenated length : 0, // gif length in ms (1/1000 second) currentFrame : 0, // current frame. frameCount : 0, // number of frames playSpeed : 1, // play speed 1 normal, 2 twice 0.5 half, -1 reverse etc... lastFrame : null, // temp hold last frame loaded so you can display the gif as it loads image : null, // the current image at the currentFrame playOnLoad : true, // if true starts playback when loaded // functions load : loadGif, // call this to load a file cancel : cancelLoad, // call to stop loading play : play, // call to start play pause : pause, // call to pause seek : seek, // call to seek to time seekFrame : seekFrame, // call to seek to frame togglePlay : togglePlay, // call to toggle play and pause state }; return gif; } /*========================================================================= End of gif reader */ const mouse = { bounds: null, x: 0, y: 0, button: false }; function mouseEvents(e) { const m = mouse; m.bounds = canvas.getBoundingClientRect(); mx = e.pageX - m.bounds.left - scrollX; my = e.pageY - m.bounds.top - scrollY; mouse.x = e.pageX; m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : m.button; } ["down", "up", "move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents)); 
 canvas { position: absolute; top: 0px; left: 0px; } 
 <canvas id="canvas"></canvas>
Run codeHide result

NOTES

  • This works for 99% gif. Sometimes you will find a gif that does not play correctly. Reason: (I never bothered to find out). Fix: transcode gif using a modern encoder.

  • There are some minor inconsistencies that need fixing. Over time, I will provide an example of CodePen with ES6 and an improved interface. Stay with us.

+5
source share

Just draw your image on the canvas in any position where you want to paste your gif. Suppose you want to embed your gif in a meuCanvas canvas.

So:

 if((xHero >= xMonster-10)&&(xHero <= xMonster + 10)) { var ctx = document.getElementById('meuCanvas').getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = 'http://media3.giphy.com/media/kEKcOWl8RMLde/giphy.gif'; }
+2
source share

You cannot just draw a .gif (animated!) <canvas> . You have two options.

a) you can add HTML with a <div> , to which you attach .gif (via the <img> node), and then draw through z-Index and css top/left over the <canvas> , in the correct position. This ultimately ruins the mouse events, which can be resolved by propagating events. I would consider this a poor male decision.

b) You need to learn how to animate things. Find the window.requestAnimationFrame method. This will allow you to animate on <canvas> , which can emulate the .gif behavior you are looking for. It will, however, be a bit complicated at your current level, I think.

You can draw .gif on canvas as described above. However, in this case, it will be 100% static, such as .jpg or .png , if you cannot window.requestAnimationFrame .gif into its frames and still use the window.requestAnimationFrame method.

Basically, if you want animated .gif behavior, you will need to make basic settings.

+2
source share

You can use the Gify and gifuct-js projects on Github.

First upload your animated gif and prepare the images you need to download on the page.

 var framesArray; var currentFrame = 0; var totalFrames = null; var oReq = new XMLHttpRequest(); oReq.open("GET", "/myfile.gif", true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { var arrayBuffer = oReq.response; // Note: not oReq.responseText if(gify.isAnimated(arrayBuffer)){ var gif = new GIF(arrayBuffer); framesArray = gif.decompressFrames(true); totalFrames = framesArray.length; } }; oReq.send(null);

If you want your animation to display like this in your drawing loop

 if((xHero >= xMonster-10)&&(xHero <= xMonster + 10)){ // you need to work out from your frame rate when you should increase current frame // based on the framerate of the gif image using framesArray[currentFrame].delay // auto-detect if we need to jump to the first frame in the loop // as we gone through all the frames currentFrame = currentFrame % totalFrames; var frame = framesArray[currentFrame]; var x,y; // get x posstion as an offset from xHero // get y posstion as an offset from yHero objContexto.putImageData(frame.patch,x,y); }

Please note that this code has not been tested. I built the following documentation on two projects, so this may be a little wrong, but it shows how it is possible, the 3rd link is the online contents of the demo folder for the gitfuct-js library.

+2
source share

I'm also not quite sure what the problem is, but instead:

 if((xHero >= xMonster-10)||(xHero <= xMonster + 10)) { /*gif here*/ }

you probably want:

 if (xHero >= xMonster-10 && xHero <= xMonster + 10) { /*gif here*/ }

|| means OR

& & means And

In your code using OR, the condition is always true; maybe not what you want.

-one
source share

More articles:


All Articles