@damienmortini/three 0.1.183 → 0.1.185

package/object/THREESprite.js

@@ -1,96 +1,96 @@
-import { Object3D, Mesh, Color, PlaneGeometry, Texture, DoubleSide, LinearFilter } from '../../../three/src/Three.js'
-
-import THREEShaderMaterial from './THREEShaderMaterial.js'
-
-const CACHED_IMAGES = new Map()
-
-export default class Sprite extends Object3D {
-  constructor(image, { data, frame, scale = 1 } = {}) {
-    super()
-
-    this._data = data
-    this._image = image
-    this._scale = scale
-
-    // Optimise images decoding
-    let canvas = CACHED_IMAGES.get(this.image)
-
-    if (!canvas) {
-      canvas = document.createElement('canvas')
-      canvas.width = this.image.width
-      canvas.height = this.image.height
-      const context = canvas.getContext('2d')
-      context.drawImage(this.image, 0, 0)
-      CACHED_IMAGES.set(this.image, canvas)
-    }
-
-    this.mesh = new Mesh(new PlaneGeometry(1, 1), new THREEShaderMaterial({
-      type: 'basic',
-      transparent: true,
-      side: DoubleSide,
-      uniforms: {
-        diffuse: new Color(0xffffff),
-        map: new Texture(canvas),
-      },
-    }))
-    this.mesh.scale.x = canvas.width * this._scale
-    this.mesh.scale.y = canvas.height * this._scale
-    this.mesh.material.map.minFilter = LinearFilter
-    this.mesh.material.map.generateMipmaps = false
-    this.mesh.material.map.needsUpdate = true
-
-    this.add(this.mesh)
-
-    if (frame) {
-      this.frame = frame
-    }
-  }
-
-  get image() {
-    return this._image
-  }
-
-  get data() {
-    return this._data
-  }
-
-  set material(value) {
-    this.mesh.material = value
-    this.frame = this.frame
-  }
-
-  get material() {
-    return this.mesh.material
-  }
-
-  set frame(value) {
-    if (!this.data) {
-      return
-    }
-
-    this._frame = value
-
-    const offsetRepeat = this.mesh.material.offsetRepeat
-    const frameData = this.data.frames[this._frame]
-
-    offsetRepeat.z = (frameData.rotated ? frameData.frame.h : frameData.frame.w) / this.image.width
-    offsetRepeat.w = (frameData.rotated ? frameData.frame.w : frameData.frame.h) / this.image.height
-
-    offsetRepeat.x = frameData.frame.x / this.image.width
-    offsetRepeat.y = 1. - frameData.frame.y / this.image.height - offsetRepeat.w
-
-    const scale = 1 / parseFloat(this.data.meta.scale)
-
-    this.mesh.scale.x = (frameData.rotated ? frameData.frame.h : frameData.frame.w) * scale * this._scale
-    this.mesh.scale.y = (frameData.rotated ? frameData.frame.w : frameData.frame.h) * scale * this._scale
-
-    this.mesh.position.x = (-(frameData.sourceSize.w - frameData.frame.w) * .5 + frameData.spriteSourceSize.x + frameData.sourceSize.w * (.5 - frameData.pivot.x)) * scale * this._scale
-    this.mesh.position.y = ((frameData.sourceSize.h - frameData.frame.h) * .5 - frameData.spriteSourceSize.y - frameData.sourceSize.h * (.5 - frameData.pivot.y)) * scale * this._scale
-
-    this.mesh.rotation.z = frameData.rotated ? Math.PI * .5 : 0
-  }
-
-  get frame() {
-    return this._frame
-  }
-}
+import { Object3D, Mesh, Color, PlaneGeometry, Texture, DoubleSide, LinearFilter } from '../../../three/src/Three.js'
+
+import THREEShaderMaterial from './THREEShaderMaterial.js'
+
+const CACHED_IMAGES = new Map()
+
+export default class Sprite extends Object3D {
+  constructor(image, { data, frame, scale = 1 } = {}) {
+    super()
+
+    this._data = data
+    this._image = image
+    this._scale = scale
+
+    // Optimise images decoding
+    let canvas = CACHED_IMAGES.get(this.image)
+
+    if (!canvas) {
+      canvas = document.createElement('canvas')
+      canvas.width = this.image.width
+      canvas.height = this.image.height
+      const context = canvas.getContext('2d')
+      context.drawImage(this.image, 0, 0)
+      CACHED_IMAGES.set(this.image, canvas)
+    }
+
+    this.mesh = new Mesh(new PlaneGeometry(1, 1), new THREEShaderMaterial({
+      type: 'basic',
+      transparent: true,
+      side: DoubleSide,
+      uniforms: {
+        diffuse: new Color(0xffffff),
+        map: new Texture(canvas),
+      },
+    }))
+    this.mesh.scale.x = canvas.width * this._scale
+    this.mesh.scale.y = canvas.height * this._scale
+    this.mesh.material.map.minFilter = LinearFilter
+    this.mesh.material.map.generateMipmaps = false
+    this.mesh.material.map.needsUpdate = true
+
+    this.add(this.mesh)
+
+    if (frame) {
+      this.frame = frame
+    }
+  }
+
+  get image() {
+    return this._image
+  }
+
+  get data() {
+    return this._data
+  }
+
+  set material(value) {
+    this.mesh.material = value
+    this.frame = this.frame
+  }
+
+  get material() {
+    return this.mesh.material
+  }
+
+  set frame(value) {
+    if (!this.data) {
+      return
+    }
+
+    this._frame = value
+
+    const offsetRepeat = this.mesh.material.offsetRepeat
+    const frameData = this.data.frames[this._frame]
+
+    offsetRepeat.z = (frameData.rotated ? frameData.frame.h : frameData.frame.w) / this.image.width
+    offsetRepeat.w = (frameData.rotated ? frameData.frame.w : frameData.frame.h) / this.image.height
+
+    offsetRepeat.x = frameData.frame.x / this.image.width
+    offsetRepeat.y = 1. - frameData.frame.y / this.image.height - offsetRepeat.w
+
+    const scale = 1 / parseFloat(this.data.meta.scale)
+
+    this.mesh.scale.x = (frameData.rotated ? frameData.frame.h : frameData.frame.w) * scale * this._scale
+    this.mesh.scale.y = (frameData.rotated ? frameData.frame.w : frameData.frame.h) * scale * this._scale
+
+    this.mesh.position.x = (-(frameData.sourceSize.w - frameData.frame.w) * .5 + frameData.spriteSourceSize.x + frameData.sourceSize.w * (.5 - frameData.pivot.x)) * scale * this._scale
+    this.mesh.position.y = ((frameData.sourceSize.h - frameData.frame.h) * .5 - frameData.spriteSourceSize.y - frameData.sourceSize.h * (.5 - frameData.pivot.y)) * scale * this._scale
+
+    this.mesh.rotation.z = frameData.rotated ? Math.PI * .5 : 0
+  }
+
+  get frame() {
+    return this._frame
+  }
+}

package/object/THREESpriteAnimation.js

@@ -1,103 +1,103 @@
-
-import THREESprite from './THREESprite.js'
-
-import Signal from '@damienmortini/core/util/Signal'
-import Ticker from '@damienmortini/core/util/Ticker'
-
-const SPRITESHEETS = new Map()
-
-export default class THREESpriteAnimation extends THREESprite {
-  constructor(image, data, animation, {
-    speed = 1,
-    fps = 25,
-    loop = true,
-    reverse = false,
-    scale = 1,
-    autoplay = true,
-  } = {}) {
-    let animations = SPRITESHEETS.get(data)
-    if (!animations) {
-      animations = new Map()
-      for (const key in data.frames) {
-        const match = /(.*?)([0-9]+)[$\.]/.exec(key)
-        const animationName = match[1]
-        let frames = animations.get(animationName)
-        if (!frames) {
-          frames = []
-          animations.set(animationName, frames)
-        }
-        const position = parseInt(match[2])
-        frames[position - 1] = key
-      }
-      SPRITESHEETS.set(data, animations)
-    }
-
-    super(image, {
-      data,
-      frame: animations.get(animation)[0],
-      scale,
-    })
-
-    this.onAnimationEnd = new Signal()
-
-    this._progress = 0
-    this._animations = animations
-
-    this.loop = loop
-    this.reverse = reverse
-    this.speed = speed
-    this.fps = fps
-    this.animation = animation
-
-    if (autoplay) {
-      this.play()
-    }
-  }
-
-  set animation(value) {
-    if (this._animation === value) {
-      return
-    }
-    this._animation = value
-
-    this.update()
-  }
-
-  get animation() {
-    return this._animation
-  }
-
-  play() {
-    Ticker.add(this._updateBound = this._updateBound || this.update.bind(this))
-  }
-
-  stop() {
-    Ticker.delete(this._updateBound)
-  }
-
-  set progress(value) {
-    if (this._progress === value) {
-      return
-    }
-    const previousProgress = this._progress
-    this._progress = value
-    if (this.loop) {
-      this._progress = ((this._progress % 1) + 1) % 1
-    } else {
-      this._progress = Math.min(Math.max(this._progress, 0), 1)
-      if (previousProgress !== this._progress && (this._progress === 1 && !this.reverse || this._progress === 0 && this.reverse)) {
-        this.onAnimationEnd.dispatch()
-      }
-    }
-  }
-
-  get progress() {
-    return this._progress
-  }
-
-  update() {
-    const frames = this._animations.get(this.animation)
-    this.progress += (this.speed * (this.fps / 60) * Ticker.timeScale / frames.length) * (this.reverse ? -1 : 1)
-    this.frame = frames[Math.round(this._progress * (frames.length - 1))]
-  }
-}
+
+import THREESprite from './THREESprite.js'
+
+import Signal from '@damienmortini/core/util/Signal'
+import Ticker from '@damienmortini/core/util/Ticker'
+
+const SPRITESHEETS = new Map()
+
+export default class THREESpriteAnimation extends THREESprite {
+  constructor(image, data, animation, {
+    speed = 1,
+    fps = 25,
+    loop = true,
+    reverse = false,
+    scale = 1,
+    autoplay = true,
+  } = {}) {
+    let animations = SPRITESHEETS.get(data)
+    if (!animations) {
+      animations = new Map()
+      for (const key in data.frames) {
+        const match = /(.*?)([0-9]+)[$\.]/.exec(key)
+        const animationName = match[1]
+        let frames = animations.get(animationName)
+        if (!frames) {
+          frames = []
+          animations.set(animationName, frames)
+        }
+        const position = parseInt(match[2])
+        frames[position - 1] = key
+      }
+      SPRITESHEETS.set(data, animations)
+    }
+
+    super(image, {
+      data,
+      frame: animations.get(animation)[0],
+      scale,
+    })
+
+    this.onAnimationEnd = new Signal()
+
+    this._progress = 0
+    this._animations = animations
+
+    this.loop = loop
+    this.reverse = reverse
+    this.speed = speed
+    this.fps = fps
+    this.animation = animation
+
+    if (autoplay) {
+      this.play()
+    }
+  }
+
+  set animation(value) {
+    if (this._animation === value) {
+      return
+    }
+    this._animation = value
+
+    this.update()
+  }
+
+  get animation() {
+    return this._animation
+  }
+
+  play() {
+    Ticker.add(this._updateBound = this._updateBound || this.update.bind(this))
+  }
+
+  stop() {
+    Ticker.delete(this._updateBound)
+  }
+
+  set progress(value) {
+    if (this._progress === value) {
+      return
+    }
+    const previousProgress = this._progress
+    this._progress = value
+    if (this.loop) {
+      this._progress = ((this._progress % 1) + 1) % 1
+    } else {
+      this._progress = Math.min(Math.max(this._progress, 0), 1)
+      if (previousProgress !== this._progress && (this._progress === 1 && !this.reverse || this._progress === 0 && this.reverse)) {
+        this.onAnimationEnd.dispatch()
+      }
+    }
+  }
+
+  get progress() {
+    return this._progress
+  }
+
+  update() {
+    const frames = this._animations.get(this.animation)
+    this.progress += (this.speed * (this.fps / 60) * Ticker.timeScale / frames.length) * (this.reverse ? -1 : 1)
+    this.frame = frames[Math.round(this._progress * (frames.length - 1))]
+  }
+}