littlejsengine 1.18.4 → 1.18.8

package/examples/platformer/gameCharacter.js

@@ -1,309 +0,0 @@
-/*
-    LittleJS Platformer Example - Character
-    - Platform style character
-    - Handles animation and sound effects
-    - Uses special platforming physics system
-    - Characters can jump, shoot, roll, and throw grenades
-    - Characters can climb ladders and break blocks
-    - Characters also have a damage and can die
-    - Has a weapon which can be fired
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-import * as GameObjects from './gameObjects.js';
-import * as GameEffects from './gameEffects.js';
-import * as GameLevel from './gameLevel.js';
-import * as Game from './game.js';
-const {vec2, hsl, Timer} = LJS;
-
-export class Character extends GameObjects.GameObject 
-{
-    constructor(pos)
-    {
-        super(pos, vec2(.6,.95));
-
-        this.lastPos = pos;
-        this.groundTimer        = new Timer;
-        this.jumpTimer          = new Timer;
-        this.pressedJumpTimer   = new Timer;
-        this.dodgeTimer         = new Timer;
-        this.dodgeRechargeTimer = new Timer;
-        this.deadTimer          = new Timer;
-        this.grenadeThrowTimer   = new Timer;
-        this.drawSize = vec2(1);
-        this.moveInput = vec2();
-        this.color = hsl(LJS.rand(),1,.7);
-        this.renderOrder = 10;
-        this.walkCyclePercent = 0;
-        this.health = 1;
-        this.climbingLadder = false;
-        this.setCollision(true,false);
-        
-        // attach weapon
-        this.weapon = new GameObjects.Weapon(pos);
-        this.weapon.renderOrder = this.renderOrder + 1;
-        this.addChild(this.weapon, vec2(this.size.x,0));
-    }
-    
-    update() 
-    {
-        this.gravityScale = 1; // reset to default gravity
-
-        if (this.isDead())
-            return super.update();
-
-        // get move input
-        const moveInput = this.moveInput.copy();
-        
-        // jump
-        if (!this.holdingJump)
-            this.pressedJumpTimer.unset();
-        else if (!this.wasHoldingJump || this.climbingWall)
-            this.pressedJumpTimer.set(.3);
-        this.wasHoldingJump = this.holdingJump;
-
-        // wall climb
-        this.climbingWall = 0;
-        if (moveInput.x && !this.velocity.x && this.velocity.y < 0)
-        {
-            this.velocity.y *=.8;
-            this.climbingWall = 1;
-        }
-
-        if (this.dodgeTimer.active())
-        {
-            // update roll
-            this.angle = this.getMirrorSign()*2*LJS.PI*this.dodgeTimer.getPercent();
-            if (this.groundObject)
-                this.velocity.x += this.getMirrorSign()*.1;
-        }
-        else
-        {
-            // not rolling
-            this.angle = 0;
-            if (this.pressedDodge && !this.dodgeRechargeTimer.active())
-            {
-                // start dodge
-                this.dodgeTimer.set(.4);
-                this.dodgeRechargeTimer.set(2);
-                this.jumpTimer.unset();
-                GameEffects.sound_dodge.play(this.pos);
-
-                if (!this.groundObject && this.getAliveTime() > .2)
-                    this.velocity.y += .2;
-            }
-            if (this.pressingThrow && !this.wasPressingThrow && !this.grenadeThrowTimer.active())
-            {
-                // throw grenade
-                const grenade = new GameObjects.Grenade(this.pos);
-                const speed = vec2(this.getMirrorSign(),LJS.rand(.8,.7)).normalize(.2+LJS.rand(.02));
-                grenade.velocity = this.velocity.add(speed);
-                grenade.angleVelocity = this.getMirrorSign() * LJS.rand(.8,.5);
-                GameEffects.sound_jump.play(this.pos);
-                this.grenadeThrowTimer.set(1);
-            }
-            this.wasPressingThrow = this.pressingThrow;
-        }
-
-        // allow grabbing ladder at head or feet
-        let touchingLadder = 0;
-        for (let y=2;y--;)
-        {
-            const testPos = this.pos.add(vec2(0, y + .1*moveInput.y - this.size.y/2));
-            const collisionData = LJS.tileCollisionGetData(testPos);
-            touchingLadder ||= collisionData == GameLevel.tileType_ladder;
-        }
-        if (!touchingLadder)
-            this.climbingLadder = false;
-        else if (moveInput.y)
-            this.climbingLadder = true;
-
-        if (this.weapon) // update weapon trigger
-            this.weapon.triggerIsDown = this.holdingShoot && !this.dodgeTimer.active();
-
-        if (this.climbingLadder)
-        {
-            // update ladder
-            this.gravityScale = this.climbingWall = this.groundObject = 0;
-            this.jumpTimer.unset();
-            this.groundTimer.unset();
-            this.velocity = this.velocity.multiply(vec2(.85)).add(vec2(0,.02*moveInput.y));
-
-            // pull towards ladder
-            const delta = (this.pos.x|0)+.5 - this.pos.x;
-            this.velocity.x += .02*delta*LJS.abs(moveInput.x ? 0:moveInput.y);
-            moveInput.x *= .2;
-
-            // exit ladder if ground is below
-            this.climbingLadder = moveInput.y >= 0 || LJS.tileCollisionGetData(this.pos.subtract(vec2(0,1))) <= 0;
-        }
-        else
-        {
-            // update jumping and ground check
-            if (this.groundObject || this.climbingWall)
-            {
-                if (!this.groundTimer.isSet())
-                    GameEffects.sound_walk.play(this.pos); // land sound
-                this.groundTimer.set(.1);
-            }
-
-            if (this.groundTimer.active() && !this.dodgeTimer.active())
-            {
-                // is on ground
-                if (this.pressedJumpTimer.active() && !this.jumpTimer.active())
-                {
-                    // start jump
-                    if (this.climbingWall)
-                        this.velocity.y = .25;
-                    else
-                    {
-                        this.velocity.y = .15;
-                        this.jumpTimer.set(.2);
-                    }
-                    GameEffects.sound_jump.play(this.pos);
-                }
-            }
-
-            if (this.jumpTimer.active() && !this.climbingWall)
-            {
-                // update variable height jump
-                this.groundTimer.unset();
-                if (this.holdingJump && this.velocity.y > 0 && this.jumpTimer.active())
-                    this.velocity.y += .017;
-            }
-
-            if (!this.groundObject)
-            {
-                // air control
-                if (LJS.sign(moveInput.x) == LJS.sign(this.velocity.x))
-                    moveInput.x *= .1; // moving with velocity
-                else
-                    moveInput.x *= .2; // moving against velocity (stopping)
-                
-                // slight extra gravity when moving down
-                if (this.velocity.y < 0)
-                    this.velocity.y += LJS.gravity.y*.2;
-            }
-        }
-        
-        // apply movement acceleration and clamp
-        const maxCharacterSpeed = .2;
-        this.velocity.x = LJS.clamp(this.velocity.x + moveInput.x * .04, -maxCharacterSpeed, maxCharacterSpeed);
-
-        // track last pos for ladder collision code
-        this.lastPos = this.pos.copy();
-
-        // call parent
-        super.update();
-
-        // update walk cycle
-        const speed = this.getSpeed();
-        if (this.climbingLadder || this.groundTimer.active() && !this.dodgeTimer.active())
-        {
-            this.walkCyclePercent += speed * .5;
-            this.walkCyclePercent = speed > .01 ? LJS.mod(this.walkCyclePercent) : 0;
-        }
-        else
-            this.walkCyclePercent = 0;
-
-        // update walk sound
-        this.walkSoundTime += speed;
-        if (speed > .001 && ((this.climbingLadder || this.groundTimer.active()) && !this.dodgeTimer.active()))
-        {
-            if (this.walkSoundTime > 1)
-            {
-                this.walkSoundTime = this.walkSoundTime%1;
-                GameEffects.sound_walk.play(this.pos);
-            }
-        }
-        else
-            this.walkSoundTime = 0;
-
-        // update mirror
-        if (moveInput.x && !this.dodgeTimer.active())
-            this.mirror = moveInput.x < 0;
-    }
-       
-    render()
-    {
-        // update animation
-        const animationFrame = this.isDead() ? 0 :
-            this.climbingLadder || this.groundTimer.active() ?
-            2*this.walkCyclePercent|0 : 1;
-        this.tileInfo = Game.spriteAtlas.player.frame(animationFrame);
-
-        let bodyPos = this.pos;
-        if (!this.isDead())
-        {
-            // bounce pos with walk cycle
-            bodyPos = bodyPos.add(vec2(0,.05*LJS.sin(this.walkCyclePercent*LJS.PI)));
-
-            // make bottom flush
-            bodyPos = bodyPos.add(vec2(0,(this.drawSize.y-this.size.y)/2));
-        }
-        LJS.drawTile(bodyPos, this.drawSize, this.tileInfo, this.color, this.angle, this.mirror);
-    }
-
-    damage(damage, damagingObject)
-    {
-        if (this.isDead() || this.getAliveTime() < 1 || this.dodgeTimer.active())
-            return 0;
-
-        GameEffects.makeBlood(damagingObject ? damagingObject.pos : this.pos);
-        return super.damage(damage, damagingObject);
-    }
-
-    kill(damagingObject)                  
-    {
-        if (this.isDead())
-            return;
-
-        GameEffects.makeBlood(this.pos, 100);
-        GameEffects.sound_die.play(this.pos);
-
-        this.health = 0;
-        this.deadTimer.set();
-        this.size = this.size.scale(.5);
-        const fallDirection = damagingObject ? LJS.sign(damagingObject.velocity.x) : LJS.randSign();
-        this.angleVelocity = fallDirection*LJS.rand(.22,.14);
-        this.angleDamping = .9;
-        this.renderOrder = -1;  // move to back layer
-        if (this.weapon)
-            this.weapon.destroy();
-    }
-    
-    collideWithTile(data, pos)
-    {
-        if (!data)
-            return false;
-
-        if (data == GameLevel.tileType_ladder)
-        {
-            // handle ladder collisions
-            if (pos.y + 1 > this.lastPos.y - this.size.y/2)
-                return false;
-
-            if (LJS.tileCollisionGetData(pos.add(vec2(0,1)))      // above
-                && !LJS.tileCollisionGetData(pos.add(vec2(1,0)))  // left
-                && !LJS.tileCollisionGetData(pos.add(vec2(1,0)))) // right
-                return false; // don't collide if something above it and nothing to left or right
-
-            // allow standing on top of ladders
-            return !this.climbingLadder;
-        }
-
-        const d = pos.y - this.pos.y;
-        if (!this.climbingLadder && this.velocity.y > .1 && d > 0 && d < this.size.y/2)
-        if (GameEffects.destroyTile(pos))
-        {
-            // break blocks above
-            this.velocity.y = 0;
-            return false;
-        }
-
-        return true;
-    }
-}

package/examples/platformer/gameEffects.js

@@ -1,278 +0,0 @@
-/*
-    LittleJS Platformer Example - Effects
-    - Plays different particle effects which can be persistent
-    - Destroys terrain and makes explosions
-    - Outlines tiles based on neighbor types
-    - Generates parallax background layers
-    - Draws moving starfield with plants and suns
-    - Tracks zzfx sound effects
-*/
-
-'use strict';
-
-// import LittleJS module
-import * as LJS from '../../dist/littlejs.esm.js';
-import * as GameLevel from './gameLevel.js';
-const {vec2, hsl, rgb} = LJS;
-
-///////////////////////////////////////////////////////////////////////////////
-// sound effects
-
-export const sound_shoot =        new LJS.Sound([,,90,,.01,.03,4,,,,,,,9,50,.2,,.2,.01]);
-export const sound_destroyObject =new LJS.Sound([.5,,1e3,.02,,.2,1,3,.1,,,,,1,-30,.5,,.5]);
-export const sound_die =          new LJS.Sound([.5,.4,126,.05,,.2,1,2.09,,-4,,,1,1,1,.4,.03]);
-export const sound_jump =         new LJS.Sound([.4,.2,250,.04,,.04,,,1,,,,,3]);
-export const sound_dodge =        new LJS.Sound([.4,.2,150,.05,,.05,,,-1,,,,,4,,,,,.02]);
-export const sound_walk =         new LJS.Sound([.3,.1,50,.005,,.01,4,,,,,,,,10,,,.5]);
-export const sound_explosion =    new LJS.Sound([2,.2,72,.01,.01,.2,4,,,,,,,1,,.5,.1,.5,.02]);
-export const sound_grenade =      new LJS.Sound([.5,.01,300,,,.02,3,.22,,,-9,.2,,,,,,.5]);
-export const sound_score =        new LJS.Sound([,,783,,.03,.02,1,2,,,940,.03,,,,,.2,.6,,.06]);
-
-///////////////////////////////////////////////////////////////////////////////
-// special effects
-
-export const persistentParticleDestroyCallback = (particle)=>
-{
-    // draw particle to tile layer on death
-    LJS.ASSERT(!particle.tileInfo, 'quick draw to tile layer uses canvas 2d so must be untextured');
-    if (particle.groundObject)
-    {
-        GameLevel.foregroundTileLayer.drawTile(particle.pos, particle.size, particle.tileInfo, particle.color, particle.angle, particle.mirror);
-    }
-}
-
-export function makeBlood(pos, amount) { makeDebris(pos, hsl(0,1,.5), amount, .1, 0); }
-export function makeDebris(pos, color = hsl(), amount = 50, size=.2, restitution = .3)
-{
-    const color2 = color.lerp(hsl(), .5);
-    const emitter = new LJS.ParticleEmitter(
-        pos, 0, .5, .1, amount/.1, 3.14, // pos, angle, size, time, rate, cone
-        0,                     // tileInfo
-        color, color2,         // colorStartA, colorStartB
-        color, color2,         // colorEndA, colorEndB
-        3, size,size, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
-        1, .95, .4, 3.14, 0,   // damp, angleDamp, gravity, particleCone, fade
-        .5, 1                  // randomness, collide
-    );
-    emitter.restitution = restitution;
-    emitter.particleDestroyCallback = persistentParticleDestroyCallback;
-    return emitter;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-export function explosion(pos, radius=3)
-{
-    LJS.ASSERT(radius > 0);
-
-    sound_explosion.play(pos);
-
-    {
-        // destroy level
-        const layer = GameLevel.tileLayers[1];
-        layer.redrawStart();
-        for (let x = -radius; x < radius; ++x)
-        {
-            const h = (radius*radius - x*x)**.5;
-            for (let y = -h; y <= h; ++y)
-                destroyTile(pos.add(vec2(x,y)), 0, 0);
-        }
-        // cleanup neighbors
-        const cleanupRadius = radius + 2;
-        for (let x = -cleanupRadius; x < cleanupRadius; ++x)
-        {
-            const h = (cleanupRadius**2 - x**2)**.5;
-            for (let y = -h; y < h; ++y)
-                GameLevel.decorateTile(pos.add(vec2(x,y)).floor(), layer);
-        }
-        layer.redrawEnd();
-    }
-
-    // kill/push objects
-    LJS.engineObjectsCallback(pos, radius*3, (o)=> 
-    {
-        const damage = radius*2;
-        const d = o.pos.distance(pos);
-        if (o.isGameObject)
-        {
-            // do damage
-            d < radius && o.damage(damage);
-        }
-
-        // push
-        const p = LJS.percent(d, 2*radius, radius);
-        const force = o.pos.subtract(pos).normalize(p*radius*.2);
-        o.applyForce(force);
-    });
-
-    // smoke
-    new LJS.ParticleEmitter(
-        pos, 0,                       // pos, angle
-        radius/2, .2, 50*radius, 3.14,// emitSize, emitTime, rate, cone
-        0,                            // tileInfo
-        hsl(0,0,0), hsl(0,0,0),       // colorStartA, colorStartB
-        hsl(0,0,0,0), hsl(0,0,0,0),   // colorEndA, colorEndB
-        1, .5, 2, .2, .05,    // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -.3, 3.14, .1, // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 0, 0, 1e8      // randomness, collide, additive, colorLinear, renderOrder
-    );
-
-    // fire
-    new LJS.ParticleEmitter(
-        pos, 0,                         // pos, angle
-        radius/2, .1, 100*radius, 3.14, // emitSize, emitTime, rate, cone
-        0,                              // tileInfo
-        rgb(1,.5,.1),   rgb(1,.1,.1),   // colorStartA, colorStartB
-        rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
-        .7, .8, .2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-        .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
-        .5, 0, 1, 0, 1e9       // randomness, collide, additive, colorLinear, renderOrder
-    );
-}
-
-///////////////////////////////////////////////////////////////////////////////
-
-export function destroyTile(pos, makeSound = 1, cleanup = 1)
-{
-    // pos must be an int
-    pos = pos.floor();
-
-    // destroy tile
-    const layer = GameLevel.foregroundTileLayer;
-    const tileType = layer.getCollisionData(pos);
-    if (!tileType)
-        return true;
-
-    const centerPos = pos.add(vec2(.5));
-    const layerData = layer.getData(pos);
-    if (!layerData || tileType == GameLevel.tileType_solid)
-        return false;
-
-    // create effects
-    makeDebris(centerPos, layerData.color.mutate());
-    makeSound && sound_destroyObject.play(centerPos);
-
-    // set and clear tile
-    layer.clearData(pos, true);
-    layer.setCollisionData(pos, GameLevel.tileType_empty);
-
-    // cleanup neighbors and rebuild WebGL
-    if (cleanup)
-    {
-        const layer = GameLevel.tileLayers[1];
-        layer.redrawStart();
-        for (let i=-1;i<=1;++i)
-        for (let j=-1;j<=1;++j)
-            GameLevel.decorateTile(pos.add(vec2(i,j)), layer);
-        layer.redrawEnd();
-    }
-
-    return true;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// sky with background gradient, stars, and planets
-
-export class Sky extends LJS.EngineObject
-{
-    constructor() 
-    {
-        super();
-
-        this.renderOrder = -1e4;
-        this.seed = LJS.randInt(1e9);
-        this.skyColor = LJS.randColor(hsl(0,0,.5), hsl(0,0,.9));
-        this.horizonColor = this.skyColor.subtract(hsl(0,0,.05,0)).mutate(.3);
-    }
-
-    render()
-    {
-        // fill background with a gradient
-        const canvas = LJS.mainCanvas;
-        LJS.drawRectGradient(LJS.cameraPos, LJS.getCameraSize(), this.skyColor, this.horizonColor);
-        
-        // draw stars
-        LJS.setBlendMode(true);
-        const random = new LJS.RandomGenerator(this.seed);
-        for (let i = 1e3; i--;)
-        {
-            const size = random.float(.5,2)**2;
-            const speed = random.float() < .9 ? random.float(5) : random.float(9,99);
-            const color = hsl(random.float(-.3,.2), random.float(), random.float());
-            const extraSpace = 50;
-            const w = canvas.width+2*extraSpace, h = canvas.height+2*extraSpace;
-            const screenPos = vec2(
-                (random.float(w)+LJS.time*speed)%w-extraSpace,
-                (random.float(h)+LJS.time*speed*random.float())%h-extraSpace);
-            LJS.drawRect(screenPos, vec2(size), color, 0, undefined, true)
-        }
-        LJS.setBlendMode(false);
-    }
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// parallax background mountain ranges
-
-export class ParallaxLayer extends LJS.CanvasLayer
-{
-    constructor(pos, topColor, bottomColor, depth) 
-    {
-        const renderOrder = depth - 3e3;
-        const canvasSize = vec2(512, 256);
-        super(pos, vec2(), 0, renderOrder, canvasSize);
-        this.centerPos = pos;
-        this.depth = depth;
-
-        // create a gradient for the mountains
-        const w = canvasSize.x, h = canvasSize.y;
-        for (let i = h; i--;)
-        {
-            // draw a 1 pixel gradient line on the left side of the canvas
-            const p = i/h;
-            this.context.fillStyle = topColor.lerp(bottomColor, p);
-            this.context.fillRect(0, i, 1, 1);
-        }
-
-        // draw random mountains
-        const pointiness = .2;  // how pointy the mountains are
-        const levelness = .005; // how much the mountains level out
-        const slopeRange = 1;   // max slope of the mountains
-        const startGroundLevel = h/2;
-        let y = startGroundLevel, groundSlope = LJS.rand(-slopeRange, slopeRange);
-        for (let x=w; x--;)
-        {
-            // pull slope towards start ground level
-            y += groundSlope -= (y-startGroundLevel)*levelness;
-
-            // randomly change slope
-            if (LJS.rand() < pointiness)
-                groundSlope = LJS.rand(-slopeRange, slopeRange);
-
-            // draw 1 pixel wide vertical slice of mountain
-            this.context.drawImage(this.canvas, 0, 0, 1, h, x, y, 1, h - y);
-        }
-
-        // remove gradient sliver from left side
-        this.context.clearRect(0,0,1,h);
-    
-        // make WebGL texture
-        this.updateWebGL();
-    }
-
-    render()
-    {
-        const canvasSize = vec2(this.canvas.width, this.canvas.height);
-        const depth = this.depth
-        const distance = 4 + depth;
-        const parallax = vec2(150, 30).scale(depth**2+1);
-        const levelCenter = this.centerPos;
-        const cameraDeltaFromCenter = LJS.cameraPos.subtract(levelCenter)
-            .divide(levelCenter.scale(-1).divide(parallax));
-        const scale = distance/LJS.cameraScale;
-        const positionOffset = vec2(0, 2-depth);
-        const cameraOffset = cameraDeltaFromCenter.scale(1/LJS.cameraScale);
-        this.pos = LJS.cameraPos.add(positionOffset).add(cameraOffset);
-        this.size = canvasSize.scale(scale);
-        super.render();
-    }
-}