fix(package): update scratch-svg-renderer to version 0.2.0-prerelease.20200103211543

Closes #534

package.json

@@ -37,8 +37,8 @@
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20190207224121",
-    "tap": "^14.6.1",
+    "scratch-vm": "0.2.0-prerelease.20190213162739",
+    "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "webpack": "^4.8.0",
@@ -53,7 +53,7 @@
     "minilog": "3.1.0",
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20190715153806",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200103211543",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -23,12 +23,6 @@ class BitmapSkin extends Skin {
 
         /** @type {Array<int>} */
         this._textureSize = [0, 0];
-
-        /**
-         * The "native" size, in texels, of this skin.
-         * @type {Array<number>}
-         */
-        this.size = [0, 0];
     }
 
     /**
@@ -49,13 +43,20 @@ class BitmapSkin extends Skin {
         return true;
     }
 
+    /**
+     * @return {Array<number>} the "native" size, in texels, of this skin.
+     */
+    get size () {
+        return [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution];
+    }
+
     /**
      * @param {Array<number>} scale - The scaling factors to be used.
      * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
-        return this._texture;
+        return this._texture || super.getTexture();
     }
 
     /**
@@ -77,6 +78,10 @@ class BitmapSkin extends Skin {
      * @fires Skin.event:WasAltered
      */
     setBitmap (bitmapData, costumeResolution, rotationCenter) {
+        if (!bitmapData.width || !bitmapData.height) {
+            super.setEmptyImageData();
+            return;
+        }
         const gl = this._renderer.gl;
 
         // Preferably bitmapData is ImageData. ImageData speeds up updating
@@ -109,7 +114,6 @@ class BitmapSkin extends Skin {
         // Do these last in case any of the above throws an exception
         this._costumeResolution = costumeResolution || 2;
         this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
-        this.size = [this._textureSize[0] / this._costumeResolution, this._textureSize[1] / this._costumeResolution];
 
         if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
         this.setRotationCenter.apply(this, rotationCenter);

src/Drawable.js

@@ -3,6 +3,7 @@ const twgl = require('twgl.js');
 const Rectangle = require('./Rectangle');
 const RenderConstants = require('./RenderConstants');
 const ShaderManager = require('./ShaderManager');
+const Skin = require('./Skin');
 const EffectTransform = require('./EffectTransform');
 
 /**
@@ -100,6 +101,8 @@ class Drawable {
         /** @todo move convex hull functionality, maybe bounds functionality overall, to Skin classes */
         this._convexHullPoints = null;
         this._convexHullDirty = true;
+
+        this._skinWasAltered = this._skinWasAltered.bind(this);
     }
 
     /**
@@ -138,7 +141,13 @@ class Drawable {
      */
     set skin (newSkin) {
         if (this._skin !== newSkin) {
+            if (this._skin) {
+                this._skin.removeListener(Skin.Events.WasAltered, this._skinWasAltered);
+            }
             this._skin = newSkin;
+            if (this._skin) {
+                this._skin.addListener(Skin.Events.WasAltered, this._skinWasAltered);
+            }
             this._skinWasAltered();
         }
     }
@@ -174,56 +183,99 @@ class Drawable {
         return this._visible;
     }
 
+    /**
+     * Update the position if it is different. Marks the transform as dirty.
+     * @param {Array.<number>} position A new position.
+     */
+    updatePosition (position) {
+        if (this._position[0] !== position[0] ||
+            this._position[1] !== position[1]) {
+            this._position[0] = Math.round(position[0]);
+            this._position[1] = Math.round(position[1]);
+            this.setTransformDirty();
+        }
+    }
+
+    /**
+     * Update the direction if it is different. Marks the transform as dirty.
+     * @param {number} direction A new direction.
+     */
+    updateDirection (direction) {
+        if (this._direction !== direction) {
+            this._direction = direction;
+            this._rotationTransformDirty = true;
+            this.setTransformDirty();
+        }
+    }
+
+    /**
+     * Update the scale if it is different. Marks the transform as dirty.
+     * @param {Array.<number>} scale A new scale.
+     */
+    updateScale (scale) {
+        if (this._scale[0] !== scale[0] ||
+            this._scale[1] !== scale[1]) {
+            this._scale[0] = scale[0];
+            this._scale[1] = scale[1];
+            this._rotationCenterDirty = true;
+            this._skinScaleDirty = true;
+            this.setTransformDirty();
+        }
+    }
+
+    /**
+     * Update visibility if it is different. Marks the convex hull as dirty.
+     * @param {boolean} visible A new visibility state.
+     */
+    updateVisible (visible) {
+        if (this._visible !== visible) {
+            this._visible = visible;
+            this.setConvexHullDirty();
+        }
+    }
+
+    /**
+     * Update an effect. Marks the convex hull as dirty if the effect changes shape.
+     * @param {string} effectName The name of the effect.
+     * @param {number} rawValue A new effect value.
+     */
+    updateEffect (effectName, rawValue) {
+        const effectInfo = ShaderManager.EFFECT_INFO[effectName];
+        if (rawValue) {
+            this._effectBits |= effectInfo.mask;
+        } else {
+            this._effectBits &= ~effectInfo.mask;
+        }
+        const converter = effectInfo.converter;
+        this._uniforms[effectInfo.uniformName] = converter(rawValue);
+        if (effectInfo.shapeChanges) {
+            this.setConvexHullDirty();
+        }
+    }
+
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
+     * @deprecated Use specific update* methods instead.
      * @param {object.<string,*>} properties The new property values to set.
      */
     updateProperties (properties) {
-        let dirty = false;
-        if ('position' in properties && (
-            this._position[0] !== properties.position[0] ||
-            this._position[1] !== properties.position[1])) {
-            this._position[0] = Math.round(properties.position[0]);
-            this._position[1] = Math.round(properties.position[1]);
-            dirty = true;
+        if ('position' in properties) {
+            this.updatePosition(properties.position);
         }
-        if ('direction' in properties && this._direction !== properties.direction) {
-            this._direction = properties.direction;
-            this._rotationTransformDirty = true;
-            dirty = true;
+        if ('direction' in properties) {
+            this.updateDirection(properties.direction);
         }
-        if ('scale' in properties && (
-            this._scale[0] !== properties.scale[0] ||
-            this._scale[1] !== properties.scale[1])) {
-            this._scale[0] = properties.scale[0];
-            this._scale[1] = properties.scale[1];
-            this._rotationCenterDirty = true;
-            this._skinScaleDirty = true;
-            dirty = true;
+        if ('scale' in properties) {
+            this.updateScale(properties.scale);
         }
         if ('visible' in properties) {
-            this._visible = properties.visible;
-            this.setConvexHullDirty();
-        }
-        if (dirty) {
-            this.setTransformDirty();
+            this.updateVisible(properties.visible);
         }
         const numEffects = ShaderManager.EFFECTS.length;
         for (let index = 0; index < numEffects; ++index) {
             const effectName = ShaderManager.EFFECTS[index];
             if (effectName in properties) {
-                const rawValue = properties[effectName];
-                const effectInfo = ShaderManager.EFFECT_INFO[effectName];
-                if (rawValue) {
-                    this._effectBits |= effectInfo.mask;
-                } else {
-                    this._effectBits &= ~effectInfo.mask;
-                }
-                const converter = effectInfo.converter;
-                this._uniforms[effectInfo.uniformName] = converter(rawValue);
-                if (effectInfo.shapeChanges) {
-                    this.setConvexHullDirty();
-                }
+                this.updateEffect(effectName, properties[effectName]);
             }
         }
     }
@@ -409,7 +461,9 @@ class Drawable {
 
         const localPosition = getLocalPosition(this, vec);
 
-        if (this.useNearest) {
+        // We're not passing in a scale to useNearest, but that's okay because "touching" queries
+        // happen at the "native" size anyway.
+        if (this.useNearest()) {
             return this.skin.isTouchingNearest(localPosition);
         }
         return this.skin.isTouchingLinear(localPosition);
@@ -417,21 +471,33 @@ class Drawable {
 
     /**
      * Should the drawable use NEAREST NEIGHBOR or LINEAR INTERPOLATION mode
+     * @param {?Array<Number>} scale Optionally, the screen-space scale of the drawable.
+     * @return {boolean} True if the drawable should use nearest-neighbor interpolation.
      */
-    get useNearest () {
+    useNearest (scale = this.scale) {
         // Raster skins (bitmaps) should always prefer nearest neighbor
         if (this.skin.isRaster) {
             return true;
         }
 
+        // If the effect bits for mosaic, pixelate, whirl, or fisheye are set, use linear
+        if ((this._effectBits & (
+            ShaderManager.EFFECT_INFO.fisheye.mask |
+            ShaderManager.EFFECT_INFO.whirl.mask |
+            ShaderManager.EFFECT_INFO.pixelate.mask |
+            ShaderManager.EFFECT_INFO.mosaic.mask
+        )) !== 0) {
+            return false;
+        }
+
         // We can't use nearest neighbor unless we are a multiple of 90 rotation
         if (this._direction % 90 !== 0) {
             return false;
         }
 
         // If the scale of the skin is very close to 100 (0.99999 variance is okay I guess)
-        if (Math.abs(this.scale[0]) > 99 && Math.abs(this.scale[0]) < 101 &&
-            Math.abs(this.scale[1]) > 99 && Math.abs(this.scale[1]) < 101) {
+        if (Math.abs(scale[0]) > 99 && Math.abs(scale[0]) < 101 &&
+            Math.abs(scale[1]) > 99 && Math.abs(scale[1]) < 101) {
             return true;
         }
         return false;
@@ -511,7 +577,6 @@ class Drawable {
      * @return {!Rectangle} Bounds for the Drawable.
      */
     getFastBounds (result) {
-        this.updateMatrix();
         if (!this.needsConvexHullPoints()) {
             return this.getBounds(result);
         }
@@ -624,7 +689,7 @@ class Drawable {
         }
         const textColor =
         // commenting out to only use nearest for now
-        // drawable.useNearest ?
+        // drawable.useNearest() ?
              drawable.skin._silhouette.colorAtNearest(localPosition, dst);
         // : drawable.skin._silhouette.colorAtLinear(localPosition, dst);
         return EffectTransform.transformColor(drawable, textColor, textColor);

src/PenSkin.js

@@ -88,9 +88,6 @@ class PenSkin extends Skin {
         /** @type {HTMLCanvasElement} */
         this._canvas = document.createElement('canvas');
 
-        /** @type {Array<number>} */
-        this._canvasSize = twgl.v3.create();
-
         /** @type {WebGLTexture} */
         this._texture = null;
 
@@ -168,7 +165,7 @@ class PenSkin extends Skin {
      * @return {Array<number>} the "native" size, in texels, of this skin. [width, height]
      */
     get size () {
-        return this._canvasSize;
+        return [this._canvas.width, this._canvas.height];
     }
 
     /**
@@ -191,13 +188,13 @@ class PenSkin extends Skin {
     clear () {
         const gl = this._renderer.gl;
         twgl.bindFramebufferInfo(gl, this._framebuffer);
-
+        
         /* Reset framebuffer to transparent black */
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         const ctx = this._canvas.getContext('2d');
-        ctx.clearRect(0, 0, this._canvasSize[0], this._canvasSize[1]);
+        ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
 
         this._silhouetteDirty = true;
     }
@@ -335,8 +332,7 @@ class PenSkin extends Skin {
 
         const uniforms = {
             u_skin: this._texture,
-            u_projectionMatrix: projection,
-            u_fudge: 0
+            u_projectionMatrix: projection
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -454,7 +450,7 @@ class PenSkin extends Skin {
      * @param {number} x - centered at x
      * @param {number} y - centered at y
      */
-    _drawRectangle (currentShader, texture, bounds, x = -this._canvasSize[0] / 2, y = this._canvasSize[1] / 2) {
+    _drawRectangle (currentShader, texture, bounds, x = -this._canvas.width / 2, y = this._canvas.height / 2) {
         const gl = this._renderer.gl;
 
         const projection = twgl.m4.ortho(
@@ -477,8 +473,7 @@ class PenSkin extends Skin {
                     0
                 ), __modelScalingMatrix),
                 __modelMatrix
-            ),
-            u_fudge: 0
+            )
         };
 
         twgl.setTextureParameters(gl, texture, {minMag: gl.NEAREST});
@@ -517,7 +512,7 @@ class PenSkin extends Skin {
      * @param {number} x - texture centered at x
      * @param {number} y - texture centered at y
      */
-    _drawToBuffer (texture = this._texture, x = -this._canvasSize[0] / 2, y = this._canvasSize[1] / 2) {
+    _drawToBuffer (texture = this._texture, x = -this._canvas.width / 2, y = this._canvas.height / 2) {
         if (texture !== this._texture && this._canvasDirty) {
             this._drawToBuffer();
         }
@@ -531,7 +526,7 @@ class PenSkin extends Skin {
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._canvas);
 
             const ctx = this._canvas.getContext('2d');
-            ctx.clearRect(0, 0, this._canvasSize[0], this._canvasSize[1]);
+            ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
 
             this._canvasDirty = false;
         }
@@ -567,8 +562,8 @@ class PenSkin extends Skin {
         this._bounds = new Rectangle();
         this._bounds.initFromBounds(width / 2, width / -2, height / 2, height / -2);
 
-        this._canvas.width = this._canvasSize[0] = width;
-        this._canvas.height = this._canvasSize[1] = height;
+        this._canvas.width = width;
+        this._canvas.height = height;
         this._rotationCenter[0] = width / 2;
         this._rotationCenter[1] = height / 2;
 
@@ -654,8 +649,8 @@ class PenSkin extends Skin {
             this._renderer.enterDrawRegion(this._toBufferDrawRegionId);
 
             // Sample the framebuffer's pixels into the silhouette instance
-            const skinPixels = new Uint8Array(Math.floor(this._canvasSize[0] * this._canvasSize[1] * 4));
-            gl.readPixels(0, 0, this._canvasSize[0], this._canvasSize[1], gl.RGBA, gl.UNSIGNED_BYTE, skinPixels);
+            const skinPixels = new Uint8Array(Math.floor(this._canvas.width * this._canvas.height * 4));
+            gl.readPixels(0, 0, this._canvas.width, this._canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, skinPixels);
 
             const skinCanvas = this._canvas;
             skinCanvas.width = bounds.width;

src/Rectangle.js

@@ -123,11 +123,11 @@ class Rectangle {
         this.right = Math.min(this.right, right);
         this.bottom = Math.max(this.bottom, bottom);
         this.top = Math.min(this.top, top);
-        // Ensure rectangle coordinates in order.
-        this.left = Math.min(this.left, this.right);
-        this.right = Math.max(this.right, this.left);
-        this.bottom = Math.min(this.bottom, this.top);
-        this.top = Math.max(this.top, this.bottom);
+        
+        this.left = Math.min(this.left, right);
+        this.right = Math.max(this.right, left);
+        this.bottom = Math.min(this.bottom, top);
+        this.top = Math.max(this.top, bottom);
     }
 
     /**

src/RenderWebGL.js

@@ -3,7 +3,6 @@ const EventEmitter = require('events');
 const hull = require('hull.js');
 const twgl = require('twgl.js');
 
-const Skin = require('./Skin');
 const BitmapSkin = require('./BitmapSkin');
 const Drawable = require('./Drawable');
 const Rectangle = require('./Rectangle');
@@ -106,7 +105,7 @@ class RenderWebGL extends EventEmitter {
      * @private
      */
     static _getContext (canvas) {
-        return twgl.getWebGLContext(canvas, {alpha: false, stencil: true});
+        return twgl.getWebGLContext(canvas, {alpha: false, stencil: true, antialias: false});
     }
 
     /**
@@ -292,20 +291,6 @@ class RenderWebGL extends EventEmitter {
         this.emit(RenderConstants.Events.NativeSizeChanged, {newSize: this._nativeSize});
     }
 
-    /**
-     * Notify Drawables whose skin is the skin that changed.
-     * @param {Skin} skin - the skin that changed.
-     * @private
-     */
-    _skinWasAltered (skin) {
-        for (let i = 0; i < this._allDrawables.length; i++) {
-            const drawable = this._allDrawables[i];
-            if (drawable && drawable._skin === skin) {
-                drawable._skinWasAltered();
-            }
-        }
-    }
-
     /**
      * Create a new bitmap skin from a snapshot of the provided bitmap data.
      * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin.
@@ -318,7 +303,6 @@ class RenderWebGL extends EventEmitter {
         const skinId = this._nextSkinId++;
         const newSkin = new BitmapSkin(skinId, this);
         newSkin.setBitmap(bitmapData, costumeResolution, rotationCenter);
-        newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
         this._allSkins[skinId] = newSkin;
         return skinId;
     }
@@ -334,7 +318,6 @@ class RenderWebGL extends EventEmitter {
         const skinId = this._nextSkinId++;
         const newSkin = new SVGSkin(skinId, this);
         newSkin.setSVG(svgData, rotationCenter);
-        newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
         this._allSkins[skinId] = newSkin;
         return skinId;
     }
@@ -346,7 +329,6 @@ class RenderWebGL extends EventEmitter {
     createPenSkin () {
         const skinId = this._nextSkinId++;
         const newSkin = new PenSkin(skinId, this);
-        newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
         this._allSkins[skinId] = newSkin;
         return skinId;
     }
@@ -363,7 +345,6 @@ class RenderWebGL extends EventEmitter {
         const skinId = this._nextSkinId++;
         const newSkin = new TextBubbleSkin(skinId, this);
         newSkin.setTextBubble(type, text, pointsLeft);
-        newSkin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, newSkin));
         this._allSkins[skinId] = newSkin;
         return skinId;
     }
@@ -413,8 +394,6 @@ class RenderWebGL extends EventEmitter {
         for (const drawable of this._allDrawables) {
             if (drawable && drawable.skin === oldSkin) {
                 drawable.skin = newSkin;
-                drawable.setConvexHullDirty();
-                drawable.setTransformDirty();
             }
         }
         oldSkin.dispose();
@@ -1333,9 +1312,122 @@ class RenderWebGL extends EventEmitter {
         }, null);
     }
 
+    /**
+     * Update a drawable's skin.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} skinId The skin to update to.
+     */
+    updateDrawableSkinId (drawableID, skinId) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.skin = this._allSkins[skinId];
+    }
+
+    /**
+     * Update a drawable's skin rotation center.
+     * @param {number} drawableID The drawable's id.
+     * @param {Array.<number>} rotationCenter The rotation center for the skin.
+     */
+    updateDrawableRotationCenter (drawableID, rotationCenter) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
+    }
+
+    /**
+     * Update a drawable's skin and rotation center together.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} skinId The skin to update to.
+     * @param {Array.<number>} rotationCenter The rotation center for the skin.
+     */
+    updateDrawableSkinIdRotationCenter (drawableID, skinId, rotationCenter) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.skin = this._allSkins[skinId];
+        drawable.skin.setRotationCenter(rotationCenter[0], rotationCenter[1]);
+    }
+
+    /**
+     * Update a drawable's position.
+     * @param {number} drawableID The drawable's id.
+     * @param {Array.<number>} position The new position.
+     */
+    updateDrawablePosition (drawableID, position) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updatePosition(position);
+    }
+
+    /**
+     * Update a drawable's direction.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} direction A new direction.
+     */
+    updateDrawableDirection (drawableID, direction) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateDirection(direction);
+    }
+
+    /**
+     * Update a drawable's scale.
+     * @param {number} drawableID The drawable's id.
+     * @param {Array.<number>} scale A new scale.
+     */
+    updateDrawableScale (drawableID, scale) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateScale(scale);
+    }
+
+    /**
+     * Update a drawable's direction and scale together.
+     * @param {number} drawableID The drawable's id.
+     * @param {number} direction A new direction.
+     * @param {Array.<number>} scale A new scale.
+     */
+    updateDrawableDirectionScale (drawableID, direction, scale) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateDirection(direction);
+        drawable.updateScale(scale);
+    }
+
+    /**
+     * Update a drawable's visibility.
+     * @param {number} drawableID The drawable's id.
+     * @param {boolean} visible Will the drawable be visible?
+     */
+    updateDrawableVisible (drawableID, visible) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateVisible(visible);
+    }
+
+    /**
+     * Update a drawable's visual effect.
+     * @param {number} drawableID The drawable's id.
+     * @param {string} effectName The effect to change.
+     * @param {number} value A new effect value.
+     */
+    updateDrawableEffect (drawableID, effectName, value) {
+        const drawable = this._allDrawables[drawableID];
+        // TODO: https://github.com/LLK/scratch-vm/issues/2288
+        if (!drawable) return;
+        drawable.updateEffect(effectName, value);
+    }
 
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
+     * @deprecated Use specific updateDrawable* methods instead.
      * @param {int} drawableID The ID of the Drawable to update.
      * @param {object.<string,*>} properties The new property values to set.
      */
@@ -1343,17 +1435,16 @@ class RenderWebGL extends EventEmitter {
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
             /**
-             * @todo fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+             * @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
              * Right now this happens so much on some projects that a warning or exception here can hang the browser.
              */
             return;
         }
         if ('skinId' in properties) {
-            drawable.skin = this._allSkins[properties.skinId];
+            this.updateDrawableSkinId(drawableID, properties.skinId);
         }
         if ('rotationCenter' in properties) {
-            const newRotationCenter = properties.rotationCenter;
-            drawable.skin.setRotationCenter(newRotationCenter[0], newRotationCenter[1]);
+            this.updateDrawableRotationCenter(drawableID, properties.rotationCenter);
         }
         drawable.updateProperties(properties);
     }
@@ -1370,7 +1461,7 @@ class RenderWebGL extends EventEmitter {
 
         const drawable = this._allDrawables[drawableID];
         if (!drawable) {
-            // TODO: fix whatever's wrong in the VM which causes this, then add a warning or throw here.
+            // @todo(https://github.com/LLK/scratch-vm/issues/2288) fix whatever's wrong in the VM which causes this, then add a warning or throw here.
             // Right now this happens so much on some projects that a warning or exception here can hang the browser.
             return [x, y];
         }
@@ -1436,8 +1527,6 @@ class RenderWebGL extends EventEmitter {
      * @param {int} stampID - the unique ID of the Drawable to use as the stamp.
      */
     penStamp (penSkinID, stampID) {
-        this._doExitDrawRegion();
-
         const stampDrawable = this._allDrawables[stampID];
         if (!stampDrawable) {
             return;
@@ -1448,26 +1537,25 @@ class RenderWebGL extends EventEmitter {
             return;
         }
 
+        this._doExitDrawRegion();
+
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
 
         const gl = this._gl;
-        twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
+        twgl.bindFramebufferInfo(gl, skin._framebuffer);
 
         // Limit size of viewport to the bounds around the stamp Drawable and create the projection matrix for the draw.
-        gl.viewport(0, 0, bounds.width, bounds.height);
+        gl.viewport(
+            (this._nativeSize[0] * 0.5) + bounds.left,
+            (this._nativeSize[1] * 0.5) - bounds.top,
+            bounds.width,
+            bounds.height
+        );
         const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
 
-        gl.clearColor(0, 0, 0, 0);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-
-        try {
-            gl.disable(gl.BLEND);
-            this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
-        } finally {
-            gl.enable(gl.BLEND);
-        }
-
-        skin._drawToBuffer(this._queryBufferInfo.attachments[0], bounds.left, bounds.top);
+        // Draw the stamped sprite onto the PenSkin's framebuffer.
+        this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
+        skin._silhouetteDirty = true;
     }
 
     /* ******
@@ -1568,6 +1656,7 @@ class RenderWebGL extends EventEmitter {
             this._exitRegion();
         }
         this._exitRegion = null;
+        this._regionId = null;
     }
 
     /**
@@ -1626,8 +1715,7 @@ class RenderWebGL extends EventEmitter {
                 gl.useProgram(currentShader.program);
                 twgl.setBuffersAndAttributes(gl, currentShader, this._bufferInfo);
                 Object.assign(uniforms, {
-                    u_projectionMatrix: projection,
-                    u_fudge: window.fudge || 0
+                    u_projectionMatrix: projection
                 });
             }
 
@@ -1642,7 +1730,7 @@ class RenderWebGL extends EventEmitter {
 
             if (uniforms.u_skin) {
                 twgl.setTextureParameters(
-                    gl, uniforms.u_skin, {minMag: drawable.useNearest ? gl.NEAREST : gl.LINEAR}
+                    gl, uniforms.u_skin, {minMag: drawable.useNearest(drawableScale) ? gl.NEAREST : gl.LINEAR}
                 );
             }
 

src/SVGMIP.js

@@ -0,0 +1,56 @@
+const twgl = require('twgl.js');
+
+class SVGMIP {
+    /**
+    * Create a new SVG MIP for a given scale.
+    * @param {RenderWebGL} renderer - The renderer which this MIP's skin uses.
+    * @param {SvgRenderer} svgRenderer - The svg renderer which this MIP's skin uses.
+    * @param {number} scale - The relative size of the MIP
+    * @param {function} callback - A callback that should always fire after draw()
+    * @constructor
+    */
+    constructor (renderer, svgRenderer, scale, callback) {
+        this._renderer = renderer;
+        this._svgRenderer = svgRenderer;
+        this._scale = scale;
+        this._texture = null;
+        this._callback = callback;
+
+        this.draw();
+    }
+
+    draw () {
+        this._svgRenderer._draw(this._scale, () => {
+            const textureData = this._getTextureData();
+            const textureOptions = {
+                auto: false,
+                wrap: this._renderer.gl.CLAMP_TO_EDGE,
+                src: textureData
+            };
+
+            this._texture = twgl.createTexture(this._renderer.gl, textureOptions);
+            this._callback(textureData);
+        });
+    }
+
+    dispose () {
+        this._renderer.gl.deleteTexture(this.getTexture());
+    }
+
+    getTexture () {
+        return this._texture;
+    }
+
+    _getTextureData () {
+        // Pull out the ImageData from the canvas. ImageData speeds up
+        // updating Silhouette and is better handled by more browsers in
+        // regards to memory.
+        const canvas = this._svgRenderer.canvas;
+        const context = canvas.getContext('2d');
+        const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+
+        return textureData;
+    }
+}
+
+module.exports = SVGMIP;

src/SVGSkin.js

@@ -1,9 +1,16 @@
-const twgl = require('twgl.js');
-
 const Skin = require('./Skin');
+const SVGMIP = require('./SVGMIP');
 const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 
 const MAX_TEXTURE_DIMENSION = 2048;
+const MIN_TEXTURE_SCALE = 1 / 256;
+/**
+ * All scaled renderings of the SVG are stored in an array. The 1.0 scale of
+ * the SVG is stored at the 8th index. The smallest possible 1 / 256 scale
+ * rendering is stored at the 0th index.
+ * @const {number}
+ */
+const INDEX_OFFSET = 8;
 
 class SVGSkin extends Skin {
     /**
@@ -25,29 +32,14 @@ class SVGSkin extends Skin {
         /** @type {WebGLTexture} */
         this._texture = null;
 
-        /** @type {number} */
-        this._textureScale = 1;
-
-        /** @type {Number} */
-        this._maxTextureScale = 0;
+        /** @type {Array.<SVGMIPs>} */
+        this._scaledMIPs = [];
 
         /**
-         * The natural size, in Scratch units, of this skin.
-         * @type {Array<number>}
-         */
-        this.size = [0, 0];
-
-        /**
-         * The viewbox offset of the svg.
-         * @type {Array<number>}
-         */
-        this._viewOffset = [0, 0];
-
-        /**
-         * The rotation center before offset by _viewOffset.
-         * @type {Array<number>}
-         */
-        this._rawRotationCenter = [NaN, NaN];
+        * Ratio of the size of the SVG and the max size of the WebGL texture
+        * @type {Number}
+        */
+        this._maxTextureScale = 1;
     }
 
     /**
@@ -55,106 +47,133 @@ class SVGSkin extends Skin {
      */
     dispose () {
         if (this._texture) {
-            this._renderer.gl.deleteTexture(this._texture);
+            for (const mip of this._scaledMIPs) {
+                if (mip) {
+                    mip.dispose();
+                }
+            }
             this._texture = null;
+            this._scaledMIPs.length = 0;
         }
         super.dispose();
     }
 
+    /**
+     * @return {Array<number>} the natural size, in Scratch units, of this skin.
+     */
+    get size () {
+        return this._svgRenderer.size;
+    }
+
     /**
      * Set the origin, in object space, about which this Skin should rotate.
      * @param {number} x - The x coordinate of the new rotation center.
      * @param {number} y - The y coordinate of the new rotation center.
      */
     setRotationCenter (x, y) {
-        if (x !== this._rawRotationCenter[0] || y !== this._rawRotationCenter[1]) {
-            this._rawRotationCenter[0] = x;
-            this._rawRotationCenter[1] = y;
-            super.setRotationCenter(x - this._viewOffset[0], y - this._viewOffset[1]);
-        }
+        const viewOffset = this._svgRenderer.viewOffset;
+        super.setRotationCenter(x - viewOffset[0], y - viewOffset[1]);
+    }
+
+    /**
+     * Create a MIP for a given scale and pass it a callback for updating
+     * state when switching between scales and MIPs.
+     * @param {number} scale - The relative size of the MIP
+     * @param {function} resetCallback - this is a callback for doing a hard reset
+     * of MIPs and a reset of the rotation center. Only passed in if the MIP scale is 1.
+     * @return {SVGMIP} An object that handles creating and updating SVG textures.
+     */
+    createMIP (scale, resetCallback) {
+        const textureCallback = textureData => {
+            if (resetCallback) resetCallback();
+            // Check if we have the largest MIP
+            // eslint-disable-next-line no-use-before-define
+            if (!this._scaledMIPs.length || this._scaledMIPs[this._scaledMIPs.length - 1]._scale <= scale) {
+                // Currently silhouette only gets scaled up
+                this._silhouette.update(textureData);
+            }
+        };
+        const mip = new SVGMIP(this._renderer, this._svgRenderer, scale, textureCallback);
+
+        return mip;
     }
 
     /**
      * @param {Array<number>} scale - The scaling factors to be used, each in the [0,100] range.
      * @return {WebGLTexture} The GL texture representation of this skin when drawing at the given scale.
      */
-    // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
+        if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) {
+            return super.getTexture();
+        }
+
         // The texture only ever gets uniform scale. Take the larger of the two axes.
         const scaleMax = scale ? Math.max(Math.abs(scale[0]), Math.abs(scale[1])) : 100;
         const requestedScale = Math.min(scaleMax / 100, this._maxTextureScale);
-        let newScale = this._textureScale;
-        while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
-            newScale *= 2;
-        }
-        if (this._textureScale !== newScale) {
-            this._textureScale = newScale;
-            this._svgRenderer._draw(this._textureScale, () => {
-                if (this._textureScale === newScale) {
-                    const canvas = this._svgRenderer.canvas;
-                    const context = canvas.getContext('2d');
-                    const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+        let newScale = 1;
+        let textureIndex = 0;
 
-                    const gl = this._renderer.gl;
-                    gl.bindTexture(gl.TEXTURE_2D, this._texture);
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
-                    this._silhouette.update(textureData);
-                }
-            });
+        if (requestedScale < 1) {
+            while ((newScale > MIN_TEXTURE_SCALE) && (requestedScale <= newScale * .75)) {
+                newScale /= 2;
+                textureIndex -= 1;
+            }
+        } else {
+            while ((newScale < this._maxTextureScale) && (requestedScale >= 1.5 * newScale)) {
+                newScale *= 2;
+                textureIndex += 1;
+            }
         }
 
-        return this._texture;
+        if (!this._scaledMIPs[textureIndex + INDEX_OFFSET]) {
+            this._scaledMIPs[textureIndex + INDEX_OFFSET] = this.createMIP(newScale);
+        }
+
+        return this._scaledMIPs[textureIndex + INDEX_OFFSET].getTexture();
+    }
+
+    /**
+     * Do a hard reset of the existing MIPs by calling dispose(), setting a new
+     * scale 1 MIP in this._scaledMIPs, and finally updating the rotationCenter.
+     * @param {SVGMIPs} mip - An object that handles creating and updating SVG textures.
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG. If not supplied, it will be
+     * calculated from the bounding box
+    * @fires Skin.event:WasAltered
+     */
+    resetMIPs (mip, rotationCenter) {
+        this._scaledMIPs.forEach(oldMIP => oldMIP.dispose());
+        this._scaledMIPs.length = 0;
+
+        // Set new scale 1 MIP after outdated MIPs have been disposed
+        this._texture = this._scaledMIPs[INDEX_OFFSET] = mip;
+
+        if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
+        this.setRotationCenter.apply(this, rotationCenter);
+        this.emit(Skin.Events.WasAltered);
     }
 
     /**
      * Set the contents of this skin to a snapshot of the provided SVG data.
      * @param {string} svgData - new SVG to use.
-     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG. If not supplied, it will be
-     * calculated from the bounding box
-     * @fires Skin.event:WasAltered
+     * @param {Array<number>} [rotationCenter] - Optional rotation center for the SVG.
      */
     setSVG (svgData, rotationCenter) {
-        this._svgRenderer.fromString(svgData, 1, () => {
-            const gl = this._renderer.gl;
-            this._textureScale = this._maxTextureScale = 1;
+        this._svgRenderer.loadString(svgData);
 
-            // Pull out the ImageData from the canvas. ImageData speeds up
-            // updating Silhouette and is better handled by more browsers in
-            // regards to memory.
-            const canvas = this._svgRenderer.canvas;
-            const context = canvas.getContext('2d');
-            const textureData = context.getImageData(0, 0, canvas.width, canvas.height);
+        if (!this._svgRenderer.canvas.width || !this._svgRenderer.canvas.height) {
+            super.setEmptyImageData();
+            return;
+        }
 
-            if (this._texture) {
-                gl.bindTexture(gl.TEXTURE_2D, this._texture);
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
-                this._silhouette.update(textureData);
-            } else {
-                // TODO: mipmaps?
-                const textureOptions = {
-                    auto: true,
-                    wrap: gl.CLAMP_TO_EDGE,
-                    src: textureData
-                };
+        const maxDimension = Math.ceil(Math.max(this.size[0], this.size[1]));
+        let testScale = 2;
+        for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
+            this._maxTextureScale = testScale;
+        }
 
-                this._texture = twgl.createTexture(gl, textureOptions);
-                this._silhouette.update(textureData);
-            }
-
-            const maxDimension = Math.max(this._svgRenderer.canvas.width, this._svgRenderer.canvas.height);
-            let testScale = 2;
-            for (testScale; maxDimension * testScale <= MAX_TEXTURE_DIMENSION; testScale *= 2) {
-                this._maxTextureScale = testScale;
-            }
-
-            if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
-            this.size = this._svgRenderer.size;
-            this._viewOffset = this._svgRenderer.viewOffset;
-            // Reset rawRotationCenter when we update viewOffset.
-            this._rawRotationCenter = [NaN, NaN];
-            this.setRotationCenter(rotationCenter[0], rotationCenter[1]);
-            this.emit(Skin.Events.WasAltered);
-        });
+        // Create the 1.0 scale MIP at INDEX_OFFSET.
+        const textureScale = 1;
+        const mip = this.createMIP(textureScale, () => this.resetMIPs(mip, rotationCenter));
     }
 
 }

src/Skin.js

@@ -33,13 +33,6 @@ class Skin extends EventEmitter {
         /** @type {Vec3} */
         this._rotationCenter = twgl.v3.create(0, 0);
 
-        /**
-         * The "native" size, in texels, of this skin.
-         * @member size
-         * @abstract
-         * @type {Array<number>}
-         */
-
         /**
          * The uniforms to be used by the vertex and pixel shaders.
          * Some of these are used by other parts of the renderer as well.
@@ -104,6 +97,14 @@ class Skin extends EventEmitter {
         return this._rotationCenter;
     }
 
+    /**
+     * @abstract
+     * @return {Array<number>} the "native" size, in texels, of this skin.
+     */
+    get size () {
+        return [0, 0];
+    }
+
     /**
      * Set the origin, in object space, about which this Skin should rotate.
      * @param {number} x - The x coordinate of the new rotation center.
@@ -139,7 +140,7 @@ class Skin extends EventEmitter {
      */
     // eslint-disable-next-line no-unused-vars
     getTexture (scale) {
-        return null;
+        return this._emptyImageTexture;
     }
 
     /**
@@ -170,6 +171,38 @@ class Skin extends EventEmitter {
      */
     updateSilhouette () {}
 
+    /**
+     * Set the contents of this skin to an empty skin.
+     * @fires Skin.event:WasAltered
+     */
+    setEmptyImageData () {
+        // Free up the current reference to the _texture
+        this._texture = null;
+
+        if (!this._emptyImageData) {
+            // Create a transparent pixel
+            this._emptyImageData = new ImageData(1, 1);
+
+            // Create a new texture and update the silhouette
+            const gl = this._renderer.gl;
+
+            const textureOptions = {
+                auto: true,
+                wrap: gl.CLAMP_TO_EDGE,
+                src: this._emptyImageData
+            };
+
+            // Note: we're using _emptyImageTexture here instead of _texture
+            // so that we can cache this empty texture for later use as needed.
+            // this._texture can get modified by other skins (e.g. BitmapSkin
+            // and SVGSkin, so we can't use that same field for caching)
+            this._emptyImageTexture = twgl.createTexture(gl, textureOptions);
+        }
+
+        this._silhouette.update(this._emptyImageData);
+        this.emit(Skin.Events.WasAltered);
+    }
+
     /**
      * Does this point touch an opaque or translucent point on this skin?
      * Nearest Neighbor version

src/TextBubbleSkin.js

@@ -54,7 +54,7 @@ class TextBubbleSkin extends Skin {
         /** @type {Array<string>} */
         this._lines = [];
 
-        this._textSize = {width: 0, height: 0};
+        /** @type {object} */
         this._textAreaSize = {width: 0, height: 0};
 
         /** @type {string} */
@@ -127,17 +127,14 @@ class TextBubbleSkin extends Skin {
         this._lines = this.textWrapper.wrapText(BubbleStyle.MAX_LINE_WIDTH, this._text);
 
         // Measure width of longest line to avoid extra-wide bubbles
-        let longestLine = 0;
+        let longestLineWidth = 0;
         for (const line of this._lines) {
-            longestLine = Math.max(longestLine, this.measurementProvider.measureText(line));
+            longestLineWidth = Math.max(longestLineWidth, this.measurementProvider.measureText(line));
         }
 
-        this._textSize.width = longestLine;
-        this._textSize.height = BubbleStyle.LINE_HEIGHT * this._lines.length;
-
         // Calculate the canvas-space sizes of the padded text area and full text bubble
-        const paddedWidth = Math.max(this._textSize.width, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
-        const paddedHeight = this._textSize.height + (BubbleStyle.PADDING * 2);
+        const paddedWidth = Math.max(longestLineWidth, BubbleStyle.MIN_WIDTH) + (BubbleStyle.PADDING * 2);
+        const paddedHeight = (BubbleStyle.LINE_HEIGHT * this._lines.length) + (BubbleStyle.PADDING * 2);
 
         this._textAreaSize.width = paddedWidth;
         this._textAreaSize.height = paddedHeight;
@@ -183,6 +180,7 @@ class TextBubbleSkin extends Skin {
         }
 
         // Draw the bubble's rounded borders
+        ctx.beginPath();
         ctx.moveTo(BubbleStyle.CORNER_RADIUS, paddedHeight);
         ctx.arcTo(0, paddedHeight, 0, paddedHeight - BubbleStyle.CORNER_RADIUS, BubbleStyle.CORNER_RADIUS);
         ctx.arcTo(0, 0, paddedWidth, 0, BubbleStyle.CORNER_RADIUS);
@@ -267,14 +265,13 @@ class TextBubbleSkin extends Skin {
 
             if (this._texture === null) {
                 const textureOptions = {
-                    auto: true,
-                    wrap: gl.CLAMP_TO_EDGE,
-                    src: textureData
+                    auto: false,
+                    wrap: gl.CLAMP_TO_EDGE
                 };
 
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
-    
+
             gl.bindTexture(gl.TEXTURE_2D, this._texture);
             gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
             this._silhouette.update(textureData);

src/shaders/sprite.frag

@@ -1,7 +1,5 @@
 precision mediump float;
 
-uniform float u_fudge;
-
 #ifdef DRAW_MODE_silhouette
 uniform vec4 u_silhouetteColor;
 #else // DRAW_MODE_silhouette

tap-snapshots/test-integration-scratch-tests.js-TAP.test.js

@@ -1,10 +0,0 @@
-/* IMPORTANT
- * This snapshot file is auto-generated, but designed for humans.
- * It should be checked into source control and tracked carefully.
- * Re-generate by setting TAP_SNAPSHOT=1 and running tests.
- * Make sure to inspect the output below.  Do not ignore changes!
- */
-'use strict'
-exports[`test/integration/scratch-tests.js TAP bubble snapshot > bubble-text-snapshot 1`] = `
-<text xmlns="http://www.w3.org/2000/svg" alignment-baseline="text-before-edge" font-size="14" fill="#575E75" font-family="Helvetica"><tspan x="0" dy="1.2em">&lt;e*&amp;%$&amp;^$&gt;&lt;/!abc'&gt;</tspan></text>
-`

test/fixtures/MockSkinPool.js

@@ -1,35 +0,0 @@
-const Skin = require('../../src/Skin');
-
-class MockSkinPool {
-    constructor () {
-        this._allDrawables = [];
-    }
-
-    static forDrawableSkin (drawable) {
-        const pool = new MockSkinPool();
-        pool.addDrawable(drawable);
-        pool.addSkin(drawable.skin);
-        return pool;
-    }
-
-    _skinWasAltered (skin) {
-        for (let i = 0; i < this._allDrawables.length; i++) {
-            const drawable = this._allDrawables[i];
-            if (drawable && drawable._skin === skin) {
-                drawable._skinWasAltered();
-            }
-        }
-    }
-
-    addDrawable (drawable) {
-        this._allDrawables.push(drawable);
-        return drawable;
-    }
-
-    addSkin (skin) {
-        skin.addListener(Skin.Events.WasAltered, this._skinWasAltered.bind(this, skin));
-        return skin;
-    }
-}
-
-module.exports = MockSkinPool;

test/integration/cpu-render.html

@@ -1,6 +1,7 @@
 <body>
     <script src="../../node_modules/scratch-vm/dist/web/scratch-vm.js"></script>
     <script src="../../node_modules/scratch-storage/dist/web/scratch-storage.js"></script>
+    <script src="../../node_modules/scratch-svg-renderer/dist/web/scratch-svg-renderer.js"></script>
     <!-- note: this uses the BUILT version of scratch-render!  make sure to npm run build -->
     <script src="../../dist/web/scratch-render.js"></script>
 
@@ -21,6 +22,8 @@
 
         vm.attachStorage(storage);
         vm.attachRenderer(render);
+        vm.attachV2SVGAdapter(new ScratchSVGRenderer.SVGRenderer());
+        vm.attachV2BitmapAdapter(new ScratchSVGRenderer.BitmapAdapter());
 
         document.getElementById('file').addEventListener('click', e => {
             document.body.removeChild(document.getElementById('loaded'));

test/unit/DrawableTests.js

@@ -8,7 +8,6 @@ global.document = {
 
 const Drawable = require('../../src/Drawable');
 const MockSkin = require('../fixtures/MockSkin');
-const MockSkinPool = require('../fixtures/MockSkinPool');
 const Rectangle = require('../../src/Rectangle');
 
 /**
@@ -32,7 +31,6 @@ test('translate by position', t => {
     const drawable = new Drawable();
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
-    MockSkinPool.forDrawableSkin(drawable);
 
     expected.initFromBounds(0, 200, -50, 0);
     t.same(snapToNearest(drawable.getAABB()), expected);
@@ -49,7 +47,6 @@ test('translate by costume center', t => {
     const drawable = new Drawable();
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
-    MockSkinPool.forDrawableSkin(drawable);
 
     drawable.skin.setRotationCenter(1, 0);
     expected.initFromBounds(-1, 199, -50, 0);
@@ -67,7 +64,6 @@ test('translate and rotate', t => {
     const drawable = new Drawable();
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
-    MockSkinPool.forDrawableSkin(drawable);
 
     drawable.updateProperties({position: [1, 2], direction: 0});
     expected.initFromBounds(1, 51, 2, 202);
@@ -94,7 +90,6 @@ test('rotate by non-right-angles', t => {
     drawable.skin = new MockSkin();
     drawable.skin.size = [10, 10];
     drawable.skin.setRotationCenter(5, 5);
-    MockSkinPool.forDrawableSkin(drawable);
 
     expected.initFromBounds(-5, 5, -5, 5);
     t.same(snapToNearest(drawable.getAABB()), expected);
@@ -111,7 +106,6 @@ test('scale', t => {
     const drawable = new Drawable();
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
-    MockSkinPool.forDrawableSkin(drawable);
 
     drawable.updateProperties({scale: [100, 50]});
     expected.initFromBounds(0, 200, -25, 0);
@@ -134,7 +128,6 @@ test('rotate and scale', t => {
     const drawable = new Drawable();
     drawable.skin = new MockSkin();
     drawable.skin.size = [100, 1000];
-    MockSkinPool.forDrawableSkin(drawable);
 
     drawable.skin.setRotationCenter(50, 50);
     expected.initFromBounds(-50, 50, -950, 50);