@linear_non/stellar-libs 1.0.9 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linear_non/stellar-libs",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Reusable JavaScript libraries for Non-Linear Studio projects.",
   "main": "src/index.js",
   "type": "module",

package/src/SpritePlayer/index.js

@@ -16,13 +16,11 @@ export default class SpritePlayer {
     fileExtension = "png",
     cache = null,
     persistent = false,
-    // alpha options
-    alpha_path = null, // { mobile: "...", desktop: "..." }
-    fileAlpha = null, // e.g. "sprite_mask_"
+    alpha_path = null, // { mobile, desktop }
+    fileAlpha = null,
     useAlpha = false,
   }) {
     const rect = bounds(container)
-
     this.progress = gsap.utils.clamp(0, 1, progress)
     this.persistent = persistent
     this.isAlpha = !!useAlpha
@@ -56,8 +54,12 @@ export default class SpritePlayer {
     const { mobile_path, desktop_path, alpha_path, file_name, fileAlpha, total, file_extension, cache } =
       this.settings
 
-    const originBase = sniffer.isDesktop ? desktop_path : mobile_path
-    const originAlpha = alpha_path ? (sniffer.isDesktop ? alpha_path.desktop : alpha_path.mobile) : null
+    const originBase = sniffer.isDesktop ? desktop_path : mobile_path || desktop_path
+    const originAlpha = alpha_path
+      ? sniffer.isDesktop
+        ? alpha_path.desktop || alpha_path.mobile
+        : alpha_path.mobile || alpha_path.desktop
+      : null
 
     const make = (origin, name) =>
       new ImageLoader({
@@ -81,6 +83,12 @@ export default class SpritePlayer {
 
     this.dom.images = images
     this.dom.alphaImages = alphaImages
+
+    if (this.isAlpha && this.dom.alphaImages.length) {
+      this.dom.alphaImages = this.dom.alphaImages.map(img => this.toAlphaFromLuma(img))
+    }
+    if (this.isAlpha && !this.dom.alphaImages.length) this.isAlpha = false
+
     this.frameCount = images.length
     this.state.loaded = true
     emitter.emit("sprite:loaded", this)
@@ -104,9 +112,31 @@ export default class SpritePlayer {
     Object.assign(this.canvas, { width: rect.width, height: rect.height, rect, area, offset })
   }
 
+  // grayscale -> alpha (returns a canvas)
+  toAlphaFromLuma(img) {
+    const w = img.naturalWidth || img.width,
+      h = img.naturalHeight || img.height
+    const c = document.createElement("canvas")
+    c.width = w
+    c.height = h
+    const x = c.getContext("2d")
+    x.drawImage(img, 0, 0, w, h)
+    const d = x.getImageData(0, 0, w, h)
+    const a = d.data
+    for (let i = 0; i < a.length; i += 4) {
+      const lum = a[i] * 0.2126 + a[i + 1] * 0.7152 + a[i + 2] * 0.0722
+      a[i] = 0
+      a[i + 1] = 0
+      a[i + 2] = 0
+      a[i + 3] = lum
+    }
+    x.putImageData(d, 0, 0)
+    return c
+  }
+
   drawImageCover(ctx, img, area, offset) {
-    const iw = img.naturalWidth,
-      ih = img.naturalHeight
+    const iw = img.naturalWidth || img.width
+    const ih = img.naturalHeight || img.height
     const cw = area.width,
       ch = area.height
     const ir = iw / ih,
@@ -135,7 +165,8 @@ export default class SpritePlayer {
     const total = this.frameCount || images.length || 1
     const index = Math.min(total - 1, Math.round(this.progress * (total - 1)))
     const base = images[index]
-    const mask = this.isAlpha ? alphaImages[index] : null
+    const hasMasks = this.isAlpha && alphaImages.length === images.length
+    const mask = hasMasks ? alphaImages[index] : null
 
     ctx.clearRect(0, 0, width, height)
     if (!base) return
@@ -143,9 +174,10 @@ export default class SpritePlayer {
     this.drawImageCover(ctx, base, area, offset)
 
     if (mask) {
+      ctx.save()
       ctx.globalCompositeOperation = "destination-in"
       this.drawImageCover(ctx, mask, area, offset)
-      ctx.globalCompositeOperation = "source-over"
+      ctx.restore()
     }
   }
 
@@ -163,7 +195,6 @@ export default class SpritePlayer {
   setProgress(p) {
     this.progress = gsap.utils.clamp(0, 1, p)
   }
-
   show() {
     this.isVisible = true
   }
@@ -172,7 +203,6 @@ export default class SpritePlayer {
     const { ctx, width, height } = this.canvas
     ctx.clearRect(0, 0, width, height)
   }
-
   enableAlpha(v = true) {
     this.isAlpha = !!v
   }