├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── aframe_spritesheet.gif
├── dist
    ├── aframe-spritesheet-component.js
    └── aframe-spritesheet-component.min.js
├── examples
    ├── build.js
    ├── json
    │   ├── index.html
    │   ├── toaster.json
    │   └── toaster.png
    ├── main.js
    └── rowscols
    │   ├── index.html
    │   └── npc_piggy_explorer__x1_walk_png_1354837301.png
├── index.js
├── package.json
├── webpack.config.js
└── yarn.lock


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     "extends": "google",
 3 |     "env": {
 4 |         "browser": true,
 5 |         "node": true,
 6 |         "mocha": true
 7 |     },
 8 |     "installedESLint": true,
 9 |     "parserOptions": {
10 |         "ecmaVersion": 6
11 |     },
12 |     "rules": {
13 |         "arrow-parens": "off",
14 |         "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
15 |         "comma-dangle": "off",
16 |         "quotes": ["error", "single"],
17 |         "guard-for-in": "off",
18 |         "indent": ["error", 4],
19 |         "linebreak-style": ["error", "unix"],
20 |         "max-len": "off",
21 |         "max-statements-per-line": ["error", { "max": 2 }],
22 |         "no-alert": "off",
23 |         "no-console": "off",
24 |         "no-warning-comments": "off",
25 |         "object-curly-spacing": ["error", "always"],
26 |         "padded-blocks": "off",
27 |         "require-jsdoc": "off"
28 |     }
29 | 
30 | };
31 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This software is licensed under the Apache 2 license, quoted below.
 2 | 
 3 | Copyright 2016 Eko <http://helloeko.com>
 4 | 
 5 | Licensed under the Apache License, Version 2.0 (the "License"); you may not
 6 | use this file except in compliance with the License. You may obtain a copy of
 7 | the License at
 8 | 
 9 |     http://www.apache.org/licenses/LICENSE-2.0
10 | 
11 | Unless required by applicable law or agreed to in writing, software
12 | distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13 | WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14 | License for the specific language governing permissions and limitations under
15 | the License.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # This repo is no longer actively maintained #
 2 | 
 3 | ## A-Frame Spritesheet Component
 4 | 
 5 | <img src="https://ekolabs.github.io/aframe-spritesheet-component/aframe_spritesheet.gif">
 6 | 
 7 | Animated spritesheet support for [A-Frame](https://aframe.io).
 8 | 
 9 | ### Demo / Using spritesheets
10 | 
11 | Spritesheets are a common way to play pre-rendered animation. This component allows you to load up a spritesheet image to an `a-image` element and easily control its animation. It allows usage of two types of spritesheet formats:
12 | 
13 | **[Rows and Cols](https://ekolabs.github.io/aframe-spritesheet-component/examples/rowscols/)**
14 | 
15 | A grid representing all frames of the animation. All of the frames must be of the same dimensions, and the animation index is assumed to be scanned left to right, top to bottom. If your last frame is not the one on the bottom right, you'll have to specify the index of the last frame using the `lastFrame` property.
16 | 
17 | **[JSON data format](https://ekolabs.github.io/aframe-spritesheet-component/examples/json/)**
18 | 
19 | The spritesheet image file can be made more compact by using a dictionary automatically generated with  [TexturePacker](https://www.codeandweb.com/texturepacker). This will help reduce file size.
20 | 
21 | #### Browser
22 | 
23 | Install and use by directly including the [browser files](dist):
24 | 
25 | ```html
26 | <head>
27 |   <title>My A-Frame Scene</title>
28 |   <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
29 |   <script src="https://unpkg.com/aframe-spritesheet-component/dist/aframe-spritesheet-component.min.js"></script>
30 | </head>
31 | 
32 | <body>
33 |   <a-scene>
34 |     <!-- rows/cols format-->
35 |     <a-image src="spritesheet.png" sprite-sheet="cols:8; rows: 3; progress: 0;"></a-image>
36 |     <!-- json format -->
37 |     <a-image src="spritesheet.png" sprite-sheet="dataUrl: spritesheet.json; progress: 0;" ></a-image>
38 |   </a-scene>
39 | </body>
40 | ```
41 | 
42 | <!-- If component is accepted to the Registry, uncomment this. -->
43 | <!--
44 | Or with [angle](https://npmjs.com/package/angle/), you can install the proper
45 | version of the component straight into your HTML file, respective to your
46 | version of A-Frame:
47 | 
48 | ```sh
49 | angle install aframe-spritesheet-component
50 | ```
51 | -->
52 | 
53 | #### npm
54 | 
55 | Install via npm:
56 | 
57 | ```bash
58 | npm install @ekolabs/aframe-spritesheet-component
59 | ```
60 | 
61 | Then require and use.
62 | 
63 | ```js
64 | require('aframe');
65 | require('aframe-spritesheet-component');
66 | ```
67 | 
68 | ### API
69 | 
70 | | Property | Description | Default Value |
71 | | -------- | ----------- | ------------- |
72 | | progress | A value between 0 and 1 that represents animation progression. the index of the animation frame is calculated from this attribute. Used if no frameIndex or frameName specified | 0 |
73 | | frameIndex | Explicit index of the animation frame to use. Used if no frameName specified | null |
74 | | frameName | Explicit name of the animation frame to use, if using dataUrl | null |
75 | | cols | number of cols in the spritesheet image (not needed if using dataUrl)| 1 |
76 | | rows | number of rows spritesheet image (not needed if using dataUrl) | 1 |
77 | | firstFrame| index of the first frame of the animation, ordered left to right starting at the first row | 0 |
78 | | lastFrame| index of the last frame of the animation, ordered left to right starting at the first row . If not specified and not using the JSON format, value is `rows * cols - 1`| null |
79 | | cloneTexture | if using separate instances of the same image, set this to true | false |
80 | | dataUrl | If using a JSON format, url pointing to the json file| null |
81 | 
82 | 
83 | ### Acknowledgment
84 | Walking pig sprite taken from <a href="http://www.glitchthegame.com">glitchthegame.com</a>, under a Public Domain Dedication license.
85 | 
86 | Interesting bit of Trivia: [Tiny Speck](https://tinyspeck.com/), the company behind the now-defunct Glitch game is now actually [Slack](https://slack.com)!
87 | 
88 | ### Author
89 | Developed by [Opher Vishnia](http://twitter.com/opherv) of [Eko](http://www.helloeko.com)
90 | 
91 | ### License
92 | Apache 2
93 | 


--------------------------------------------------------------------------------
/aframe_spritesheet.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EkoLabs/aframe-spritesheet-component/e37234442733ac59f46c8cf73b05f794c801de17/aframe_spritesheet.gif


--------------------------------------------------------------------------------
/dist/aframe-spritesheet-component.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | 
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | 
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId])
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | 
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			i: moduleId,
 15 | /******/ 			l: false,
 16 | /******/ 			exports: {}
 17 | /******/ 		};
 18 | 
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | 
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.l = true;
 24 | 
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | 
 29 | 
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | 
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | 
 36 | /******/ 	// identity function for calling harmony imports with the correct context
 37 | /******/ 	__webpack_require__.i = function(value) { return value; };
 38 | 
 39 | /******/ 	// define getter function for harmony exports
 40 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 41 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 42 | /******/ 			Object.defineProperty(exports, name, {
 43 | /******/ 				configurable: false,
 44 | /******/ 				enumerable: true,
 45 | /******/ 				get: getter
 46 | /******/ 			});
 47 | /******/ 		}
 48 | /******/ 	};
 49 | 
 50 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 51 | /******/ 	__webpack_require__.n = function(module) {
 52 | /******/ 		var getter = module && module.__esModule ?
 53 | /******/ 			function getDefault() { return module['default']; } :
 54 | /******/ 			function getModuleExports() { return module; };
 55 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 56 | /******/ 		return getter;
 57 | /******/ 	};
 58 | 
 59 | /******/ 	// Object.prototype.hasOwnProperty.call
 60 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 61 | 
 62 | /******/ 	// __webpack_public_path__
 63 | /******/ 	__webpack_require__.p = "";
 64 | 
 65 | /******/ 	// Load entry module and return exports
 66 | /******/ 	return __webpack_require__(__webpack_require__.s = 0);
 67 | /******/ })
 68 | /************************************************************************/
 69 | /******/ ([
 70 | /* 0 */
 71 | /***/ (function(module, exports, __webpack_require__) {
 72 | 
 73 | "use strict";
 74 | 
 75 | 
 76 | /**
 77 |  * A-Frame Spritesheet Component for A-Frame.
 78 |  * Enables dynamic control of animation spritesheets
 79 |  */
 80 | var SpriteSheet = AFRAME.registerComponent('sprite-sheet', {
 81 |     schema: {
 82 |         progress: { type: 'number', default: 0 },
 83 |         cols: { type: 'number', default: 1 },
 84 |         rows: { type: 'number', default: 1 },
 85 |         firstFrame: { type: 'number', default: 0 },
 86 |         lastFrame: { type: 'number', default: null },
 87 |         cloneTexture: { default: false },
 88 |         dataUrl: { type: 'string', default: null }
 89 |     },
 90 | 
 91 |     /**
 92 |      * Called once when component is attached.
 93 |      */
 94 |     init: function init() {
 95 |         var _this = this;
 96 | 
 97 |         console.log('init');
 98 | 
 99 |         // if specified load spritesheet json data
100 |         if (this.data.dataUrl) {
101 |             this.mapCanvas = document.createElement('canvas');
102 |             this.textureCtx = this.mapCanvas.getContext('2d');
103 |             this.texture = new THREE.Texture(this.mapCanvas);
104 |             this.getSpriteSheetData(this.data.dataUrl);
105 | 
106 |             // callback for when the image has loaded
107 |             this.el.addEventListener('materialtextureloaded', function () {
108 |                 _this.imageLoaded = true;
109 | 
110 |                 // save reference to the original image
111 |                 _this.spriteSheetImage = _this.el.object3D.children[0].material.map.image;
112 |                 _this.texture = new THREE.Texture(_this.mapCanvas);
113 |                 _this.el.object3D.children[0].material.map = _this.texture;
114 |             });
115 |         } else {
116 |             // use rows and cols
117 |             this.numFrames = this.data.rows * this.data.cols;
118 | 
119 |             // callback for when the image has loaded
120 |             this.el.addEventListener('materialtextureloaded', function () {
121 |                 _this.imageLoaded = true;
122 |                 // useful if animating multiple sprites
123 |                 if (_this.data.cloneTexture) {
124 |                     _this.el.object3D.children[0].material.map = _this.el.object3D.children[0].material.map.clone();
125 |                     _this.el.object3D.children[0].material.map.needsUpdate = true;
126 |                 }
127 | 
128 |                 _this.texture = _this.el.object3D.children[0].material.map;
129 |                 _this.texture.wrapS = _this.texture.wrapT = THREE.RepeatWrapping;
130 | 
131 |                 // set size of one sprite
132 |                 _this.texture.repeat.set(_this.texture.image.width / _this.data.cols / _this.texture.image.width, _this.texture.image.height / _this.data.rows / _this.texture.image.height);
133 |                 _this.update();
134 |             });
135 |         }
136 | 
137 |         this.currentFrame = 0;
138 |     },
139 | 
140 |     /**
141 |      * Called when component is attached and when component data changes.
142 |      */
143 |     update: function update() {
144 |         // no actual animation
145 |         if (!this.framesData && this.data.firstFrame == this.data.lastFrame) return;
146 | 
147 |         // if no last frame is specified use the number of available frames
148 |         var lastFrame = this.data.lastFrame ? this.data.lastFrame : this.numFrames - 1;
149 | 
150 |         this.currentFrame = Math.round(this.data.progress * (lastFrame - this.data.firstFrame)) + this.data.firstFrame;
151 |         this.adjustTexture(this.currentFrame);
152 |     },
153 | 
154 |     /**
155 |      * Called when a component is removed (e.g., via removeAttribute).
156 |      */
157 |     remove: function remove() {
158 |         // Cleanup
159 |         this.mapCanvas = null;
160 |         this.textureCtx = null;
161 |         this.texture = null;
162 |         this.spriteSheetImage = null;
163 |         this.spriteSheetData = null;
164 |         this.framesData = null;
165 |     },
166 | 
167 |     /**
168 |      * Load a TexturePacker JSON based spritesheet
169 |      * Requires the A-Scene to have an 'a-assets' element present
170 |      * @param {string} url
171 |      */
172 |     getSpriteSheetData: function getSpriteSheetData(url) {
173 |         var _this2 = this;
174 | 
175 |         var assetsEl = document.querySelector('a-assets');
176 |         if (assetsEl) {
177 |             assetsEl.fileLoader.load(url, function (data) {
178 |                 _this2.spriteSheetData = JSON.parse(data);
179 |                 _this2.framesData = Object.keys(_this2.spriteSheetData.frames).map(function (key) {
180 |                     return _this2.spriteSheetData.frames[key];
181 |                 });
182 |                 _this2.numFrames = _this2.framesData.length;
183 | 
184 |                 _this2.frameWidth = _this2.framesData[0].sourceSize.w;
185 |                 _this2.frameHeight = _this2.framesData[0].sourceSize.h;
186 | 
187 |                 _this2.mapCanvas.width = pow2ceil(_this2.frameWidth);
188 |                 _this2.mapCanvas.height = pow2ceil(_this2.frameHeight);
189 | 
190 |                 _this2.texture.repeat.set(_this2.frameWidth / _this2.mapCanvas.width, _this2.frameHeight / _this2.mapCanvas.height);
191 | 
192 |                 _this2.texture.offset.x = 0;
193 |                 _this2.texture.offset.y = 1 - _this2.frameHeight / _this2.mapCanvas.height;
194 |             });
195 |         } else {
196 |             console.warn('Can\'t load spritesheet URL. No a-assets element present on the A-Scene!');
197 |         }
198 |     },
199 | 
200 |     /**
201 |      * Adjust the texture to a specific frame index
202 |      * @param {number} frameNum
203 |      */
204 |     adjustTexture: function adjustTexture(frameNum) {
205 |         console.log(frameNum);
206 |         // image hasn't loaded, can't draw anything
207 |         if (!this.imageLoaded) return;
208 | 
209 |         // no need to draw the same frame twice
210 |         if (this.lastDrawnFrame == frameNum) return;
211 | 
212 |         // if using spritesheet json
213 |         if (this.framesData) {
214 |             this.adjustFrameBySpriteSheet(frameNum);
215 |         } else {
216 |             this.adjustFrameByRowsCols(frameNum);
217 |         }
218 | 
219 |         this.lastDrawnFrame = frameNum;
220 |     },
221 | 
222 |     /**
223 |      * Adjust the spritesheet texture to a certain frame on a row/col grid image
224 |      * @param {number} frameNum
225 |      */
226 |     adjustFrameByRowsCols: function adjustFrameByRowsCols(frameNum) {
227 |         this.texture.offset.x = frameNum % this.data.cols / this.data.cols;
228 |         this.texture.offset.y = -1 / this.data.rows - Math.floor(frameNum / this.data.cols) / this.data.rows;
229 |     },
230 | 
231 |     /**
232 |      * Adjust the spritesheet texture to a certain frame on a TexturePacker JSON spritesheet
233 |      * @param {number} frameNum
234 |      */
235 |     adjustFrameBySpriteSheet: function adjustFrameBySpriteSheet(frameNum) {
236 |         var frameData = this.framesData[frameNum];
237 | 
238 |         this.textureCtx.clearRect(0, 0, this.mapCanvas.width, this.mapCanvas.height);
239 |         this.textureCtx.save();
240 |         if (frameData.rotated) {
241 | 
242 |             // drawing is rotated, so axes are rotated
243 |             var drawData = {
244 |                 dX: this.frameHeight - (frameData.frame.h + frameData.spriteSourceSize.y),
245 |                 dY: frameData.spriteSourceSize.x,
246 |                 width: frameData.frame.h,
247 |                 height: frameData.frame.w
248 |             };
249 | 
250 |             this.textureCtx.rotate(-90 * Math.PI / 180);
251 |             this.textureCtx.translate(-this.frameHeight, 0);
252 | 
253 |             this.textureCtx.drawImage(this.spriteSheetImage, frameData.frame.x, frameData.frame.y, frameData.frame.h, frameData.frame.w, drawData.dX, drawData.dY, drawData.width, drawData.height);
254 |         } else {
255 |             var _drawData = {
256 |                 dX: this.frameWidth / 2 + (frameData.spriteSourceSize.x - frameData.sourceSize.w / 2),
257 |                 dY: this.frameHeight / 2 + (frameData.spriteSourceSize.y - frameData.sourceSize.h / 2),
258 |                 width: frameData.frame.w,
259 |                 height: frameData.frame.h
260 |             };
261 | 
262 |             this.textureCtx.drawImage(this.spriteSheetImage, frameData.frame.x, frameData.frame.y, frameData.frame.w, frameData.frame.h, _drawData.dX, _drawData.dY, _drawData.width, _drawData.height);
263 |         }
264 | 
265 |         this.textureCtx.restore();
266 |         this.texture.needsUpdate = true;
267 |     }
268 | });
269 | 
270 | /**
271 |  * Returns the next highest number which is a power of 2
272 |  * @param {number} number
273 |  * @return {number}
274 |  */
275 | function pow2ceil(number) {
276 |     number--;
277 |     var p = 2;
278 |     while (number >>= 1) {
279 |         p <<= 1;
280 |     }
281 |     return p;
282 | }
283 | 
284 | module.exports = SpriteSheet;
285 | 
286 | /***/ })
287 | /******/ ]);


--------------------------------------------------------------------------------
/dist/aframe-spritesheet-component.min.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(r){if(a[r])return a[r].exports;var i=a[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var a={};return t.m=e,t.c=a,t.i=function(e){return e},t.d=function(e,a,r){t.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(a,"a",a),a},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,a){"use strict";function r(e){e--;for(var t=2;e>>=1;)t<<=1;return t}var i=AFRAME.registerComponent("sprite-sheet",{schema:{progress:{type:"number",default:0},cols:{type:"number",default:1},rows:{type:"number",default:1},firstFrame:{type:"number",default:0},lastFrame:{type:"number",default:null},cloneTexture:{default:!1},dataUrl:{type:"string",default:null}},init:function(){var e=this;console.log("init"),this.data.dataUrl?(this.mapCanvas=document.createElement("canvas"),this.textureCtx=this.mapCanvas.getContext("2d"),this.texture=new THREE.Texture(this.mapCanvas),this.getSpriteSheetData(this.data.dataUrl),this.el.addEventListener("materialtextureloaded",function(){e.imageLoaded=!0,e.spriteSheetImage=e.el.object3D.children[0].material.map.image,e.texture=new THREE.Texture(e.mapCanvas),e.el.object3D.children[0].material.map=e.texture})):(this.numFrames=this.data.rows*this.data.cols,this.el.addEventListener("materialtextureloaded",function(){e.imageLoaded=!0,e.data.cloneTexture&&(e.el.object3D.children[0].material.map=e.el.object3D.children[0].material.map.clone(),e.el.object3D.children[0].material.map.needsUpdate=!0),e.texture=e.el.object3D.children[0].material.map,e.texture.wrapS=e.texture.wrapT=THREE.RepeatWrapping,e.texture.repeat.set(e.texture.image.width/e.data.cols/e.texture.image.width,e.texture.image.height/e.data.rows/e.texture.image.height),e.update()})),this.currentFrame=0},update:function(){if(this.framesData||this.data.firstFrame!=this.data.lastFrame){var e=this.data.lastFrame?this.data.lastFrame:this.numFrames-1;this.currentFrame=Math.round(this.data.progress*(e-this.data.firstFrame))+this.data.firstFrame,this.adjustTexture(this.currentFrame)}},remove:function(){this.mapCanvas=null,this.textureCtx=null,this.texture=null,this.spriteSheetImage=null,this.spriteSheetData=null,this.framesData=null},getSpriteSheetData:function(e){var t=this,a=document.querySelector("a-assets");a?a.fileLoader.load(e,function(e){t.spriteSheetData=JSON.parse(e),t.framesData=Object.keys(t.spriteSheetData.frames).map(function(e){return t.spriteSheetData.frames[e]}),t.numFrames=t.framesData.length,t.frameWidth=t.framesData[0].sourceSize.w,t.frameHeight=t.framesData[0].sourceSize.h,t.mapCanvas.width=r(t.frameWidth),t.mapCanvas.height=r(t.frameHeight),t.texture.repeat.set(t.frameWidth/t.mapCanvas.width,t.frameHeight/t.mapCanvas.height),t.texture.offset.x=0,t.texture.offset.y=1-t.frameHeight/t.mapCanvas.height}):console.warn("Can't load spritesheet URL. No a-assets element present on the A-Scene!")},adjustTexture:function(e){console.log(e),this.imageLoaded&&this.lastDrawnFrame!=e&&(this.framesData?this.adjustFrameBySpriteSheet(e):this.adjustFrameByRowsCols(e),this.lastDrawnFrame=e)},adjustFrameByRowsCols:function(e){this.texture.offset.x=e%this.data.cols/this.data.cols,this.texture.offset.y=-1/this.data.rows-Math.floor(e/this.data.cols)/this.data.rows},adjustFrameBySpriteSheet:function(e){var t=this.framesData[e];if(this.textureCtx.clearRect(0,0,this.mapCanvas.width,this.mapCanvas.height),this.textureCtx.save(),t.rotated){var a={dX:this.frameHeight-(t.frame.h+t.spriteSourceSize.y),dY:t.spriteSourceSize.x,width:t.frame.h,height:t.frame.w};this.textureCtx.rotate(-90*Math.PI/180),this.textureCtx.translate(-this.frameHeight,0),this.textureCtx.drawImage(this.spriteSheetImage,t.frame.x,t.frame.y,t.frame.h,t.frame.w,a.dX,a.dY,a.width,a.height)}else{var r={dX:this.frameWidth/2+(t.spriteSourceSize.x-t.sourceSize.w/2),dY:this.frameHeight/2+(t.spriteSourceSize.y-t.sourceSize.h/2),width:t.frame.w,height:t.frame.h};this.textureCtx.drawImage(this.spriteSheetImage,t.frame.x,t.frame.y,t.frame.w,t.frame.h,r.dX,r.dY,r.width,r.height)}this.textureCtx.restore(),this.texture.needsUpdate=!0}});e.exports=i}]);


--------------------------------------------------------------------------------
/examples/json/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>A-Frame A-Frame Spritesheet Component Component - Basic</title>
 4 |     <meta name="description" content="A-Frame basic Spritesheet component"></meta>
 5 |     <script src="../build.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <a-scene>
 9 |       <a-assets></a-assets>
10 |       <a-image src="toaster.png"
11 |                sprite-sheet="dataUrl: toaster.json; progress: 0;"
12 |                width="1"
13 |                height="1"
14 |                position="0 1.5 -4"></a-image>
15 | 
16 |       <a-sky color="#ECECEC"></a-sky>
17 | 
18 |     </a-scene>
19 | 
20 |     <script type="text/javascript">
21 |         var animation = { progress: 0 };
22 | 
23 |         var tween = new TWEEN.Tween(animation)
24 |             .to({ progress: 1 }, 1500)
25 |             .onUpdate(function(){
26 |                 document.querySelector('a-image').setAttribute('sprite-sheet', 'progress', animation.progress);
27 |             });
28 | 
29 | 
30 |         tween.onComplete(function() { animation.progress = 0; });
31 |         tween.chain(tween);
32 |         tween.start();
33 |     </script>
34 | 
35 |     <div style="position: absolute; bottom: 0; left: 0; width: 100%; background: white; opacity: 0.5; padding: 0.2rem; font-size: 0.8rem;">
36 |       Sprite taken from <a href="http://www.glitchthegame.com">glitchthegame.com</a>, under a Public Domain Dedication license
37 |     </div>
38 | 
39 |     <!-- GitHub Corner. -->
40 |     <a href="https://github.com/opherv/aframe-spritesheet-component" class="github-corner">
41 |       <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
42 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
43 |       </svg>
44 |     </a>
45 |     <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
46 |     <!-- End GitHub Corner. -->
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/examples/json/toaster.json:
--------------------------------------------------------------------------------
  1 | {"frames": {
  2 | 
  3 | "0.png":
  4 | {
  5 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
  6 | 	"rotated": false,
  7 | 	"trimmed": true,
  8 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
  9 | 	"sourceSize": {"w":115,"h":73},
 10 | 	"pivot": {"x":0.5,"y":0.5}
 11 | },
 12 | "1.png":
 13 | {
 14 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
 15 | 	"rotated": false,
 16 | 	"trimmed": true,
 17 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
 18 | 	"sourceSize": {"w":115,"h":73},
 19 | 	"pivot": {"x":0.5,"y":0.5}
 20 | },
 21 | "2.png":
 22 | {
 23 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
 24 | 	"rotated": false,
 25 | 	"trimmed": true,
 26 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
 27 | 	"sourceSize": {"w":115,"h":73},
 28 | 	"pivot": {"x":0.5,"y":0.5}
 29 | },
 30 | "3.png":
 31 | {
 32 | 	"frame": {"x":268,"y":105,"w":75,"h":73},
 33 | 	"rotated": false,
 34 | 	"trimmed": true,
 35 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
 36 | 	"sourceSize": {"w":115,"h":73},
 37 | 	"pivot": {"x":0.5,"y":0.5}
 38 | },
 39 | "4.png":
 40 | {
 41 | 	"frame": {"x":345,"y":106,"w":77,"h":73},
 42 | 	"rotated": false,
 43 | 	"trimmed": true,
 44 | 	"spriteSourceSize": {"x":22,"y":0,"w":77,"h":73},
 45 | 	"sourceSize": {"w":115,"h":73},
 46 | 	"pivot": {"x":0.5,"y":0.5}
 47 | },
 48 | "5.png":
 49 | {
 50 | 	"frame": {"x":424,"y":109,"w":79,"h":73},
 51 | 	"rotated": false,
 52 | 	"trimmed": true,
 53 | 	"spriteSourceSize": {"x":22,"y":0,"w":79,"h":73},
 54 | 	"sourceSize": {"w":115,"h":73},
 55 | 	"pivot": {"x":0.5,"y":0.5}
 56 | },
 57 | "6.png":
 58 | {
 59 | 	"frame": {"x":582,"y":110,"w":80,"h":73},
 60 | 	"rotated": false,
 61 | 	"trimmed": true,
 62 | 	"spriteSourceSize": {"x":22,"y":0,"w":80,"h":73},
 63 | 	"sourceSize": {"w":115,"h":73},
 64 | 	"pivot": {"x":0.5,"y":0.5}
 65 | },
 66 | "7.png":
 67 | {
 68 | 	"frame": {"x":903,"y":117,"w":77,"h":73},
 69 | 	"rotated": false,
 70 | 	"trimmed": true,
 71 | 	"spriteSourceSize": {"x":22,"y":0,"w":77,"h":73},
 72 | 	"sourceSize": {"w":115,"h":73},
 73 | 	"pivot": {"x":0.5,"y":0.5}
 74 | },
 75 | "8.png":
 76 | {
 77 | 	"frame": {"x":117,"y":105,"w":72,"h":71},
 78 | 	"rotated": false,
 79 | 	"trimmed": true,
 80 | 	"spriteSourceSize": {"x":22,"y":2,"w":72,"h":71},
 81 | 	"sourceSize": {"w":115,"h":73},
 82 | 	"pivot": {"x":0.5,"y":0.5}
 83 | },
 84 | "9.png":
 85 | {
 86 | 	"frame": {"x":813,"y":53,"w":69,"h":60},
 87 | 	"rotated": false,
 88 | 	"trimmed": true,
 89 | 	"spriteSourceSize": {"x":22,"y":13,"w":69,"h":60},
 90 | 	"sourceSize": {"w":115,"h":73},
 91 | 	"pivot": {"x":0.5,"y":0.5}
 92 | },
 93 | "10.png":
 94 | {
 95 | 	"frame": {"x":1,"y":1,"w":71,"h":44},
 96 | 	"rotated": false,
 97 | 	"trimmed": true,
 98 | 	"spriteSourceSize": {"x":20,"y":29,"w":71,"h":44},
 99 | 	"sourceSize": {"w":115,"h":73},
100 | 	"pivot": {"x":0.5,"y":0.5}
101 | },
102 | "11.png":
103 | {
104 | 	"frame": {"x":1,"y":1,"w":71,"h":44},
105 | 	"rotated": false,
106 | 	"trimmed": true,
107 | 	"spriteSourceSize": {"x":20,"y":29,"w":71,"h":44},
108 | 	"sourceSize": {"w":115,"h":73},
109 | 	"pivot": {"x":0.5,"y":0.5}
110 | },
111 | "12.png":
112 | {
113 | 	"frame": {"x":146,"y":1,"w":69,"h":45},
114 | 	"rotated": false,
115 | 	"trimmed": true,
116 | 	"spriteSourceSize": {"x":21,"y":28,"w":69,"h":45},
117 | 	"sourceSize": {"w":115,"h":73},
118 | 	"pivot": {"x":0.5,"y":0.5}
119 | },
120 | "13.png":
121 | {
122 | 	"frame": {"x":217,"y":1,"w":68,"h":46},
123 | 	"rotated": false,
124 | 	"trimmed": true,
125 | 	"spriteSourceSize": {"x":22,"y":27,"w":68,"h":46},
126 | 	"sourceSize": {"w":115,"h":73},
127 | 	"pivot": {"x":0.5,"y":0.5}
128 | },
129 | "14.png":
130 | {
131 | 	"frame": {"x":357,"y":1,"w":67,"h":47},
132 | 	"rotated": false,
133 | 	"trimmed": true,
134 | 	"spriteSourceSize": {"x":22,"y":26,"w":67,"h":47},
135 | 	"sourceSize": {"w":115,"h":73},
136 | 	"pivot": {"x":0.5,"y":0.5}
137 | },
138 | "15.png":
139 | {
140 | 	"frame": {"x":426,"y":1,"w":67,"h":47},
141 | 	"rotated": false,
142 | 	"trimmed": true,
143 | 	"spriteSourceSize": {"x":22,"y":26,"w":67,"h":47},
144 | 	"sourceSize": {"w":115,"h":73},
145 | 	"pivot": {"x":0.5,"y":0.5}
146 | },
147 | "16.png":
148 | {
149 | 	"frame": {"x":426,"y":1,"w":67,"h":47},
150 | 	"rotated": false,
151 | 	"trimmed": true,
152 | 	"spriteSourceSize": {"x":22,"y":26,"w":67,"h":47},
153 | 	"sourceSize": {"w":115,"h":73},
154 | 	"pivot": {"x":0.5,"y":0.5}
155 | },
156 | "17.png":
157 | {
158 | 	"frame": {"x":495,"y":1,"w":75,"h":47},
159 | 	"rotated": false,
160 | 	"trimmed": true,
161 | 	"spriteSourceSize": {"x":19,"y":26,"w":75,"h":47},
162 | 	"sourceSize": {"w":115,"h":73},
163 | 	"pivot": {"x":0.5,"y":0.5}
164 | },
165 | "18.png":
166 | {
167 | 	"frame": {"x":495,"y":1,"w":75,"h":47},
168 | 	"rotated": false,
169 | 	"trimmed": true,
170 | 	"spriteSourceSize": {"x":19,"y":26,"w":75,"h":47},
171 | 	"sourceSize": {"w":115,"h":73},
172 | 	"pivot": {"x":0.5,"y":0.5}
173 | },
174 | "19.png":
175 | {
176 | 	"frame": {"x":572,"y":1,"w":89,"h":47},
177 | 	"rotated": false,
178 | 	"trimmed": true,
179 | 	"spriteSourceSize": {"x":13,"y":26,"w":89,"h":47},
180 | 	"sourceSize": {"w":115,"h":73},
181 | 	"pivot": {"x":0.5,"y":0.5}
182 | },
183 | "20.png":
184 | {
185 | 	"frame": {"x":572,"y":1,"w":89,"h":47},
186 | 	"rotated": false,
187 | 	"trimmed": true,
188 | 	"spriteSourceSize": {"x":13,"y":26,"w":89,"h":47},
189 | 	"sourceSize": {"w":115,"h":73},
190 | 	"pivot": {"x":0.5,"y":0.5}
191 | },
192 | "21.png":
193 | {
194 | 	"frame": {"x":732,"y":1,"w":113,"h":49},
195 | 	"rotated": false,
196 | 	"trimmed": true,
197 | 	"spriteSourceSize": {"x":1,"y":24,"w":113,"h":49},
198 | 	"sourceSize": {"w":115,"h":73},
199 | 	"pivot": {"x":0.5,"y":0.5}
200 | },
201 | "22.png":
202 | {
203 | 	"frame": {"x":732,"y":1,"w":113,"h":49},
204 | 	"rotated": false,
205 | 	"trimmed": true,
206 | 	"spriteSourceSize": {"x":1,"y":24,"w":113,"h":49},
207 | 	"sourceSize": {"w":115,"h":73},
208 | 	"pivot": {"x":0.5,"y":0.5}
209 | },
210 | "23.png":
211 | {
212 | 	"frame": {"x":847,"y":1,"w":115,"h":50},
213 | 	"rotated": false,
214 | 	"trimmed": true,
215 | 	"spriteSourceSize": {"x":0,"y":23,"w":115,"h":50},
216 | 	"sourceSize": {"w":115,"h":73},
217 | 	"pivot": {"x":0.5,"y":0.5}
218 | },
219 | "24.png":
220 | {
221 | 	"frame": {"x":847,"y":1,"w":115,"h":50},
222 | 	"rotated": false,
223 | 	"trimmed": true,
224 | 	"spriteSourceSize": {"x":0,"y":23,"w":115,"h":50},
225 | 	"sourceSize": {"w":115,"h":73},
226 | 	"pivot": {"x":0.5,"y":0.5}
227 | },
228 | "25.png":
229 | {
230 | 	"frame": {"x":1,"y":47,"w":114,"h":54},
231 | 	"rotated": false,
232 | 	"trimmed": true,
233 | 	"spriteSourceSize": {"x":1,"y":19,"w":114,"h":54},
234 | 	"sourceSize": {"w":115,"h":73},
235 | 	"pivot": {"x":0.5,"y":0.5}
236 | },
237 | "26.png":
238 | {
239 | 	"frame": {"x":1,"y":47,"w":114,"h":54},
240 | 	"rotated": false,
241 | 	"trimmed": true,
242 | 	"spriteSourceSize": {"x":1,"y":19,"w":114,"h":54},
243 | 	"sourceSize": {"w":115,"h":73},
244 | 	"pivot": {"x":0.5,"y":0.5}
245 | },
246 | "27.png":
247 | {
248 | 	"frame": {"x":465,"y":50,"w":115,"h":57},
249 | 	"rotated": false,
250 | 	"trimmed": true,
251 | 	"spriteSourceSize": {"x":0,"y":16,"w":115,"h":57},
252 | 	"sourceSize": {"w":115,"h":73},
253 | 	"pivot": {"x":0.5,"y":0.5}
254 | },
255 | "28.png":
256 | {
257 | 	"frame": {"x":465,"y":50,"w":115,"h":57},
258 | 	"rotated": false,
259 | 	"trimmed": true,
260 | 	"spriteSourceSize": {"x":0,"y":16,"w":115,"h":57},
261 | 	"sourceSize": {"w":115,"h":73},
262 | 	"pivot": {"x":0.5,"y":0.5}
263 | },
264 | "29.png":
265 | {
266 | 	"frame": {"x":1,"y":103,"w":114,"h":62},
267 | 	"rotated": false,
268 | 	"trimmed": true,
269 | 	"spriteSourceSize": {"x":0,"y":11,"w":114,"h":62},
270 | 	"sourceSize": {"w":115,"h":73},
271 | 	"pivot": {"x":0.5,"y":0.5}
272 | },
273 | "30.png":
274 | {
275 | 	"frame": {"x":1,"y":103,"w":114,"h":62},
276 | 	"rotated": false,
277 | 	"trimmed": true,
278 | 	"spriteSourceSize": {"x":0,"y":11,"w":114,"h":62},
279 | 	"sourceSize": {"w":115,"h":73},
280 | 	"pivot": {"x":0.5,"y":0.5}
281 | },
282 | "31.png":
283 | {
284 | 	"frame": {"x":117,"y":49,"w":112,"h":54},
285 | 	"rotated": false,
286 | 	"trimmed": true,
287 | 	"spriteSourceSize": {"x":1,"y":19,"w":112,"h":54},
288 | 	"sourceSize": {"w":115,"h":73},
289 | 	"pivot": {"x":0.5,"y":0.5}
290 | },
291 | "32.png":
292 | {
293 | 	"frame": {"x":117,"y":49,"w":112,"h":54},
294 | 	"rotated": false,
295 | 	"trimmed": true,
296 | 	"spriteSourceSize": {"x":1,"y":19,"w":112,"h":54},
297 | 	"sourceSize": {"w":115,"h":73},
298 | 	"pivot": {"x":0.5,"y":0.5}
299 | },
300 | "33.png":
301 | {
302 | 	"frame": {"x":231,"y":49,"w":115,"h":54},
303 | 	"rotated": false,
304 | 	"trimmed": true,
305 | 	"spriteSourceSize": {"x":0,"y":19,"w":115,"h":54},
306 | 	"sourceSize": {"w":115,"h":73},
307 | 	"pivot": {"x":0.5,"y":0.5}
308 | },
309 | "34.png":
310 | {
311 | 	"frame": {"x":231,"y":49,"w":115,"h":54},
312 | 	"rotated": false,
313 | 	"trimmed": true,
314 | 	"spriteSourceSize": {"x":0,"y":19,"w":115,"h":54},
315 | 	"sourceSize": {"w":115,"h":73},
316 | 	"pivot": {"x":0.5,"y":0.5}
317 | },
318 | "35.png":
319 | {
320 | 	"frame": {"x":847,"y":1,"w":115,"h":50},
321 | 	"rotated": false,
322 | 	"trimmed": true,
323 | 	"spriteSourceSize": {"x":0,"y":23,"w":115,"h":50},
324 | 	"sourceSize": {"w":115,"h":73},
325 | 	"pivot": {"x":0.5,"y":0.5}
326 | },
327 | "36.png":
328 | {
329 | 	"frame": {"x":847,"y":1,"w":115,"h":50},
330 | 	"rotated": false,
331 | 	"trimmed": true,
332 | 	"spriteSourceSize": {"x":0,"y":23,"w":115,"h":50},
333 | 	"sourceSize": {"w":115,"h":73},
334 | 	"pivot": {"x":0.5,"y":0.5}
335 | },
336 | "37.png":
337 | {
338 | 	"frame": {"x":1,"y":47,"w":114,"h":54},
339 | 	"rotated": false,
340 | 	"trimmed": true,
341 | 	"spriteSourceSize": {"x":1,"y":19,"w":114,"h":54},
342 | 	"sourceSize": {"w":115,"h":73},
343 | 	"pivot": {"x":0.5,"y":0.5}
344 | },
345 | "38.png":
346 | {
347 | 	"frame": {"x":1,"y":47,"w":114,"h":54},
348 | 	"rotated": false,
349 | 	"trimmed": true,
350 | 	"spriteSourceSize": {"x":1,"y":19,"w":114,"h":54},
351 | 	"sourceSize": {"w":115,"h":73},
352 | 	"pivot": {"x":0.5,"y":0.5}
353 | },
354 | "39.png":
355 | {
356 | 	"frame": {"x":465,"y":50,"w":115,"h":57},
357 | 	"rotated": false,
358 | 	"trimmed": true,
359 | 	"spriteSourceSize": {"x":0,"y":16,"w":115,"h":57},
360 | 	"sourceSize": {"w":115,"h":73},
361 | 	"pivot": {"x":0.5,"y":0.5}
362 | },
363 | "40.png":
364 | {
365 | 	"frame": {"x":465,"y":50,"w":115,"h":57},
366 | 	"rotated": false,
367 | 	"trimmed": true,
368 | 	"spriteSourceSize": {"x":0,"y":16,"w":115,"h":57},
369 | 	"sourceSize": {"w":115,"h":73},
370 | 	"pivot": {"x":0.5,"y":0.5}
371 | },
372 | "41.png":
373 | {
374 | 	"frame": {"x":1,"y":103,"w":114,"h":62},
375 | 	"rotated": false,
376 | 	"trimmed": true,
377 | 	"spriteSourceSize": {"x":0,"y":11,"w":114,"h":62},
378 | 	"sourceSize": {"w":115,"h":73},
379 | 	"pivot": {"x":0.5,"y":0.5}
380 | },
381 | "42.png":
382 | {
383 | 	"frame": {"x":1,"y":103,"w":114,"h":62},
384 | 	"rotated": false,
385 | 	"trimmed": true,
386 | 	"spriteSourceSize": {"x":0,"y":11,"w":114,"h":62},
387 | 	"sourceSize": {"w":115,"h":73},
388 | 	"pivot": {"x":0.5,"y":0.5}
389 | },
390 | "43.png":
391 | {
392 | 	"frame": {"x":117,"y":49,"w":112,"h":54},
393 | 	"rotated": false,
394 | 	"trimmed": true,
395 | 	"spriteSourceSize": {"x":1,"y":19,"w":112,"h":54},
396 | 	"sourceSize": {"w":115,"h":73},
397 | 	"pivot": {"x":0.5,"y":0.5}
398 | },
399 | "44.png":
400 | {
401 | 	"frame": {"x":117,"y":49,"w":112,"h":54},
402 | 	"rotated": false,
403 | 	"trimmed": true,
404 | 	"spriteSourceSize": {"x":1,"y":19,"w":112,"h":54},
405 | 	"sourceSize": {"w":115,"h":73},
406 | 	"pivot": {"x":0.5,"y":0.5}
407 | },
408 | "45.png":
409 | {
410 | 	"frame": {"x":231,"y":49,"w":115,"h":54},
411 | 	"rotated": false,
412 | 	"trimmed": true,
413 | 	"spriteSourceSize": {"x":0,"y":19,"w":115,"h":54},
414 | 	"sourceSize": {"w":115,"h":73},
415 | 	"pivot": {"x":0.5,"y":0.5}
416 | },
417 | "46.png":
418 | {
419 | 	"frame": {"x":231,"y":49,"w":115,"h":54},
420 | 	"rotated": false,
421 | 	"trimmed": true,
422 | 	"spriteSourceSize": {"x":0,"y":19,"w":115,"h":54},
423 | 	"sourceSize": {"w":115,"h":73},
424 | 	"pivot": {"x":0.5,"y":0.5}
425 | },
426 | "47.png":
427 | {
428 | 	"frame": {"x":348,"y":50,"w":115,"h":54},
429 | 	"rotated": false,
430 | 	"trimmed": true,
431 | 	"spriteSourceSize": {"x":0,"y":19,"w":115,"h":54},
432 | 	"sourceSize": {"w":115,"h":73},
433 | 	"pivot": {"x":0.5,"y":0.5}
434 | },
435 | "48.png":
436 | {
437 | 	"frame": {"x":348,"y":50,"w":115,"h":54},
438 | 	"rotated": false,
439 | 	"trimmed": true,
440 | 	"spriteSourceSize": {"x":0,"y":19,"w":115,"h":54},
441 | 	"sourceSize": {"w":115,"h":73},
442 | 	"pivot": {"x":0.5,"y":0.5}
443 | },
444 | "49.png":
445 | {
446 | 	"frame": {"x":582,"y":50,"w":114,"h":58},
447 | 	"rotated": false,
448 | 	"trimmed": true,
449 | 	"spriteSourceSize": {"x":1,"y":15,"w":114,"h":58},
450 | 	"sourceSize": {"w":115,"h":73},
451 | 	"pivot": {"x":0.5,"y":0.5}
452 | },
453 | "50.png":
454 | {
455 | 	"frame": {"x":582,"y":50,"w":114,"h":58},
456 | 	"rotated": false,
457 | 	"trimmed": true,
458 | 	"spriteSourceSize": {"x":1,"y":15,"w":114,"h":58},
459 | 	"sourceSize": {"w":115,"h":73},
460 | 	"pivot": {"x":0.5,"y":0.5}
461 | },
462 | "51.png":
463 | {
464 | 	"frame": {"x":698,"y":52,"w":113,"h":60},
465 | 	"rotated": false,
466 | 	"trimmed": true,
467 | 	"spriteSourceSize": {"x":1,"y":13,"w":113,"h":60},
468 | 	"sourceSize": {"w":115,"h":73},
469 | 	"pivot": {"x":0.5,"y":0.5}
470 | },
471 | "52.png":
472 | {
473 | 	"frame": {"x":698,"y":52,"w":113,"h":60},
474 | 	"rotated": false,
475 | 	"trimmed": true,
476 | 	"spriteSourceSize": {"x":1,"y":13,"w":113,"h":60},
477 | 	"sourceSize": {"w":115,"h":73},
478 | 	"pivot": {"x":0.5,"y":0.5}
479 | },
480 | "53.png":
481 | {
482 | 	"frame": {"x":884,"y":53,"w":100,"h":62},
483 | 	"rotated": false,
484 | 	"trimmed": true,
485 | 	"spriteSourceSize": {"x":12,"y":11,"w":100,"h":62},
486 | 	"sourceSize": {"w":115,"h":73},
487 | 	"pivot": {"x":0.5,"y":0.5}
488 | },
489 | "54.png":
490 | {
491 | 	"frame": {"x":884,"y":53,"w":100,"h":62},
492 | 	"rotated": false,
493 | 	"trimmed": true,
494 | 	"spriteSourceSize": {"x":12,"y":11,"w":100,"h":62},
495 | 	"sourceSize": {"w":115,"h":73},
496 | 	"pivot": {"x":0.5,"y":0.5}
497 | },
498 | "55.png":
499 | {
500 | 	"frame": {"x":426,"y":1,"w":67,"h":47},
501 | 	"rotated": false,
502 | 	"trimmed": true,
503 | 	"spriteSourceSize": {"x":22,"y":26,"w":67,"h":47},
504 | 	"sourceSize": {"w":115,"h":73},
505 | 	"pivot": {"x":0.5,"y":0.5}
506 | },
507 | "56.png":
508 | {
509 | 	"frame": {"x":426,"y":1,"w":67,"h":47},
510 | 	"rotated": false,
511 | 	"trimmed": true,
512 | 	"spriteSourceSize": {"x":22,"y":26,"w":67,"h":47},
513 | 	"sourceSize": {"w":115,"h":73},
514 | 	"pivot": {"x":0.5,"y":0.5}
515 | },
516 | "57.png":
517 | {
518 | 	"frame": {"x":663,"y":1,"w":67,"h":47},
519 | 	"rotated": false,
520 | 	"trimmed": true,
521 | 	"spriteSourceSize": {"x":22,"y":26,"w":67,"h":47},
522 | 	"sourceSize": {"w":115,"h":73},
523 | 	"pivot": {"x":0.5,"y":0.5}
524 | },
525 | "58.png":
526 | {
527 | 	"frame": {"x":287,"y":1,"w":68,"h":46},
528 | 	"rotated": false,
529 | 	"trimmed": true,
530 | 	"spriteSourceSize": {"x":22,"y":27,"w":68,"h":46},
531 | 	"sourceSize": {"w":115,"h":73},
532 | 	"pivot": {"x":0.5,"y":0.5}
533 | },
534 | "59.png":
535 | {
536 | 	"frame": {"x":74,"y":1,"w":70,"h":44},
537 | 	"rotated": false,
538 | 	"trimmed": true,
539 | 	"spriteSourceSize": {"x":21,"y":29,"w":70,"h":44},
540 | 	"sourceSize": {"w":115,"h":73},
541 | 	"pivot": {"x":0.5,"y":0.5}
542 | },
543 | "60.png":
544 | {
545 | 	"frame": {"x":1,"y":1,"w":71,"h":44},
546 | 	"rotated": false,
547 | 	"trimmed": true,
548 | 	"spriteSourceSize": {"x":20,"y":29,"w":71,"h":44},
549 | 	"sourceSize": {"w":115,"h":73},
550 | 	"pivot": {"x":0.5,"y":0.5}
551 | },
552 | "61.png":
553 | {
554 | 	"frame": {"x":1,"y":1,"w":71,"h":44},
555 | 	"rotated": false,
556 | 	"trimmed": true,
557 | 	"spriteSourceSize": {"x":20,"y":29,"w":71,"h":44},
558 | 	"sourceSize": {"w":115,"h":73},
559 | 	"pivot": {"x":0.5,"y":0.5}
560 | },
561 | "62.png":
562 | {
563 | 	"frame": {"x":813,"y":53,"w":69,"h":60},
564 | 	"rotated": false,
565 | 	"trimmed": true,
566 | 	"spriteSourceSize": {"x":22,"y":13,"w":69,"h":60},
567 | 	"sourceSize": {"w":115,"h":73},
568 | 	"pivot": {"x":0.5,"y":0.5}
569 | },
570 | "63.png":
571 | {
572 | 	"frame": {"x":117,"y":105,"w":72,"h":71},
573 | 	"rotated": false,
574 | 	"trimmed": true,
575 | 	"spriteSourceSize": {"x":22,"y":2,"w":72,"h":71},
576 | 	"sourceSize": {"w":115,"h":73},
577 | 	"pivot": {"x":0.5,"y":0.5}
578 | },
579 | "64.png":
580 | {
581 | 	"frame": {"x":505,"y":109,"w":75,"h":73},
582 | 	"rotated": false,
583 | 	"trimmed": true,
584 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
585 | 	"sourceSize": {"w":115,"h":73},
586 | 	"pivot": {"x":0.5,"y":0.5}
587 | },
588 | "65.png":
589 | {
590 | 	"frame": {"x":582,"y":110,"w":80,"h":73},
591 | 	"rotated": false,
592 | 	"trimmed": true,
593 | 	"spriteSourceSize": {"x":22,"y":0,"w":80,"h":73},
594 | 	"sourceSize": {"w":115,"h":73},
595 | 	"pivot": {"x":0.5,"y":0.5}
596 | },
597 | "66.png":
598 | {
599 | 	"frame": {"x":664,"y":114,"w":79,"h":73},
600 | 	"rotated": false,
601 | 	"trimmed": true,
602 | 	"spriteSourceSize": {"x":22,"y":0,"w":79,"h":73},
603 | 	"sourceSize": {"w":115,"h":73},
604 | 	"pivot": {"x":0.5,"y":0.5}
605 | },
606 | "67.png":
607 | {
608 | 	"frame": {"x":745,"y":115,"w":78,"h":73},
609 | 	"rotated": false,
610 | 	"trimmed": true,
611 | 	"spriteSourceSize": {"x":22,"y":0,"w":78,"h":73},
612 | 	"sourceSize": {"w":115,"h":73},
613 | 	"pivot": {"x":0.5,"y":0.5}
614 | },
615 | "68.png":
616 | {
617 | 	"frame": {"x":825,"y":117,"w":76,"h":73},
618 | 	"rotated": false,
619 | 	"trimmed": true,
620 | 	"spriteSourceSize": {"x":22,"y":0,"w":76,"h":73},
621 | 	"sourceSize": {"w":115,"h":73},
622 | 	"pivot": {"x":0.5,"y":0.5}
623 | },
624 | "69.png":
625 | {
626 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
627 | 	"rotated": false,
628 | 	"trimmed": true,
629 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
630 | 	"sourceSize": {"w":115,"h":73},
631 | 	"pivot": {"x":0.5,"y":0.5}
632 | },
633 | "70.png":
634 | {
635 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
636 | 	"rotated": false,
637 | 	"trimmed": true,
638 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
639 | 	"sourceSize": {"w":115,"h":73},
640 | 	"pivot": {"x":0.5,"y":0.5}
641 | },
642 | "71.png":
643 | {
644 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
645 | 	"rotated": false,
646 | 	"trimmed": true,
647 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
648 | 	"sourceSize": {"w":115,"h":73},
649 | 	"pivot": {"x":0.5,"y":0.5}
650 | },
651 | "72.png":
652 | {
653 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
654 | 	"rotated": false,
655 | 	"trimmed": true,
656 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
657 | 	"sourceSize": {"w":115,"h":73},
658 | 	"pivot": {"x":0.5,"y":0.5}
659 | },
660 | "73.png":
661 | {
662 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
663 | 	"rotated": false,
664 | 	"trimmed": true,
665 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
666 | 	"sourceSize": {"w":115,"h":73},
667 | 	"pivot": {"x":0.5,"y":0.5}
668 | },
669 | "74.png":
670 | {
671 | 	"frame": {"x":191,"y":105,"w":75,"h":73},
672 | 	"rotated": false,
673 | 	"trimmed": true,
674 | 	"spriteSourceSize": {"x":22,"y":0,"w":75,"h":73},
675 | 	"sourceSize": {"w":115,"h":73},
676 | 	"pivot": {"x":0.5,"y":0.5}
677 | }},
678 | "meta": {
679 | 	"app": "http://www.codeandweb.com/texturepacker",
680 | 	"version": "1.0",
681 | 	"image": "toaster.png",
682 | 	"format": "RGBA8888",
683 | 	"size": {"w":985,"h":191},
684 | 	"scale": "1",
685 | 	"smartupdate": "$TexturePacker:SmartUpdate:109f5633d46b73a08fb71fce6d9869d3:1c2ec75cc6524fb689ff55f3ebb15b01:cde25ff7e8c2fceb4e94393687182fcd$"
686 | }
687 | }
688 | 


--------------------------------------------------------------------------------
/examples/json/toaster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EkoLabs/aframe-spritesheet-component/e37234442733ac59f46c8cf73b05f794c801de17/examples/json/toaster.png


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
1 | require('aframe');
2 | require('../index.js');
3 | 


--------------------------------------------------------------------------------
/examples/rowscols/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>A-Frame A-Frame Spritesheet Component Component - Basic</title>
 4 |     <meta name="description" content="A-Frame basic Spritesheet component"></meta>
 5 |     <script src="../build.js"></script>
 6 |   </head>
 7 |   <body>
 8 |     <a-scene>
 9 |       <a-assets></a-assets>
10 |       <a-image src="npc_piggy_explorer__x1_walk_png_1354837301.png"
11 |                sprite-sheet="cols:8; rows: 3; progress: 0;"
12 |                position="0 1.5 -4"></a-image>
13 | 
14 |       <a-sky color="#ECECEC"></a-sky>
15 | 
16 |     </a-scene>
17 | 
18 |     <script type="text/javascript">
19 |         var animation = { progress: 0 };
20 | 
21 |         var tween = new TWEEN.Tween(animation)
22 |             .to({ progress: 1 }, 1000)
23 |             .onUpdate(function(){
24 |                 document.querySelector('a-image').setAttribute('sprite-sheet', 'progress', animation.progress);
25 |             });
26 | 
27 | 
28 |         tween.onComplete(function() { animation.progress = 0; });
29 |         tween.chain(tween);
30 |         tween.start();
31 |     </script>
32 | 
33 |     <div style="position: absolute; bottom: 0; left: 0; width: 100%; background: white; opacity: 0.5; padding: 0.2rem; font-size: 0.8rem;">
34 |       Sprite taken from <a href="http://www.glitchthegame.com">glitchthegame.com</a>, under a Public Domain Dedication license
35 |     </div>
36 | 
37 |     <!-- GitHub Corner. -->
38 |     <a href="https://github.com/opherv/aframe-spritesheet-component" class="github-corner">
39 |       <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
40 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
41 |       </svg>
42 |     </a>
43 |     <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
44 |     <!-- End GitHub Corner. -->
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/examples/rowscols/npc_piggy_explorer__x1_walk_png_1354837301.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EkoLabs/aframe-spritesheet-component/e37234442733ac59f46c8cf73b05f794c801de17/examples/rowscols/npc_piggy_explorer__x1_walk_png_1354837301.png


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * A-Frame Spritesheet Component for A-Frame.
  4 |  * Enables dynamic control of animation spritesheets
  5 |  */
  6 | let SpriteSheet = AFRAME.registerComponent('sprite-sheet', {
  7 |     schema: {
  8 |         progress: { type: 'number', default: 0 },
  9 |         frameIndex: { type: 'number', default: null },
 10 |         frameName: { type: 'string', default: null },
 11 |         cols: { type: 'number', default: 1 },
 12 |         rows: { type: 'number', default: 1 },
 13 |         firstFrame: { type: 'number', default: 0 },
 14 |         lastFrame: { type: 'number', default: null },
 15 |         cloneTexture: { default: false },
 16 |         dataUrl: { type: 'string', default: null }
 17 |     },
 18 | 
 19 | 
 20 |     /**
 21 |      * Called once when component is attached.
 22 |      */
 23 |     init: function() {
 24 | 
 25 |         // if specified load spritesheet json data
 26 |         if (this.data.dataUrl) {
 27 |             this.mapCanvas = document.createElement( 'canvas' );
 28 |             this.textureCtx = this.mapCanvas.getContext( '2d' );
 29 |             this.texture = new THREE.Texture(this.mapCanvas);
 30 |             this.getSpriteSheetData(this.data.dataUrl);
 31 | 
 32 |             // callback for when the image has loaded
 33 |             this.el.addEventListener('materialtextureloaded', () => {
 34 |                 this.imageLoaded = true;
 35 | 
 36 |                 // save reference to the original image
 37 |                 this.spriteSheetImage = this.el.object3D.children[0].material.map.image;
 38 |                 this.texture = new THREE.Texture(this.mapCanvas);
 39 |                 this.el.object3D.children[0].material.map = this.texture;
 40 |             });
 41 | 
 42 |         } else {
 43 |             // use rows and cols
 44 |             this.numFrames = this.data.rows * this.data.cols;
 45 | 
 46 |             // callback for when the image has loaded
 47 |             this.el.addEventListener('materialtextureloaded', () => {
 48 |                 this.imageLoaded = true;
 49 |                 // useful if animating multiple sprites
 50 |                 if (this.data.cloneTexture) {
 51 |                     this.el.object3D.children[0].material.map = this.el.object3D.children[0].material.map.clone();
 52 |                     this.el.object3D.children[0].material.map.needsUpdate = true;
 53 |                 }
 54 | 
 55 |                 this.texture = this.el.object3D.children[0].material.map;
 56 |                 this.texture.wrapS = this.texture.wrapT = THREE.RepeatWrapping;
 57 | 
 58 |                 // set size of one sprite
 59 |                 this.texture.repeat.set(
 60 |                     this.texture.image.width / this.data.cols / this.texture.image.width,
 61 |                     this.texture.image.height / this.data.rows / this.texture.image.height
 62 |                 );
 63 |                 this.update();
 64 |             });
 65 | 
 66 |         }
 67 | 
 68 |         this.currentFrame = 0;
 69 |     },
 70 | 
 71 |     /**
 72 |      * Called when component is attached and when component data changes.
 73 |      */
 74 |     update: function() {
 75 |         // no actual animation
 76 |         if (!this.framesData && this.data.firstFrame == this.data.lastFrame) return;
 77 | 
 78 |         // if no last frame is specified use the number of available frames
 79 |         let lastFrame = this.data.lastFrame ? this.data.lastFrame : this.numFrames - 1;
 80 | 
 81 |         // decide current frame by this order: frame index (if specified), frame name (if specified), progress
 82 |         if (this.data.frameIndex){
 83 |             this.currentFrame = this.data.frameIndex;
 84 |         } else if (this.data.frameName && this.frameNameToIndex) {
 85 |             let frameIndex = this.frameNameToIndex[this.data.frameName];
 86 |             if (frameIndex != null)
 87 |                 this.currentFrame = frameIndex;
 88 |             else
 89 |                 console.warn(`Spritesheet error - No such frame with name ${this.data.frameName}`);
 90 |         } else {
 91 |             this.currentFrame = Math.round(this.data.progress * (lastFrame - this.data.firstFrame)) + this.data.firstFrame;
 92 |         }
 93 | 
 94 |         this.adjustTexture(this.currentFrame);
 95 |     },
 96 | 
 97 |     /**
 98 |      * Called when a component is removed (e.g., via removeAttribute).
 99 |      */
100 |     remove: function() {
101 |         // Cleanup
102 |         this.mapCanvas = null;
103 |         this.textureCtx = null;
104 |         this.texture = null;
105 |         this.spriteSheetImage = null;
106 |         this.spriteSheetData = null;
107 |         this.framesData = null;
108 |     },
109 | 
110 |     /**
111 |      * Load a TexturePacker JSON based spritesheet
112 |      * Requires the A-Scene to have an 'a-assets' element present
113 |      * @param {string} url
114 |      */
115 |     getSpriteSheetData: function(url) {
116 |         let assetsEl = document.querySelector('a-assets');
117 |         if (assetsEl) {
118 |             assetsEl.fileLoader.setResponseType('json');
119 |             assetsEl.fileLoader.load(url, data => {
120 |                 this.spriteSheetData = data;
121 |                 this.framesData = Object.keys(this.spriteSheetData.frames).map(key => {
122 |                     return this.spriteSheetData.frames[key];
123 |                 });
124 | 
125 |                 // create a dictionary to map from keyframe names to frame number
126 |                 this.frameNameToIndex = {};
127 |                 Object.keys(this.spriteSheetData.frames).map((key, index) => {
128 |                     this.frameNameToIndex[key] = index;
129 |                 });
130 |                 this.numFrames = this.framesData.length;
131 | 
132 |                 this.frameWidth = this.framesData[0].sourceSize.w;
133 |                 this.frameHeight = this.framesData[0].sourceSize.h;
134 | 
135 |                 this.mapCanvas.width = pow2ceil(this.frameWidth);
136 |                 this.mapCanvas.height = pow2ceil(this.frameHeight);
137 | 
138 |                 this.texture.repeat.set(
139 |                     this.frameWidth / this.mapCanvas.width,
140 |                     this.frameHeight / this.mapCanvas.height
141 |                 );
142 | 
143 |                 this.texture.offset.x = 0;
144 |                 this.texture.offset.y = 1 - this.frameHeight / this.mapCanvas.height;
145 |             });
146 |         } else{
147 |             console.warn('Can\'t load spritesheet URL. No a-assets element present on the A-Scene!');
148 |         }
149 |     },
150 | 
151 |     /**
152 |      * Adjust the texture to a specific frame index
153 |      * @param {number} frameNum
154 |      */
155 |     adjustTexture: function(frameNum) {
156 |         // image hasn't loaded, can't draw anything
157 |         if (!this.imageLoaded) return;
158 | 
159 |         // no need to draw the same frame twice
160 |         if (this.lastDrawnFrame == frameNum) return;
161 | 
162 |         // if using spritesheet json
163 |         if (this.framesData) {
164 |             this.adjustFrameBySpriteSheet(frameNum);
165 |         } else{
166 |             this.adjustFrameByRowsCols(frameNum);
167 |         }
168 | 
169 |         this.lastDrawnFrame = frameNum;
170 | 
171 |     },
172 | 
173 |     /**
174 |      * Adjust the spritesheet texture to a certain frame on a row/col grid image
175 |      * @param {number} frameNum
176 |      */
177 |     adjustFrameByRowsCols: function(frameNum) {
178 |         this.texture.offset.x = (frameNum % this.data.cols) / this.data.cols;
179 |         this.texture.offset.y = - 1 / this.data.rows - Math.floor(frameNum / this.data.cols) / this.data.rows;
180 |     },
181 | 
182 |     /**
183 |      * Adjust the spritesheet texture to a certain frame on a TexturePacker JSON spritesheet
184 |      * @param {number} frameNum
185 |      */
186 |     adjustFrameBySpriteSheet: function(frameNum) {
187 |         let frameData = this.framesData[frameNum];
188 | 
189 |         this.textureCtx.clearRect(0, 0, this.mapCanvas.width, this.mapCanvas.height);
190 |         this.textureCtx.save();
191 |         if (frameData.rotated) {
192 | 
193 |             // drawing is rotated, so axes are rotated
194 |             let drawData = {
195 |                 dX: this.frameHeight - (frameData.frame.h + frameData.spriteSourceSize.y),
196 |                 dY: frameData.spriteSourceSize.x,
197 |                 width: frameData.frame.h,
198 |                 height: frameData.frame.w
199 |             };
200 | 
201 |             this.textureCtx.rotate(-90 * Math.PI / 180);
202 |             this.textureCtx.translate(-this.frameHeight, 0);
203 | 
204 |             this.textureCtx.drawImage(this.spriteSheetImage,
205 |                 frameData.frame.x, frameData.frame.y, frameData.frame.h, frameData.frame.w,
206 |                 drawData.dX,
207 |                 drawData.dY,
208 |                 drawData.width,
209 |                 drawData.height
210 |             );
211 |         } else {
212 |             let drawData = {
213 |                 dX: this.frameWidth/2 + (frameData.spriteSourceSize.x - frameData.sourceSize.w / 2),
214 |                 dY: this.frameHeight/2 + (frameData.spriteSourceSize.y - frameData.sourceSize.h / 2),
215 |                 width: frameData.frame.w,
216 |                 height: frameData.frame.h
217 |             };
218 | 
219 |             this.textureCtx.drawImage(this.spriteSheetImage,
220 |                 frameData.frame.x, frameData.frame.y, frameData.frame.w, frameData.frame.h,
221 |                 drawData.dX,
222 |                 drawData.dY,
223 |                 drawData.width,
224 |                 drawData.height
225 |             );
226 |         }
227 | 
228 |         this.textureCtx.restore();
229 |         this.texture.needsUpdate = true;
230 |     }
231 | });
232 | 
233 | /**
234 |  * Returns the next highest number which is a power of 2
235 |  * @param {number} number
236 |  * @return {number}
237 |  */
238 | function pow2ceil(number) {
239 |     number--;
240 |     let p = 2;
241 |     while (number >>= 1) {p <<= 1;}
242 |     return p;
243 | }
244 | 
245 | module.exports = SpriteSheet;
246 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@ekolabs/aframe-spritesheet-component",
 3 |   "version": "1.0.0",
 4 |   "description": "Animated spritesheet support for A-Frame",
 5 |   "main": "index.js",
 6 |   "cdn": "dist/aframe-spritesheet-component.min.js",
 7 |   "scripts": {
 8 |     "build": "browserify examples/main.js -o examples/build.js",
 9 |     "dev": "budo examples/main.js:build.js --dir examples --port 8000 --live --open",
10 |     "dist": "webpack",
11 |     "prepublish": "npm run dist",
12 |     "start": "npm run dev"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/EkoLabs/aframe-spritesheet-component.git"
17 |   },
18 |   "keywords": [
19 |     "aframe",
20 |     "aframe-component",
21 |     "aframe-vr",
22 |     "vr",
23 |     "mozvr",
24 |     "webvr",
25 |     "spritesheet"
26 |   ],
27 |   "license": "Apache-2.0",
28 |   "author": {
29 |     "name": "Eko labs",
30 |     "url": "https://developer.helloeko.com",
31 |     "email": "dev@helloeko.com"
32 |   },
33 |   "contributors": [
34 |     {
35 |       "name": "Opher Vishnia",
36 |       "email": "opherv@gmail.com",
37 |       "url": "http://opherv.com"
38 |     }
39 |   ],
40 |   "bugs": {
41 |     "url": "https://github.com/ekolabs/aframe-spritesheet-component/issues"
42 |   },
43 |   "homepage": "https://github.com/ekolabs/aframe-spritesheet-component#readme",
44 |   "files": [
45 |     "README.md",
46 |     "aframe_spritesheet.gif",
47 |     "LICENSE",
48 |     "index.js",
49 |     "package.json",
50 |     "dist/"
51 |   ],
52 |   "devDependencies": {
53 |     "aframe": "^0.4.0",
54 |     "babel-core": "^6.23.1",
55 |     "babel-loader": "^6.3.2",
56 |     "babel-preset-es2015": "^6.22.0",
57 |     "browserify": "^13.0.0",
58 |     "budo": "^8.2.2",
59 |     "chai": "^3.4.1",
60 |     "chai-shallow-deep-equal": "^1.3.0",
61 |     "randomcolor": "^0.4.4",
62 |     "shelljs": "^0.7.0",
63 |     "webpack": "^2.2.1",
64 |     "eslint": "^3.15.0",
65 |     "eslint-config-google": "^0.7.1"
66 |   },
67 |   "semistandard": {
68 |     "ignore": [
69 |       "examples/build.js",
70 |       "dist/**"
71 |     ]
72 |   },
73 |   "dependencies": {
74 |     "global": "^4.3.1"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack');
 2 | 
 3 | module.exports = {
 4 |     entry: {
 5 |         'aframe-spritesheet-component': './index.js',
 6 |         'aframe-spritesheet-component.min': './index.js',
 7 |     },
 8 |     output: {
 9 |         path: './dist',
10 |         filename: '[name].js',
11 |     },
12 |     plugins: [
13 |         new webpack.optimize.UglifyJsPlugin({
14 |             include: /\.min\.js$/,
15 |             minimize: true
16 |         })
17 |     ],
18 |     module: {
19 |         loaders: [
20 |             {
21 |                 test: /\.js$/,
22 |                 loader: 'babel-loader',
23 |                 query: {
24 |                     presets: ['es2015']
25 |                 }
26 |             }
27 |         ]
28 |     },
29 | };


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