littlejsengine 1.14.23 → 1.15.2

package/examples/shorts/musicPlayer.js

@@ -1,6 +1,5 @@
-let musicPlayer, playButton, stopButton, progressBar;
-let musicSound, music;
-let musicVolume = 1;
+
+let musicVolume = 1, musicSound, musicInstance;
 
 function gameInit()
 {
@@ -13,7 +12,8 @@ function gameInit()
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+    const center = mainCanvasSize.scale(.5);
+    musicPlayer = new UIObject(center, vec2(500, 300));
     const title = new UIText(vec2(0, -100), vec2(500, 40),
         'LittleJS Music Player');
     musicPlayer.addChild(title);
@@ -21,7 +21,7 @@ function gameInit()
     // drop zone text
     const dropZoneText = new UIText(vec2(0, -60), vec2(450, 20),
         'Drag & Drop Audio Files Here!');
-    dropZoneText.textColor = hsl(.9, .3, .8, .7);
+    dropZoneText.textColor = GRAY;
     musicPlayer.addChild(dropZoneText);
 
     // volume slider
@@ -31,8 +31,7 @@ function gameInit()
     volumeSlider.onChange = () => 
     {
         musicVolume = volumeSlider.value;
-        if (music) 
-            music.setVolume(musicVolume);
+        musicInstance?.setVolume(musicVolume);
     };
 
     // play button
@@ -44,17 +43,17 @@ function gameInit()
             return;
         
         // handle play/pause toggle
-        if (!music)
-            music = musicSound.playMusic(musicVolume);
-        else if (music.isPaused())
-            music.resume();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume);
+        else if (musicInstance.isPaused())
+            musicInstance.resume();
         else
-            music.pause();
+            musicInstance.pause();
     };
 
     // stop button
     stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>  music && music.stop();
+    stopButton.onClick = ()=>  musicInstance?.stop();
     musicPlayer.addChild(stopButton);
 
     // progress bar and scrollbar for seeking
@@ -63,14 +62,14 @@ function gameInit()
     progressBar.onChange = ()=> 
     {
         // control music seek position
-        const wasPlaying = music && music.isPlaying();
-        if (!music)
-            music = musicSound.playMusic(musicVolume, true, true);
+        const wasPlaying = musicInstance?.isPlaying();
+        if (!musicInstance)
+            musicInstance = musicSound.playMusic(musicVolume, 1, 1);
         progressBar.value = min(progressBar.value, .999); // prevent wrap
         const seekTime = progressBar.value * musicSound.getDuration();
-        music.start(seekTime);
+        musicInstance.start(seekTime);
         if (!wasPlaying)
-            music.pause();
+            musicInstance.pause();
     };
     musicPlayer.addChild(progressBar);
 
@@ -93,8 +92,8 @@ function gameInit()
             dropZoneText.text = file.name;
             
             // reset UI
-            music && music.stop();
-            music = undefined;
+            musicInstance?.stop();
+            musicInstance = undefined;
             progressBar.value = 0;
         }
         uiSystem.setupDragAndDrop(onDrop, onDragEnter, onDragLeave);
@@ -124,12 +123,13 @@ function gameUpdate()
     else
     {
         // update ui text
-        const isPlaying = music && music.isPlaying();
+        const isPlaying = musicInstance?.isPlaying();
         playButton.text = isPlaying ? 'Pause' : 'Play';
-        const current = music ? music.getCurrentTime() : 0;
+        const current = musicInstance?.getCurrentTime() || 0;
         const duration = musicSound.getDuration();
-        progressBar.text = formatTime(current) +' / '+ formatTime(duration);
-        if (!progressBar.mouseIsHeld)
+        progressBar.text = formatTime(current) +
+            ' / ' + formatTime(duration);
+        if (!progressBar.isActiveObject())
             progressBar.value = current / duration;
     }
 }

package/examples/shorts/platformer.js

@@ -8,8 +8,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // apply movement controls
         const moveInput = keyDirection();
         this.velocity.x += moveInput.x * (this.groundObject ? .1: .01);

package/examples/shorts/slidingPuzzle.js

@@ -20,7 +20,7 @@ class PuzzlePiece extends EngineObject
         const deltaX = emptyGridPos.x - this.gridPos.x;
         const deltaY = emptyGridPos.y - this.gridPos.y;
         if (mouseWasPressed(0))
-        if (isOverlapping(this.pos, this.size, mousePos))
+        if (this.isOverlapping(mousePos))
         if (abs(deltaX) + abs(deltaY) === 1)
         {
             // swap with empty space when clicked on

package/examples/shorts/spaceGame.js

@@ -10,8 +10,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .005);

package/examples/shorts/spriteAtlas.js

@@ -1,5 +1,3 @@
-let spriteAtlas;
-
 function gameInit()
 {
     // create a table of all sprites

package/examples/shorts/tiltedView.js

@@ -3,7 +3,6 @@ class GameObject extends EngineObject
     update()
     {
         this.renderOrder = -this.pos.y; // sort by y position
-        super.update();
     }
 
     render()
@@ -20,8 +19,6 @@ class Player extends GameObject
 {
     update()
     {
-        super.update();
-
         // apply movement controls
         const moveInput = keyDirection().clampLength(1).scale(.2);
         this.velocity = this.velocity.add(moveInput);

package/examples/shorts/timers.js

@@ -1,5 +1,4 @@
-let timerButton, timerSlider;
-let timerSound = new Sound([2,0,999,,,,,1.5,,.3,-99,.1,1.63,,,.11]);
+const timerSound = new Sound([2,0,999,,,,,1.5,,.3,-99,.1,1.63,,,.11]);
 
 function gameInit()
 {

package/examples/shorts/topDown.js

@@ -9,8 +9,6 @@ class Player extends EngineObject
 
     update()
     {
-        super.update();
-
         // apply movement controls
         const moveInput = keyDirection().clampLength(1).scale(.2);
         this.velocity = this.velocity.add(moveInput);

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.14.24></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.14.24></script>
+<script src=game.js?1.15.2></script>

package/package.json

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