{"id":18265664,"url":"https://github.com/icecreamyou/canvas-sprite-animations","last_synced_at":"2025-04-04T21:31:54.531Z","repository":{"id":4669853,"uuid":"5816068","full_name":"IceCreamYou/Canvas-Sprite-Animations","owner":"IceCreamYou","description":"A powerful, easy-to-use Sprite animation library designed for HTML5 Canvas.","archived":false,"fork":false,"pushed_at":"2021-07-12T00:56:45.000Z","size":1594,"stargazers_count":68,"open_issues_count":0,"forks_count":19,"subscribers_count":8,"default_branch":"gh-pages","last_synced_at":"2025-03-17T07:48:32.913Z","etag":null,"topics":["animation","canvas","canvas2d","game-library","html5-canvas","javascript","javascript-library","sprite","sprite-animation-library","sprite-sheet","spritemap"],"latest_commit_sha":null,"homepage":"http://icecreamyou.github.com/Canvas-Sprite-Animations/docs/","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/IceCreamYou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-09-14T23:55:11.000Z","updated_at":"2025-03-13T10:47:41.000Z","dependencies_parsed_at":"2022-08-30T23:41:00.568Z","dependency_job_id":null,"html_url":"https://github.com/IceCreamYou/Canvas-Sprite-Animations","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FCanvas-Sprite-Animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FCanvas-Sprite-Animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FCanvas-Sprite-Animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FCanvas-Sprite-Animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IceCreamYou","download_url":"https://codeload.github.com/IceCreamYou/Canvas-Sprite-Animations/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247252280,"owners_count":20908658,"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","canvas","canvas2d","game-library","html5-canvas","javascript","javascript-library","sprite","sprite-animation-library","sprite-sheet","spritemap"],"created_at":"2024-11-05T11:19:18.355Z","updated_at":"2025-04-04T21:31:53.027Z","avatar_url":"https://github.com/IceCreamYou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/canvas-sprite-animations.svg)](https://badge.fury.io/js/canvas-sprite-animations)\n\nSprite.js is a powerful, easy-to-use Sprite animation library for HTML5 Canvas.\n\nTwo classes are provided:\n\n - **SpriteMap**: Manages multiple animation sequences in a sprite sheet.\n - **Sprite**: Handles a single animation sequence.\n\nYou can\n[read the full documentation](https://icecreamyou.github.io/Canvas-Sprite-Animations/docs/)\nfor a complete explanation of every available method.\n\n\nUsage\n------\n\nPut the script in your HTML document:\n\n```html\n\u003cscript src=\"sprite.min.js\"\u003e\u003c/script\u003e\n```\n\nThere are several ways to use sprite.js. At its simplest:\n\n```javascript\n// Create the sprite.\nvar sprite = new Sprite('sprite.png', {\n  frameW: 60,\n  frameH: 60,\n  postInitCallback: function() { // Runs when the sprite is ready.\n    // Start animating.\n    sprite.startLoop();\n  },\n});\n\n// Draw the sprite. You should do this every time you repaint the canvas.\n// Frames update automatically.\n// var context = document.getElementById('canvas').getContext('2d');\nsprite.draw(context, 100, 100); // x and y position on canvas\n```\n\nThere are many more options you can use for finer-grained control, including\nusing multiple animation sequences on one sprite sheet. See index.html for a\nfull example of using a SpriteMap or\n[read the full documentation](https://icecreamyou.github.io/Canvas-Sprite-Animations/docs/).\n\n\nCaching\n-------\n\nSprite images are cached by default. If you would like to use an alternative\ncaching system, you can override several static methods:\n\n - **Sprite.preloadImages(files, options)**: Pre-load images into the cache so\n   you don't have to deal with a delay to load them from disk later.\n - **Sprite.getImageFromCache(src)**: Retrieve an image from the cache.\n - **Sprite.saveImageToCache(src, image)**: Save a loaded image into the cache.\n\n\nLicense/Credits\n---------------\n\nCreated by [Isaac Sukin](https://www.isaacsukin.com/) (IceCreamYou).\n\nThe centipede-sprite.png image used for the\n[demo](https://icecreamyou.github.io/Canvas-Sprite-Animations/) is from Atari.\n\nAll resources are MIT licensed: http://opensource.org/licenses/mit-license.php\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficecreamyou%2Fcanvas-sprite-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficecreamyou%2Fcanvas-sprite-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficecreamyou%2Fcanvas-sprite-animations/lists"}