Sprite Sheet Animation

Monday, 15 September 2014

Sprite Sheet Animation

---------------------------------------------------------------------------------------------------------------------

COPY AND PASTE AND SAVE BELOW CODE IN HTML FILE

----------------------------------------------------------------------------------------------------------------------

<html>
<head>
<title>spritesheet anim</title>
<script type="text/javascript">
window.addEventListener("load", init);
window.addEventListener("resize",onResize);
var image = new Image();
var xpos=0;
var ypos=0;
var dx=0;
var dy=0;
var frameSize=100;
var numFrames=15;
var index=0;
var width=500;
var canvas;
var c;
var tree=new Image();
function init(){
//we're ready for the loop
image.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYpCvigq5X69RyUDOOpP8RT8O0JS2GQaG_AVpnjqjVxOZUUPq-bmJe0CD9YnoqzYBMDDpVCYQnppKtq2KR8UdGiZg49CpEofWYv0L_JPaKfBLm2hEB-zyceNeIC9jOkkJoYD7SE0DU3jl/s1600/sheetEye.png";
canvas=document.getElementById("can");
c=canvas.getContext("2d");
canvas.width=window.innerWidth-15;
canvas.height=frameSize;
c.drawImage(image, xpos, ypos, frameSize, frameSize, 0, 0, frameSize, frameSize);
tree.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNRQn9xBp1_d1-Bpk1AfVUPzpCCvCuryyk8lgF1us0Vxd_XRXfmQ-486h22kbVCYxY_eVpTPhyyqWCQQ_3LLzzmfxOo_xhPYhtGqQTxlpyq_TYMyT31QENSuqE1ncjLlYaNbxuSV-sx6Pc/s1600/tree.png";
c.drawImage(tree,0,0,67,81,200,19,67,81);
setInterval(loop, 1000 / 30);
}
function onResize(){
canvas.width=window.innerWidth-15;
}
function loop()
{
c.fillStyle="rgba(50,50,50,0.1)";
c.fillRect(0,0,canvas.width,canvas.height);
c.drawImage(image, xpos, ypos, frameSize, frameSize, dx, dy, frameSize, frameSize);
//each time around we add the frame size to our xpos, moving along the source image
xpos += frameSize;
//increase the index so we know which frame of our animation we are currently on
index += 1;
dx+=12;
//dy+=10;
//if our index is higher than our total number of frames, we're at the end and better start over
if (index >= numFrames)
{
xpos =0;
ypos =0;
index=0;
//dx=0;
dy=0;
//if we've gotten to the limit of our source image's width, we need to move down one row of frames
} else if (xpos + frameSize > width)
{
xpos =0;
ypos += frameSize;
}
if (dx>canvas.width)
{
dx=0;
}
c.drawImage(tree,0,0,67,81,200,19,67,81);
c.drawImage(tree,0,0,67,81,600,19,67,81);
}
</script>
</head>
<body>
<canvas id="can" width="1000" height="100">
</canvas>
</body>
</html>