Merge pull request #507 from starwed/sprite-scale

Scale sprites on DOM entities

Author: starwed

src/DOM.js

@@ -99,7 +99,7 @@ Crafty.c("DOM", {
 	draw: function () {
 		var style = this._element.style,
 			coord = this.__coord || [0, 0, 0, 0],
-			co = { x: coord[0], y: coord[1] },
+			co = { x: coord[0], y: coord[1], w: coord[2], h: coord[3] },
 			prefix = Crafty.support.prefix,
 			trans = [];
 

src/sprite.js

@@ -47,7 +47,15 @@ Crafty.c("Sprite", {
 								 pos._h //height on canvas
 				);
 			} else if (e.type === "DOM") {
-				this._element.style.background = "url('" + this.__image + "') no-repeat -" + co.x + "px -" + co.y + "px";
+				//Get scale (ratio of entity dimensions to sprite's dimensions)
+				// If needed, we will scale up the entire sprite sheet, and then modify the position accordingly
+				var vscale = this._h/co.h, hscale =this._w/co.w;
+
+				this._element.style.background = "url('" + this.__image + "') no-repeat -" + co.x*hscale + "px -" + co.y*vscale + "px";
+				// style.backgroundSize must be set AFTER style.background!
+				if (vscale != 1 || hscale != 1){
+					this._element.style.backgroundSize = (this.img.width * hscale) + "px" + " " + (this.img.height * vscale) + "px";
+				}
 			}
 		};