chore(package): update webpack to version 4.7.0

Closes #240

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
     root: true,
-    extends: ['scratch', 'scratch/node']
+    extends: ['scratch', 'scratch/node', 'scratch/es6']
 };

.travis.yml

@@ -1,9 +1,14 @@
 language: node_js
+dist: trusty
+addons:
+  chrome: stable
 node_js:
-- 6
-- "node"
+- 8
+- node
 env:
   - NODE_ENV=production
+before_install:
+  - google-chrome-stable --headless --no-sandbox --remote-debugging-port=9222 &
 install:
 - npm --production=false install
 - npm --production=false update
@@ -11,27 +16,27 @@ sudo: false
 cache:
   directories:
   - node_modules
-after_script:
-- |
-  # RELEASE_BRANCHES and NPM_TOKEN defined in Travis settings panel
-  declare exitCode
-  $(npm bin)/travis-after-all
-  exitCode=$?
-  if [[
-    # Execute after all jobs finish successfully
-    $exitCode = 0 &&
-    # Only release on release branches
-    $RELEASE_BRANCHES =~ $TRAVIS_BRANCH &&
-    # Don't release on PR builds
-    $TRAVIS_PULL_REQUEST = "false"
-  ]]; then
-    # Authenticate NPM
-    echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
-    # Set version to timestamp
-    npm --no-git-tag-version version $($(npm bin)/json -f package.json version)-prerelease.$(date +%s)
-    npm publish
-    # Publish to gh-pages as most recent committer
-    git config --global user.email $(git log --pretty=format:"%ce" -n1)
-    git config --global user.name $(git log --pretty=format:"%cn" -n1)
-    ./node_modules/.bin/gh-pages -x -r https://${GH_TOKEN}@github.com/${TRAVIS_REPO_SLUG}.git -d playground -m "Build for $(git log --pretty=format:%H)"
-  fi
+jobs:
+  include:
+    - stage: test
+      script:
+      - npm run lint
+      - npm run docs
+      - npm run tap
+    - stage: deploy
+      node_js: 8
+      script: npm run build
+      before_deploy:
+      - VPKG=$($(npm bin)/json -f package.json version)
+      - export VERSION=${VPKG}-prerelease.$(date +%Y%m%d%H%M%S)
+      - npm --no-git-tag-version version $VERSION
+      - git config --global user.email $(git log --pretty=format:"%ae" -n1)
+      - git config --global user.name $(git log --pretty=format:"%an" -n1)
+      deploy:
+        provider: npm
+        skip_cleanup: true
+        "on":
+          all_branches: true
+          condition: $RELEASE_BRANCHES =~ $TRAVIS_BRANCH
+        email: $NPM_EMAIL
+        api_key: $NPM_TOKEN

package.json

@@ -18,8 +18,8 @@
     "prepublish": "npm run build",
     "prepublish-watch": "npm run watch",
     "start": "webpack-dev-server",
-    "tap": "./node_modules/.bin/tap ./test/unit/*.js",
-    "test": "npm run lint && npm run docs && npm run tap",
+    "tap": "tap test/unit test/integration",
+    "test": "npm run lint && npm run docs && npm run build && npm run tap",
     "version": "json -f package.json -I -e \"this.repository.sha = '$(git log -n1 --pretty=format:%H)'\"",
     "watch": "webpack --progress --colors --watch --watch-poll"
   },
@@ -30,6 +30,7 @@
     "babel-polyfill": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
     "base64-loader": "^1.0.0",
+    "chromeless": "^1.5.1",
     "copy-webpack-plugin": "^4.0.1",
     "docdash": "^0.4.0",
     "eslint": "^4.6.1",
@@ -42,11 +43,13 @@
     "json": "^9.0.4",
     "linebreak": "0.3.0",
     "raw-loader": "^0.5.1",
-    "scratch-svg-renderer": "0.1.0-prerelease.20180329174139",
+    "scratch-storage": "^0.4.0",
+    "scratch-svg-renderer": "0.1.0-prerelease.20180423193917",
+    "scratch-vm": "0.1.0-prerelease.1524520946",
     "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "twgl.js": "4.4.0",
-    "webpack": "^3.10.0",
+    "webpack": "^4.7.0",
     "webpack-dev-server": "^2.8.2",
     "xml-escape": "1.1.0"
   }

src/BitmapSkin.js

@@ -1,7 +1,6 @@
 const twgl = require('twgl.js');
 
 const Skin = require('./Skin');
-const Silhouette = require('./Silhouette');
 
 class BitmapSkin extends Skin {
     /**
@@ -24,8 +23,6 @@ class BitmapSkin extends Skin {
 
         /** @type {Array<int>} */
         this._textureSize = [0, 0];
-
-        this._silhouette = new Silhouette();
     }
 
     /**
@@ -90,7 +87,7 @@ class BitmapSkin extends Skin {
         }
 
         // Do these last in case any of the above throws an exception
-        this._costumeResolution = costumeResolution || 1;
+        this._costumeResolution = costumeResolution || 2;
         this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
 
         if (typeof rotationCenter === 'undefined') rotationCenter = this.calculateRotationCenter();
@@ -117,14 +114,6 @@ class BitmapSkin extends Skin {
         return [bitmapData.width, bitmapData.height];
     }
 
-    /**
-     * Does this point touch an opaque or translucent point on this skin?
-     * @param {twgl.v3} vec A texture coordinate.
-     * @return {boolean} Did it touch?
-     */
-    isTouching (vec) {
-        return this._silhouette.isTouching(vec);
-    }
 }
 
 module.exports = BitmapSkin;

src/Drawable.js

@@ -376,7 +376,7 @@ class Drawable {
      * @return {boolean} True if the world position touches the skin.
      */
     isTouching (vec) {
-        if (!this.skin) {
+        if (!(this.skin && this._visible)) {
             return false;
         }
 
@@ -411,7 +411,32 @@ class Drawable {
         // Apply texture effect transform.
         EffectTransform.transformPoint(this, localPosition, localPosition);
 
-        return this.skin.isTouching(localPosition);
+        if (this.useNearest) {
+            return this.skin.isTouchingNearest(localPosition);
+        }
+        return this.skin.isTouchingLinear(localPosition);
+    }
+
+    /**
+     * Should the drawable use NEAREST NEIGHBOR or LINEAR INTERPOLATION mode
+     */
+    get useNearest () {
+        // We can't use nearest neighbor unless we are a multiple of 90 rotation
+        if (this._direction % 90 !== 0) {
+            return false;
+        }
+
+        // Raster skins (bitmaps) should always prefer nearest neighbor
+        if (this.skin.isRaster) {
+            return true;
+        }
+
+        // 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) {
+            return true;
+        }
+        return false;
     }
 
     /**

src/EffectTransform.js

@@ -26,10 +26,9 @@ class EffectTransform {
      * @param {Drawable} drawable The drawable whose effects to emulate.
      * @param {twgl.v3} vec The texture coordinate to transform.
      * @param {?twgl.v3} dst A place to store the output coordinate.
-     * @return {twgl.v3} The coordinate after being transform by effects.
+     * @return {twgl.v3} dst - The coordinate after being transform by effects.
      */
-    static transformPoint (drawable, vec, dst) {
-        dst = dst || twgl.v3.create();
+    static transformPoint (drawable, vec, dst = twgl.v3.create()) {
         twgl.v3.copy(vec, dst);
 
         const uniforms = drawable.getUniforms();

src/PenSkin.js

@@ -2,7 +2,6 @@ const twgl = require('twgl.js');
 
 const RenderConstants = require('./RenderConstants');
 const Skin = require('./Skin');
-const Silhouette = require('./Silhouette');
 
 /**
  * Attributes to use when drawing with the pen
@@ -50,9 +49,6 @@ class PenSkin extends Skin {
         /** @type {WebGLTexture} */
         this._texture = null;
 
-        /** @type {Silhouette} */
-        this._silhouette = new Silhouette();
-
         /** @type {boolean} */
         this._silhouetteDirty = false;
 
@@ -214,18 +210,16 @@ class PenSkin extends Skin {
     }
 
     /**
-     * Does this point touch an opaque or translucent point on this skin?
-     * @param {twgl.v3} vec A texture coordinate.
-     * @return {boolean} Did it touch?
+     * If there have been pen operations that have dirtied the canvas, update
+     * now before someone wants to use our silhouette.
      */
-    isTouching (vec) {
+    updateSilhouette () {
         if (this._silhouetteDirty) {
             if (this._canvasDirty) {
                 this.getTexture();
             }
             this._silhouette.update(this._canvas);
         }
-        return this._silhouette.isTouching(vec);
     }
 }
 

src/Rectangle.js

@@ -35,6 +35,7 @@ class Rectangle {
         this.right = -Infinity;
         this.top = -Infinity;
         this.bottom = Infinity;
+
         for (let i = 0; i < points.length; i++) {
             const x = points[i][0];
             const y = points[i][1];
@@ -114,6 +115,41 @@ class Rectangle {
         this.top = Math.ceil(this.top);
     }
 
+    /**
+     * Compute the intersection of two bounding Rectangles.
+     * Could be an impossible box if they don't intersect.
+     * @param {Rectangle} a One rectangle
+     * @param {Rectangle} b Other rectangle
+     * @param {?Rectangle} result A resulting storage rectangle  (safe to pass
+     *                            a or b if you want to overwrite one)
+     * @returns {Rectangle} resulting rectangle
+     */
+    static intersect (a, b, result = new Rectangle()) {
+        result.left = Math.max(a.left, b.left);
+        result.right = Math.min(a.right, b.right);
+        result.top = Math.min(a.top, b.top);
+        result.bottom = Math.max(a.bottom, b.bottom);
+
+        return result;
+    }
+
+    /**
+     * Compute the union of two bounding Rectangles.
+     * @param {Rectangle} a One rectangle
+     * @param {Rectangle} b Other rectangle
+     * @param {?Rectangle} result A resulting storage rectangle  (safe to pass
+     *                            a or b if you want to overwrite one)
+     * @returns {Rectangle} resulting rectangle
+     */
+    static union (a, b, result = new Rectangle()) {
+        result.left = Math.min(a.left, b.left);
+        result.right = Math.max(a.right, b.right);
+        // Scratch Space - +y is up
+        result.top = Math.max(a.top, b.top);
+        result.bottom = Math.min(a.bottom, b.bottom);
+        return result;
+    }
+
     /**
      * Width of the Rectangle.
      * @return {number} Width of rectangle.
@@ -129,6 +165,7 @@ class Rectangle {
     get height () {
         return Math.abs(this.top - this.bottom);
     }
+
 }
 
 module.exports = Rectangle;

src/RenderWebGL.js

@@ -13,6 +13,9 @@ const SVGSkin = require('./SVGSkin');
 const SVGTextBubble = require('./util/svg-text-bubble');
 const EffectTransform = require('./EffectTransform');
 
+const __isTouchingDrawablesPoint = twgl.v3.create();
+const __candidatesBounds = new Rectangle();
+
 /**
  * @callback RenderWebGL#idFilterFunc
  * @param {int} drawableID The ID to filter.
@@ -295,6 +298,29 @@ class RenderWebGL extends EventEmitter {
 
         const newSkin = new SVGSkin(skinId, this);
         newSkin.setSVG(svgData, rotationCenter);
+        this._reskin(skinId, newSkin);
+    }
+
+    /**
+     * Update an existing bitmap skin, or create a bitmap skin if the previous skin was not bitmap.
+     * @param {!int} skinId the ID for the skin to change.
+     * @param {!string} imgData - new bitmap to use.
+     * @param {!number} bitmapResolution - the resolution scale for a bitmap costume.
+     * @param {?Array<number>} rotationCenter Optional: rotation center of the skin. If not supplied, the center of the
+     * skin will be used
+     */
+    updateBitmapSkin (skinId, imgData, bitmapResolution, rotationCenter) {
+        if (this._allSkins[skinId] instanceof BitmapSkin) {
+            this._allSkins[skinId].setBitmap(imgData, bitmapResolution, rotationCenter);
+            return;
+        }
+
+        const newSkin = new BitmapSkin(skinId, this);
+        newSkin.setBitmap(imgData, bitmapResolution, rotationCenter);
+        this._reskin(skinId, newSkin);
+    }
+
+    _reskin (skinId, newSkin) {
         const oldSkin = this._allSkins[skinId];
         this._allSkins[skinId] = newSkin;
 
@@ -302,6 +328,8 @@ class RenderWebGL extends EventEmitter {
         for (const drawable of this._allDrawables) {
             if (drawable && drawable.skin === oldSkin) {
                 drawable.skin = newSkin;
+                drawable.setConvexHullDirty();
+                drawable.setTransformDirty();
             }
         }
         oldSkin.dispose();
@@ -478,9 +506,29 @@ class RenderWebGL extends EventEmitter {
      * @param {int} drawableID The ID of the Drawable to measure.
      * @return {Array<number>} Skin size, width and height.
      */
-    getSkinSize (drawableID) {
+    getCurrentSkinSize (drawableID) {
         const drawable = this._allDrawables[drawableID];
-        return drawable.skin.size;
+        return this.getSkinSize(drawable.skin.id);
+    }
+
+    /**
+     * Get the size of a skin by ID.
+     * @param {int} skinID The ID of the Skin to measure.
+     * @return {Array<number>} Skin size, width and height.
+     */
+    getSkinSize (skinID) {
+        const skin = this._allSkins[skinID];
+        return skin.size;
+    }
+
+    /**
+     * Get the rotation center of a skin by ID.
+     * @param {int} skinID The ID of the Skin
+     * @return {Array<number>} The rotationCenterX and rotationCenterY
+     */
+    getSkinRotationCenter (skinID) {
+        const skin = this._allSkins[skinID];
+        return skin.calculateRotationCenter();
     }
 
     /**
@@ -495,15 +543,15 @@ class RenderWebGL extends EventEmitter {
         const gl = this._gl;
         twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
 
-        const bounds = this._touchingBounds(drawableID);
-        if (!bounds) {
-            return false;
-        }
-        const candidateIDs = this._filterCandidatesTouching(drawableID, this._drawList, bounds);
-        if (!candidateIDs) {
+        const candidates = this._candidatesTouching(drawableID, this._drawList);
+        if (candidates.length === 0) {
             return false;
         }
 
+        const bounds = this._candidatesBounds(candidates);
+
+        const candidateIDs = candidates.map(({id}) => id);
+
         // Limit size of viewport to the bounds around the target Drawable,
         // and create the projection matrix for the draw.
         gl.viewport(0, 0, bounds.width, bounds.height);
@@ -586,72 +634,36 @@ class RenderWebGL extends EventEmitter {
     /**
      * Check if a particular Drawable is touching any in a set of Drawables.
      * @param {int} drawableID The ID of the Drawable to check.
-     * @param {Array<int>} candidateIDs The Drawable IDs to check, otherwise all.
-     * @returns {boolean} True iff the Drawable is touching one of candidateIDs.
+     * @param {?Array<int>} candidateIDs The Drawable IDs to check, otherwise all drawables in the renderer
+     * @returns {boolean} True if the Drawable is touching one of candidateIDs.
      */
-    isTouchingDrawables (drawableID, candidateIDs) {
-        candidateIDs = candidateIDs || this._drawList;
+    isTouchingDrawables (drawableID, candidateIDs = this._drawList) {
 
-        const gl = this._gl;
-
-        twgl.bindFramebufferInfo(gl, this._queryBufferInfo);
-
-        const bounds = this._touchingBounds(drawableID);
-        if (!bounds) {
-            return false;
-        }
-        candidateIDs = this._filterCandidatesTouching(drawableID, candidateIDs, bounds);
-        if (!candidateIDs) {
+        const candidates = this._candidatesTouching(drawableID, candidateIDs);
+        if (candidates.length === 0) {
             return false;
         }
 
-        // Limit size of viewport to the bounds around the target Drawable,
-        // and create the projection matrix for the draw.
-        gl.viewport(0, 0, bounds.width, bounds.height);
-        const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
+        // Get the union of all the candidates intersections.
+        const bounds = this._candidatesBounds(candidates);
 
-        const noneColor = Drawable.color4fFromID(RenderConstants.ID_NONE);
-        gl.clearColor.apply(gl, noneColor);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+        const drawable = this._allDrawables[drawableID];
+        const point = __isTouchingDrawablesPoint;
 
-        try {
-            gl.enable(gl.STENCIL_TEST);
-            gl.stencilFunc(gl.ALWAYS, 1, 1);
-            gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
-            gl.colorMask(false, false, false, false);
-            this._drawThese([drawableID], ShaderManager.DRAW_MODE.silhouette, projection);
-
-            gl.stencilFunc(gl.EQUAL, 1, 1);
-            gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
-            gl.colorMask(true, true, true, true);
-
-            this._drawThese(candidateIDs, ShaderManager.DRAW_MODE.silhouette, projection,
-                {idFilterFunc: testID => testID !== drawableID}
-            );
-        } finally {
-            gl.colorMask(true, true, true, true);
-            gl.disable(gl.STENCIL_TEST);
-        }
-
-        const pixels = new Uint8Array(Math.floor(bounds.width * bounds.height * 4));
-        gl.readPixels(0, 0, bounds.width, bounds.height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
-
-        if (this._debugCanvas) {
-            this._debugCanvas.width = bounds.width;
-            this._debugCanvas.height = bounds.height;
-            const context = this._debugCanvas.getContext('2d');
-            const imageData = context.getImageData(0, 0, bounds.width, bounds.height);
-            imageData.data.set(pixels);
-            context.putImageData(imageData, 0, 0);
-        }
-
-        for (let pixelBase = 0; pixelBase < pixels.length; pixelBase += 4) {
-            const pixelID = Drawable.color3bToID(
-                pixels[pixelBase],
-                pixels[pixelBase + 1],
-                pixels[pixelBase + 2]);
-            if (pixelID > RenderConstants.ID_NONE) {
-                return true;
+        // This is an EXTREMELY brute force collision detector, but it is
+        // still faster than asking the GPU to give us the pixels.
+        for (let x = bounds.left; x <= bounds.right; x++) {
+            // Scratch Space - +y is top
+            point[0] = x;
+            for (let y = bounds.bottom; y <= bounds.top; y++) {
+                point[1] = y;
+                if (drawable.isTouching(point)) {
+                    for (let index = 0; index < candidates.length; index++) {
+                        if (candidates[index].drawable.isTouching(point)) {
+                            return true;
+                        }
+                    }
+                }
             }
         }
 
@@ -920,27 +932,47 @@ class RenderWebGL extends EventEmitter {
      * could possibly intersect the given bounds.
      * @param {int} drawableID - ID for drawable of query.
      * @param {Array<int>} candidateIDs - Candidates for touching query.
-     * @param {Rectangle} bounds - Bounds to limit candidates to.
-     * @return {?Array<int>} Filtered candidateIDs, or null if none.
+     * @return {?Array< {id, drawable, intersection} >} Filtered candidates with useful data.
      */
-    _filterCandidatesTouching (drawableID, candidateIDs, bounds) {
-        // Filter candidates by rough bounding box intersection.
-        // Do this before _drawThese, so we can prevent any GL operations
-        // and readback by returning early.
-        candidateIDs = candidateIDs.filter(testID => {
-            if (testID === drawableID) return false;
-            // Only draw items which could possibly overlap target Drawable.
-            const candidate = this._allDrawables[testID];
-            const candidateBounds = candidate.getFastBounds();
-            return bounds.intersects(candidateBounds);
-        });
-        if (candidateIDs.length === 0) {
-            // No possible intersections based on bounding boxes.
-            return null;
+    _candidatesTouching (drawableID, candidateIDs) {
+        const bounds = this._touchingBounds(drawableID);
+        if (!bounds) {
+            return [];
         }
-        return candidateIDs;
+        return candidateIDs.reduce((result, id) => {
+            if (id !== drawableID) {
+                const drawable = this._allDrawables[id];
+                const candidateBounds = drawable.getFastBounds();
+
+                if (bounds.intersects(candidateBounds)) {
+                    result.push({
+                        id,
+                        drawable,
+                        intersection: Rectangle.intersect(bounds, candidateBounds)
+                    });
+                }
+            }
+            return result;
+        }, []);
     }
 
+    /**
+     * Helper to get the union bounds from a set of candidates returned from the above method
+     * @private
+     * @param {Array<object>} candidates info from _candidatesTouching
+     * @return {Rectangle} the outer bounding box union
+     */
+    _candidatesBounds (candidates) {
+        return candidates.reduce((memo, {intersection}) => {
+            if (!memo) {
+                return intersection;
+            }
+            // store the union of the two rectangles in our static rectangle instance
+            return Rectangle.union(memo, intersection, __candidatesBounds);
+        }, null);
+    }
+
+
     /**
      * Update the position, direction, scale, or effect properties of this Drawable.
      * @param {int} drawableID The ID of the Drawable to update.
@@ -1165,12 +1197,6 @@ class RenderWebGL extends EventEmitter {
      * @private
      */
     _drawThese (drawables, drawMode, projection, opts = {}) {
-        const near = function (a, b, relativeTolerance = 0.01) {
-            const absA = Math.abs(a);
-            const absB = Math.abs(b);
-            const error = Math.abs(a - b) / Math.max(absA, absB);
-            return error < relativeTolerance;
-        };
 
         const gl = this._gl;
         let currentShader = null;
@@ -1189,7 +1215,11 @@ class RenderWebGL extends EventEmitter {
             // the ignoreVisibility flag is used (e.g. for stamping or touchingColor).
             if (!drawable.getVisible() && !opts.ignoreVisibility) continue;
 
-            const drawableScale = drawable.scale;
+            // Combine drawable scale with the native vs. backing pixel ratio
+            const drawableScale = [
+                drawable.scale[0] * this._gl.canvas.width / this._nativeSize[0],
+                drawable.scale[1] * this._gl.canvas.height / this._nativeSize[1]
+            ];
 
             // If the skin or texture isn't ready yet, skip it.
             if (!drawable.skin || !drawable.skin.getTexture(drawableScale)) continue;
@@ -1219,9 +1249,9 @@ class RenderWebGL extends EventEmitter {
             }
 
             if (uniforms.u_skin) {
-                const useNearest =
-                    (drawable._direction % 90 === 0) && (near(drawableScale, 100) || drawable.skin.isRaster);
-                twgl.setTextureParameters(gl, uniforms.u_skin, {minMag: useNearest ? gl.NEAREST : gl.LINEAR});
+                twgl.setTextureParameters(
+                    gl, uniforms.u_skin, {minMag: drawable.useNearest ? gl.NEAREST : gl.LINEAR}
+                );
             }
 
             twgl.setUniforms(currentShader, uniforms);
@@ -1287,7 +1317,7 @@ class RenderWebGL extends EventEmitter {
             for (; x < width; x++) {
                 _pixelPos[0] = x / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
-                if (drawable.skin.isTouching(_effectPos)) {
+                if (drawable.skin.isTouchingLinear(_effectPos)) {
                     Q = [x, y];
                     break;
                 }
@@ -1317,7 +1347,7 @@ class RenderWebGL extends EventEmitter {
             for (x = width - 1; x >= 0; x--) {
                 _pixelPos[0] = x / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
-                if (drawable.skin.isTouching(_effectPos)) {
+                if (drawable.skin.isTouchingLinear(_effectPos)) {
                     Q = [x, y];
                     break;
                 }

src/SVGSkin.js

@@ -1,8 +1,7 @@
 const twgl = require('twgl.js');
 
-const Silhouette = require('./Silhouette');
 const Skin = require('./Skin');
-const SvgRenderer = require('scratch-svg-renderer');
+const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 
 const MAX_TEXTURE_DIMENSION = 2048;
 
@@ -31,8 +30,6 @@ class SVGSkin extends Skin {
 
         /** @type {Number} */
         this._maxTextureScale = 0;
-
-        this._silhouette = new Silhouette();
     }
 
     /**
@@ -129,14 +126,6 @@ class SVGSkin extends Skin {
         });
     }
 
-    /**
-     * Does this point touch an opaque or translucent point on this skin?
-     * @param {twgl.v3} vec A texture coordinate.
-     * @return {boolean} Did it touch?
-     */
-    isTouching (vec) {
-        return this._silhouette.isTouching(vec);
-    }
 }
 
 module.exports = SVGSkin;

src/Silhouette.js

@@ -10,6 +10,23 @@
  */
 let __SilhouetteUpdateCanvas;
 
+/**
+ * Internal helper function (in hopes that compiler can inline).  Get a pixel
+ * from silhouette data, or 0 if outside it's bounds.
+ * @private
+ * @param {Silhouette} silhouette - has data width and height
+ * @param {number} x - x
+ * @param {number} y - y
+ * @return {number} Alpha value for x/y position
+ */
+const getPoint = ({_width: width, _height: height, _data: data}, x, y) => {
+    // 0 if outside bouds, otherwise read from data.
+    if (x >= width || y >= height || x < 0 || y < 0) {
+        return 0;
+    }
+    return data[(y * width) + x];
+};
+
 class Silhouette {
     constructor () {
         /**
@@ -44,6 +61,9 @@ class Silhouette {
 
         ctx.clearRect(0, 0, width, height);
         ctx.drawImage(bitmapData, 0, 0, width, height);
+        if (!(width && height)) {
+            return;
+        }
         const imageData = ctx.getImageData(0, 0, width, height);
 
         this._data = new Uint8ClampedArray(imageData.data.length / 4);
@@ -54,17 +74,31 @@ class Silhouette {
     }
 
     /**
-     * Does this point touch the silhouette?
+     * Test if texture coordinate touches the silhouette using nearest neighbor.
      * @param {twgl.v3} vec A texture coordinate.
-     * @return {boolean} Did the point touch?
+     * @return {boolean} If the nearest pixel has an alpha value.
      */
-    isTouching (vec) {
-        const x = Math.floor(vec[0] * this._width);
-        const y = Math.floor(vec[1] * this._height);
-        return (
-            x < this._width && x >= 0 &&
-            y < this._height && y >= 0 &&
-            this._data[(y * this._width) + x] !== 0);
+    isTouchingNearest (vec) {
+        return getPoint(
+            this,
+            Math.round(vec[0] * (this._width - 1)),
+            Math.round(vec[1] * (this._height - 1))
+        ) > 0;
+    }
+
+    /**
+     * Test to see if any of the 4 pixels used in the linear interpolate touch
+     * the silhouette.
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Any of the pixels have some alpha.
+     */
+    isTouchingLinear (vec) {
+        const x = Math.floor(vec[0] * (this._width - 1));
+        const y = Math.floor(vec[1] * (this._height - 1));
+        return getPoint(this, x, y) > 0 ||
+            getPoint(this, x + 1, y) > 0 ||
+            getPoint(this, x, y + 1) > 0 ||
+            getPoint(this, x + 1, y + 1) > 0;
     }
 
     /**

src/Skin.js

@@ -3,6 +3,7 @@ const EventEmitter = require('events');
 const twgl = require('twgl.js');
 
 const RenderConstants = require('./RenderConstants');
+const Silhouette = require('./Silhouette');
 
 /**
  * Truncate a number into what could be stored in a 32 bit floating point value.
@@ -52,6 +53,12 @@ class Skin extends EventEmitter {
             u_skin: null
         };
 
+        /**
+         * A silhouette to store touching data, skins are responsible for keeping it up to date.
+         * @private
+         */
+        this._silhouette = new Silhouette();
+
         this.setMaxListeners(RenderConstants.SKIN_SHARE_SOFT_LIMIT);
     }
 
@@ -140,14 +147,35 @@ class Skin extends EventEmitter {
         return this._uniforms;
     }
 
+    /**
+     * If the skin defers silhouette operations until the last possible minute,
+     * this will be called before isTouching uses the silhouette.
+     * @abstract
+     */
+    updateSilhouette () {}
+
     /**
      * Does this point touch an opaque or translucent point on this skin?
+     * Nearest Neighbor version
      * @param {twgl.v3} vec A texture coordinate.
      * @return {boolean} Did it touch?
      */
-    isTouching () {
-        return false;
+    isTouchingNearest (vec) {
+        this.updateSilhouette();
+        return this._silhouette.isTouchingNearest(vec);
     }
+
+    /**
+     * Does this point touch an opaque or translucent point on this skin?
+     * Linear Interpolation version
+     * @param {twgl.v3} vec A texture coordinate.
+     * @return {boolean} Did it touch?
+     */
+    isTouchingLinear (vec) {
+        this.updateSilhouette();
+        return this._silhouette.isTouchingLinear(vec);
+    }
+
 }
 
 /**

src/shaders/sprite.frag

@@ -46,7 +46,7 @@ varying vec2 v_texCoord;
 // See also: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
 
 // Smaller values can cause problems with "color" and "brightness" effects on some mobile devices
-const float epsilon = 1e-4;
+const float epsilon = 1e-3;
 
 // Convert an RGB color to Hue, Saturation, and Lightness.
 // All components of input and output are expected to be in the [0,1] range.

src/util/svg-text-bubble.js

@@ -1,5 +1,5 @@
 const SVGTextWrapper = require('./svg-text-wrapper');
-const SvgRenderer = require('scratch-svg-renderer');
+const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 const xmlescape = require('xml-escape');
 
 const MAX_LINE_LENGTH = 170;

test/integration/index.html

@@ -0,0 +1,43 @@
+<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>
+    <!-- note: this uses the BUILT version of scratch-render!  make sure to npm run build -->
+    <script src="../../dist/web/scratch-render.js"></script>
+
+    <canvas id="test" width="480" height="360"></canvas>
+    <input type="file" id="file" name="file">
+
+    <script>
+        // These variables are going to be available in the "window global" intentionally.
+        // Allows you easy access to debug with `vm.greenFlag()` etc.
+
+        var render = new ScratchRender(document.getElementById('test'));
+        var vm = new VirtualMachine();
+        var storage = new ScratchStorage();
+
+        vm.attachStorage(storage);
+        vm.attachRenderer(render);
+
+        document.getElementById('file').addEventListener('click', e => {
+            document.body.removeChild(document.getElementById('loaded'));
+        });
+
+        document.getElementById('file').addEventListener('change', e => {
+            const reader = new FileReader();
+            const thisFileInput = e.target;
+            reader.onload = () => {
+                vm.start();
+                vm.loadProject(reader.result)
+                    .then(() => {
+                        // we add a `#loaded` div to our document, the integration suite
+                        // waits for that element to show up to assume the vm is ready
+                        // to play!
+                        const div = document.createElement('div');
+                        div.id='loaded';
+                        document.body.appendChild(div);
+                    });
+            };
+            reader.readAsArrayBuffer(thisFileInput.files[0]);
+        });
+    </script>
+</body>

test/integration/scratch-tests.js

@@ -0,0 +1,113 @@
+/* global vm, Promise */
+const {Chromeless} = require('chromeless');
+const test = require('tap').test;
+const path = require('path');
+const fs = require('fs');
+const chromeless = new Chromeless();
+
+const indexHTML = path.resolve(__dirname, 'index.html');
+const testDir = (...args) => path.resolve(__dirname, 'scratch-tests', ...args);
+
+const testFile = file => test(file, async t => {
+    // start each test by going to the index.html, and loading the scratch file
+    const says = await chromeless.goto(`file://${indexHTML}`)
+        .setFileInput('#file', testDir(file))
+        // the index.html handler for file input will add a #loaded element when it
+        // finishes.
+        .wait('#loaded')
+        .evaluate(() => {
+            // This function is run INSIDE the integration chrome browser via some
+            // injection and .toString() magic.  We can return some "simple data"
+            // back across as a promise, so we will just log all the says that happen
+            // for parsing after.
+
+            // this becomes the `says` in the outer scope
+            const messages = [];
+            const TIMEOUT = 5000;
+
+            vm.runtime.on('SAY', (_, __, message) => {
+                messages.push(message);
+            });
+
+            vm.greenFlag();
+            const startTime = Date.now();
+
+            return Promise.resolve()
+                .then(async () => {
+                    // waiting for all threads to complete, then we return
+                    while (vm.runtime.threads.length > 0) {
+                        if ((Date.now() - startTime) >= TIMEOUT) {
+                            messages.push(`fail Threads still running after ${TIMEOUT}ms`);
+                            break;
+                        }
+
+                        await new Promise(resolve => setTimeout(resolve, 50));
+                    }
+
+                    return messages;
+                });
+        });
+
+    // Map string messages to tap reporting methods. This will be used
+    // with events from scratch's runtime emitted on block instructions.
+    let didPlan = false;
+    let didEnd = false;
+    const reporters = {
+        comment (message) {
+            t.comment(message);
+        },
+        pass (reason) {
+            t.pass(reason);
+        },
+        fail (reason) {
+            t.fail(reason);
+        },
+        plan (count) {
+            didPlan = true;
+            t.plan(Number(count));
+        },
+        end () {
+            didEnd = true;
+            t.end();
+        }
+    };
+
+    // loop over each "SAY" we caught from the VM and use the reporters
+    says.forEach(text => {
+        // first word of the say is going to be a "command"
+        const command = text.split(/\s+/, 1)[0].toLowerCase();
+        if (reporters[command]) {
+            return reporters[command](text.substring(command.length).trim());
+        }
+
+        // Default to a comment with the full text if we didn't match
+        // any command prefix
+        return reporters.comment(text);
+    });
+
+    if (!didPlan) {
+        t.comment('did not say "plan NUMBER_OF_TESTS"');
+    }
+
+    // End must be called so that tap knows the test is done. If
+    // the test has a SAY "end" block but that block did not
+    // execute, this explicit failure will raise that issue so
+    // it can be resolved.
+    if (!didEnd) {
+        t.fail('did not say "end"');
+        t.end();
+    }
+});
+
+// immediately invoked async function to let us wait for each test to finish before starting the next.
+(async () => {
+    const files = fs.readdirSync(testDir())
+        .filter(uri => uri.endsWith('.sb2') || uri.endsWidth('.sb3'));
+
+    for (const file of files) {
+        await testFile(file);
+    }
+
+    // close the browser window we used
+    await chromeless.end();
+})();