Navigation for the ZIM JavaScript Canvas Framework

HOMENewsAboutExamplesLearnCodeDocsDevs
Interactive Animation

SPRITES
We use Sprites to animate images on the HTML Canvas.
SPRITESHEETS
Here is the SpriteSheet for the animation above by Sheridan's Antonio Caggiano commissioned by ZIM. SpriteSheet Import the images into TexturePacker and export to EaselJS. Or use the FREE version and export to JSON Hash. See a SIMPLE example and type CTRL or ⌘ U to view the code.

CANVAS
We use the ZIM JavaScript Canvas Framework to display the Sprite:
<html>
<head>
<title>Sprite on Canvas</title>

<script type=module>

import zim from "https://zimjs.org/cdn/01/zim";

// files from TexturePacker have been put in an assets/ folder
const assets = ["drabstract.png", "drabstract.json"];
const path = "assets/";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, dark, light, ready, assets, path);
function ready() {
    
    new Sprite({json:"drabstract.json"}) 
        .center()
        .run({
            time:3.5,
            rewind:true,
            rewindWait:5,
            loop:true,
            loopWait:5
        });        
}

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>

INTERACTIVITY
We have events on the canvas, such as mousedown, mousemove, keydown, gamestick, etc. to handle interactivity for games, ads, apps, art and portfolios. interactive animation See the INTERACTIVE example and use CTRL or ⌘ U to view the commented code. In the example:


RESOURCES