Also allows sprites to be whatever size and scales each of them up appropriately. If we get a better artist we can slowly replace everything rather than do it all in one go.

app/Elements/Classes/AnimationLayer.ts

@@ -3,6 +3,7 @@
 class AnimationLayer {
     private cStep = 0;
     private totalSteps = 9;
+    private frameSize = 200;
 
     private el = document.createElement("a");
 
@@ -16,14 +17,21 @@ class AnimationLayer {
         if (style == undefined || style.width == undefined) {
             console.error("Animation " + filename + " not found.");
         } else {
-            this.totalSteps = (parseInt(style.width.slice(0,-2)) / 200);
+            let height = (parseInt(style.height.slice(0,-2)));
+            this.frameSize = height;
+            this.totalSteps = (parseInt(style.width.slice(0,-2)) / height);
+            this.el.style.transform = "scale(" + (Elements.AnimationHandler.originalSpriteSize / height) + ")";
+            this.el.style.width = height + "px";
+            this.el.style.height = height + "px";
+            this.el.style.marginLeft = "-" + height/2 + "px";
+            this.el.style.marginTop = "-" + height/2 + "px";
         }
         this.el.classList.add("anims-" + filename);
     }
 
     public updateSprite (percentage : number) {
         this.cStep = Math.floor(percentage * this.totalSteps);
-        this.el.style.backgroundPositionX = "-" + (this.cStep * 200) + "px";
+        this.el.style.backgroundPositionX = "-" + (this.cStep * this.frameSize) + "px";
     }
 
     public getElement () {

app/Elements/Modules/AnimationHandler.ts

@@ -22,7 +22,7 @@ interface AnimationInstruction {
 module Elements.AnimationHandler {
     var container = document.getElementById("sceneAnimation");
     var stop = true;
-    var originalSpriteSize = 200; // TODO: If ever get an actual artist, increase original sprite size to whatever new art goes for.
+    export var originalSpriteSize = 200; // TODO: If ever get an actual artist, increase original sprite size to whatever new art goes for.
     export var animations : Array<AnimationLayer> = [];
     export var animationSpeed = 1500; // how long to complete in ms
     export var lastTime = 0;

config.rb

@@ -14,7 +14,6 @@ http_generated_images_path  = "images"
 # output_style = :expanded or :nested or :compact or :compressed
 #output_style = :compressed
 output_style = :expanded
-output_style = :compressed
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
 #relative_assets = false

sass/_page.scss

@@ -245,8 +245,8 @@ body {
 .sceneAnimation {
   display: block;
   position: absolute;
-  height: 200px !important;
-  width: 200px !important;
+  top: 50%;
+  left: 50%;
 }
 
 // #mainPage.mobile