{"id":16265818,"url":"https://github.com/manuelodelain/sprite-anim","last_synced_at":"2025-10-17T20:19:04.801Z","repository":{"id":33032760,"uuid":"36668411","full_name":"manuelodelain/sprite-anim","owner":"manuelodelain","description":"Simple spritesheet animation engine.","archived":false,"fork":false,"pushed_at":"2021-04-18T17:35:07.000Z","size":2273,"stargazers_count":18,"open_issues_count":6,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T11:21:36.682Z","etag":null,"topics":["animation","spritesheet"],"latest_commit_sha":null,"homepage":"http://manuelodelain.github.io/sprite-anim/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manuelodelain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-01T15:04:33.000Z","updated_at":"2021-06-14T21:21:19.000Z","dependencies_parsed_at":"2022-07-12T22:20:33.534Z","dependency_job_id":null,"html_url":"https://github.com/manuelodelain/sprite-anim","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelodelain%2Fsprite-anim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelodelain%2Fsprite-anim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelodelain%2Fsprite-anim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manuelodelain%2Fsprite-anim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manuelodelain","download_url":"https://codeload.github.com/manuelodelain/sprite-anim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244515603,"owners_count":20464918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","spritesheet"],"created_at":"2024-10-10T17:20:45.576Z","updated_at":"2025-10-17T20:19:04.715Z","avatar_url":"https://github.com/manuelodelain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sprite-anim\n\nsprite-anim is a simple spritesheet animation engine.\n\n### Installation\n`npm install sprite-anim --save`\n\n### Features\n- common API (play / pause / stop / gotoAndPlay / gotoAndStop / dispose)\n- initialize frames with data (JSONArrayParser), automatically with dimensions (SimpleParser) or your own custom parser\n- works with DOM elements (DOMRenderer), canvas element (CanvasRenderer), off-screen canvas (OffScreenCanvasRenderer) or your own custom renderer\n- optimized for multiple animations (one requestAnimationFrame for all instances)\n- single animation with multiple spritesheets support\n\n### Browser compatibility\nIE 6+ with DOM element, IE 9+ with DOM and canvas element.\nIf you need to support IE 8- use [es5-shim](https://github.com/es-shims/es5-shim) for EcmaScript 5 methods compatibility.\n\n## Documentation\n\n### Use\n#### Browserify\n```\nvar SpriteAnim = require('sprite-anim');\n````\n\n#### AMD\n```\nrequire(['sprite-anim.js'], function(SpriteAnim){\n});\n````\n\n#### Script tag\n```\n\u003cscript src=\"path/to/file/sprite-anim.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // global variable SpriteAnim\n\u003c/script\u003e\n````\n\n### Examples\n\n#### DOM element with spritesheet and frame dimensions\n\n```\nvar element = document.getElementById('anim');\nvar renderer = new SpriteAnim.DOMRenderer(element);\nvar parser = new SpriteAnim.SimpleParser({width: 1410, height: 3960}, {width: 470, height: 120});\nvar anim = new SpriteAnim(parser, renderer, {frameRate: 25});\n\nanim.play();\n```\n\n#### Canvas element with frames data\n\n```\nvar img = new Image();\n\nimg.addEventListener('load', function(){\n  var element = document.getElementById('anim');\n  var renderer = new SpriteAnim.CanvasRenderer(element, img);\n  var parser = new SpriteAnim.JSONArrayParser(framesData); // framesData is your JSON data\n  var anim = new SpriteAnim(parser, renderer, {frameRate: 25});\n\n  anim.play();\n});\n\nimg.src = 'images/anim.png';// your spritesheet image\n```\n\n### Parsers\n\n#### SimpleParser\nInitialize frames directly with spritesheet image dimensions and frame dimensions.\n\n##### Params\n- `sprite`: `Object` `{width: Number, height: Number}` || `HTMLImageElement` (loaded image) || `Array` Objects with width/height values or loaded images\n- `frameSize`: `Object` `{width: Number, height: Number}`\n\n#### JSONArrayParser\nInitialize frames with an `Array` of frames data, following the TexturePacker JSONArray output.\n\n##### Params\n- `data`: `Object`\n- `scaleFactor` (optional): `Number`\n\n#### Custom parser\nYou can implement your own parser.\n\nA parser must have these properties :\n- `numFrames`: number of frames\n- `frames`: an array of frames `{x, y, index, width, height}`\n\n##### Example\n```\nvar CustomParser = function(framesData){\n  this.numFrames = 0;\n  this.frames = [];\n\n  // populate frames and increment numFrames\n};\n```\n\n\n### Renderers\n\n#### DOMRenderer\nRender frame with a DOM element (`background-position`).\n\n##### Params\n- `element`: DOM element\n- `options` (optional): `Object`\n  - `scaleFactor`: `Number`\n  - `sprite`: `HTMLImageElement` loaded image || `Array` loaded images (multiple spritesheets). \n  Auto set background image/size.\n\n#### CanvasRenderer\nRender frame with a `canvas` element (`drawImage`).\n\n##### Params\n- `canvas`: canvas element\n- `sprite`: `HTMLImageElement` loaded spritesheet image || || `Array` loaded spritesheet images (multiple spritesheets)\n- `options` (`Object`): \n  - `clearFrame` (`Boolean`): clear frame on render\n\n#### Custom renderer\nYou can implement your own renderer.\n\nA renderer must have a `render` method with a parameter `frame`.\nThere is an optionnal parameter `animation` which is the `SpriteAnim` instance.\nThe `frame` param is an `object` with properties `{x, y, index, width, height}`.\n\n##### Example\n```\nvar CustomRenderer = function(){\n};\n\nCustomRenderer.prototype.render = function(frame, animation){\n  // draw the frame\n};\n```\n\n### SpriteAnim\n\n\n#### create instance\n`new SpriteAnim(parser, renderer, options)`\n\n##### `options` (`Object`)\n- `frameRate` (`Number`)\nAnimation frame rate (default: `60`)\n- `loop` (`Boolean`)\nIf `true` loop animation (default: `false`)\n- `yoyo` (`Boolean`)\nIf `true` repeat from end when looping (default: `false`)\n- `numFrames` (`Boolean`)\nForce total frames\n- `manualUpdate` (`Boolean`)\nIf `true` the animation will not update itself. (default: `false`)\nYou'll have to update it manually with an explicit `onEnterFrame()` call on a custom render loop.\n\n\n#### properties\n\n##### `x` (`Number`)\nHorizontal position from the top left corner of the container. (default: 0)\n\n##### `y` (`Number`)\nVertical position from the top left corner of the container. (default: 0)\n\n##### `alpha` (`Number`)\nAlpha value of the animation. A value between 0 and 1. Currently only supported on canvas mode. (default: 1)\n\n##### `loop` (`Boolean`)\nIf `true` loop animation (default: `false`)\n\n##### `yoyo` (`Boolean`)\nIf `true` repeat from end when looping (default: `false`)\n\n\n##### `frameRate` (`Number`)\nAnimation frame rate\n\n##### `numFrames` (`Number`)\nTotal frames\n\n##### `currentFrame` (`Number`)\nCurrent frame index\n\n##### `isPlaying` (`Boolean`)\n`true` if the animation is playing\n\n##### `reversed` (`Boolean`)\n`true` if the animation is playing reversed\n\n##### `complete` (`Boolean`)\n`true` if the animation is complete\n\n\n#### methods\n\n##### `play()`\nPlay animation\n\n##### `pause()`\nPause animation\n\n##### `stop()`\nPause and reset animation (frame index = 0)\n\n##### `gotoAndPlay(frameIndex)`\nGo to a frame index and play animation\n\n##### `gotoAndStop(frameIndex)`\nGo to a frame index and pause animation\n\n##### `onEnterFrame(timeStamp)`\nCalled internally each frame.\nIf you add the `manualUpdate` option and call this method directly in a external render loop you have to pass a `timeStamp` argument (from the requestAnimationFrame callback).\n\n##### `renderFrame()`\nRender the current frame\n\n##### `dispose()`\nDispose SpriteAnim instance\n\n\n#### events\n\n##### `complete`\nDispatched when animation ended\n\n##### `enterFrame`\nDispatched on each frame\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelodelain%2Fsprite-anim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanuelodelain%2Fsprite-anim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanuelodelain%2Fsprite-anim/lists"}