littlejsengine 1.14.28 → 1.15.2

package/dist/littlejs.release.js

@@ -33,7 +33,7 @@ const engineName = 'LittleJS';
  *  @type {string}
  *  @default
  *  @memberof Engine */
-const engineVersion = '1.15.0';
+const engineVersion = '1.15.2';
 
 /** Frames per second to update
  *  @type {number}
@@ -134,7 +134,7 @@ function engineAddPlugin(update, render, glContextLost, glContextRestored)
 
 /**
  * @callback GameInitCallback - Called after the engine starts, can be async
- * @returns {void|Promise<void>}
+ * @return {void|Promise<void>}
  * @memberof Engine
  */
 /**
@@ -490,10 +490,10 @@ function engineObjectsDestroy()
 }
 
 /** Collects all object within a given area
- *  @param {Vector2} [pos]                 - Center of test area, or undefined for all objects
- *  @param {Vector2|number} [size]         - Radius of circle if float, rectangle size if Vector2
+ *  @param {Vector2} [pos] - Center of test area, or undefined for all objects
+ *  @param {Vector2|number} [size] - Radius of circle if float, rectangle size if Vector2
  *  @param {Array<EngineObject>} [objects=engineObjects] - List of objects to check
- *  @return {Array<EngineObject>}                        - List of collected objects
+ *  @return {Array<EngineObject>} - List of collected objects
  *  @memberof Engine */
 function engineObjectsCollect(pos, size, objects=engineObjects)
 {
@@ -908,7 +908,7 @@ function percentLerp(value, percentA, percentB, lerpA, lerpB)
  *  @param {number} valueA
  *  @param {number} valueB
  *  @param {number} [wrapSize]
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function distanceWrap(valueA, valueB, wrapSize=1)
 { const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
@@ -918,7 +918,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @param {number} valueB
  *  @param {number} percent
  *  @param {number} [wrapSize]
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function lerpWrap(valueA, valueB, percent, wrapSize=1)
 {
@@ -930,7 +930,7 @@ function lerpWrap(valueA, valueB, percent, wrapSize=1)
 /** Returns signed wrapped distance between the two angles passed in
  *  @param {number} angleA
  *  @param {number} angleB
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
@@ -938,7 +938,7 @@ function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*P
  *  @param {number} angleA
  *  @param {number} angleB
  *  @param {number} percent
- *  @returns {number}
+ *  @return {number}
  *  @memberof Utilities */
 function lerpAngle(angleA, angleB, percent) { return lerpWrap(angleA, angleB, percent, 2*PI); }
 
@@ -1907,11 +1907,14 @@ const MAGENTA = debugProtectConstant(rgb(1,0,1));
 class Timer
 {
     /** Create a timer object set time passed in
-     *  @param {number} [timeLeft] - How much time left before the timer elapses in seconds */
-    constructor(timeLeft)
+     *  @param {number} [timeLeft] - How much time left before the timer 
+     *  @param {boolean} [useRealTime] - Should the timer keep running even when the game is paused? (useful for UI) */
+    constructor(timeLeft, useRealTime=false)
     {
         ASSERT(timeLeft === undefined || isNumber(timeLeft), 'Constructed Timer is invalid.', timeLeft);
-        this.time = timeLeft === undefined ? undefined : time + timeLeft;
+        this.useRealTime = useRealTime;
+        const globalTime = this.getGlobalTime();
+        this.time = timeLeft === undefined ? undefined : globalTime + timeLeft;
         this.setTime = timeLeft;
     }
 
@@ -1920,10 +1923,19 @@ class Timer
     set(timeLeft=0)
     {
         ASSERT(isNumber(timeLeft), 'Timer is invalid.', timeLeft);
-        this.time = time + timeLeft;
+        const globalTime = this.getGlobalTime();
+        this.time = globalTime + timeLeft;
         this.setTime = timeLeft;
     }
 
+    /** Set if the timer should keep running even when the game is paused
+     *  @param {boolean} [useRealTime] */
+    setUseRealTime(useRealTime=true)
+    {
+        ASSERT(!this.isSet(), 'Cannot change global time setting while timer is set.');
+        this.useRealTime = useRealTime;
+    }
+
     /** Unset the timer */
     unset() { this.time = undefined; }
 
@@ -1933,24 +1945,28 @@ class Timer
 
     /** Returns true if set and has not elapsed
      * @return {boolean} */
-    active() { return time < this.time; }
+    active() { return this.getGlobalTime() < this.time; }
 
     /** Returns true if set and elapsed
      * @return {boolean} */
-    elapsed() { return time >= this.time; }
+    elapsed() { return this.getGlobalTime() >= this.time; }
 
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {number} */
-    get() { return this.isSet()? time - this.time : 0; }
+    get() { return this.isSet()? this.getGlobalTime() - this.time : 0; }
 
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {number} */
-    getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
+    getPercent() { return this.isSet()? 1-percent(this.time - this.getGlobalTime(), 0, this.setTime) : 0; }
 
     /** Get the time this timer was set to, returns 0 if not set
      * @return {number} */
     getSetTime() { return this.isSet() ? this.setTime : 0; }
 
+    /** Get the current global time this timer is based on
+     * @return {number} */
+    getGlobalTime() { return this.useRealTime ? timeReal : time; }
+
     /** Returns this timer expressed as a string
      * @return {string} */
     toString() { return this.isSet() ? abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }
@@ -3344,7 +3360,7 @@ function drawTile(pos, size=new Vector2(1), tileInfo, color=WHITE,
     {
         // normal canvas 2D rendering method (slower)
         ++drawCount;
-        size = new Vector2(size.x, -size.y); // fix upside down sprites
+        size = new Vector2(size.x, -size.y); // flip upside down sprites
         drawCanvas2D(pos, size, angle, mirror, (context)=>
         {
             if (textureInfo)
@@ -6235,6 +6251,9 @@ class ParticleEmitter extends EngineObject
         this.previousPos = this.pos.copy();
     }
 
+    /** Emitters do not have physics */
+    updatePhysics() {}
+
     /** Update the emitter to spawn particles, called automatically by engine once each frame */
     update()
     {
@@ -8088,11 +8107,16 @@ class UISystemPlugin
             // reset hover object at start of update
             uiSystem.lastHoverObject = uiSystem.hoverObject;
             uiSystem.hoverObject = undefined;
+
+            // update in reverse order so topmost objects get priority
             for (let i = uiSystem.uiObjects.length; i--;)
             {
                 const o = uiSystem.uiObjects[i];
                 o.parent || updateObject(o)
             }
+
+            // remove destroyed objects
+            uiSystem.uiObjects = uiSystem.uiObjects.filter(o=>!o.destroyed);
         }
         function uiRender()
         {
@@ -8262,6 +8286,15 @@ class UISystemPlugin
         p.x -= sInv*mainCanvasSize.x/2;
         return p;
     }
+
+    /** Destroy and remove all objects
+    *  @memberof Engine */
+    destroyObjects()
+    {
+        for (const o of this.uiObjects)
+            o.parent || o.destroy();
+        this.uiObjects = this.uiObjects.filter(o=>!o.destroyed);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -8363,6 +8396,22 @@ class UIObject
         child.parent = undefined;
     }
 
+
+    /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
+    destroy()
+    {
+        if (this.destroyed)
+            return;
+
+        // disconnect from parent and destroy children
+        this.destroyed = 1;
+        this.parent && this.parent.removeChild(this);
+        for (const child of this.children)
+        {
+            child.parent = 0;
+            child.destroy();
+        }
+    }
     /** Check if the mouse is overlapping a box in screen space
      *  @return {boolean} - True if overlapping
      */
@@ -8742,6 +8791,150 @@ class UIScrollbar extends UIObject
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * VideoPlayerUIObject - A UI object that plays video
+ * @extends UIObject
+ * @example
+ * // Create a video player UI object
+ * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'cutscene.mp4', true);
+ * video.play();
+ * @memberof UISystem
+ */
+class UIVideo extends UIObject
+{
+    /** Create a video player UI object
+     *  @param {Vector2} [pos]
+     *  @param {Vector2} [size]
+     *  @param {string} src - Video file path or URL
+     *  @param {boolean} [autoplay=false] - Start playing immediately?
+     *  @param {boolean} [loop=false] - Loop the video?
+     *  @param {number} [volume=1] - Volume percent scaled by global volume (0-1)
+     */
+    constructor(pos, size, src, autoplay=false, loop=false, volume=1)
+    {
+        super(pos, size || vec2());
+        
+        ASSERT(isString(src), 'video src must be a string');
+        ASSERT(isNumber(volume), 'video volume must be a number');
+
+        this.color = BLACK; // default to black background
+        this.cornerRadius = 0; // default to no corner radius
+
+        /** @property {float} - The video volume */
+        this.volume = volume;
+
+        // create video element
+        /** @property {HTMLVideoElement} - The video player */
+        this.video = document.createElement('video');
+        this.video.loop = loop;
+        this.video.volume = clamp(volume * soundVolume);
+        this.video.muted = !soundEnable;
+        this.video.style.display = 'none';
+        this.video.src = src;
+        document.body.appendChild(this.video);
+        autoplay && this.play();
+    }
+    
+    /** Play or resume the video
+     *  @return {Promise} Promise that resolves when playback starts */
+    play()
+    {
+        // try to play the video, catch any errors (autoplay may be blocked)
+        const promise = this.video.play();
+        promise?.catch(()=>{});
+        return promise;
+    }
+    
+    /** Pause the video */
+    pause() { this.video.pause(); }
+    
+    /** Stop and reset the video */
+    stop() { this.video.pause(); this.video.currentTime = 0; }
+    
+    /** Check if video is currently loading
+     *  @return {boolean} */
+    isLoadng()
+    { return this.video.readyState < this.video.HAVE_CURRENT_DATA; }
+    
+    /** Check if video is currently paused
+     *  @return {boolean} */
+    isPaused() { return this.video.paused; }
+    
+    /** Check if video is currently playing
+     *  @return {boolean} */
+    isPlaying()
+    { return !this.isPaused() && !this.hasEnded() && !this.isLoadng(); }
+    
+    /** Check if video has ended playing
+     *  @return {boolean} */
+    hasEnded() { return this.video.ended; }
+    
+    /** Set volume (0-1)
+     *  @param {number} volume - Volume level (0-1) */
+    setVolume(volume)
+    {
+        this.volume = volume;
+        this.video.volume = clamp(volume * soundVolume);
+    }
+    
+    /** Set playback speed
+     *  @param {number} rate - Playback rate multiplier */
+    setPlaybackRate(rate) { this.video.playbackRate = rate; }
+    
+    /** Get current time in seconds
+     *  @return {number} Current playback time */
+    getCurrentTime() { return this.video.currentTime || 0; }
+    
+    /** Get duration in seconds
+     *  @return {number} Total video duration */
+    getDuration() { return this.video.duration || 0; }
+    
+    /** Get the native video dimensions 
+     *  @return {Vector2} Video dimensions (may be 0,0 if metadata not loaded) */
+    getVideoSize()
+    { return vec2(this.video.videoWidth, this.video.videoHeight); }
+    
+    /** Seek to time in seconds
+     *  @param {number} time - Time in seconds to seek to */
+    setTime(time)
+    { this.video.currentTime = clamp(time, 0, this.getDuration()); }
+
+    update()
+    {
+        super.update();
+
+        // update volume based on global sound volume
+        this.video.volume = clamp(this.volume * soundVolume);
+    }
+    
+    /** Render video to UI canvas */
+    render()
+    {
+        super.render();
+
+        if (this.isLoadng())
+            return;
+        const context = uiSystem.uiContext;
+        const s = this.size;
+        context.save();
+        context.translate(this.pos.x, this.pos.y);
+        context.drawImage(this.video, -s.x/2, -s.y/2, s.x, s.y);
+        context.restore();
+    }
+    
+    /** Clean up video on destroy */
+    destroy()
+    {
+        if (this.destroyed)
+            return;
+
+        this.video.pause();
+        this.video.remove();
+        super.destroy();
+    }
 }
 /**
  * LittleJS Box2D Physics Plugin

package/examples/electron/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.15.0></script>
+<script src=../../dist/littlejs.js?1.15.2></script>
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.15.0></script>
+<script src=game.js?1.15.2></script>

package/examples/index.html

@@ -99,6 +99,7 @@ const exampleList =
     new ExampleInfo('Timers', 'timers.js', 'Timer objects and UI', false, 'delay, interval, slider'),
     new ExampleInfo('Sound Effects', 'sound.js', 'ZzFX sound effect generator', false, 'audio, volume, ui'),
     new ExampleInfo('Music', 'music.js', 'Basic load, play, pause, and stop', false, 'music, sound, audio, streaming, volume, ui'),
+    new ExampleInfo('Video', 'videoPlayer.js', 'Basic video play, pause, and stop', false, 'movie, sound, audio, streaming, volume, ui'),
     new ExampleInfo('Font Image', 'systemFont.js', 'Bitmap font system with built-in system font', false, 'text, characters'),
     new ExampleInfo('Medals', 'medals.js', 'Achievement system', false, 'unlock, progress, newgrounds'),
     new ExampleInfo('Tile Raycast', 'tileRaycast.js', 'Example of the tile layer raycast collision', false, 'level, map, grid'),

package/examples/shorts/base.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1.15.0></script>
+<script src=../../dist/littlejs.js?1.15.2></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source
+<script src=../../src/engine.js></script>
 <script src=../../src/engineDebug.js></script>
 <script src=../../src/engineUtilities.js></script>
 <script src=../../src/engineSettings.js></script>
@@ -14,7 +15,6 @@
 <script src=../../src/engineParticles.js></script>
 <script src=../../src/engineMedals.js></script>
 <script src=../../src/engineWebGL.js></script>
-<script src=../../src/engine.js></script>
 <script src=../../plugins/box2d.js></script>
 <script src=../../plugins/box2d.wasm.js></script>
 <script src=../../plugins/drawUtilities.js></script>

package/examples/shorts/videoPlayer.js

@@ -0,0 +1,33 @@
+function gameInit()
+{
+    new UISystemPlugin;
+    canvasClearColor = hsl(0,0,.1);
+    uiSystem.defaultCornerRadius = 20;
+
+    // video player
+    const center = mainCanvasSize.scale(.5);
+    const videoPos = center.add(vec2(0, -50));
+    const videoSize = vec2(480, 270);
+    const filename = 'video.webm';
+    const autoplay = true;
+    videoPlayer = new UIVideo(videoPos, videoSize, filename, autoplay);
+    videoPlayer.lineWidth = 5;
+    videoPlayer.lineColor = WHITE;
+
+    // play/pause button
+    const buttonSize = vec2(200, 100);
+    const playButtonPos = center.add(vec2(-130, 170));
+    const playButton = new UIButton(playButtonPos, buttonSize);
+    playButton.onClick = ()=> videoPlayer.isPaused() ? 
+        videoPlayer.play() : videoPlayer.pause();
+    playButton.onUpdate = ()=> playButton.text = 
+        videoPlayer.isPaused() ? 'Play' : 'Pause';
+
+    // status text
+    const statusTextPos = center.add(vec2(130, 170));
+    const statusText = new UIText(statusTextPos, vec2(250, 90));
+    statusText.textColor = WHITE;
+    statusText.onUpdate = ()=> statusText.text = 
+        videoPlayer.hasEnded() ? 'Ended' :
+        videoPlayer.isPlaying() ? 'Playing' : 'Paused';
+}

package/examples/starter/index.html

@@ -7,9 +7,10 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.15.0></script>
+<script src=../../dist/littlejs.js?1.15.2></script>
 
 <!-- LittleJS Engine Source
+<script src=../../src/engine.js></script>
 <script src=../../src/engineDebug.js></script>
 <script src=../../src/engineUtilities.js></script>
 <script src=../../src/engineSettings.js></script>
@@ -21,7 +22,6 @@
 <script src=../../src/engineParticles.js></script>
 <script src=../../src/engineMedals.js></script>
 <script src=../../src/engineWebGL.js></script>
-<script src=../../src/engine.js></script>
 <script src=../../plugins/box2d.js></script>
 <script src=../../plugins/box2d.wasm.js></script>
 <script src=../../plugins/drawUtilities.js></script>
@@ -31,4 +31,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1.15.0></script>
+<script src=game.js?1.15.2></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.14.28",
+  "version": "1.15.2",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",

package/plugins/pluginExport.js

@@ -25,6 +25,7 @@ export
     UIButton,
     UICheckbox,
     UIScrollbar,
+    UIVideo,
 
     // Box2D Physics
     box2d,

package/plugins/uiSystem.js

@@ -108,11 +108,16 @@ class UISystemPlugin
             // reset hover object at start of update
             uiSystem.lastHoverObject = uiSystem.hoverObject;
             uiSystem.hoverObject = undefined;
+
+            // update in reverse order so topmost objects get priority
             for (let i = uiSystem.uiObjects.length; i--;)
             {
                 const o = uiSystem.uiObjects[i];
                 o.parent || updateObject(o)
             }
+
+            // remove destroyed objects
+            uiSystem.uiObjects = uiSystem.uiObjects.filter(o=>!o.destroyed);
         }
         function uiRender()
         {
@@ -282,6 +287,15 @@ class UISystemPlugin
         p.x -= sInv*mainCanvasSize.x/2;
         return p;
     }
+
+    /** Destroy and remove all objects
+    *  @memberof Engine */
+    destroyObjects()
+    {
+        for (const o of this.uiObjects)
+            o.parent || o.destroy();
+        this.uiObjects = this.uiObjects.filter(o=>!o.destroyed);
+    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -383,6 +397,22 @@ class UIObject
         child.parent = undefined;
     }
 
+
+    /** Destroy this object, destroy its children, detach its parent, and mark it for removal */
+    destroy()
+    {
+        if (this.destroyed)
+            return;
+
+        // disconnect from parent and destroy children
+        this.destroyed = 1;
+        this.parent && this.parent.removeChild(this);
+        for (const child of this.children)
+        {
+            child.parent = 0;
+            child.destroy();
+        }
+    }
     /** Check if the mouse is overlapping a box in screen space
      *  @return {boolean} - True if overlapping
      */
@@ -762,4 +792,148 @@ class UIScrollbar extends UIObject
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font, this.fontStyle, true, this.textShadow);
     }
+}
+
+///////////////////////////////////////////////////////////////////////////////
+/** 
+ * VideoPlayerUIObject - A UI object that plays video
+ * @extends UIObject
+ * @example
+ * // Create a video player UI object
+ * const video = new VideoPlayerUIObject(vec2(400, 300), vec2(320, 240), 'cutscene.mp4', true);
+ * video.play();
+ * @memberof UISystem
+ */
+class UIVideo extends UIObject
+{
+    /** Create a video player UI object
+     *  @param {Vector2} [pos]
+     *  @param {Vector2} [size]
+     *  @param {string} src - Video file path or URL
+     *  @param {boolean} [autoplay=false] - Start playing immediately?
+     *  @param {boolean} [loop=false] - Loop the video?
+     *  @param {number} [volume=1] - Volume percent scaled by global volume (0-1)
+     */
+    constructor(pos, size, src, autoplay=false, loop=false, volume=1)
+    {
+        super(pos, size || vec2());
+        
+        ASSERT(isString(src), 'video src must be a string');
+        ASSERT(isNumber(volume), 'video volume must be a number');
+
+        this.color = BLACK; // default to black background
+        this.cornerRadius = 0; // default to no corner radius
+
+        /** @property {float} - The video volume */
+        this.volume = volume;
+
+        // create video element
+        /** @property {HTMLVideoElement} - The video player */
+        this.video = document.createElement('video');
+        this.video.loop = loop;
+        this.video.volume = clamp(volume * soundVolume);
+        this.video.muted = !soundEnable;
+        this.video.style.display = 'none';
+        this.video.src = src;
+        document.body.appendChild(this.video);
+        autoplay && this.play();
+    }
+    
+    /** Play or resume the video
+     *  @return {Promise} Promise that resolves when playback starts */
+    play()
+    {
+        // try to play the video, catch any errors (autoplay may be blocked)
+        const promise = this.video.play();
+        promise?.catch(()=>{});
+        return promise;
+    }
+    
+    /** Pause the video */
+    pause() { this.video.pause(); }
+    
+    /** Stop and reset the video */
+    stop() { this.video.pause(); this.video.currentTime = 0; }
+    
+    /** Check if video is currently loading
+     *  @return {boolean} */
+    isLoadng()
+    { return this.video.readyState < this.video.HAVE_CURRENT_DATA; }
+    
+    /** Check if video is currently paused
+     *  @return {boolean} */
+    isPaused() { return this.video.paused; }
+    
+    /** Check if video is currently playing
+     *  @return {boolean} */
+    isPlaying()
+    { return !this.isPaused() && !this.hasEnded() && !this.isLoadng(); }
+    
+    /** Check if video has ended playing
+     *  @return {boolean} */
+    hasEnded() { return this.video.ended; }
+    
+    /** Set volume (0-1)
+     *  @param {number} volume - Volume level (0-1) */
+    setVolume(volume)
+    {
+        this.volume = volume;
+        this.video.volume = clamp(volume * soundVolume);
+    }
+    
+    /** Set playback speed
+     *  @param {number} rate - Playback rate multiplier */
+    setPlaybackRate(rate) { this.video.playbackRate = rate; }
+    
+    /** Get current time in seconds
+     *  @return {number} Current playback time */
+    getCurrentTime() { return this.video.currentTime || 0; }
+    
+    /** Get duration in seconds
+     *  @return {number} Total video duration */
+    getDuration() { return this.video.duration || 0; }
+    
+    /** Get the native video dimensions 
+     *  @return {Vector2} Video dimensions (may be 0,0 if metadata not loaded) */
+    getVideoSize()
+    { return vec2(this.video.videoWidth, this.video.videoHeight); }
+    
+    /** Seek to time in seconds
+     *  @param {number} time - Time in seconds to seek to */
+    setTime(time)
+    { this.video.currentTime = clamp(time, 0, this.getDuration()); }
+
+    update()
+    {
+        super.update();
+
+        // update volume based on global sound volume
+        this.video.volume = clamp(this.volume * soundVolume);
+    }
+    
+    /** Render video to UI canvas */
+    render()
+    {
+        super.render();
+
+        if (this.isLoadng())
+            return;
+        const context = uiSystem.uiContext;
+        const s = this.size;
+        context.save();
+        context.translate(this.pos.x, this.pos.y);
+        context.drawImage(this.video, -s.x/2, -s.y/2, s.x, s.y);
+        context.restore();
+    }
+    
+    /** Clean up video on destroy */
+    destroy()
+    {
+        if (this.destroyed)
+            return;
+
+        this.video.pause();
+        this.video.remove();
+        super.destroy();
+    }
 }