A simple canvas based iwc component
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
media
src/sprite
.gitignore
.gruntExt.js
.gruntIwc.js
Gruntfile.js
LICENSE-MIT
README.md
bower.json
package.json
tsd.json

README.md

Canvas sprite

A simple sprite animation that renders to a canvas tag

alt demo

Usage

<div id="foo" class="component--sprite" data-active="foo">

  <!-- Number of frames in the sprite sheet -->
  <meta data-fx="8" data-fy="8" data-fps="30"/>

  <!-- Size of teh canvas and source image to use -->
  <meta data-width="32" data-height="32" data-src="simple.png"/>

  <!-- Individual sets of sprites as named states -->
  <meta data-state="foo" data-offset="0" data-length="8" data-loops="true"/>
  <meta data-state="bar" data-offset="8" data-length="8">
</div>

...

var $foo = $('#foo');
var sprite = iwc.components.query($foo);
console.log(sprite.states());

sprite.state('foo');
console.log(sprite.debug());

Build

A full list of build values is contained in the 'build' npm run script.

npm run build

To start a local dev server to play with, use:

npm run server

Then open http://localhost:3008/demo/index.html