littlejsengine 1.14.16 → 1.14.23

package/examples/shorts/fps.js

@@ -0,0 +1,90 @@
+let playerPos = vec2(), playerAngle = 0;
+setTileFixBleedScale(0);
+
+// a simple function to create the level
+const levelTest = (p)=> (floor(p.x)**3&floor(p.y)**2)%30>5;
+
+function gameUpdate()
+{
+    // update camera angle with mouse pointer lock
+    if (mouseWasPressed(0))
+        pointerLockRequest();
+    if (keyWasPressed('Escape'))
+        pointerLockExit()
+    if (pointerLockIsActive() || isTouchDevice)
+        playerAngle += mouseDelta.x * .003;
+
+    // update player movement, prevent walking through walls
+    const velocity = keyDirection().rotate(playerAngle).scale(.05);
+    const normal = vec2();
+    let newPos = playerPos.add(velocity);
+    if (lineTest(playerPos, newPos, levelTest, normal))
+    {
+        // adjust velocity to slide along wall
+        const d = velocity.dot(normal);
+        newPos = newPos.subtract(vec2(d*normal.x, d*normal.y));
+        if (!levelTest(newPos))
+            playerPos = newPos;
+    }
+    else
+        playerPos = newPos;
+}
+
+function gameRender()
+{
+    {
+        // draw horizontal slizes to create floor and ceiling
+        const h = 9;
+        let pos = vec2(), size = vec2(39, .15), color = rgb();
+        for (let y=-h; y<h; y+=.1)
+        {
+            const p = 1.01 - abs(y/h)
+            color.setHSLA(.1, y>0?0:.5, .7-p*.7);
+            pos.y = y;
+            drawRect(pos, size, color);
+        }
+    }
+    {
+        // draw vertical slices to create the walls
+        // create objects in advance for optimal performance
+        const w = 15;
+        const maxDistance = 50;
+        const pos = vec2(), endPos = vec2(), size = vec2(.15);
+        const tileInfo = new TileInfo(vec2(), vec2(0,16));
+        const normal = vec2(), light = vec2().setAngle(2);
+        const color = rgb();
+        for (pos.x=-w; pos.x<w; pos.x+=.1)
+        {
+            // cast ray for this slice
+            const angle = playerAngle + pos.x/w/2;
+            endPos.setAngle(angle, maxDistance);
+            endPos.x += playerPos.x;
+            endPos.y += playerPos.y;
+            const p = lineTest(playerPos, endPos, levelTest, normal);
+            if (!p) continue;
+
+            // get texture coordinate
+            const t = mod(p.x+p.y, 1);
+            tileInfo.pos.x = 161 + 14*t;
+
+            // apply fog and lighting
+            const d = p.distance(playerPos)/maxDistance;
+            const l = max(0, normal.dot(light));
+            size.y = .5/d;
+            color.setHSLA(.6, 1-d, .7-d+l*.3);
+
+            // draw the section the wall
+            drawTile(pos, size, tileInfo, color);
+        }
+    }
+    
+    // draw instructions and pointer lock status
+    const instructions = pointerLockIsActive() ? 
+        'Mouse Control Active - ESC To Exit' : 
+        'Click To Enable Mouse Control';
+    const textPos = vec2(mainCanvasSize.x/2, 50);
+    const textSize = 30;
+    const textColor = pointerLockIsActive() ? GREEN : WHITE;
+    if (!isTouchDevice)
+        drawTextScreen(instructions, textPos, textSize, textColor);
+}

package/examples/shorts/helloWorld.js

@@ -7,5 +7,5 @@ function gameRender()
     drawTextOverlay('LittleJS Engine', vec2(0,3), 3);
         
     // draw a tile
-    drawTile(vec2(Math.sin(time)*3,-2), vec2(7), tile(3,128));
+    drawTile(vec2(sin(time)*3,-2), vec2(7), tile(3,128));
 }

package/examples/shorts/hillGlideGame.js

@@ -35,7 +35,7 @@ class Player extends EngineObject
 
 function getGroundHeight(x)
 {
-    return Math.sin(x/4)*2 + Math.sin(x/17);
+    return sin(x/4)*2 + sin(x/17);
 }
 
 function gameInit()

package/examples/shorts/landerGame.js

@@ -14,7 +14,7 @@ class Player extends EngineObject
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .002);
-        const accel = vec2(0, moveInput.y*.002).rotate(this.angle);
+        const accel = this.getRight(moveInput.y*.002);
         this.applyAcceleration(accel);
     }
 

package/examples/shorts/musicPlayer.js

@@ -9,6 +9,7 @@ function gameInit()
     uiSystem.defaultSoundPress = new Sound([.5,0,220]);
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 20;
+    uiSystem.defaultGradientColor = WHITE;
     canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI

package/examples/shorts/parallax.js

@@ -53,7 +53,7 @@ class ParallaxLayer extends CanvasLayer
         this.context.clearRect(0,0,1,h);
     
         // make WebGL texture
-        this.useWebGL(glEnable);
+        this.useWebGL();
     }
 
     render()

package/examples/shorts/postProcess.js

@@ -6,7 +6,7 @@ function gameInit()
 function gameRender()
 {
     drawRect(vec2(), vec2(99), GRAY);
-    drawTile(vec2(Math.sin(time)*3, 0), vec2(12), tile(3,128));
+    drawTile(vec2(sin(time)*3, 0), vec2(12), tile(3,128));
 }
 
 const tvShader = `

package/examples/shorts/sequencer.js

@@ -3,7 +3,7 @@ let currentStep = 0, stepTime = 0, tempo = 240;
 let isPlaying = false, eraseMode = false;
 
 // sound sequencer instruments
-const sound_piano = new Sound([.4,0,220,,.1]);
+const sound_piano = new Sound([.3,0,220,,.1]);
 const sound_drumKick = new Sound([,,99,,,.02,,,,,,,,2]);
 const sound_drumHat = new Sound([,,1e3,,,.01,4,,,,,,,,,,,,,,4e3]);
 
@@ -34,7 +34,7 @@ class UISequencerButton extends UIButton
         this.hue = track*.15;
         if (track >= pianoStart)
         {
-            const octave = Math.floor((track-pianoStart) / scale.length);
+            const octave = floor((track-pianoStart) / scale.length);
             const scaleNote = (track-pianoStart) % scale.length;
             this.semitone = scale[scaleNote] + 12*octave;
             this.sound = sound_piano;
@@ -57,7 +57,7 @@ class UISequencerButton extends UIButton
     {
         this.activeColor = eraseMode ? RED : WHITE;
         this.color = this.isActiveObject() ? BLACK : 
-            hsl(this.hue, this.isOn ? 1 : .5, this.isOn ? .5 : .1); 
+            hsl(this.hue, this.isOn ? 1 : .5, this.isOn ? .5 : .15); 
         if (isPlaying && this.step == currentStep)
             this.color = this.color.lerp(WHITE, .5);
         super.render();
@@ -93,7 +93,7 @@ function gameInit()
     tempoSlider.onChange = ()=>
     {
         tempo = lerp(minTempo, maxTempo, tempoSlider.value);
-        tempo = Math.floor(tempo/10) * 10; // round to nearest 10th
+        tempo = floor(tempo/10) * 10; // round to nearest 10th
         tempoSlider.text = `${tempo} BPM`;
     };
     tempoSlider.onChange();
@@ -108,7 +108,7 @@ function gameUpdate()
     const lastStepTime = stepTime;
     const lastStep = currentStep;
     stepTime += timeDelta*tempo/60;
-    currentStep = Math.floor(stepTime) % stepCount;
+    currentStep = floor(stepTime) % stepCount;
     if (currentStep == lastStep && lastStepTime)
         return;
 

package/examples/shorts/shader.js

@@ -0,0 +1,29 @@
+const shader = `
+void mainImage(out vec4 c, vec2 p)
+{
+    // normalize coordinates
+    vec2 uv = (p - iResolution.xy * .5) / iResolution.y;
+    
+    // get distance and angle from center
+    float distance = length(uv);
+    float angle = atan(uv.y, uv.x);
+    
+    // color based on angle and distance
+    c.rgb = vec3(
+        .5 + .5 * sin(angle + iTime),
+        .5 + .5 * sin(angle + iTime * 2.),
+        .5 + .5 * sin(distance * 5. - iTime)
+    );
+    
+    // apply glow in center
+    c += .1 / (distance + .1);
+
+    // apply sine wave brightness
+    c *= .5 + .5 * sin(distance * 20. - iTime * 3.);
+}
+`;
+
+function gameInit()
+{
+    new PostProcessPlugin(shader);
+}

package/examples/shorts/spaceGame.js

@@ -23,7 +23,7 @@ class Player extends EngineObject
             // shoot bullet
             const pos = this.pos.add(vec2(0,1).rotate(cameraAngle));
             const bullet = new EngineObject(pos, vec2(.2,.5), 0, this.angle);
-            bullet.velocity = vec2(0,.5).rotate(this.angle);
+            bullet.velocity = this.getUp(.5);
             bullet.velocity = bullet.velocity.add(this.velocity);
             this.shootTimer.set(.1);
         }

package/examples/shorts/spriteAtlas.js

@@ -18,12 +18,12 @@ function gameInit()
 function gameRender()
 {
     // draw a sprite from the atlas
-    let pos = vec2(Math.sin(time)*5,-3);// world position
-    let angle = 0;                      // world space angle
-    let size = vec2(9);                 // world space size
-    let mirror = 0;                     // should tile be mirrored?
-    let color = hsl(0,0,1);             // color to multiply by
-    let additive = hsl(0,0,0,0);        // color to add to
+    let pos = vec2(sin(time)*5,-3);// world position
+    let angle = 0;                 // world space angle
+    let size = vec2(9);            // world space size
+    let mirror = 0;                // should tile be mirrored?
+    let color = hsl(0,0,1);        // color to multiply by
+    let additive = hsl(0,0,0,0);   // color to add to
     drawTile(pos, size, spriteAtlas.iconBig, color, angle, mirror, additive);
 
     // draw more sprites from the atlas

package/examples/shorts/starfield.js

@@ -9,7 +9,7 @@ function gameRender()
         pos.x = offset%70 - 35;
         pos.y = i/110 - 9;
         size.x = size.y = i%.11 + .07;
-        color.set(1,1,1,Math.sin(i)**4);
+        color.set(1,1,1,sin(i)**4);
         drawRect(pos, size, color);
     }
 }

package/examples/shorts/tileLayer.js

@@ -43,6 +43,6 @@ function gameUpdate()
             .05, .8, true
         );
         particleEmitter.restitution = .5; // bounce when it collides
-        particleEmitter.trailScale = 2;  // stretch as it moves
+        particleEmitter.trailScale = 2;   // stretch as it moves
     }
 }

package/examples/shorts/tileRaycast.js

@@ -0,0 +1,39 @@
+function gameInit()
+{
+    // create tile layer
+    const pos = vec2();
+    const tileLayer = new TileCollisionLayer(pos, vec2(28,16), 0);
+    cameraPos = tileLayer.size.scale(.5); // setup camera
+    for (pos.x = tileLayer.size.x; pos.x--;)
+    for (pos.y = tileLayer.size.y; pos.y--;)
+    {
+        // create random solid tiles away from level center
+        if (rand() < .7 || cameraPos.distanceSquared(pos) < 9)
+            continue;
+        
+        // set tile data
+        const data = new TileLayerData(1);
+        tileLayer.setData(pos, data);
+        tileLayer.setCollisionData(pos);
+    }
+    tileLayer.redraw();
+}
+
+function gameRenderPost()
+{
+    // cast ray from camera center to mouse
+    drawLine(cameraPos, mousePos, .1, CYAN);
+    const normal = vec2();
+    const hit = tileCollisionRaycast(cameraPos, mousePos, 0, normal);
+    if (hit)
+    {
+        // draw hit tile
+        const tilePos = hit.floor().add(vec2(.5));
+        drawRect(tilePos, vec2(1), RED);
+
+        // draw hit point and normal
+        drawRect(hit, vec2(.2), GREEN);
+        drawLine(cameraPos, hit, .1, RED);
+        drawLine(hit, hit.add(normal), .1, YELLOW);
+    }
+}

package/examples/shorts/tiltedView.js

@@ -9,9 +9,10 @@ class GameObject extends EngineObject
     render()
     {
         // adjust draw postion to be at the bottom of the object
-        const offset = vec2(0,this.size.y/2).rotate(this.angle);
+        const drawSize = this.drawSize || this.size;
+        const offset = this.getUp(drawSize.y/2);
         const pos = this.pos.add(offset);
-        drawTile(pos, this.size, this.tileInfo, this.color, this.angle);
+        drawTile(pos, drawSize, this.tileInfo, this.color, this.angle);
     }
 }
 
@@ -24,6 +25,7 @@ class Player extends GameObject
         // apply movement controls
         const moveInput = keyDirection().clampLength(1).scale(.2);
         this.velocity = this.velocity.add(moveInput);
+        this.setCollision(); // make object collide
 
         // move camera with player
         cameraPos = this.pos.add(vec2(0,2));
@@ -34,7 +36,8 @@ function gameInit()
 {
     // setup level
     objectDefaultDamping = .7;
-    new Player(vec2(), vec2(3), tile(5), 0, RED);
+    const player = new Player(vec2(), vec2(3,1), tile(5), 0, RED);
+    player.drawSize = vec2(3);
 
     // create background objects
     for (let i=1; i<300; ++i)
@@ -49,8 +52,13 @@ function gameInit()
     for (let i=1; i<1e3; ++i)
     {
         const pos = randInCircle(7+i,7);
-        const size = vec2(rand(1,2),rand(4,9));
-        const color = hsl(.1,.5,rand(.2,.3));
-        new GameObject(pos, size, 0, 0, color);
+        const isRock = randBool();
+        const size = vec2(isRock ? rand(2,4) : rand(1,2));
+        const color = hsl(.1,isRock ? 0 : .5,rand(.2,.3));
+        const o = new GameObject(pos, size, 0, 0, color);
+        o.setCollision(); // make object collide
+        o.mass = 0; // make object have static physics
+        o.angle = rand(-.1,.1); // random tilt
+        o.drawSize = vec2(size.x, isRock ? rand(2,4) : rand(5,10));
     }
 }

package/examples/shorts/topDown.js

@@ -32,7 +32,7 @@ function gameInit()
     {
         const pos = randInCircle(15+i,7);
         const size = vec2(rand(4,9),rand(4,9));
-        const color = hsl(.1,.5,rand(.2,.3));
+        const color = hsl(.1,.5,rand(.2));
         const o = new EngineObject(pos, size, 0, 0, color);
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics

package/examples/starter/game.js

@@ -65,16 +65,17 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 500, PI,              // emitSize, emitTime, rate, cone
+        0, 0, 500, 3.14,            // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
-        .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
-        .05, .5, true, true         // fadeRate, randomness, collide, additive
+        1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+        .99, 1, 1, 3.14,    // damping, angleDamping, gravityScale, cone
+        .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch as it moves
+    particleEmitter.trailScale = 2;   // stretch as it moves
+    particleEmitter.velocityInheritance = .3; // inherit emitter velocity
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -104,10 +105,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (mousePosScreen.x)
-    {
         particleEmitter.pos = mousePos;
-        particleEmitter.velocity = mouseDelta.scale(.3*timeDelta);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?11416></script>
+<script src=../../dist/littlejs.js?1.14.24></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engineDebug.js></script>
@@ -31,4 +31,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?11416></script>
+<script src=game.js?1.14.24></script>

package/examples/style.css

@@ -73,6 +73,7 @@ iframe
     margin: 5px;
     text-align: center;
     font-size: 40px;
+    font-weight: bold;
 }
 #exampleInfo
 {

package/examples/typescript/game.js

@@ -52,16 +52,17 @@ function gameInit() {
     LJS.setGravity(vec2(0, -.01));
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
-    1, 0, 500, Math.PI, // emitSize, emitTime, rate, cone
+    0, 0, 500, 3.14, // emitSize, emitTime, rate, cone
     tile(0, 16), // tileIndex, tileSize
     hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
     hsl(0, 0, 0, 0), hsl(0, 0, 0, 0), // colorEndA, colorEndB
-    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
-    .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
+    1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+    .99, 1, 1, 3.14, // damping, angleDamping, gravityScale, cone
     .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2; // stretch as it moves
+    particleEmitter.trailScale = 2;  // stretch as it moves
+    particleEmitter.velocityInheritance = .3; // inherit emitter velocity
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate() {

package/examples/typescript/game.ts

@@ -69,16 +69,17 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, rate, cone
+        0, 0, 500, 3.14,            // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
-        .05, .5, true, true   // fadeRate, randomness, collide, additive
+        1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+        .99, 1, 1, 3.14,    // damping, angleDamping, gravityScale, cone
+        .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
     particleEmitter.trailScale = 2;  // stretch stretch as it moves
+    particleEmitter.velocityInheritance = .3; // inherit emitter velocity
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -101,10 +102,7 @@ function gameUpdate()
 
     // move particles to mouse location if on screen
     if (LJS.mousePosScreen.x)
-    {
         particleEmitter.pos = LJS.mousePos;
-        particleEmitter.velocity = LJS.mouseDelta.scale(.3*LJS.timeDelta);
-    }
 }
 
 ///////////////////////////////////////////////////////////////////////////////

package/examples/uiSystem/game.js

@@ -24,6 +24,7 @@ function createUI()
     LJS.uiSystem.defaultSoundPress = new LJS.Sound([.5,0,220]);
     LJS.uiSystem.defaultSoundClick = new LJS.Sound([.5,0,440]);
     LJS.uiSystem.defaultCornerRadius = 8;
+    LJS.uiSystem.defaultGradientColor = LJS.WHITE;
 
     // setup root to attach all ui elements to
     uiRoot = new LJS.UIObject;
@@ -63,7 +64,7 @@ function createUI()
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onClick = ()=> uiBackground.color = hsl(Math.random(),1,.7);
+    button1.onClick = ()=> uiBackground.color = hsl(LJS.rand(),1,.7);
 
     // example checkbox
     const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));
@@ -113,7 +114,7 @@ function gameRender()
     // test game rendering
     for (let i=0; i<1e3; ++i)
     {
-        const pos = vec2(30*Math.sin(i+LJS.time/9),20*Math.sin(i*i+LJS.time/9));
+        const pos = vec2(30*LJS.sin(i+LJS.time/9),20*LJS.sin(i*i+LJS.time/9));
         LJS.drawTile(pos, vec2(2), tile(3,128), hsl(i/9,1,.4), LJS.time+i, !(i%2), hsl(i/9,1,.1,0));
     }
 }

package/package.json

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