chrome/test/data/third_party/spaceport/js/sprites/sources/spriteSheet.js

   1 define([ 'util/ensureCallback' ], function (ensureCallback) {
   2     var IMAGE_SRC = 'assets/monstro-fada.png';
   3
   4     var FRAME_WIDTH = 37 * 3;
   5     var FRAME_HEIGHT = 58 * 3;
   6
   7     var FRAMES_HORIZ = 6;
   8     var FRAMES_VERT = 1;
   9
  10     var TOTAL_FRAMES = FRAMES_HORIZ * FRAMES_VERT;
  11
  12     function ImageSource(img) {
  13         this.img = img;
  14
  15         var canvas = document.createElement('canvas');
  16         canvas.width = FRAME_WIDTH;
  17         canvas.height = FRAME_HEIGHT;
  18
  19         var context = canvas.getContext('2d');
  20         context.globalCompositeOperation = 'copy';
  21
  22         this.frameImages = [ ];
  23         this.frameInfos = [ ];
  24         var x, y;
  25         for (y = 0; y < FRAMES_VERT; ++y) {
  26             for (x = 0; x < FRAMES_HORIZ; ++x) {
  27                 var px = x * FRAME_WIDTH;
  28                 var py = y * FRAME_WIDTH;
  29
  30                 context.drawImage(
  31                     img,
  32                     px, py,
  33                     FRAME_WIDTH, FRAME_HEIGHT,
  34                     0, 0,
  35                     FRAME_WIDTH, FRAME_HEIGHT
  36                 );
  37
  38                 var frameImage = new window.Image();
  39                 frameImage.src = canvas.toDataURL();
  40
  41                 this.frameInfos.push({
  42                     x: px,
  43                     y: py,
  44                     width: FRAME_WIDTH,
  45                     height: FRAME_HEIGHT,
  46                     image: frameImage,
  47                     sheetImage: img
  48                 });
  49             }
  50         }
  51
  52         // TODO Cycle frameInfos
  53     }
  54
  55     ImageSource.prototype.getImage = function getImage(frameIndex) {
  56         return this.frameInfos[frameIndex % TOTAL_FRAMES].image;
  57     };
  58
  59     ImageSource.prototype.drawToCanvas = function drawToCanvas(context, dx, dy, frameIndex) {
  60         var frameInfo = this.frameInfos[frameIndex % TOTAL_FRAMES];
  61
  62         context.drawImage(
  63             frameInfo.sheetImage,
  64             frameInfo.x, frameInfo.y,
  65             frameInfo.width, frameInfo.height,
  66             dx, dy,
  67             frameInfo.width, frameInfo.height
  68         );
  69     };
  70
  71     ImageSource.prototype.getFrameInfo = function getFrameInfo(frameIndex) {
  72         return this.frameInfos[frameIndex % TOTAL_FRAMES];
  73     };
  74
  75     return function spriteSheet(callback) {
  76         callback = ensureCallback(callback);
  77
  78         var img = new window.Image();
  79         img.onload = function () {
  80             var imageSource = new ImageSource(img);
  81             callback(null, imageSource);
  82         };
  83         img.src = IMAGE_SRC;
  84     };
  85 });