chrome/test/data/third_party/spaceport/js/sprites/renderers/README.md

   1 # Renderers
   2
   3 #### css2dImg
   4
   5 Renders images using the HTML `<img>` element, and transforms them using the
   6 CSS3 2D `transform` property.
   7
   8     for (var i = 0; i < sprites.length; ++i) {
   9         var element = elements[i];
  10         var sprite = sprites[i];
  11
  12         element.src = sprite.img.src;
  13         element.style.transform = sprite.cssTransform2d;
  14     }
  15
  16 #### css3dImg
  17
  18 Renders images using the HTML `<img>` element, and transforms them using the
  19 CSS3 3D `transform` property.
  20
  21     for (var i = 0; i < sprites.length; ++i) {
  22         var element = elements[i];
  23         var sprite = sprites[i];
  24
  25         element.src = sprite.img.src;
  26         element.style.transform = sprite.cssTransform3d;
  27     }
  28
  29 #### css2dBackground
  30
  31 Renders images using the CSS2 `background-image` property, and transforms them
  32 using the CSS3 2D `transform` property.
  33
  34     for (var i = 0; i < sprites.length; ++i) {
  35         var element = elements[i];
  36         var sprite = sprites[i];
  37
  38         element.style.backgroundImage = 'url(' + sprite.img.src + ')';
  39         element.style.transform = sprite.cssTransform2d;
  40         element.style.width = sprite.width + 'px';
  41         element.style.height = sprite.height + 'px';
  42     }
  43
  44 #### css3dBackground
  45
  46 Renders images using the CSS2 `background-image` property, and transforms them
  47 using the CSS3 3D `transform` property.
  48
  49     for (var i = 0; i < sprites.length; ++i) {
  50         var element = elements[i];
  51         var sprite = sprites[i];
  52
  53         element.style.backgroundImage = 'url(' + sprite.img.src + ')';
  54         element.style.transform = sprite.cssTransform3d;
  55         element.style.width = sprite.width + 'px';
  56         element.style.height = sprite.height + 'px';
  57     }
  58
  59 #### canvasDrawImageFullClear
  60
  61 Clears the entire canvas, then calls drawImage for every sprite.
  62
  63     canvas.width = canvas.width;
  64     for (var i = 0; i < sprites.length; ++i) {
  65         var m = sprites[i].matrix;
  66         context.setTransform(m[0], m[1], m[3], m[4], m[2], m[5]);
  67         context.drawImage(sprites[i].img, 0, 0);
  68     }
  69
  70 #### canvasDrawImageFullClearAlign
  71
  72 Clears the entire canvas, then calls drawImage for every sprite.  Pixel
  73 alignment is enforced when blitting.
  74
  75     canvas.width = canvas.width;
  76     for (var i = 0; i < sprites.length; ++i) {
  77         var transform = sprites[i].transform;
  78         context.setTransform(1, 0, 0, 1, Math.floor(transform.x), Math.floor(transform.y));
  79         context.drawImage(sprites[i].img, 0, 0);
  80     }
  81
  82 #### canvasDrawImagePartialClear
  83
  84 Clears the parts of the canvas rendered to on the previous frame, then calls
  85 drawImage for every sprite.
  86
  87     for (var i = 0; i < lastSprites.length; ++i) {
  88         var m = lastSprites[i].matrix;
  89         context.setTransform(m[0], m[1], m[3], m[4], m[2], m[5]);
  90         context.clearRect(-1, -1, lastSprites[i].width + 2, lastSprites[i].height + 2);
  91     }
  92
  93     for (var i = 0; i < sprites.length; ++i) {
  94         var m = sprites[i].transform;
  95         context.setTransform(m[0], m[1], m[3], m[4], m[2], m[5]);
  96         context.drawImage(sprite[i].img, 0, 0);
  97     }
  98
  99 #### canvasDrawImagePartialClearAlign
 100
 101 Clears the parts of the canvas rendered to on the previous frame, then calls
 102 drawImage for every sprite.  Pixel alignment is enforced when blitting.
 103
 104     for (var i = 0; i < lastSprites.length; ++i) {
 105         var transform = lastSprites[i].transform;
 106         context.setTransform(1, 0, 0, 1, Math.floor(transform.x), Math.floor(transform.y));
 107         context.clearRect(-1, -1, lastSprites[i].width + 2, lastSprites[i].height + 2);
 108     }
 109
 110     for (var i = 0; i < sprites.length; ++i) {
 111         var transform = sprite[i].transform;
 112         context.setTransform(1, 0, 0, 1, Math.floor(transform.x), Math.floor(transform.y));
 113         context.drawImage(sprite[i].img, 0, 0);
 114     }