Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Playing a spritesheet in canvas</strong></p> <p>It’s becoming best practice to use requestAnimationFrame to do your animations. It does some nice event grouping and performance enhancing. Here’s a good post on requestAnimationFrame: <a href="http://creativejs.com/resources/requestanimationframe/" rel="nofollow">http://creativejs.com/resources/requestanimationframe/</a></p> <p>This is how you can use requestAnimationFrame to play a spritesheet:</p> <p>In this case, it’s a 4x4 spritesheet that will play over 1 second:</p> <pre><code>var fps = 16; function explode() { // are we done? ... if so, we're outta here if(spriteIndex&gt;15){return;} // It's good practice to use requestAnimation frame // We wrap it in setTimeout because we want timed frames setTimeout(function() { // queue up the next frame requestAnimFrame(explode); // Draw the current frame var x=spriteIndex%(cols-1)*width; var y=parseInt(spriteIndex/(rows-1))*height; ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(sheet,x,y,width,height,0,0,width,height); // increment the sprite counter spriteIndex++; }, 1000 / fps); } </code></pre> <p>Here is code and a Fiddle: <a href="http://jsfiddle.net/m1erickson/nSGyx/" rel="nofollow">http://jsfiddle.net/m1erickson/nSGyx/</a></p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /&gt; &lt;!-- reset css --&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;style&gt; body{ background-color: ivory; } canvas{border:1px solid red;} &lt;/style&gt; &lt;script&gt; $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); // This is Paul Irish's great cross browser shim for requestAnimationFrame window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); // define the spritesheet var spriteIndex=0; var width=64; var height=64; var rows=4; var cols=4; // load the sheet image var sheet=document.createElement("img"); sheet.onload=function(){ canvas.width=width; canvas.height=height; // call the animation explode(); } sheet.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/explodeSprite.png"; var fps = 16; function explode() { // are we done? ... if so, we're outta here if(spriteIndex&gt;15){return;} // It's good practice to use requestAnimation frame // We wrap it in setTimeout because we want timed frames setTimeout(function() { // queue up the next frame requestAnimFrame(explode); // Draw the current frame var x=spriteIndex%(cols-1)*width; var y=parseInt(spriteIndex/(rows-1))*height; ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(sheet,x,y,width,height,0,0,width,height); // increment the sprite counter spriteIndex++; }, 1000 / fps); } $("#explode").click(function(){ spriteIndex=0; explode(); }); }); // end $(function(){}); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" width=64 height=64&gt;&lt;/canvas&gt;&lt;br&gt; &lt;button id="explode"&gt;Explode&lt;/button&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>. . .</p> <p><strong>[Edited to show more details of how animation fits into your code]</strong></p> <p>This is a recoding of your explosion functions.</p> <p>Declare your explosion related variables outside the functions:</p> <pre><code>var bulletExplosionStart; var whereX =0; var whereY =0; var wide = 70; var high = 70; </code></pre> <p>Next, in Exploder(), set where the explosion will occur and reset the sprite index (bulletExplosionStart) to 0</p> <p><strong>Possible error:</strong> Check your Exploder function: you supply srcX,srcY but then do whereX=this.srcX, whereY=this.srcY. I assume you meant to use the srcX,srcY supplied as arguments to Exploder() instead of this.srcX,this.srcY.</p> <pre><code>function Exploder(srcX,srcY) { whereX = srcX; whereY = srcY; bulletExplosionStart=0; BulletExplosionAnimate(); } </code></pre> <p>This is the recoded bulletExplosionAnimate function that plays the 4 frames of the spritesheet.</p> <p>After 4 frames this animation automatically stops.</p> <pre><code>var fps = 2; function bulletExplosionAnimate() { // are we done? ... if so, we're outta here if(bulletExplosionStart&gt;308){return;} // It's good practice to use requestAnimation frame // We wrap it in setTimeout because we want timed frames setTimeout(function() { // queue up the next frame requestAnimFrame(bulletExplosionAnimate); // Draw the current frame ctxExplosion.clearRect(0,0,canvasWidth,canvasHeight) ctxExplosion.drawImage(spriteImage, bulletExplosionStart,1250,wide,high, whereX,whereY,wide,high); // increment the sprite position bulletExplosionStart += 77; }, 1000 / fps); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POdisplaying sprites after Collision detection
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USmarkE
    1. USmarkE
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO...and as far as your Hull/Shield disappearing, try setting the z-index of your canvasXY higher.
      singulars
      1. PO
      1. USmarkE
    2. COThank you for helping, I tried what you said but Im getting this error: Uncaught TypeError: Object [object Window] has no method 'draw you can try it at: http://www.taffatech.com/DarkOrbit.html It wont even draw the first frame of the animation, I know I havent make the other ones draw yet by changing the x srcX value by +77 each frame, but it wont show anything
      singulars
      1. PO
      1. USBarney
    3. COSee the addition to my answer showing how requestAnimationFrame would fit into your code.
      singulars
      1. PO
      1. USmarkE
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload