Only do scaling once on animations, allowing for pixel-perfect precision in the odd case the space available fits exactly the size of the sprite (scale(1)). Might also do scaling in spaces later (like 0.5, 0.6, 0.7 etc, to make for less blurring).

app/Elements/Classes/AnimationLayer.ts

@@ -20,13 +20,17 @@ class AnimationLayer {
             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);
+        this.updateSize();
+    }
+
+    public updateSize () {
+        this.el.style.transform = "scale(" + (Elements.AnimationHandler.spriteSize / this.frameSize) + ")";
+        this.el.style.width = this.frameSize + "px";
+        this.el.style.height = this.frameSize + "px";
+        this.el.style.marginLeft = "-" + this.frameSize/2 + "px";
+        this.el.style.marginTop = "-" + this.frameSize/2 + "px";
     }
 
     public updateSprite (percentage : number) {

app/Elements/Modules/AnimationHandler.ts

@@ -22,7 +22,7 @@ interface AnimationInstruction {
 module Elements.AnimationHandler {
     var container = document.getElementById("sceneAnimation");
     var stop = true;
-    export var originalSpriteSize = 200; // TODO: If ever get an actual artist, increase original sprite size to whatever new art goes for.
+    export var spriteSize = 200;
     export var animations : Array<AnimationLayer> = [];
     export var animationSpeed = 1500; // how long to complete in ms
     export var lastTime = 0;
@@ -36,6 +36,7 @@ module Elements.AnimationHandler {
     }
 
     export function addAnimations (...names : Array<AnimationInstruction>) {
+        fixVerticalPosition();
         for (let i = 0; i < names.length; i++) {
             let newAnim = new AnimationLayer(names[i].name, names[i].layer);
             container.appendChild(newAnim.getElement());
@@ -71,12 +72,15 @@ module Elements.AnimationHandler {
     }
 
     function fixVerticalPosition () {
-        let availHeight = getSize(true);
+        spriteSize = getSize(true);
         //container.style.marginBottom = (availHeight - 200) + "px";
-        container.style.transform = "scale(" + availHeight / originalSpriteSize + ")";
-        container.style.bottom = (availHeight - originalSpriteSize) / 2 + "px";
-        container.style.width = originalSpriteSize + "px";
-        container.style.height = originalSpriteSize + "px";
+        container.style.width = spriteSize + "px";
+        container.style.marginLeft = "-" + (spriteSize / 2) + "px";
+        container.style.height = spriteSize + "px";
+
+        animations.forEach((anim) => {
+            anim.updateSize();
+        })
     }
 
     export function getSize (fixMin = true) {
@@ -84,10 +88,6 @@ module Elements.AnimationHandler {
         //let tab1 = document.getElementById("roomName");
         //tab1.style.marginTop = "";
         let height = window.innerHeight - tab.clientHeight;
-        if (fixMin && height < originalSpriteSize) {
-            //tab1.style.marginTop = (200 - height) + "px";
-            //height = 200;
-        }
         return height;
     }
 

dist/The Obelisk.html

@@ -884,12 +884,9 @@ body {
 
 #sceneAnimation {
   display: none;
-  width: 200px;
-  height: 200px;
   position: fixed;
   bottom: 0px;
   left: 50%;
-  margin-left: -100px;
   z-index: 1;
   pointer-events: none;
 }
@@ -1676,37 +1673,43 @@ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
-  background-image: url('images/anims-sc25d060bda.png');
+.anims-sprite, .anims-pixelPrecisionTest, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
+  background-image: url('images/anims-s8cdeedb00a.png');
   background-repeat: no-repeat;
 }
 
-.anims-winner {
+.anims-pixelPrecisionTest {
   background-position: 0 0;
+  height: 327px;
+  width: 327px;
+}
+
+.anims-winner {
+  background-position: 0 -327px;
   height: 200px;
   width: 400px;
 }
 
 .anims-biggusOrcus {
-  background-position: 0 -200px;
+  background-position: 0 -527px;
   height: 600px;
   width: 2400px;
 }
 
 .anims-numbersAnimated {
-  background-position: 0 -800px;
+  background-position: 0 -1127px;
   height: 200px;
   width: 6000px;
 }
 
 .anims-orcStand {
-  background-position: 0 -1000px;
+  background-position: 0 -1327px;
   height: 200px;
   width: 800px;
 }
 
 .anims-smolOrc {
-  background-position: 0 -1200px;
+  background-position: 0 -1527px;
   height: 100px;
   width: 400px;
 }

sass/_page.scss

@@ -228,12 +228,9 @@ body {
 
 #sceneAnimation {
   display: none;
-  width: 200px;
-  height: 200px;
   position: fixed;
   bottom: 0px;
   left: 50%;
-  margin-left: -100px;
   z-index: 1;
   pointer-events: none;
 }

stylesheets/images.css

@@ -2,37 +2,43 @@
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
-  background-image: url('images/anims-sc25d060bda.png');
+.anims-sprite, .anims-pixelPrecisionTest, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
+  background-image: url('images/anims-s8cdeedb00a.png');
   background-repeat: no-repeat;
 }
 
-.anims-winner {
+.anims-pixelPrecisionTest {
   background-position: 0 0;
+  height: 327px;
+  width: 327px;
+}
+
+.anims-winner {
+  background-position: 0 -327px;
   height: 200px;
   width: 400px;
 }
 
 .anims-biggusOrcus {
-  background-position: 0 -200px;
+  background-position: 0 -527px;
   height: 600px;
   width: 2400px;
 }
 
 .anims-numbersAnimated {
-  background-position: 0 -800px;
+  background-position: 0 -1127px;
   height: 200px;
   width: 6000px;
 }
 
 .anims-orcStand {
-  background-position: 0 -1000px;
+  background-position: 0 -1327px;
   height: 200px;
   width: 800px;
 }
 
 .anims-smolOrc {
-  background-position: 0 -1200px;
+  background-position: 0 -1527px;
   height: 100px;
   width: 400px;
 }

stylesheets/screen.css

@@ -232,12 +232,9 @@ body {
 
 #sceneAnimation {
   display: none;
-  width: 200px;
-  height: 200px;
   position: fixed;
   bottom: 0px;
   left: 50%;
-  margin-left: -100px;
   z-index: 1;
   pointer-events: none;
 }

stylesheets/screenInline.css

@@ -236,12 +236,9 @@ body {
 
 #sceneAnimation {
   display: none;
-  width: 200px;
-  height: 200px;
   position: fixed;
   bottom: 0px;
   left: 50%;
-  margin-left: -100px;
   z-index: 1;
   pointer-events: none;
 }

stylesheets/screenRelative.css

@@ -312,6 +312,8 @@ body {
 .sceneAnimation {
   display: block;
   position: absolute;
+  top: 50%;
+  left: 50%;
 }
 
 #roomExitsHolder {
@@ -946,37 +948,43 @@ p.turnStart::before, p.turnStart::after {
  ** Calculate amount of steps from that
  ** Profit
  **/
-.anims-sprite, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
-  background-image: url('images/anims-sc25d060bda.png');
+.anims-sprite, .anims-pixelPrecisionTest, .anims-winner, .anims-biggusOrcus, .anims-numbersAnimated, .anims-orcStand, .anims-smolOrc {
+  background-image: url('images/anims-s8cdeedb00a.png');
   background-repeat: no-repeat;
 }
 
-.anims-winner {
+.anims-pixelPrecisionTest {
   background-position: 0 0;
+  height: 327px;
+  width: 327px;
+}
+
+.anims-winner {
+  background-position: 0 -327px;
   height: 200px;
   width: 400px;
 }
 
 .anims-biggusOrcus {
-  background-position: 0 -200px;
+  background-position: 0 -527px;
   height: 600px;
   width: 2400px;
 }
 
 .anims-numbersAnimated {
-  background-position: 0 -800px;
+  background-position: 0 -1127px;
   height: 200px;
   width: 6000px;
 }
 
 .anims-orcStand {
-  background-position: 0 -1000px;
+  background-position: 0 -1327px;
   height: 200px;
   width: 800px;
 }
 
 .anims-smolOrc {
-  background-position: 0 -1200px;
+  background-position: 0 -1527px;
   height: 100px;
   width: 400px;
 }