littlejsengine
Version:
LittleJS - Tiny and Fast HTML5 Game Engine
6,222 lines • 223 kB
JavaScript
// LittleJS Engine - MIT License - Copyright 2021 Frank Force
// https://github.com/KilledByAPixel/LittleJS
'use strict';
/**
* LittleJS Debug System
* - Press Esc to show debug overlay with mouse pick
* - Number keys toggle debug functions
* - +/- apply time scale
* - Debug primitive rendering
* - Save a 2d canvas as a png image
* @namespace Debug
*/
/** True if debug is enabled
* @type {boolean}
* @default
* @memberof Debug */
const debug = true;
/** True if asserts are enabled
* @type {boolean}
* @default
* @memberof Debug */
const enableAsserts = true;
/** Size to render debug points by default
* @type {number}
* @default
* @memberof Debug */
const debugPointSize = .5;
/** True if watermark with FPS should be shown, false in release builds
* @type {boolean}
* @default
* @memberof Debug */
let showWatermark = true;
/** Key code used to toggle debug mode, Esc by default
* @type {string}
* @default
* @memberof Debug */
let debugKey = 'Escape';
/** True if the debug overlay is active, always false in release builds
* @type {boolean}
* @default
* @memberof Debug */
let debugOverlay = false;
// Engine internal variables not exposed to documentation
let debugPrimitives = [], debugPhysics = false, debugRaycast = false, debugParticles = false, debugGamepads = false, debugMedals = false, debugTakeScreenshot, downloadLink;
///////////////////////////////////////////////////////////////////////////////
// Debug helper functions
/** Asserts if the expression is false, does not do anything in release builds
* @param {boolean} assert
* @param {Object} [output]
* @memberof Debug */
function ASSERT(assert, output)
{
if (enableAsserts)
output ? console.assert(assert, output) : console.assert(assert);
}
/** Draw a debug rectangle in world space
* @param {Vector2} pos
* @param {Vector2} [size=Vector2()]
* @param {string} [color]
* @param {number} [time]
* @param {number} [angle]
* @param {boolean} [fill]
* @memberof Debug */
function debugRect(pos, size=vec2(), color='#fff', time=0, angle=0, fill=false)
{
ASSERT(typeof color == 'string', 'pass in css color strings');
debugPrimitives.push({pos, size:vec2(size), color, time:new Timer(time), angle, fill});
}
/** Draw a debug poly in world space
* @param {Vector2} pos
* @param {Array<Vector2>} points
* @param {string} [color]
* @param {number} [time]
* @param {number} [angle]
* @param {boolean} [fill]
* @memberof Debug */
function debugPoly(pos, points, color='#fff', time=0, angle=0, fill=false)
{
ASSERT(typeof color == 'string', 'pass in css color strings');
debugPrimitives.push({pos, points, color, time:new Timer(time), angle, fill});
}
/** Draw a debug circle in world space
* @param {Vector2} pos
* @param {number} [radius]
* @param {string} [color]
* @param {number} [time]
* @param {boolean} [fill]
* @memberof Debug */
function debugCircle(pos, radius=0, color='#fff', time=0, fill=false)
{
ASSERT(typeof color == 'string', 'pass in css color strings');
debugPrimitives.push({pos, size:radius, color, time:new Timer(time), angle:0, fill});
}
/** Draw a debug point in world space
* @param {Vector2} pos
* @param {string} [color]
* @param {number} [time]
* @param {number} [angle]
* @memberof Debug */
function debugPoint(pos, color, time, angle)
{
ASSERT(typeof color == 'string', 'pass in css color strings');
debugRect(pos, undefined, color, time, angle);
}
/** Draw a debug line in world space
* @param {Vector2} posA
* @param {Vector2} posB
* @param {string} [color]
* @param {number} [thickness]
* @param {number} [time]
* @memberof Debug */
function debugLine(posA, posB, color, thickness=.1, time)
{
const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
const size = vec2(thickness, halfDelta.length()*2);
debugRect(posA.add(halfDelta), size, color, time, halfDelta.angle(), true);
}
/** Draw a debug combined axis aligned bounding box in world space
* @param {Vector2} pA - position A
* @param {Vector2} sA - size A
* @param {Vector2} pB - position B
* @param {Vector2} sB - size B
* @param {string} [color]
* @memberof Debug */
function debugOverlap(pA, sA, pB, sB, color)
{
const minPos = vec2(min(pA.x - sA.x/2, pB.x - sB.x/2), min(pA.y - sA.y/2, pB.y - sB.y/2));
const maxPos = vec2(max(pA.x + sA.x/2, pB.x + sB.x/2), max(pA.y + sA.y/2, pB.y + sB.y/2));
debugRect(minPos.lerp(maxPos,.5), maxPos.subtract(minPos), color);
}
/** Draw a debug axis aligned bounding box in world space
* @param {string} text
* @param {Vector2} pos
* @param {number} [size]
* @param {string} [color]
* @param {number} [time]
* @param {number} [angle]
* @param {string} [font]
* @memberof Debug */
function debugText(text, pos, size=1, color='#fff', time=0, angle=0, font='monospace')
{
ASSERT(typeof color == 'string', 'pass in css color strings');
debugPrimitives.push({text, pos, size, color, time:new Timer(time), angle, font});
}
/** Clear all debug primitives in the list
* @memberof Debug */
function debugClear() { debugPrimitives = []; }
/** Trigger debug system to take a screenshot
* @memberof Debug */
function debugScreenshot() { debugTakeScreenshot = 1; }
/** Save a canvas to disk
* @param {HTMLCanvasElement} canvas
* @param {string} [filename]
* @param {string} [type]
* @memberof Debug */
function debugSaveCanvas(canvas, filename='screenshot', type='image/png')
{ debugSaveDataURL(canvas.toDataURL(type), filename); }
/** Save a text file to disk
* @param {string} text
* @param {string} [filename]
* @param {string} [type]
* @memberof Debug */
function debugSaveText(text, filename='text', type='text/plain')
{ debugSaveDataURL(URL.createObjectURL(new Blob([text], {'type':type})), filename); }
/** Save a data url to disk
* @param {string} dataURL
* @param {string} filename
* @memberof Debug */
function debugSaveDataURL(dataURL, filename)
{
downloadLink.download = filename;
downloadLink.href = dataURL;
downloadLink.click();
}
/** Show error as full page of red text
* @memberof Debug */
function debugShowErrors()
{
onunhandledrejection = (event)=>showError(event.reason);
onerror = (event, source, lineno, colno)=>
showError(`${event}\n${source}\nLn ${lineno}, Col ${colno}`);
const showError = (message)=>
{
// replace entire page with error message
document.body.style.display = '';
document.body.style.backgroundColor = '#111';
document.body.innerHTML = `<pre style=color:#f00;font-size:50px>` + message;
}
}
///////////////////////////////////////////////////////////////////////////////
// Engine debug functions (called automatically)
function debugInit()
{
// create link for saving screenshots
downloadLink = document.createElement('a');
}
function debugUpdate()
{
if (!debug)
return;
if (keyWasPressed(debugKey)) // Esc
debugOverlay = !debugOverlay;
if (debugOverlay)
{
if (keyWasPressed('Digit0'))
showWatermark = !showWatermark;
if (keyWasPressed('Digit1'))
debugPhysics = !debugPhysics, debugParticles = false;
if (keyWasPressed('Digit2'))
debugParticles = !debugParticles, debugPhysics = false;
if (keyWasPressed('Digit3'))
debugGamepads = !debugGamepads;
if (keyWasPressed('Digit4'))
debugRaycast = !debugRaycast;
if (keyWasPressed('Digit5'))
debugScreenshot();
}
}
function debugRender()
{
glCopyToContext(mainContext);
if (debugTakeScreenshot)
{
// combine canvases, remove alpha and save
combineCanvases();
const w = mainCanvas.width, h = mainCanvas.height;
overlayContext.fillRect(0,0,w,h);
overlayContext.drawImage(mainCanvas, 0, 0);
debugSaveCanvas(overlayCanvas);
debugTakeScreenshot = 0;
}
if (debugGamepads && gamepadsEnable && navigator.getGamepads)
{
// gamepad debug display
const gamepads = navigator.getGamepads();
for (let i = gamepads.length; i--;)
{
const gamepad = gamepads[i];
if (gamepad)
{
const stickScale = 1;
const buttonScale = .2;
const centerPos = cameraPos;
const sticks = gamepadStickData[i];
for (let j = sticks.length; j--;)
{
const drawPos = centerPos.add(vec2(j*stickScale*2, i*stickScale*3));
const stickPos = drawPos.add(sticks[j].scale(stickScale));
debugCircle(drawPos, stickScale, '#fff7',0,true);
debugLine(drawPos, stickPos, '#f00');
debugPoint(stickPos, '#f00');
}
for (let j = gamepad.buttons.length; j--;)
{
const drawPos = centerPos.add(vec2(j*buttonScale*2, i*stickScale*3-stickScale-buttonScale));
const pressed = gamepad.buttons[j].pressed;
debugCircle(drawPos, buttonScale, pressed ? '#f00' : '#fff7', 0, true);
debugText(''+j, drawPos, .2);
}
}
}
}
let debugObject;
if (debugOverlay)
{
const saveContext = mainContext;
mainContext = overlayContext;
// draw red rectangle around screen
const cameraSize = getCameraSize();
debugRect(cameraPos, cameraSize.subtract(vec2(.1)), '#f008');
// mouse pick
let bestDistance = Infinity;
for (const o of engineObjects)
{
if (o.destroyed)
continue;
if (o instanceof TileLayer)
continue; // prevent tile layers from being picked
o.renderDebugInfo();
if (!o.size.x || !o.size.y)
continue;
const distance = mousePos.distanceSquared(o.pos);
if (distance < bestDistance)
{
bestDistance = distance;
debugObject = o;
}
}
if (tileCollisionSize.x > 0 && tileCollisionSize.y > 0)
drawRect(mousePos.floor().add(vec2(.5)), vec2(1), rgb(0,0,1,.5), 0, false);
mainContext = saveContext;
//glCopyToContext(mainContext = saveContext);
}
{
// draw debug primitives
overlayContext.lineWidth = 2;
const pointSize = debugPointSize * cameraScale;
debugPrimitives.forEach(p=>
{
overlayContext.save();
// create canvas transform from world space to screen space
const pos = worldToScreen(p.pos);
overlayContext.translate(pos.x|0, pos.y|0);
overlayContext.rotate(p.angle);
overlayContext.scale(1, p.text ? 1 : -1);
overlayContext.fillStyle = overlayContext.strokeStyle = p.color;
if (p.text != undefined)
{
overlayContext.font = p.size*cameraScale + 'px '+ p.font;
overlayContext.textAlign = 'center';
overlayContext.textBaseline = 'middle';
overlayContext.fillText(p.text, 0, 0);
}
else if (p.points != undefined)
{
// poly
overlayContext.beginPath();
for (const point of p.points)
{
const p2 = point.scale(cameraScale).floor();
overlayContext.lineTo(p2.x, p2.y);
}
overlayContext.closePath();
p.fill && overlayContext.fill();
overlayContext.stroke();
}
else if (p.size == 0 || p.size.x === 0 && p.size.y === 0)
{
// point
overlayContext.fillRect(-pointSize/2, -1, pointSize, 3);
overlayContext.fillRect(-1, -pointSize/2, 3, pointSize);
}
else if (p.size.x != undefined)
{
// rect
const s = p.size.scale(cameraScale).floor();
const w = s.x, h = s.y;
p.fill && overlayContext.fillRect(-w/2|0, -h/2|0, w, h);
overlayContext.strokeRect(-w/2|0, -h/2|0, w, h);
}
else
{
// circle
overlayContext.beginPath();
overlayContext.arc(0, 0, p.size*cameraScale, 0, 9);
p.fill && overlayContext.fill();
overlayContext.stroke();
}
overlayContext.restore();
});
// remove expired primitives
debugPrimitives = debugPrimitives.filter(r=>r.time<0);
}
if (debugObject)
{
const saveContext = mainContext;
mainContext = overlayContext;
const raycastHitPos = tileCollisionRaycast(debugObject.pos, mousePos);
raycastHitPos && drawRect(raycastHitPos.floor().add(vec2(.5)), vec2(1), rgb(0,1,1,.3));
drawLine(mousePos, debugObject.pos, .1, raycastHitPos ? rgb(1,0,0,.5) : rgb(0,1,0,.5), false);
const debugText = 'mouse pos = ' + mousePos +
'\nmouse collision = ' + getTileCollisionData(mousePos) +
'\n\n--- object info ---\n' +
debugObject.toString();
drawTextScreen(debugText, mousePosScreen, 24, rgb(), .05, undefined, 'center', 'monospace');
mainContext = saveContext;
}
{
// draw debug overlay
overlayContext.save();
overlayContext.fillStyle = '#fff';
overlayContext.textAlign = 'left';
overlayContext.textBaseline = 'top';
overlayContext.font = '28px monospace';
overlayContext.shadowColor = '#000';
overlayContext.shadowBlur = 9;
let x = 9, y = -20, h = 30;
if (debugOverlay)
{
overlayContext.fillText(engineName, x, y += h);
overlayContext.fillText('Objects: ' + engineObjects.length, x, y += h);
overlayContext.fillText('Time: ' + formatTime(time), x, y += h);
overlayContext.fillText('---------', x, y += h);
overlayContext.fillStyle = '#f00';
overlayContext.fillText('ESC: Debug Overlay', x, y += h);
overlayContext.fillStyle = debugPhysics ? '#f00' : '#fff';
overlayContext.fillText('1: Debug Physics', x, y += h);
overlayContext.fillStyle = debugParticles ? '#f00' : '#fff';
overlayContext.fillText('2: Debug Particles', x, y += h);
overlayContext.fillStyle = debugGamepads ? '#f00' : '#fff';
overlayContext.fillText('3: Debug Gamepads', x, y += h);
overlayContext.fillStyle = debugRaycast ? '#f00' : '#fff';
overlayContext.fillText('4: Debug Raycasts', x, y += h);
overlayContext.fillStyle = '#fff';
overlayContext.fillText('5: Save Screenshot', x, y += h);
let keysPressed = '';
for(const i in inputData[0])
{
if (keyIsDown(i, 0))
keysPressed += i + ' ' ;
}
keysPressed && overlayContext.fillText('Keys Down: ' + keysPressed, x, y += h);
let buttonsPressed = '';
if (inputData[1])
for(const i in inputData[1])
{
if (keyIsDown(i, 1))
buttonsPressed += i + ' ' ;
}
buttonsPressed && overlayContext.fillText('Gamepad: ' + buttonsPressed, x, y += h);
}
else
{
overlayContext.fillText(debugPhysics ? 'Debug Physics' : '', x, y += h);
overlayContext.fillText(debugParticles ? 'Debug Particles' : '', x, y += h);
overlayContext.fillText(debugRaycast ? 'Debug Raycasts' : '', x, y += h);
overlayContext.fillText(debugGamepads ? 'Debug Gamepads' : '', x, y += h);
}
overlayContext.restore();
}
}
/**
* LittleJS Utility Classes and Functions
* - General purpose math library
* - Vector2 - fast, simple, easy 2D vector class
* - Color - holds a rgba color with some math functions
* - Timer - tracks time automatically
* - RandomGenerator - seeded random number generator
* @namespace Utilities
*/
/** A shortcut to get Math.PI
* @type {number}
* @default Math.PI
* @memberof Utilities */
const PI = Math.PI;
/** Returns absolute value of value passed in
* @param {number} value
* @return {number}
* @memberof Utilities */
function abs(value) { return Math.abs(value); }
/** Returns lowest of two values passed in
* @param {number} valueA
* @param {number} valueB
* @return {number}
* @memberof Utilities */
function min(valueA, valueB) { return Math.min(valueA, valueB); }
/** Returns highest of two values passed in
* @param {number} valueA
* @param {number} valueB
* @return {number}
* @memberof Utilities */
function max(valueA, valueB) { return Math.max(valueA, valueB); }
/** Returns the sign of value passed in
* @param {number} value
* @return {number}
* @memberof Utilities */
function sign(value) { return Math.sign(value); }
/** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
* @param {number} dividend
* @param {number} [divisor]
* @return {number}
* @memberof Utilities */
function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
/** Clamps the value between max and min
* @param {number} value
* @param {number} [min]
* @param {number} [max]
* @return {number}
* @memberof Utilities */
function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
/** Returns what percentage the value is between valueA and valueB
* @param {number} value
* @param {number} valueA
* @param {number} valueB
* @return {number}
* @memberof Utilities */
function percent(value, valueA, valueB)
{ return (valueB-=valueA) ? clamp((value-valueA)/valueB) : 0; }
/** Linearly interpolates between values passed in using percent
* @param {number} percent
* @param {number} valueA
* @param {number} valueB
* @return {number}
* @memberof Utilities */
function lerp(percent, valueA, valueB) { return valueA + clamp(percent) * (valueB-valueA); }
/** Returns signed wrapped distance between the two values passed in
* @param {number} valueA
* @param {number} valueB
* @param {number} [wrapSize]
* @returns {number}
* @memberof Utilities */
function distanceWrap(valueA, valueB, wrapSize=1)
{ const d = (valueA - valueB) % wrapSize; return d*2 % wrapSize - d; }
/** Linearly interpolates between values passed in with wrapping
* @param {number} percent
* @param {number} valueA
* @param {number} valueB
* @param {number} [wrapSize]
* @returns {number}
* @memberof Utilities */
function lerpWrap(percent, valueA, valueB, wrapSize=1)
{ return valueB + clamp(percent) * distanceWrap(valueA, valueB, wrapSize); }
/** Returns signed wrapped distance between the two angles passed in
* @param {number} angleA
* @param {number} angleB
* @returns {number}
* @memberof Utilities */
function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
/** Linearly interpolates between the angles passed in with wrapping
* @param {number} percent
* @param {number} angleA
* @param {number} angleB
* @returns {number}
* @memberof Utilities */
function lerpAngle(percent, angleA, angleB) { return lerpWrap(percent, angleA, angleB, 2*PI); }
/** Applies smoothstep function to the percentage value
* @param {number} percent
* @return {number}
* @memberof Utilities */
function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
/** Returns the nearest power of two not less then the value
* @param {number} value
* @return {number}
* @memberof Utilities */
function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
/** Returns true if two axis aligned bounding boxes are overlapping
* @param {Vector2} posA - Center of box A
* @param {Vector2} sizeA - Size of box A
* @param {Vector2} posB - Center of box B
* @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
* @return {boolean} - True if overlapping
* @memberof Utilities */
function isOverlapping(posA, sizeA, posB, sizeB=vec2())
{
return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x
&& abs(posA.y - posB.y)*2 < sizeA.y + sizeB.y;
}
/** Returns true if a line segment is intersecting an axis aligned box
* @param {Vector2} start - Start of raycast
* @param {Vector2} end - End of raycast
* @param {Vector2} pos - Center of box
* @param {Vector2} size - Size of box
* @return {boolean} - True if intersecting
* @memberof Utilities */
function isIntersecting(start, end, pos, size)
{
// Liang-Barsky algorithm
const boxMin = pos.subtract(size.scale(.5));
const boxMax = boxMin.add(size);
const delta = end.subtract(start);
const a = start.subtract(boxMin);
const b = start.subtract(boxMax);
const p = [-delta.x, delta.x, -delta.y, delta.y];
const q = [a.x, -b.x, a.y, -b.y];
let tMin = 0, tMax = 1;
for (let i = 4; i--;)
{
if (p[i])
{
const t = q[i] / p[i];
if (p[i] < 0)
{
if (t > tMax) return false;
tMin = max(t, tMin);
}
else
{
if (t < tMin) return false;
tMax = min(t, tMax);
}
}
else if (q[i] < 0)
return false;
}
return true;
}
/** Returns an oscillating wave between 0 and amplitude with frequency of 1 Hz by default
* @param {number} [frequency] - Frequency of the wave in Hz
* @param {number} [amplitude] - Amplitude (max height) of the wave
* @param {number} [t=time] - Value to use for time of the wave
* @return {number} - Value waving between 0 and amplitude
* @memberof Utilities */
function wave(frequency=1, amplitude=1, t=time)
{ return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
/** Formats seconds to mm:ss style for display purposes
* @param {number} t - time in seconds
* @return {string}
* @memberof Utilities */
function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
///////////////////////////////////////////////////////////////////////////////
/** Random global functions
* @namespace Random */
/** Returns a random value between the two values passed in
* @param {number} [valueA]
* @param {number} [valueB]
* @return {number}
* @memberof Random */
function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
/** Returns a floored random value between the two values passed in
* The upper bound is exclusive. (If 2 is passed in, result will be 0 or 1)
* @param {number} valueA
* @param {number} [valueB]
* @return {number}
* @memberof Random */
function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
/** Randomly returns either -1 or 1
* @return {number}
* @memberof Random */
function randSign() { return randInt(2) * 2 - 1; }
/** Returns a random Vector2 with the passed in length
* @param {number} [length]
* @return {Vector2}
* @memberof Random */
function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
/** Returns a random Vector2 within a circular shape
* @param {number} [radius]
* @param {number} [minRadius]
* @return {Vector2}
* @memberof Random */
function randInCircle(radius=1, minRadius=0)
{ return radius > 0 ? randVector(radius * rand(minRadius / radius, 1)**.5) : new Vector2; }
/** Returns a random color between the two passed in colors, combine components if linear
* @param {Color} [colorA=(1,1,1,1)]
* @param {Color} [colorB=(0,0,0,1)]
* @param {boolean} [linear]
* @return {Color}
* @memberof Random */
function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
{
return linear ? colorA.lerp(colorB, rand()) :
new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
}
///////////////////////////////////////////////////////////////////////////////
/**
* Seeded random number generator
* - Can be used to create a deterministic random number sequence
* @example
* let r = new RandomGenerator(123); // random number generator with seed 123
* let a = r.float(); // random value between 0 and 1
* let b = r.int(10); // random integer between 0 and 9
* r.seed = 123; // reset the seed
* let c = r.float(); // the same value as a
*/
class RandomGenerator
{
/** Create a random number generator with the seed passed in
* @param {number} seed - Starting seed */
constructor(seed)
{
/** @property {number} - random seed */
this.seed = seed;
}
/** Returns a seeded random value between the two values passed in
* @param {number} [valueA]
* @param {number} [valueB]
* @return {number} */
float(valueA=1, valueB=0)
{
// xorshift algorithm
this.seed ^= this.seed << 13;
this.seed ^= this.seed >>> 17;
this.seed ^= this.seed << 5;
return valueB + (valueA - valueB) * ((this.seed >>> 0) / 2**32);
}
/** Returns a floored seeded random value the two values passed in
* @param {number} valueA
* @param {number} [valueB]
* @return {number} */
int(valueA, valueB=0) { return Math.floor(this.float(valueA, valueB)); }
/** Randomly returns either -1 or 1 deterministically
* @return {number} */
sign() { return this.float() > .5 ? 1 : -1; }
}
///////////////////////////////////////////////////////////////////////////////
/**
* Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
* @param {Vector2|number} [x]
* @param {number} [y]
* @return {Vector2}
* @example
* let a = vec2(0, 1); // vector with coordinates (0, 1)
* let b = vec2(a); // copy a into b
* a = vec2(5); // set a to (5, 5)
* b = vec2(); // set b to (0, 0)
* @memberof Utilities
*/
function vec2(x=0, y)
{
return typeof x == 'number' ?
new Vector2(x, y == undefined? x : y) :
new Vector2(x.x, x.y);
}
/**
* Check if object is a valid Vector2
* @param {any} v
* @return {boolean}
* @memberof Utilities
*/
function isVector2(v) { return v instanceof Vector2; }
/**
* 2D Vector object with vector math library
* - Functions do not change this so they can be chained together
* @example
* let a = new Vector2(2, 3); // vector with coordinates (2, 3)
* let b = new Vector2; // vector with coordinates (0, 0)
* let c = vec2(4, 2); // use the vec2 function to make a Vector2
* let d = a.add(b).scale(5); // operators can be chained
*/
class Vector2
{
/** Create a 2D vector with the x and y passed in, can also be created with vec2()
* @param {number} [x] - X axis location
* @param {number} [y] - Y axis location */
constructor(x=0, y=0)
{
/** @property {number} - X axis location */
this.x = x;
/** @property {number} - Y axis location */
this.y = y;
ASSERT(this.isValid());
}
/** Sets values of this vector and returns self
* @param {number} [x] - X axis location
* @param {number} [y] - Y axis location
* @return {Vector2} */
set(x=0, y=0)
{
this.x = x;
this.y = y;
ASSERT(this.isValid());
return this;
}
/** Returns a new vector that is a copy of this
* @return {Vector2} */
copy() { return new Vector2(this.x, this.y); }
/** Returns a copy of this vector plus the vector passed in
* @param {Vector2} v - other vector
* @return {Vector2} */
add(v)
{
ASSERT(isVector2(v));
return new Vector2(this.x + v.x, this.y + v.y);
}
/** Returns a copy of this vector minus the vector passed in
* @param {Vector2} v - other vector
* @return {Vector2} */
subtract(v)
{
ASSERT(isVector2(v));
return new Vector2(this.x - v.x, this.y - v.y);
}
/** Returns a copy of this vector times the vector passed in
* @param {Vector2} v - other vector
* @return {Vector2} */
multiply(v)
{
ASSERT(isVector2(v));
return new Vector2(this.x * v.x, this.y * v.y);
}
/** Returns a copy of this vector divided by the vector passed in
* @param {Vector2} v - other vector
* @return {Vector2} */
divide(v)
{
ASSERT(isVector2(v));
return new Vector2(this.x / v.x, this.y / v.y);
}
/** Returns a copy of this vector scaled by the vector passed in
* @param {number} s - scale
* @return {Vector2} */
scale(s)
{
ASSERT(!isVector2(s));
return new Vector2(this.x * s, this.y * s);
}
/** Returns the length of this vector
* @return {number} */
length() { return this.lengthSquared()**.5; }
/** Returns the length of this vector squared
* @return {number} */
lengthSquared() { return this.x**2 + this.y**2; }
/** Returns the distance from this vector to vector passed in
* @param {Vector2} v - other vector
* @return {number} */
distance(v)
{
ASSERT(isVector2(v));
return this.distanceSquared(v)**.5;
}
/** Returns the distance squared from this vector to vector passed in
* @param {Vector2} v - other vector
* @return {number} */
distanceSquared(v)
{
ASSERT(isVector2(v));
return (this.x - v.x)**2 + (this.y - v.y)**2;
}
/** Returns a new vector in same direction as this one with the length passed in
* @param {number} [length]
* @return {Vector2} */
normalize(length=1)
{
const l = this.length();
return l ? this.scale(length/l) : new Vector2(0, length);
}
/** Returns a new vector clamped to length passed in
* @param {number} [length]
* @return {Vector2} */
clampLength(length=1)
{
const l = this.length();
return l > length ? this.scale(length/l) : this;
}
/** Returns the dot product of this and the vector passed in
* @param {Vector2} v - other vector
* @return {number} */
dot(v)
{
ASSERT(isVector2(v));
return this.x*v.x + this.y*v.y;
}
/** Returns the cross product of this and the vector passed in
* @param {Vector2} v - other vector
* @return {number} */
cross(v)
{
ASSERT(isVector2(v));
return this.x*v.y - this.y*v.x;
}
/** Returns the clockwise angle of this vector, up is angle 0
* @return {number} */
angle() { return Math.atan2(this.x, this.y); }
/** Sets this vector with clockwise angle and length passed in
* @param {number} [angle]
* @param {number} [length]
* @return {Vector2} */
setAngle(angle=0, length=1)
{
this.x = length*Math.sin(angle);
this.y = length*Math.cos(angle);
return this;
}
/** Returns copy of this vector rotated by the clockwise angle passed in
* @param {number} angle
* @return {Vector2} */
rotate(angle)
{
const c = Math.cos(-angle), s = Math.sin(-angle);
return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
}
/** Set the integer direction of this vector, corresponding to multiples of 90 degree rotation (0-3)
* @param {number} [direction]
* @param {number} [length] */
setDirection(direction, length=1)
{
direction = mod(direction, 4);
ASSERT(direction==0 || direction==1 || direction==2 || direction==3);
return vec2(direction%2 ? direction-1 ? -length : length : 0,
direction%2 ? 0 : direction ? -length : length);
}
/** Returns the integer direction of this vector, corresponding to multiples of 90 degree rotation (0-3)
* @return {number} */
direction()
{ return abs(this.x) > abs(this.y) ? this.x < 0 ? 3 : 1 : this.y < 0 ? 2 : 0; }
/** Returns a copy of this vector that has been inverted
* @return {Vector2} */
invert() { return new Vector2(this.y, -this.x); }
/** Returns a copy of this vector with each axis floored
* @return {Vector2} */
floor() { return new Vector2(Math.floor(this.x), Math.floor(this.y)); }
/** Returns the area this vector covers as a rectangle
* @return {number} */
area() { return abs(this.x * this.y); }
/** Returns a new vector that is p percent between this and the vector passed in
* @param {Vector2} v - other vector
* @param {number} percent
* @return {Vector2} */
lerp(v, percent)
{
ASSERT(isVector2(v));
return this.add(v.subtract(this).scale(clamp(percent)));
}
/** Returns true if this vector is within the bounds of an array size passed in
* @param {Vector2} arraySize
* @return {boolean} */
arrayCheck(arraySize)
{
ASSERT(isVector2(arraySize));
return this.x >= 0 && this.y >= 0 && this.x < arraySize.x && this.y < arraySize.y;
}
/** Returns this vector expressed as a string
* @param {number} digits - precision to display
* @return {string} */
toString(digits=3)
{
if (debug)
return `(${(this.x<0?'':' ') + this.x.toFixed(digits)},${(this.y<0?'':' ') + this.y.toFixed(digits)} )`;
}
/** Checks if this is a valid vector
* @return {boolean} */
isValid()
{
return typeof this.x == 'number' && !isNaN(this.x)
&& typeof this.y == 'number' && !isNaN(this.y);
}
}
///////////////////////////////////////////////////////////////////////////////
/**
* Create a color object with RGBA values, white by default
* @param {number} [r=1] - red
* @param {number} [g=1] - green
* @param {number} [b=1] - blue
* @param {number} [a=1] - alpha
* @return {Color}
* @memberof Utilities
*/
function rgb(r, g, b, a) { return new Color(r, g, b, a); }
/**
* Create a color object with HSLA values, white by default
* @param {number} [h=0] - hue
* @param {number} [s=0] - saturation
* @param {number} [l=1] - lightness
* @param {number} [a=1] - alpha
* @return {Color}
* @memberof Utilities
*/
function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
/**
* Check if object is a valid Color
* @param {any} c
* @return {boolean}
* @memberof Utilities
*/
function isColor(c) { return c instanceof Color; }
/**
* Color object (red, green, blue, alpha) with some helpful functions
* @example
* let a = new Color; // white
* let b = new Color(1, 0, 0); // red
* let c = new Color(0, 0, 0, 0); // transparent black
* let d = rgb(0, 0, 1); // blue using rgb color
* let e = hsl(.3, 1, .5); // green using hsl color
*/
class Color
{
/** Create a color with the rgba components passed in, white by default
* @param {number} [r] - red
* @param {number} [g] - green
* @param {number} [b] - blue
* @param {number} [a] - alpha*/
constructor(r=1, g=1, b=1, a=1)
{
/** @property {number} - Red */
this.r = r;
/** @property {number} - Green */
this.g = g;
/** @property {number} - Blue */
this.b = b;
/** @property {number} - Alpha */
this.a = a;
ASSERT(this.isValid());
}
/** Sets values of this color and returns self
* @param {number} [r] - red
* @param {number} [g] - green
* @param {number} [b] - blue
* @param {number} [a] - alpha
* @return {Color} */
set(r=1, g=1, b=1, a=1)
{
this.r = r;
this.g = g;
this.b = b;
this.a = a;
ASSERT(this.isValid());
return this;
}
/** Returns a new color that is a copy of this
* @return {Color} */
copy() { return new Color(this.r, this.g, this.b, this.a); }
/** Returns a copy of this color plus the color passed in
* @param {Color} c - other color
* @return {Color} */
add(c)
{
ASSERT(isColor(c));
return new Color(this.r+c.r, this.g+c.g, this.b+c.b, this.a+c.a);
}
/** Returns a copy of this color minus the color passed in
* @param {Color} c - other color
* @return {Color} */
subtract(c)
{
ASSERT(isColor(c));
return new Color(this.r-c.r, this.g-c.g, this.b-c.b, this.a-c.a);
}
/** Returns a copy of this color times the color passed in
* @param {Color} c - other color
* @return {Color} */
multiply(c)
{
ASSERT(isColor(c));
return new Color(this.r*c.r, this.g*c.g, this.b*c.b, this.a*c.a);
}
/** Returns a copy of this color divided by the color passed in
* @param {Color} c - other color
* @return {Color} */
divide(c)
{
ASSERT(isColor(c));
return new Color(this.r/c.r, this.g/c.g, this.b/c.b, this.a/c.a);
}
/** Returns a copy of this color scaled by the value passed in, alpha can be scaled separately
* @param {number} scale
* @param {number} [alphaScale=scale]
* @return {Color} */
scale(scale, alphaScale=scale)
{ return new Color(this.r*scale, this.g*scale, this.b*scale, this.a*alphaScale); }
/** Returns a copy of this color clamped to the valid range between 0 and 1
* @return {Color} */
clamp() { return new Color(clamp(this.r), clamp(this.g), clamp(this.b), clamp(this.a)); }
/** Returns a new color that is p percent between this and the color passed in
* @param {Color} c - other color
* @param {number} percent
* @return {Color} */
lerp(c, percent)
{
ASSERT(isColor(c));
return this.add(c.subtract(this).scale(clamp(percent)));
}
/** Sets this color given a hue, saturation, lightness, and alpha
* @param {number} [h] - hue
* @param {number} [s] - saturation
* @param {number} [l] - lightness
* @param {number} [a] - alpha
* @return {Color} */
setHSLA(h=0, s=0, l=1, a=1)
{
h = mod(h,1);
s = clamp(s);
l = clamp(l);
const q = l < .5 ? l*(1+s) : l+s-l*s, p = 2*l-q,
f = (p, q, t)=>
(t = mod(t,1))*6 < 1 ? p+(q-p)*6*t :
t*2 < 1 ? q :
t*3 < 2 ? p+(q-p)*(4-t*6) : p;
this.r = f(p, q, h + 1/3);
this.g = f(p, q, h);
this.b = f(p, q, h - 1/3);
this.a = a;
ASSERT(this.isValid());
return this;
}
/** Returns this color expressed in hsla format
* @return {Array<number>} */
HSLA()
{
const r = clamp(this.r);
const g = clamp(this.g);
const b = clamp(this.b);
const a = clamp(this.a);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const l = (max + min) / 2;
let h = 0, s = 0;
if (max != min)
{
let d = max - min;
s = l > .5 ? d / (2 - max - min) : d / (max + min);
if (r == max)
h = (g - b) / d + (g < b ? 6 : 0);
else if (g == max)
h = (b - r) / d + 2;
else if (b == max)
h = (r - g) / d + 4;
}
return [h / 6, s, l, a];
}
/** Returns a new color that has each component randomly adjusted
* @param {number} [amount]
* @param {number} [alphaAmount]
* @return {Color} */
mutate(amount=.05, alphaAmount=0)
{
return new Color
(
this.r + rand(amount, -amount),
this.g + rand(amount, -amount),
this.b + rand(amount, -amount),
this.a + rand(alphaAmount, -alphaAmount)
).clamp();
}
/** Returns this color expressed as a hex color code
* @param {boolean} [useAlpha] - if alpha should be included in result
* @return {string} */
toString(useAlpha = true)
{
const toHex = (c)=> ((c=clamp(c)*255|0)<16 ? '0' : '') + c.toString(16);
return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
}
/** Set this color from a hex code
* @param {string} hex - html hex code
* @return {Color} */
setHex(hex)
{
ASSERT(typeof hex == 'string' && hex[0] == '#');
ASSERT([4,5,7,9].includes(hex.length), 'Invalid hex');
if (hex.length < 6)
{
const fromHex = (c)=> clamp(parseInt(hex[c],16)/15);
this.r = fromHex(1);
this.g = fromHex(2),
this.b = fromHex(3);
this.a = hex.length == 5 ? fromHex(4) : 1;
}
else
{
const fromHex = (c)=> clamp(parseInt(hex.slice(c,c+2),16)/255);
this.r = fromHex(1);
this.g = fromHex(3),
this.b = fromHex(5);
this.a = hex.length == 9 ? fromHex(7) : 1;
}
ASSERT(this.isValid());
return this;
}
/** Returns this color expressed as 32 bit RGBA value
* @return {number} */
rgbaInt()
{
const r = clamp(this.r)*255|0;
const g = clamp(this.g)*255<<8;
const b = clamp(this.b)*255<<16;
const a = clamp(this.a)*255<<24;
return r + g + b + a;
}
/** Checks if this is a valid color
* @return {boolean} */
isValid()
{
return typeof this.r == 'number' && !isNaN(this.r)
&& typeof this.g == 'number' && !isNaN(this.g)
&& typeof this.b == 'number' && !isNaN(this.b)
&& typeof this.a == 'number' && !isNaN(this.a);
}
}
///////////////////////////////////////////////////////////////////////////////
// default colors
/** Color - White #ffffff
* @type {Color}
* @memberof Utilities */
const WHITE = rgb();
/** Color - Black #000000
* @type {Color}
* @memberof Utilities */
const BLACK = rgb(0,0,0);
/** Color - Gray #808080
* @type {Color}
* @memberof Utilities */
const GRAY = rgb(.5,.5,.5);
/** Color - Red #ff0000
* @type {Color}
* @memberof Utilities */
const RED = rgb(1,0,0);
/** Color - Orange #ff8000
* @type {Color}
* @memberof Utilities */
const ORANGE = rgb(1,.5,0);
/** Color - Yellow #ffff00
* @type {Color}
* @memberof Utilities */
const YELLOW = rgb(1,1,0);
/** Color - Green #00ff00
* @type {Color}
* @memberof Utilities */
const GREEN = rgb(0,1,0);
/** Color - Cyan #00ffff
* @type {Color}
* @memberof Utilities */
const CYAN = rgb(0,1,1);
/** Color - Blue #0000ff
* @type {Color}
* @memberof Utilities */
const BLUE = rgb(0,0,1);
/** Color - Purple #8000ff
* @type {Color}
* @memberof Utilities */
const PURPLE = rgb(.5,0,1);
/** Color - Magenta #ff00ff
* @type {Color}
* @memberof Utilities */
const MAGENTA = rgb(1,0,1);
///////////////////////////////////////////////////////////////////////////////
/**
* Timer object tracks how long has passed since it was set
* @example
* let a = new Timer; // creates a timer that is not set
* a.set(3); // sets the timer to 3 seconds
*
* let b = new Timer(1); // creates a timer with 1 second left
* b.unset(); // unset the timer
*/
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) { this.time = timeLeft == undefined ? undefined : time + timeLeft; this.setTime = timeLeft; }
/** Set the timer with seconds passed in
* @param {number} [timeLeft] - How much time left before the timer is elapsed in seconds */
set(timeLeft=0) { this.time = time + timeLeft; this.setTime = timeLeft; }
/** Unset the timer */
unset() { this.time = undefined; }
/** Returns true if set
* @return {boolean} */
isSet() { return this.time != undefined; }
/** Returns true if set and has not elapsed
* @return {boolean} */
active() { return time < this.time; }
/** Returns true if set and elapsed
* @return {boolean} */
elapsed() { return time >= 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 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; }
/** Returns this timer expressed as a string
* @return {string} */
toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
/** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
* @return {number} */
valueOf() { return this.get(); }
}
/**
* LittleJS Engine Settings
* - All settings for the engine are here
* @namespace Settings
*/
///////////////////////////////////////////////////////////////////////////////
// Camera settings
/** Position of camera in world space
* @type {Vector2}
* @default Vector2()
* @memberof Settings */
let cameraPos = vec2();
/** Scale of camera in world space
* @type {number}
* @default
* @memberof Settings */
let cameraScale = 32;
///////////////////////////////////////////////////////////////////////////////
// Display settings
/** The max size of the canvas, centered if window is larger
* @type {Vector2}
* @default Vector2(1920,1080)
* @memberof Settings */
let canvasMaxSize = vec2(1920, 1080);
/** Fixed size of the canvas, if enabled canvas size never changes
* - you may also need to set mainCanvasSize if using screen space coords in startup
* @type {Vector2}
* @default Vector2()
* @memberof Settings */
let canvasFixedSize = vec2();
/** Use nearest neighbor scaling algorithm for canvas for more pixelated look
* - Must be set before startup to take effect
* - If enabled sets css image-rendering:pixelated
* @type {boolean}
* @default
* @memberof Settings */
let canvasPixelated = true;
/** Disables texture filtering for crisper pixel art
* @type {boolean}
* @default
* @memberof Settings */
let tilesPixelated = true;
/** Default font used for text rendering
* @type {string}
* @default
* @memberof Settings */
let fontDefault = 'arial';
/** Enable to show the LittleJS splash screen be shown on startup
* @type {boolean}
* @default
* @memberof Settings */
let showSplashScreen = false;
/** Disables all rendering, audio, and input for servers
* @type {boolean}
* @default
* @memberof Settings */
let headlessMode = false;
///////////////////////////////////////////////////////////////////////////////
// WebGL settings
/** Enable webgl rendering, webgl can be disabled and removed from build (with some features disabled)
* @type {boolean}
* @default
* @memberof Settings */
let glEnable = true;
/** Fixes slow rendering in some browsers by not compositing the WebGL canvas
* @type {boolean}
* @default
* @memberof Settings */
let glOverlay = true;
///////////////////////////////////////////////////////////////////////////////
// Tile sheet settings
/** Default size of tiles in pixels
* @type {Vector2}
* @default Vector2(16,16)
* @memberof Settings */
let tileSizeDefault = vec2(16);
/** How many pixels smaller to draw tiles to prevent bleeding from neighbors
* @type {number}
* @default
* @memberof Settings */
let tileFixBleedScale = 0;
///////////////////////////////////////////////////////////////////////////////
// Object settings
/** Enable physics solver for collisions between objects
* @type {boolean}
* @default
* @memberof Settings */
let enablePhysicsSolver = true;
/** Default object mass for collision calculations (how heavy objects are)
* @type {number}
* @default
* @memberof Settings */
let objectDefaultMass = 1;
/** How much to slow velocity by each frame (0-1)
* @type {number}
* @default
* @memberof Settings */
let objectDefaultDamping = 1;
/** How much to slow angular velocity each frame (0-1)
* @type {number}
* @default
* @memberof Settings */
let objectDefaultAngleDamping = 1;
/** How much to bounce when a collision occurs (0-1)
* @type {number}
* @default
* @memberof Settings */
let objectDefaultElasticity = 0;
/** How much to slow when touching (0-1)
* @type {number}
* @default
* @memberof Settings */
let objectDefaultFriction = .8;
/** Clamp max speed to avoid fast objects missing collisions
* @type {number}
* @default
* @memberof Settings */
let objectMaxSpeed = 1;
/** How much gravity to apply to objects along the Y axis, negative is down
* @type {number}
* @default
* @memberof Settings */
let gravity = 0;
/** Scales emit rate of particles, useful for low graphics mode (0 disables particle emitters)
* @type {number}
* @default
* @memberof Settings */
let particleEmitRateScale = 1;
///////////////////////////////////////////////////////////////////////////////
// Input settings
/** Should gamepads be allowed
* @type {boolean}
* @default
* @memberof Settings */
let gamepadsEnable = true;
/** If true, the dpad input is also routed to the left analog stick (for better accessability)
* @type {boolean}
* @default
* @memberof Settings */
let gamepadDirectionEmulateStick = true;
/** If true the WASD keys are also routed to the direction keys (for better accessability)
* @type {boolean}
* @default
* @memberof Settings */
let inputWASDEmulateDirection = true;
/** True if touch input is enabled for mobile devices
* - Touch events will be routed to mouse events
* @type {boolean}
* @default
* @memberof Settings */
let touchInputEnable = true;
/** True if touch gamepad should appear on mobile devices
* - Supports left analog stick, 4 face buttons and start button (button 9)
* - Must be set by end of gameInit to be activated
* @type {boolean}
* @default
* @memberof Settings */
let touchGamepadEnable = false;
/** True if touch gamepad should be analog stick or false to use if 8 way dpad
* @type {boolean}
* @default
* @memberof Settings */
let touchGamepadAnalog = true;
/** Size of virtual gamepad for touch devices in pixels
* @type {number}
* @default
* @memberof Settings */
let touchGamepadSize = 99;
/** Transparency of touch gamepad overlay
* @type {number}
* @default
* @memberof Settings */
let touchGamepadAlpha = .3;
/** Allow vibration hardware if it exists
* @type {boolean}
* @default
* @memberof Settings */
let vibrateEnable = true;
///////////////////////////////////////////////////////////////////////////////
// Audio settings
/** All audio code can be disabled and removed from build
* @type {boolean}
* @default
* @memberof Settings */
let soundEnable = true;
/** Volume scale to apply to all sound, music and speech
* @type {number}
* @default
* @memberof Settings */
let soundVolume = .3;
/** Default range where sound no longer plays
* @type {number}
* @default
* @memberof Settings */
let soundDefaultRange = 40;
/** Default range percent to start tapering off sound (0-1)
* @type {number}
* @default
* @memberof Settings */
let soundDefaultTaper = .7;
///////////////////////////////////////////////////////////////////////////////
// Medals settings
/** How long to show medals for in seconds
* @type {number}
* @default
* @memberof Settings */
let medalDisplayTime = 5;
/** How quickly to slide on/off medals in seconds
* @type {number}
* @default
* @memberof Settings */
let medalDisplaySlideTime = .5;
/** Size of medal display
* @type {Vector2}
* @default Vector2(640,80)
* @memberof Settings */
let medalDisplaySize = vec2(640, 80);
/** Size of icon in medal display
* @type {number}
* @default
* @memberof Settings */
let medalDisplayIconSize = 50;
/** Set to stop medals from being unlockable (like if cheats are enabled)
* @type {boolean}
* @default
* @memberof Settings */
let medalsPreventUnlock = false;
///////////////////////////////////////////////////////////////////////////////
// Setters for global variables
/** Set position of camera in world space
* @param {Vector2} pos
* @memberof Settings */
function setCameraPos(pos) { cameraPos = pos; }
/** Set scale of camera in world space
* @param {number} scale
* @memberof Settings */
function setCameraScale(scale) { cameraScale = scale; }
/** Set max size of the canvas
* @param {Vector2} size
* @memberof Settings */
function setCanvasMaxSize(size) { canvasMaxSize = size; }
/** Set fixed size of the canvas
* @param {Vector2} size
* @memberof Settings */
function setCanvasFixedSize(size) { canvasFixedSize = size; }
/** Use nearest neighbor scaling algorithm for canvas for more pixelated look
* @param {boolean} pixelated
* @memberof Settings */
function setCanvasPixelated(pixelated) { canvasPixelated = pixelated; }
/** Disables texture filtering for crisper pixel art
* @param {boolean} pixelated
* @memberof Settings */
function setTilesPixelated(pixelated) { tilesPixelated = pixelated; }
/** Set default font used for text rendering
* @param {string} font
* @memberof Settings */
function setFontDefault(font) { fontDefault = font; }
/** Set if the LittleJS splash screen be shown on startup
* @param {boolean} show
* @memberof Settings */
function setShowSplashScreen(show) { showSplashScreen = show; }
/** Set to disable rendering, audio, and input for servers
* @param {boolean} headless
* @memberof Settings */
function setHeadlessMode(headless) { headlessMode = headless; }
/** Set if webgl rendering is enabled
* @param {boolean} enable
* @memberof Settings */
function setGlEnable(enable) { glEnable = enable; }
/** Set to not composite the WebGL canvas
* @param {boolean} overlay
* @memberof Settings */
function setGlOverlay(overlay) { glOverlay = overlay; }
/** Set default size of tiles in pixels
* @param {Vector2} size
* @memberof Settings */
function setTileSizeDefault(size) { tileSizeDefault = size; }
/** Set to prevent tile bleeding from neighbors in pixels
* @param {number} scale
* @memberof Settings */
function setTileFixBleedScale(scale) { tileFixBleedScale = scale; }
/** Set if collisions between objects are enabled
* @param {boolean} enable
* @memberof Settings */
function setEnablePhysicsSolver(enable) { enablePhysicsSolver = enable; }
/** Set default object mass for collision calculations
* @param {number} mass
* @memberof Settings */
function setObjectDefaultMass(mass) { objectDefaultMass = mass; }
/** Set how much to slow velocity by each frame
* @param {number} damp
* @memberof Settings */
function setObjectDefaultDamping(damp) { objectDefaultDamping = damp; }
/** Set how much to slow angular velocity each frame
* @param {number} damp
* @memberof Settings */
function setObjectDefaultAngleDamping(damp) { objectDefaultAngleDamping = damp; }
/** Set how much to bounce when a collision occur
* @param {number} elasticity
* @memberof Settings */
function setObjectDefaultElasticity(elasticity) { objectDefaultElasticity = elasticity; }
/** Set how much to slow when touching
* @param {number} friction
* @memberof Settings */
function setObjectDefaultFriction(friction) { objectDefaultFriction = friction; }
/** Set max speed to avoid fast objects missing collisions
* @param {number} speed
* @memberof Settings */
function setObjectMaxSpeed(speed) { objectMaxSpeed = speed; }
/** Set how much gravity to apply to objects along the Y axis
* @param {number} newGravity
* @memberof Settings */
function setGravity(newGravity) { gravity = newGravity; }
/** Set to scales emit rate of particles
* @param {number} scale
* @memberof Settings */
function setParticleEmitRateScale(scale) { particleEmitRateScale = scale; }
/** Set if gamepads are enabled
* @param {boolean} enable
* @memberof Settings */
function setGamepadsEnable(enable) { gamepadsEnable = enable; }
/** Set if the dpad input is also routed to the left analog stick
* @param {boolean} enable
* @memberof Settings */
function setGamepadDirectionEmulateStick(enable) { gamepadDirectionEmulateStick = enable; }
/** Set if true the WASD keys are also routed to the direction keys
* @param {boolean} enable
* @memberof Settings */
function setInputWASDEmulateDirection(enable) { inputWASDEmulateDirection = enable; }
/** Set if touch input is allowed
* @param {boolean} enable
* @memberof Settings */
function setTouchInputEnable(enable) { touchInputEnable = enable; }
/** Set if touch gamepad should appear on mobile devices
* @param {boolean} enable
* @memberof Settings */
function setTouchGamepadEnable(enable) { touchGamepadEnable = enable; }
/** Set if touch gamepad should be analog stick or 8 way dpad
* @param {boolean} analog
* @memberof Settings */
function setTouchGamepadAnalog(analog) { touchGamepadAnalog = analog; }
/** Set size of virtual gamepad for touch devices in pixels
* @param {number} size
* @memberof Settings */
function setTouchGamepadSize(size) { touchGamepadSize = size; }
/** Set transparency of touch gamepad overlay
* @param {number} alpha
* @memberof Settings */
function setTouchGamepadAlpha(alpha) { touchGamepadAlpha = alpha; }
/** Set to allow vibration hardware if it exists
* @param {boolean} enable
* @memberof Settings */
function setVibrateEnable(enable) { vibrateEnable = enable; }
/** Set to disable all audio code
* @param {boolean} enable
* @memberof Settings */
function setSoundEnable(enable) { soundEnable = enable; }
/** Set volume scale to apply to all sound, music and speech
* @param {number} volume
* @memberof Settings */
function setSoundVolume(volume)
{
soundVolume = volume;
if (soundEnable && !headlessMode && audioGainNode)
audioGainNode.gain.value = volume; // update gain immediately
}
/** Set default range where sound no longer plays
* @param {number} range
* @memberof Settings */
function setSoundDefaultRange(range) { soundDefaultRange = range; }
/** Set default range percent to start tapering off sound
* @param {number} taper
* @memberof Settings */
function setSoundDefaultTaper(taper) { soundDefaultTaper = taper; }
/** Set how long to show medals for in seconds
* @param {number} time
* @memberof Settings */
function setMedalDisplayTime(time) { medalDisplayTime = time; }
/** Set how quickly to slide on/off medals in seconds
* @param {number} time
* @memberof Settings */
function setMedalDisplaySlideTime(time) { medalDisplaySlideTime = time; }
/** Set size of medal display
* @param {Vector2} size
* @memberof Settings */
function setMedalDisplaySize(size) { medalDisplaySize = size; }
/** Set size of icon in medal display
* @param {number} size
* @memberof Settings */
function setMedalDisplayIconSize(size) { medalDisplayIconSize = size; }
/** Set to stop medals from being unlockable
* @param {boolean} preventUnlock
* @memberof Settings */
function setMedalsPreventUnlock(preventUnlock) { medalsPreventUnlock = preventUnlock; }
/** Set if watermark with FPS should be shown
* @param {boolean} show
* @memberof Debug */
function setShowWatermark(show) { showWatermark = show; }
/** Set key code used to toggle debug mode, Esc by default
* @param {string} key
* @memberof Debug */
function setDebugKey(key) { debugKey = key; }
/**
* LittleJS Object System
*/
/**
* LittleJS Object Base Object Class
* - Top level object class used by the engine
* - Automatically adds self to object list
* - Will be updated and rendered each frame
* - Renders as a sprite from a tilesheet by default
* - Can have color and additive color applied
* - 2D Physics and collision system
* - Sorted by renderOrder
* - Objects can have children attached
* - Parents are updated before children, and set child transform
* - Call destroy() to get rid of objects
*
* The physics system used by objects is simple and fast with some caveats...
* - Collision uses the axis aligned size, the object's rotation angle is only for rendering
* - Objects are guaranteed to not intersect tile collision from physics
* - If an object starts or is moved inside tile collision, it will not collide with that tile
* - Collision for objects can be set to be solid to block other objects
* - Objects may get pushed into overlapping other solid objects, if so they will push away
* - Solid objects are more performance intensive and should be used sparingly
* @example
* // create an engine object, normally you would first extend the class with your own
* const pos = vec2(2,3);
* const object = new EngineObject(pos);
*/
class EngineObject
{
/** Create an engine object and adds it to the list of objects
* @param {Vector2} [pos=(0,0)] - World space position of the object
* @param {Vector2} [size=(1,1)] - World space size of the object
* @param {TileInfo} [tileInfo] - Tile info to render object (undefined is untextured)
* @param {number} [angle] - Angle the object is rotated by
* @param {Color} [color=(1,1,1,1)] - Color to apply to tile when rendered
* @param {number} [renderOrder] - Objects sorted by renderOrder before being rendered
*/
constructor(pos=vec2(), size=vec2(1), tileInfo, angle=0, color=new Color, renderOrder=0)
{
// set passed in params
ASSERT(isVector2(pos) && isVector2(size), 'ensure pos and size are vec2s');
ASSERT(typeof tileInfo !== 'number' || !tileInfo, 'old style tile setup');
/** @property {Vector2} - World space position of the object */
this.pos = pos.copy();
/** @property {Vector2} - World space width and height of the object */
this.size = size;
/** @property {Vector2} - Size of object used for drawing, uses size if not set */
this.drawSize = undefined;
/** @property {TileInfo} - Tile info to render object (undefined is untextured) */
this.tileInfo = tileInfo;
/** @property {number} - Angle to rotate the object */
this.angle = angle;
/** @property {Color} - Color to apply when rendered */
this.color = color;
/** @property {Color} - Additive color to apply when rendered */
this.additiveColor = undefined;
/** @property {boolean} - Should it flip along y axis when rendered */
this.mirror = false;
// physical properties
/** @property {number} [mass=objectDefaultMass] - How heavy the object is, static if 0 */
this.mass = objectDefaultMass;
/** @property {number} [damping=objectDefaultDamping] - How much to slow down velocity each frame (0-1) */
this.damping = objectDefaultDamping;
/** @property {number} [angleDamping=objectDefaultAngleDamping] - How much to slow down rotation each frame (0-1) */
this.angleDamping = objectDefaultAngleDamping;
/** @property {number} [elasticity=objectDefaultElasticity] - How bouncy the object is when colliding (0-1) */
this.elasticity = objectDefaultElasticity;
/** @property {number} [friction=objectDefaultFriction] - How much friction to apply when sliding (0-1) */
this.friction = objectDefaultFriction;
/** @property {number} - How much to scale gravity by for this object */
this.gravityScale = 1;
/** @property {number} - Objects are sorted by render order */
this.renderOrder = renderOrder;
/** @property {Vector2} - Velocity of the object */
this.velocity = vec2();
/** @property {number} - Angular velocity of the object */
this.angleVelocity = 0;
/** @property {number} - Track when object was created */
this.spawnTime = time;
/** @property {Array<EngineObject>} - List of children of this object */
this.children = [];
/** @property {boolean} - Limit object speed using linear or circular math */
this.clampSpeedLinear = true;
/** @property {EngineObject} - Object we are standing on, if any */
this.groundObject = undefined;
// parent child system
/** @property {EngineObject} - Parent of object if in local space */
this.parent = undefined;
/** @property {Vector2} - Local position if child */
this.localPos = vec2();
/** @property {number} - Local angle if child */
this.localAngle = 0;
// collision flags
/** @property {boolean} - Object collides with the tile collision */
this.collideTiles = false;
/** @property {boolean} - Object collides with solid objects */
this.collideSolidObjects = false;
/** @property {boolean} - Object collides with and blocks other objects */
this.isSolid = false;
/** @property {boolean} - Object collides with raycasts */
this.collideRaycast = false;
// add to list of objects
engineObjects.push(this);
}
/** Update the object transform, called automatically by engine even when paused */
updateTransforms()
{
const parent = this.parent;
if (parent)
{
// copy parent pos/angle
const mirror = parent.getMirrorSign();
this.pos = this.localPos.multiply(vec2(mirror,1)).rotate(parent.angle).add(parent.pos);
this.angle = mirror*this.localAngle + parent.angle;
}
// update children
for (const child of this.children)
child.updateTransforms();
}
/** Update the object physics, called automatically by engine once each frame */
update()
{
// child objects do not have physics
if (this.parent)
return;
// limit max speed to prevent missing collisions
if (this.clampSpeedLinear)
{
this.velocity.x = clamp(this.velocity.x, -objectMaxSpeed, objectMaxSpeed);
this.velocity.y = clamp(this.velocity.y, -objectMaxSpeed, objectMaxSpeed);
}
else
{
const length2 = this.velocity.lengthSquared();
if (length2 > objectMaxSpeed*objectMaxSpeed)
{
const s = objectMaxSpeed / length2**.5;
this.velocity.x *= s;
this.velocity.y *= s;
}
}
// apply physics
const oldPos = this.pos.copy();
this.velocity.x *= this.damping;
this.velocity.y *= this.damping;
if (this.mass) // don't apply gravity to static objects
this.velocity.y += gravity * this.gravityScale;
this.pos.x += this.velocity.x;
this.pos.y += this.velocity.y;
this.angle += this.angleVelocity *= this.angleDamping;
// physics sanity checks
ASSERT(this.angleDamping >= 0 && this.angleDamping <= 1);
ASSERT(this.damping >= 0 && this.damping <= 1);
if (!enablePhysicsSolver || !this.mass) // don't do collision for static objects
return;
const wasMovingDown = this.velocity.y < 0;
if (this.groundObject)
{
// apply friction in local space of ground object
const groundSpeed = this.groundObject.velocity ? this.groundObject.velocity.x : 0;
this.velocity.x = groundSpeed + (this.velocity.x - groundSpeed) * this.friction;
this.groundObject = undefined;
//debugOverlay && debugPhysics && debugPoint(this.pos.subtract(vec2(0,this.size.y/2)), '#0f0');
}
if (this.collideSolidObjects)
{
// check collisions against solid objects
const epsilon = .001; // necessary to push slightly outside of the collision
for (const o of engineObjectsCollide)
{
// non solid objects don't collide with each other
if (!this.isSolid && !o.isSolid || o.destroyed || o.parent || o == this)
continue;
// check collision
if (!isOverlapping(this.pos, this.size, o.pos, o.size))
continue;
// notify objects of collision and check if should be resolved
const collide1 = this.collideWithObject(o);
const collide2 = o.collideWithObject(this);
if (!collide1 || !collide2)
continue;
if (isOverlapping(oldPos, this.size, o.pos, o.size))
{
// if already was touching, try to push away
const deltaPos = oldPos.subtract(o.pos);
const length = deltaPos.length();
const pushAwayAccel = .001; // push away if already overlapping
const velocity = length < .01 ? randVector(pushAwayAccel) : deltaPos.scale(pushAwayAccel/length);
this.velocity = this.velocity.add(velocity);
if (o.mass) // push away if not fixed
o.velocity = o.velocity.subtract(velocity);
debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f00');
continue;
}
// check for collision
const sizeBoth = this.size.add(o.size);
const smallStepUp = (oldPos.y - o.pos.y)*2 > sizeBoth.y + gravity; // prefer to push up if small delta
const isBlockedX = abs(oldPos.y - o.pos.y)*2 < sizeBoth.y;
const isBlockedY = abs(oldPos.x - o.pos.x)*2 < sizeBoth.x;
const elasticity = max(this.elasticity, o.elasticity);
if (smallStepUp || isBlockedY || !isBlockedX) // resolve y collision
{
// push outside object collision
this.pos.y = o.pos.y + (sizeBoth.y/2 + epsilon) * sign(oldPos.y - o.pos.y);
if (o.groundObject && wasMovingDown || !o.mass)
{
// set ground object if landed on something
if (wasMovingDown)
this.groundObject = o;
// bounce if other object is fixed or grounded
this.velocity.y *= -elasticity;
}
else if (o.mass)
{
// inelastic collision
const inelastic = (this.mass * this.velocity.y + o.mass * o.velocity.y) / (this.mass + o.mass);
// elastic collision
const elastic0 = this.velocity.y * (this.mass - o.mass) / (this.mass + o.mass)
+ o.velocity.y * 2 * o.mass / (this.mass + o.mass);
const elastic1 = o.velocity.y * (o.mass - this.mass) / (this.mass + o.mass)
+ this.velocity.y * 2 * this.mass / (this.mass + o.mass);
// lerp between elastic or inelastic based on elasticity
this.velocity.y = lerp(elasticity, inelastic, elastic0);
o.velocity.y = lerp(elasticity, inelastic, elastic1);
}
}
if (!smallStepUp && isBlockedX) // resolve x collision
{
// push outside collision
this.pos.x = o.pos.x + (sizeBoth.x/2 + epsilon) * sign(oldPos.x - o.pos.x);
if (o.mass)
{
// inelastic collision
const inelastic = (this.mass * this.velocity.x + o.mass * o.velocity.x) / (this.mass + o.mass);
// elastic collision
const elastic0 = this.velocity.x * (this.mass - o.mass) / (this.mass + o.mass)
+ o.velocity.x * 2 * o.mass / (this.mass + o.mass);
const elastic1 = o.velocity.x * (o.mass - this.mass) / (this.mass + o.mass)
+ this.velocity.x * 2 * this.mass / (this.mass + o.mass);
// lerp between elastic or inelastic based on elasticity
this.velocity.x = lerp(elasticity, inelastic, elastic0);
o.velocity.x = lerp(elasticity, inelastic, elastic1);
}
else // bounce if other object is fixed
this.velocity.x *= -elasticity;
}
debugOverlay && debugPhysics && debugOverlap(this.pos, this.size, o.pos, o.size, '#f0f');
}
}
if (this.collideTiles)
{
// check collision against tiles
if (tileCollisionTest(this.pos, this.size, this))
{
// if already was stuck in collision, don't do anything
// this should not happen unless something starts in collision
if (!tileCollisionTest(oldPos, this.size, this))
{
// test which side we bounced off (or both if a corner)
const isBlockedY = tileCollisionTest(vec2(oldPos.x, this.pos.y), this.size, this);
const isBlockedX = tileCollisionTest(vec2(this.pos.x, oldPos.y), this.size, this);
if (isBlockedY || !isBlockedX)
{
// bounce velocity
this.velocity.y *= -this.elasticity;
if (wasMovingDown)
{
// adjust position to slightly above nearest tile boundary
// this prevents gap between object and ground
const epsilon = .0001;
this.pos.y = (oldPos.y-this.size.y/2|0)+this.size.y/2+epsilon;
// set ground object to self for tile collision
this.groundObject = this;
}
else
{
// move to previous position
this.pos.y = oldPos.y;
this.groundObject = undefined;
}
}
if (isBlockedX)
{
// move to previous position and bounce
this.pos.x = oldPos.x;
this.velocity.x *= -this.elasticity;
}
debugOverlay && debugPhysics && debugRect(this.pos, this.size, '#f00');
}
}
}
}
/** Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder */
render()
{
// default object render
drawTile(this.pos, this.drawSize || this.size, this.tileInfo, this.color, this.angle, this.mirror, this.additiveColor);
}
/** Destroy this object, destroy it's children, detach it's 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.destroy(child.parent = 0);
}
/** Convert from local space to world space
* @param {Vector2} pos - local space point */
localToWorld(pos) { return this.pos.add(pos.rotate(this.angle)); }
/** Convert from world space to local space
* @param {Vector2} pos - world space point */
worldToLocal(pos) { return pos.subtract(this.pos).rotate(-this.angle); }
/** Convert from local space to world space for a vector (rotation only)
* @param {Vector2} vec - local space vector */
localToWorldVector(vec) { return vec.rotate(this.angle); }
/** Convert from world space to local space for a vector (rotation only)
* @param {Vector2} vec - world space vector */
worldToLocalVector(vec) { return vec.rotate(-this.angle); }
/** Called to check if a tile collision should be resolved
* @param {number} tileData - the value of the tile at the position
* @param {Vector2} pos - tile where the collision occurred
* @return {boolean} - true if the collision should be resolved */
collideWithTile(tileData, pos) { return tileData > 0; }
/** Called to check if a object collision should be resolved
* @param {EngineObject} object - the object to test against
* @return {boolean} - true if the collision should be resolved
*/
collideWithObject(object) { return true; }
/** How long since the object was created
* @return {number} */
getAliveTime() { return time - this.spawnTime; }
/** Apply acceleration to this object (adjust velocity, not affected by mass)
* @param {Vector2} acceleration */
applyAcceleration(acceleration) { if (this.mass) this.velocity = this.velocity.add(acceleration); }
/** Apply force to this object (adjust velocity, affected by mass)
* @param {Vector2} force */
applyForce(force) { this.applyAcceleration(force.scale(1/this.mass)); }
/** Get the direction of the mirror
* @return {number} -1 if this.mirror is true, or 1 if not mirrored */
getMirrorSign() { return this.mirror ? -1 : 1; }
/** Attaches a child to this with a given local transform
* @param {EngineObject} child
* @param {Vector2} [localPos=(0,0)]
* @param {number} [localAngle] */
addChild(child, localPos=vec2(), localAngle=0)
{
ASSERT(!child.parent && !this.children.includes(child));
this.children.push(child);
child.parent = this;
child.localPos = localPos.copy();
child.localAngle = localAngle;
}
/** Removes a child from this one
* @param {EngineObject} child */
removeChild(child)
{
ASSERT(child.parent == this && this.children.includes(child));
this.children.splice(this.children.indexOf(child), 1);
child.parent = 0;
}
/** Set how this object collides
* @param {boolean} [collideSolidObjects] - Does it collide with solid objects?
* @param {boolean} [isSolid] - Does it collide with and block other objects? (expensive in large numbers)
* @param {boolean} [collideTiles] - Does it collide with the tile collision?
* @param {boolean} [collideRaycast] - Does it collide with raycasts? */
setCollision(collideSolidObjects=true, isSolid=true, collideTiles=true, collideRaycast=true)
{
ASSERT(collideSolidObjects || !isSolid, 'solid objects must be set to collide');
this.collideSolidObjects = collideSolidObjects;
this.isSolid = isSolid;
this.collideTiles = collideTiles;
this.collideRaycast = collideRaycast;
}
/** Returns string containing info about this object for debugging
* @return {string} */
toString()
{
if (debug)
{
let text = 'type = ' + this.constructor.name;
if (this.pos.x || this.pos.y)
text += '\npos = ' + this.pos;
if (this.velocity.x || this.velocity.y)
text += '\nvelocity = ' + this.velocity;
if (this.size.x || this.size.y)
text += '\nsize = ' + this.size;
if (this.angle)
text += '\nangle = ' + this.angle.toFixed(3);
if (this.color)
text += '\ncolor = ' + this.color;
return text;
}
}
/** Render debug info for this object */
renderDebugInfo()
{
if (debug)
{
// show object info for debugging
const size = vec2(max(this.size.x, .2), max(this.size.y, .2));
const color1 = rgb(this.collideTiles?1:0, this.collideSolidObjects?1:0, this.isSolid?1:0, this.parent?.2:.5);
const color2 = this.parent ? rgb(1,1,1,.5) : rgb(0,0,0,.8);
drawRect(this.pos, size, color1, this.angle, false);
drawRect(this.pos, size.scale(.8), color2, this.angle, false);
this.parent && drawLine(this.pos, this.parent.pos, .1, rgb(0,0,1,.5), false);
}
}
}
/**
* LittleJS Drawing System
* - Hybrid system with both Canvas2D and WebGL available
* - Super fast tile sheet rendering with WebGL
* - Can apply rotation, mirror, color and additive color
* - Font rendering system with built in engine font
* - Many useful utility functions
*
* LittleJS uses a hybrid rendering solution with the best of both Canvas2D and WebGL.
* There are 3 canvas/contexts available to draw to...
* mainCanvas - 2D background canvas, non WebGL stuff like tile layers are drawn here.
* glCanvas - Used by the accelerated WebGL batch rendering system.
* overlayCanvas - Another 2D canvas that appears on top of the other 2 canvases.
*
* The WebGL rendering system is very fast with some caveats...
* - Switching blend modes (additive) or textures causes another draw call which is expensive in excess
* - Group additive rendering together using renderOrder to mitigate this issue
*
* The LittleJS rendering solution is intentionally simple, feel free to adjust it for your needs!
* @namespace Draw
*/
/** The primary 2D canvas visible to the user
* @type {HTMLCanvasElement}
* @memberof Draw */
let mainCanvas;
/** 2d context for mainCanvas
* @type {CanvasRenderingContext2D}
* @memberof Draw */
let mainContext;
/** A canvas that appears on top of everything the same size as mainCanvas
* @type {HTMLCanvasElement}
* @memberof Draw */
let overlayCanvas;
/** 2d context for overlayCanvas
* @type {CanvasRenderingContext2D}
* @memberof Draw */
let overlayContext;
/** The size of the main canvas (and other secondary canvases)
* @type {Vector2}
* @memberof Draw */
let mainCanvasSize = vec2();
/** Array containing texture info for batch rendering system
* @type {Array<TextureInfo>}
* @memberof Draw */
let textureInfos = [];
// Keep track of how many draw calls there were each frame for debugging
let drawCount;
///////////////////////////////////////////////////////////////////////////////
/**
* Create a tile info object using a grid based system
* - This can take vecs or floats for easier use and conversion
* - If an index is passed in, the tile size and index will determine the position
* @param {Vector2|number} [pos=0] - Index of tile in sheet
* @param {Vector2|number} [size=tileSizeDefault] - Size of tile in pixels
* @param {number} [textureIndex] - Texture index to use
* @param {number} [padding] - How many pixels padding around tiles
* @return {TileInfo}
* @example
* tile(2) // a tile at index 2 using the default tile size of 16
* tile(5, 8) // a tile at index 5 using a tile size of 8
* tile(1, 16, 3) // a tile at index 1 of size 16 on texture 3
* tile(vec2(4,8), vec2(30,10)) // a tile at index (4,8) with a size of (30,10)
* @memberof Draw
*/
function tile(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
{
if (headlessMode)
return new TileInfo;
// if size is a number, make it a vector
if (typeof size === 'number')
{
ASSERT(size > 0);
size = vec2(size);
}
// use pos as a tile index
const textureInfo = textureInfos[textureIndex];
ASSERT(!!textureInfo, 'Texture not loaded');
const sizePadded = size.add(vec2(padding*2));
if (typeof pos === 'number')
{
const cols = textureInfo.size.x / sizePadded.x |0;
pos = cols>0 ? vec2(pos%cols, pos/cols|0) : vec2();
}
pos = vec2(pos.x*sizePadded.x+padding, pos.y*sizePadded.y+padding);
// return a tile info object
return new TileInfo(pos, size, textureIndex, padding);
}
/**
* Tile Info - Stores info about how to draw a tile
*/
class TileInfo
{
/** Create a tile info object
* @param {Vector2} [pos=(0,0)] - Top left corner of tile in pixels
* @param {Vector2} [size=tileSizeDefault] - Size of tile in pixels
* @param {number} [textureIndex] - Texture index to use
* @param {number} [padding] - How many pixels padding around tiles
*/
constructor(pos=vec2(), size=tileSizeDefault, textureIndex=0, padding=0)
{
/** @property {Vector2} - Top left corner of tile in pixels */
this.pos = pos.copy();
/** @property {Vector2} - Size of tile in pixels */
this.size = size.copy();
/** @property {number} - Texture index to use */
this.textureIndex = textureIndex;
/** @property {number} - How many pixels padding around tiles */
this.padding = padding;
}
/** Returns a copy of this tile offset by a vector
* @param {Vector2} offset - Offset to apply in pixels
* @return {TileInfo}
*/
offset(offset)
{ return new TileInfo(this.pos.add(offset), this.size, this.textureIndex); }
/** Returns a copy of this tile offset by a number of animation frames
* @param {number} frame - Offset to apply in animation frames
* @return {TileInfo}
*/
frame(frame)
{
ASSERT(typeof frame == 'number');
return this.offset(vec2(frame*(this.size.x+this.padding*2), 0));
}
/** Returns the texture info for this tile
* @return {TextureInfo}
*/
getTextureInfo()
{ return textureInfos[this.textureIndex]; }
}
/** Texture Info - Stores info about each texture */
class TextureInfo
{
/**
* Create a TextureInfo, called automatically by the engine
* @param {HTMLImageElement} image
*/
constructor(image)
{
/** @property {HTMLImageElement} - image source */
this.image = image;
/** @property {Vector2} - size of the image */
this.size = vec2(image.width, image.height);
/** @property {WebGLTexture} - webgl texture */
this.glTexture = glEnable && glCreateTexture(image);
}
}
///////////////////////////////////////////////////////////////////////////////
/** Convert from screen to world space coordinates
* @param {Vector2} screenPos
* @return {Vector2}
* @memberof Draw */
function screenToWorld(screenPos)
{
return new Vector2
(
(screenPos.x - mainCanvasSize.x/2 + .5) / cameraScale + cameraPos.x,
(screenPos.y - mainCanvasSize.y/2 + .5) / -cameraScale + cameraPos.y
);
}
/** Convert from world to screen space coordinates
* @param {Vector2} worldPos
* @return {Vector2}
* @memberof Draw */
function worldToScreen(worldPos)
{
return new Vector2
(
(worldPos.x - cameraPos.x) * cameraScale + mainCanvasSize.x/2 - .5,
(worldPos.y - cameraPos.y) * -cameraScale + mainCanvasSize.y/2 - .5
);
}
/** Get the camera's visible area in world space
* @return {Vector2}
* @memberof Draw */
function getCameraSize() { return mainCanvasSize.scale(1/cameraScale); }
/** Draw textured tile centered in world space, with color applied if using WebGL
* @param {Vector2} pos - Center of the tile in world space
* @param {Vector2} [size=(1,1)] - Size of the tile in world space
* @param {TileInfo}[tileInfo] - Tile info to use, untextured if undefined
* @param {Color} [color=(1,1,1,1)] - Color to modulate with
* @param {number} [angle] - Angle to rotate by
* @param {boolean} [mirror] - If true image is flipped along the Y axis
* @param {Color} [additiveColor=(0,0,0,0)] - Additive color to be applied
* @param {boolean} [useWebGL=glEnable] - Use accelerated WebGL rendering
* @param {boolean} [screenSpace=false] - If true the pos and size are in screen space
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context] - Canvas 2D context to draw to
* @memberof Draw */
function drawTile(pos, size=vec2(1), tileInfo, color=new Color,
angle=0, mirror, additiveColor=new Color(0,0,0,0), useWebGL=glEnable, screenSpace, context)
{
ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
ASSERT(typeof tileInfo !== 'number' || !tileInfo,
'this is an old style calls, to fix replace it with tile(tileIndex, tileSize)');
ASSERT(isVector2(pos) && isVector2(size));
ASSERT(isColor(color) && isColor(additiveColor));
const textureInfo = tileInfo && tileInfo.getTextureInfo();
if (useWebGL)
{
if (screenSpace)
{
// convert to world space
pos = screenToWorld(pos);
size = size.scale(1/cameraScale);
}
if (textureInfo)
{
// calculate uvs and render
const sizeInverse = vec2(1).divide(textureInfo.size);
const x = tileInfo.pos.x * sizeInverse.x;
const y = tileInfo.pos.y * sizeInverse.y;
const w = tileInfo.size.x * sizeInverse.x;
const h = tileInfo.size.y * sizeInverse.y;
const tileImageFixBleed = sizeInverse.scale(tileFixBleedScale);
glSetTexture(textureInfo.glTexture);
glDraw(pos.x, pos.y, mirror ? -size.x : size.x, size.y, angle,
x + tileImageFixBleed.x, y + tileImageFixBleed.y,
x - tileImageFixBleed.x + w, y - tileImageFixBleed.y + h,
color.rgbaInt(), additiveColor.rgbaInt());
}
else
{
// if no tile info, force untextured
glDraw(pos.x, pos.y, size.x, size.y, angle, 0, 0, 0, 0, 0, color.rgbaInt());
}
}
else
{
// normal canvas 2D rendering method (slower)
showWatermark && ++drawCount;
size = vec2(size.x, -size.y); // fix upside down sprites
drawCanvas2D(pos, size, angle, mirror, (context)=>
{
if (textureInfo)
{
// calculate uvs and render
const x = tileInfo.pos.x + tileFixBleedScale;
const y = tileInfo.pos.y + tileFixBleedScale;
const w = tileInfo.size.x - 2*tileFixBleedScale;
const h = tileInfo.size.y - 2*tileFixBleedScale;
context.globalAlpha = color.a; // only alpha is supported
context.drawImage(textureInfo.image, x, y, w, h, -.5, -.5, 1, 1);
context.globalAlpha = 1; // set back to full alpha
}
else
{
// if no tile info, force untextured
context.fillStyle = color.toString();
context.fillRect(-.5, -.5, 1, 1);
}
}, screenSpace, context);
}
}
/** Draw colored rect centered on pos
* @param {Vector2} pos
* @param {Vector2} [size=(1,1)]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [angle]
* @param {boolean} [useWebGL=glEnable]
* @param {boolean} [screenSpace=false]
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
* @memberof Draw */
function drawRect(pos, size, color, angle, useWebGL, screenSpace, context)
{
drawTile(pos, size, undefined, color, angle, false, undefined, useWebGL, screenSpace, context);
}
/** Draw colored line between two points
* @param {Vector2} posA
* @param {Vector2} posB
* @param {number} [thickness]
* @param {Color} [color=(1,1,1,1)]
* @param {boolean} [useWebGL=glEnable]
* @param {boolean} [screenSpace=false]
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context]
* @memberof Draw */
function drawLine(posA, posB, thickness=.1, color, useWebGL, screenSpace, context)
{
const halfDelta = vec2((posB.x - posA.x)/2, (posB.y - posA.y)/2);
const size = vec2(thickness, halfDelta.length()*2);
drawRect(posA.add(halfDelta), size, color, halfDelta.angle(), useWebGL, screenSpace, context);
}
/** Draw colored polygon using passed in points
* @param {Array<Vector2>} points - Array of Vector2 points
* @param {Color} [color=(1,1,1,1)]
* @param {number} [lineWidth=0]
* @param {Color} [lineColor=(0,0,0,1)]
* @param {boolean} [screenSpace=false]
* @param {CanvasRenderingContext2D} [context=mainContext]
* @memberof Draw */
function drawPoly(points, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
{
ASSERT(isColor(color) && isColor(lineColor));
context.fillStyle = color.toString();
context.beginPath();
for (const point of screenSpace ? points : points.map(worldToScreen))
context.lineTo(point.x, point.y);
context.closePath();
context.fill();
if (lineWidth)
{
context.strokeStyle = lineColor.toString();
context.lineWidth = screenSpace ? lineWidth : lineWidth*cameraScale;
context.stroke();
}
}
/** Draw colored ellipse using passed in point
* @param {Vector2} pos
* @param {number} [width=1]
* @param {number} [height=1]
* @param {number} [angle=0]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [lineWidth=0]
* @param {Color} [lineColor=(0,0,0,1)]
* @param {boolean} [screenSpace=false]
* @param {CanvasRenderingContext2D} [context=mainContext]
* @memberof Draw */
function drawEllipse(pos, width=1, height=1, angle=0, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
{
ASSERT(isColor(color) && isColor(lineColor));
if (!screenSpace)
{
pos = worldToScreen(pos);
width *= cameraScale;
height *= cameraScale;
lineWidth *= cameraScale;
}
context.fillStyle = color.toString();
context.beginPath();
context.ellipse(pos.x, pos.y, width, height, angle, 0, 9);
context.fill();
if (lineWidth)
{
context.strokeStyle = lineColor.toString();
context.lineWidth = lineWidth;
context.stroke();
}
}
/** Draw colored circle using passed in point
* @param {Vector2} pos
* @param {number} [radius=1]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [lineWidth=0]
* @param {Color} [lineColor=(0,0,0,1)]
* @param {boolean} [screenSpace=false]
* @param {CanvasRenderingContext2D} [context=mainContext]
* @memberof Draw */
function drawCircle(pos, radius=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), screenSpace, context=mainContext)
{ drawEllipse(pos, radius, radius, 0, color, lineWidth, lineColor, screenSpace, context); }
/** Draw directly to a 2d canvas context in world space
* @param {Vector2} pos
* @param {Vector2} size
* @param {number} angle
* @param {boolean} mirror
* @param {Function} drawFunction
* @param {boolean} [screenSpace=false]
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
* @memberof Draw */
function drawCanvas2D(pos, size, angle, mirror, drawFunction, screenSpace, context=mainContext)
{
if (!screenSpace)
{
// transform from world space to screen space
pos = worldToScreen(pos);
size = size.scale(cameraScale);
}
context.save();
context.translate(pos.x+.5, pos.y+.5);
context.rotate(angle);
context.scale(mirror ? -size.x : size.x, -size.y);
drawFunction(context);
context.restore();
}
/** Draw text on main canvas in world space
* Automatically splits new lines into rows
* @param {string} text
* @param {Vector2} pos
* @param {number} [size]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [lineWidth]
* @param {Color} [lineColor=(0,0,0,1)]
* @param {CanvasTextAlign} [textAlign='center']
* @param {string} [font=fontDefault]
* @param {number} [maxWidth]
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
* @memberof Draw */
function drawText(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth, context=mainContext)
{
drawTextScreen(text, worldToScreen(pos), size*cameraScale, color, lineWidth*cameraScale, lineColor, textAlign, font, maxWidth, context);
}
/** Draw text on overlay canvas in world space
* Automatically splits new lines into rows
* @param {string} text
* @param {Vector2} pos
* @param {number} [size]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [lineWidth]
* @param {Color} [lineColor=(0,0,0,1)]
* @param {CanvasTextAlign} [textAlign='center']
* @param {string} [font=fontDefault]
* @param {number} [maxWidth]
* @memberof Draw */
function drawTextOverlay(text, pos, size=1, color, lineWidth=0, lineColor, textAlign, font, maxWidth)
{
drawText(text, pos, size, color, lineWidth, lineColor, textAlign, font, maxWidth, overlayContext);
}
/** Draw text on overlay canvas in screen space
* Automatically splits new lines into rows
* @param {string} text
* @param {Vector2} pos
* @param {number} [size]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [lineWidth]
* @param {Color} [lineColor=(0,0,0,1)]
* @param {CanvasTextAlign} [textAlign]
* @param {string} [font=fontDefault]
* @param {number} [maxWidth]
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext]
* @memberof Draw */
function drawTextScreen(text, pos, size=1, color=new Color, lineWidth=0, lineColor=new Color(0,0,0), textAlign='center', font=fontDefault, maxWidth=undefined, context=overlayContext)
{
context.fillStyle = color.toString();
context.lineWidth = lineWidth;
context.strokeStyle = lineColor.toString();
context.textAlign = textAlign;
context.font = size + 'px '+ font;
context.textBaseline = 'middle';
context.lineJoin = 'round';
pos = pos.copy();
const lines = (text+'').split('\n');
pos.y -= (lines.length-1) * size/2; // center text vertically
lines.forEach(line=>
{
lineWidth && context.strokeText(line, pos.x, pos.y, maxWidth);
context.fillText(line, pos.x, pos.y, maxWidth);
pos.y += size;
});
}
/** Enable normal or additive blend mode
* @param {boolean} [additive]
* @param {boolean} [useWebGL=glEnable]
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=mainContext]
* @memberof Draw */
function setBlendMode(additive, useWebGL=glEnable, context)
{
ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');
if (useWebGL)
glAdditive = additive;
else
{
if (!context)
context = mainContext;
context.globalCompositeOperation = additive ? 'lighter' : 'source-over';
}
}
/** Combines all LittleJS canvases onto the main canvas and clears them
* This is necessary for things like saving a screenshot
* @memberof Draw */
function combineCanvases()
{
// combine canvases
glCopyToContext(mainContext, true);
mainContext.drawImage(overlayCanvas, 0, 0);
// clear canvases
glClearCanvas();
overlayCanvas.width |= 0;
}
///////////////////////////////////////////////////////////////////////////////
let engineFontImage;
/**
* Font Image Object - Draw text on a 2D canvas by using characters in an image
* - 96 characters (from space to tilde) are stored in an image
* - Uses a default 8x8 font if none is supplied
* - You can also use fonts from the main tile sheet
* @example
* // use built in font
* const font = new FontImage;
*
* // draw text
* font.drawTextScreen("LittleJS\nHello World!", vec2(200, 50));
*/
class FontImage
{
/** Create an image font
* @param {HTMLImageElement} [image] - Image for the font, if undefined default font is used
* @param {Vector2} [tileSize=(8,8)] - Size of the font source tiles
* @param {Vector2} [paddingSize=(0,1)] - How much extra space to add between characters
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} [context=overlayContext] - context to draw to
*/
constructor(image, tileSize=vec2(8), paddingSize=vec2(0,1), context=overlayContext)
{
// load default font image
if (!engineFontImage)
(engineFontImage = new Image).src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAAYAQAAAAA9+x6JAAAAAnRSTlMAAHaTzTgAAAGiSURBVHjaZZABhxxBEIUf6ECLBdFY+Q0PMNgf0yCgsSAGZcT9sgIPtBWwIA5wgAPEoHUyJeeSlW+gjK+fegWwtROWpVQEyWh2npdpBmTUFVhb29RINgLIukoXr5LIAvYQ5ve+1FqWEMqNKTX3FAJHyQDRZvmKWubAACcv5z5Gtg2oyCWE+Yk/8JZQX1jTTCpKAFGIgza+dJCNBF2UskRlsgwitHbSV0QLgt9sTPtsRlvJjEr8C/FARWA2bJ/TtJ7lko34dNDn6usJUMzuErP89UUBJbWeozrwLLncXczd508deAjLWipLO4Q5XGPcJvPu92cNDaN0P5G1FL0nSOzddZOrJ6rNhbXGmeDvO3TF7DeJWl4bvaYQTNHCTeuqKZmbjHaSOFes+IX/+IhHrnAkXOAsfn24EM68XieIECoccD4KZLk/odiwzeo2rovYdhvb2HYFgyznJyDpYJdYOmfXgVdJTaUi4xA2uWYNYec9BLeqdl9EsoTw582mSFDX2DxVLbNt9U3YYoeatBad1c2Tj8t2akrjaIGJNywKB/7h75/gN3vCMSaadIUTAAAAAElFTkSuQmCC';
this.image = image || engineFontImage;
this.tileSize = tileSize;
this.paddingSize = paddingSize;
this.context = context;
}
/** Draw text in world space using the image font
* @param {string} text
* @param {Vector2} pos
* @param {number} [scale=.25]
* @param {boolean} [center]
*/
drawText(text, pos, scale=1, center)
{
this.drawTextScreen(text, worldToScreen(pos).floor(), scale*cameraScale|0, center);
}
/** Draw text in screen space using the image font
* @param {string} text
* @param {Vector2} pos
* @param {number} [scale]
* @param {boolean} [center]
*/
drawTextScreen(text, pos, scale=4, center)
{
const context = this.context;
context.save();
const size = this.tileSize;
const drawSize = size.add(this.paddingSize).scale(scale);
const cols = this.image.width / this.tileSize.x |0;
(text+'').split('\n').forEach((line, i)=>
{
const centerOffset = center ? line.length * size.x * scale / 2 |0 : 0;
for(let j=line.length; j--;)
{
// draw each character
let charCode = line[j].charCodeAt(0);
if (charCode < 32 || charCode > 127)
charCode = 127; // unknown character
// get the character source location and draw it
const tile = charCode - 32;
const x = tile % cols;
const y = tile / cols |0;
const drawPos = pos.add(vec2(j,i).multiply(drawSize));
context.drawImage(this.image, x * size.x, y * size.y, size.x, size.y,
drawPos.x - centerOffset, drawPos.y, size.x * scale, size.y * scale);
}
});
context.restore();
}
}
///////////////////////////////////////////////////////////////////////////////
// Display functions
/** Returns true if fullscreen mode is active
* @return {boolean}
* @memberof Draw */
function isFullscreen() { return !!document.fullscreenElement; }
/** Toggle fullscreen mode
* @memberof Draw */
function toggleFullscreen()
{
const rootElement = mainCanvas.parentElement;
if (isFullscreen())
{
if (document.exitFullscreen)
document.exitFullscreen();
}
else if (rootElement.requestFullscreen)
rootElement.requestFullscreen();
}
/** Set the cursor style
* @param {string} cursorStyle - CSS cursor style (auto, none, crosshair, etc)
* @memberof Draw */
function setCursor(cursorStyle = 'auto')
{
const rootElement = mainCanvas.parentElement;
rootElement.style.cursor = cursorStyle;
}
/**
* LittleJS Input System
* - Tracks keyboard down, pressed, and released
* - Tracks mouse buttons, position, and wheel
* - Tracks multiple analog gamepads
* - Touch input is handled as mouse input
* - Virtual gamepad for touch devices
* @namespace Input
*/
/** Returns true if device key is down
* @param {string|number} key
* @param {number} [device]
* @return {boolean}
* @memberof Input */
function keyIsDown(key, device=0)
{
ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
return inputData[device] && !!(inputData[device][key] & 1);
}
/** Returns true if device key was pressed this frame
* @param {string|number} key
* @param {number} [device]
* @return {boolean}
* @memberof Input */
function keyWasPressed(key, device=0)
{
ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
return inputData[device] && !!(inputData[device][key] & 2);
}
/** Returns true if device key was released this frame
* @param {string|number} key
* @param {number} [device]
* @return {boolean}
* @memberof Input */
function keyWasReleased(key, device=0)
{
ASSERT(device > 0 || typeof key !== 'number' || key < 3, 'use code string for keyboard');
return inputData[device] && !!(inputData[device][key] & 4);
}
/** Returns input vector from arrow keys or WASD if enabled
* @return {Vector2}
* @memberof Input */
function keyDirection(up='ArrowUp', down='ArrowDown', left='ArrowLeft', right='ArrowRight')
{
const k = (key)=> keyIsDown(key) ? 1 : 0;
return vec2(k(right) - k(left), k(up) - k(down));
}
/** Clears all input
* @memberof Input */
function clearInput() { inputData = [[]]; touchGamepadButtons = []; }
/** Returns true if mouse button is down
* @function
* @param {number} button
* @return {boolean}
* @memberof Input */
const mouseIsDown = keyIsDown;
/** Returns true if mouse button was pressed
* @function
* @param {number} button
* @return {boolean}
* @memberof Input */
const mouseWasPressed = keyWasPressed;
/** Returns true if mouse button was released
* @function
* @param {number} button
* @return {boolean}
* @memberof Input */
const mouseWasReleased = keyWasReleased;
/** Mouse pos in world space
* @type {Vector2}
* @memberof Input */
let mousePos = vec2();
/** Mouse pos in screen space
* @type {Vector2}
* @memberof Input */
let mousePosScreen = vec2();
/** Mouse wheel delta this frame
* @type {number}
* @memberof Input */
let mouseWheel = 0;
/** Returns true if user is using gamepad (has more recently pressed a gamepad button)
* @type {boolean}
* @memberof Input */
let isUsingGamepad = false;
/** Prevents input continuing to the default browser handling (false by default)
* @type {boolean}
* @memberof Input */
let preventDefaultInput = false;
/** Returns true if gamepad button is down
* @param {number} button
* @param {number} [gamepad]
* @return {boolean}
* @memberof Input */
function gamepadIsDown(button, gamepad=0)
{ return keyIsDown(button, gamepad+1); }
/** Returns true if gamepad button was pressed
* @param {number} button
* @param {number} [gamepad]
* @return {boolean}
* @memberof Input */
function gamepadWasPressed(button, gamepad=0)
{ return keyWasPressed(button, gamepad+1); }
/** Returns true if gamepad button was released
* @param {number} button
* @param {number} [gamepad]
* @return {boolean}
* @memberof Input */
function gamepadWasReleased(button, gamepad=0)
{ return keyWasReleased(button, gamepad+1); }
/** Returns gamepad stick value
* @param {number} stick
* @param {number} [gamepad]
* @return {Vector2}
* @memberof Input */
function gamepadStick(stick, gamepad=0)
{ return gamepadStickData[gamepad] ? gamepadStickData[gamepad][stick] || vec2() : vec2(); }
///////////////////////////////////////////////////////////////////////////////
// Input system functions called automatically by engine
// input is stored as a bit field for each key: 1 = isDown, 2 = wasPressed, 4 = wasReleased
// mouse and keyboard are stored together in device 0, gamepads are in devices > 0
let inputData = [[]];
function inputUpdate()
{
if (headlessMode) return;
// clear input when lost focus (prevent stuck keys)
if(!(touchInputEnable && isTouchDevice) && !document.hasFocus())
clearInput();
// update mouse world space position
mousePos = screenToWorld(mousePosScreen);
// update gamepads if enabled
gamepadsUpdate();
}
function inputUpdatePost()
{
if (headlessMode) return;
// clear input to prepare for next frame
for (const deviceInputData of inputData)
for (const i in deviceInputData)
deviceInputData[i] &= 1;
mouseWheel = 0;
}
function inputInit()
{
if (headlessMode) return;
onkeydown = (e)=>
{
if (!e.repeat)
{
isUsingGamepad = false;
inputData[0][e.code] = 3;
if (inputWASDEmulateDirection)
inputData[0][remapKey(e.code)] = 3;
}
preventDefaultInput && e.preventDefault();
}
onkeyup = (e)=>
{
inputData[0][e.code] = 4;
if (inputWASDEmulateDirection)
inputData[0][remapKey(e.code)] = 4;
}
// handle remapping wasd keys to directions
function remapKey(c)
{
return inputWASDEmulateDirection ?
c == 'KeyW' ? 'ArrowUp' :
c == 'KeyS' ? 'ArrowDown' :
c == 'KeyA' ? 'ArrowLeft' :
c == 'KeyD' ? 'ArrowRight' : c : c;
}
// mouse event handlers
onmousedown = (e)=>
{
// fix stalled audio requiring user interaction
if (soundEnable && !headlessMode && audioContext && audioContext.state != 'running')
audioContext.resume();
isUsingGamepad = false;
inputData[0][e.button] = 3;
mousePosScreen = mouseEventToScreen(e);
e.button && e.preventDefault();
}
onmouseup = (e)=> inputData[0][e.button] = inputData[0][e.button] & 2 | 4;
onmousemove = (e)=> mousePosScreen = mouseEventToScreen(e);
onwheel = (e)=> mouseWheel = e.ctrlKey ? 0 : sign(e.deltaY);
oncontextmenu = (e)=> false; // prevent right click menu
onblur = (e) => clearInput(); // reset input when focus is lost
// init touch input
if (isTouchDevice && touchInputEnable)
touchInputInit();
}
// convert a mouse or touch event position to screen space
function mouseEventToScreen(mousePos)
{
const rect = mainCanvas.getBoundingClientRect();
const px = percent(mousePos.x, rect.left, rect.right);
const py = percent(mousePos.y, rect.top, rect.bottom);
return vec2(px*mainCanvas.width, py*mainCanvas.height);
}
///////////////////////////////////////////////////////////////////////////////
// Gamepad input
// gamepad internal variables
const gamepadStickData = [];
// gamepads are updated by engine every frame automatically
function gamepadsUpdate()
{
const applyDeadZones = (v)=>
{
const min=.3, max=.8;
const deadZone = (v)=>
v > min ? percent( v, min, max) :
v < -min ? -percent(-v, min, max) : 0;
return vec2(deadZone(v.x), deadZone(-v.y)).clampLength();
}
// update touch gamepad if enabled
if (touchGamepadEnable && isTouchDevice)
{
ASSERT(touchGamepadButtons, 'set touchGamepadEnable before calling init!');
if (touchGamepadTimer.isSet())
{
// read virtual analog stick
const sticks = gamepadStickData[0] || (gamepadStickData[0] = []);
sticks[0] = vec2();
if (touchGamepadAnalog)
sticks[0] = applyDeadZones(touchGamepadStick);
else if (touchGamepadStick.lengthSquared() > .3)
{
// convert to 8 way dpad
sticks[0].x = Math.round(touchGamepadStick.x);
sticks[0].y = -Math.round(touchGamepadStick.y);
sticks[0] = sticks[0].clampLength();
}
// read virtual gamepad buttons
const data = inputData[1] || (inputData[1] = []);
for (let i=10; i--;)
{
const j = i == 3 ? 2 : i == 2 ? 3 : i; // fix button locations
const wasDown = gamepadIsDown(j,0);
data[j] = touchGamepadButtons[i] ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
}
}
}
// return if gamepads are disabled or not supported
if (!gamepadsEnable || !navigator || !navigator.getGamepads)
return;
// only poll gamepads when focused or in debug mode
if (!debug && !document.hasFocus())
return;
// poll gamepads
const gamepads = navigator.getGamepads();
for (let i = gamepads.length; i--;)
{
// get or create gamepad data
const gamepad = gamepads[i];
const data = inputData[i+1] || (inputData[i+1] = []);
const sticks = gamepadStickData[i] || (gamepadStickData[i] = []);
if (gamepad)
{
// read analog sticks
for (let j = 0; j < gamepad.axes.length-1; j+=2)
sticks[j>>1] = applyDeadZones(vec2(gamepad.axes[j],gamepad.axes[j+1]));
// read buttons
for (let j = gamepad.buttons.length; j--;)
{
const button = gamepad.buttons[j];
const wasDown = gamepadIsDown(j,i);
data[j] = button.pressed ? wasDown ? 1 : 3 : wasDown ? 4 : 0;
isUsingGamepad ||= !i && button.pressed;
}
if (gamepadDirectionEmulateStick)
{
// copy dpad to left analog stick when pressed
const dpad = vec2(
(gamepadIsDown(15,i)&&1) - (gamepadIsDown(14,i)&&1),
(gamepadIsDown(12,i)&&1) - (gamepadIsDown(13,i)&&1));
if (dpad.lengthSquared())
sticks[0] = dpad.clampLength();
}
// disable touch gamepad if using real gamepad
touchGamepadEnable && isUsingGamepad && touchGamepadTimer.unset();
}
}
}
///////////////////////////////////////////////////////////////////////////////
/** Pulse the vibration hardware if it exists
* @param {number|Array} [pattern] - single value in ms or vibration interval array
* @memberof Input */
function vibrate(pattern=100)
{ vibrateEnable && !headlessMode && navigator && navigator.vibrate && navigator.vibrate(pattern); }
/** Cancel any ongoing vibration
* @memberof Input */
function vibrateStop() { vibrate(0); }
///////////////////////////////////////////////////////////////////////////////
// Touch input & virtual on screen gamepad
/** True if a touch device has been detected
* @memberof Input */
const isTouchDevice = !headlessMode && window.ontouchstart !== undefined;
// touch gamepad internal variables
let touchGamepadTimer = new Timer, touchGamepadButtons, touchGamepadStick;
// enable touch input mouse passthrough
function touchInputInit()
{
// add non passive touch event listeners
let handleTouch = handleTouchDefault;
if (touchGamepadEnable)
{
// touch input internal variables
handleTouch = handleTouchGamepad;
touchGamepadButtons = [];
touchGamepadStick = vec2();
}
document.addEventListener('touchstart', (e) => handleTouch(e), { passive: false });
document.addEventListener('touchmove', (e) => handleTouch(e), { passive: false });
document.addEventListener('touchend', (e) => handleTouch(e), { passive: false });
// override mouse events
onmousedown = onmouseup = ()=> 0;
// handle all touch events the same way
let wasTouching;
function handleTouchDefault(e)
{
// fix stalled audio requiring user interaction
if (soundEnable && !headlessMode && audioContext && audioContext.state != 'running')
audioContext.resume();
// check if touching and pass to mouse events
const touching = e.touches.length;
const button = 0; // all touches are left mouse button
if (touching)
{
// set event pos and pass it along
const p = vec2(e.touches[0].clientX, e.touches[0].clientY);
mousePosScreen = mouseEventToScreen(p);
wasTouching ? isUsingGamepad = touchGamepadEnable : inputData[0][button] = 3;
}
else if (wasTouching)
inputData[0][button] = inputData[0][button] & 2 | 4;
// set was touching
wasTouching = touching;
// prevent default handling like copy and magnifier lens
if (document.hasFocus()) // allow document to get focus
e.preventDefault();
// must return true so the document will get focus
return true;
}
// special handling for virtual gamepad mode
function handleTouchGamepad(e)
{
// clear touch gamepad input
touchGamepadStick = vec2();
touchGamepadButtons = [];
isUsingGamepad = true;
const touching = e.touches.length;
if (touching)
{
touchGamepadTimer.set();
if (paused && !wasTouching)
{
// touch anywhere to press start when paused
touchGamepadButtons[9] = 1;
// call default touch handler so normal touch events still work
handleTouchDefault(e);
return;
}
}
// get center of left and right sides
const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
const startCenter = mainCanvasSize.scale(.5);
// check each touch point
for (const touch of e.touches)
{
const touchPos = mouseEventToScreen(vec2(touch.clientX, touch.clientY));
if (touchPos.distance(stickCenter) < touchGamepadSize)
{
// virtual analog stick
touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
}
else if (touchPos.distance(buttonCenter) < touchGamepadSize)
{
// virtual face buttons
const button = touchPos.subtract(buttonCenter).direction();
touchGamepadButtons[button] = 1;
}
else if (touchPos.distance(startCenter) < touchGamepadSize && !wasTouching)
{
// virtual start button in center
touchGamepadButtons[9] = 1;
}
}
// call default touch handler so normal touch events still work
handleTouchDefault(e);
// must return true so the document will get focus
return true;
}
}
// render the touch gamepad, called automatically by the engine
function touchGamepadRender()
{
if (!touchInputEnable || !isTouchDevice || headlessMode) return;
if (!touchGamepadEnable || !touchGamepadTimer.isSet())
return;
// fade off when not touching or paused
const alpha = percent(touchGamepadTimer.get(), 4, 3);
if (!alpha || paused)
return;
// setup the canvas
const context = overlayContext;
context.save();
context.globalAlpha = alpha*touchGamepadAlpha;
context.strokeStyle = '#fff';
context.lineWidth = 3;
// draw left analog stick
context.fillStyle = touchGamepadStick.lengthSquared() > 0 ? '#fff' : '#000';
context.beginPath();
const leftCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
if (touchGamepadAnalog) // draw circle shaped gamepad
{
context.arc(leftCenter.x, leftCenter.y, touchGamepadSize/2, 0, 9);
context.fill();
context.stroke();
}
else // draw cross shaped gamepad
{
for(let i=10; i--;)
{
const angle = i*PI/4;
context.arc(leftCenter.x, leftCenter.y,touchGamepadSize*.6, angle + PI/8, angle + PI/8);
i%2 && context.arc(leftCenter.x, leftCenter.y, touchGamepadSize*.33, angle, angle);
i==1 && context.fill();
}
context.stroke();
}
// draw right face buttons
const rightCenter = vec2(mainCanvasSize.x-touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
for (let i=4; i--;)
{
const pos = rightCenter.add(vec2().setDirection(i, touchGamepadSize/2));
context.fillStyle = touchGamepadButtons[i] ? '#fff' : '#000';
context.beginPath();
context.arc(pos.x, pos.y, touchGamepadSize/4, 0,9);
context.fill();
context.stroke();
}
// set canvas back to normal
context.restore();
}
/**
* LittleJS Audio System
* - <a href=https://killedbyapixel.github.io/ZzFX/>ZzFX Sound Effects</a> - ZzFX Sound Effect Generator
* - <a href=https://keithclark.github.io/ZzFXM/>ZzFXM Music</a> - ZzFXM Music System
* - Caches sounds and music for fast playback
* - Can attenuate and apply stereo panning to sounds
* - Ability to play mp3, ogg, and wave files
* - Speech synthesis functions
* @namespace Audio
*/
/** Audio context used by the engine
* @type {AudioContext}
* @memberof Audio */
let audioContext = new AudioContext;
/** Master gain node for all audio to pass through
* @type {GainNode}
* @memberof Audio */
let audioGainNode;
function audioInit()
{
if (!soundEnable || headlessMode) return;
// (createGain is more widely supported then GainNode constructor)
audioGainNode = audioContext.createGain();
audioGainNode.connect(audioContext.destination);
audioGainNode.gain.value = soundVolume; // set starting value
}
///////////////////////////////////////////////////////////////////////////////
/**
* Sound Object - Stores a sound for later use and can be played positionally
*
* <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
* @example
* // create a sound
* const sound_example = new Sound([.5,.5]);
*
* // play the sound
* sound_example.play();
*/
class Sound
{
/** Create a sound object and cache the zzfx samples for later use
* @param {Array} zzfxSound - Array of zzfx parameters, ex. [.5,.5]
* @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
* @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering
*/
constructor(zzfxSound, range=soundDefaultRange, taper=soundDefaultTaper)
{
if (!soundEnable || headlessMode) return;
/** @property {number} - World space max range of sound, will not play if camera is farther away */
this.range = range;
/** @property {number} - At what percentage of range should it start tapering off */
this.taper = taper;
/** @property {number} - How much to randomize frequency each time sound plays */
this.randomness = 0;
if (zzfxSound)
{
// generate zzfx sound now for fast playback
const defaultRandomness = .05;
this.randomness = zzfxSound[1] != undefined ? zzfxSound[1] : defaultRandomness;
zzfxSound[1] = 0; // generate without randomness
this.sampleChannels = [zzfxG(...zzfxSound)];
this.sampleRate = zzfxR;
}
}
/** Play the sound
* @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
* @param {number} [volume] - How much to scale volume by (in addition to range fade)
* @param {number} [pitch] - How much to scale pitch by (also adjusted by this.randomness)
* @param {number} [randomnessScale] - How much to scale randomness
* @param {boolean} [loop] - Should the sound loop
* @return {AudioBufferSourceNode} - The audio source node
*/
play(pos, volume=1, pitch=1, randomnessScale=1, loop=false)
{
if (!soundEnable || headlessMode) return;
if (!this.sampleChannels) return;
let pan;
if (pos)
{
const range = this.range;
if (range)
{
// apply range based fade
const lengthSquared = cameraPos.distanceSquared(pos);
if (lengthSquared > range*range)
return; // out of range
// attenuate volume by distance
volume *= percent(lengthSquared**.5, range, range*this.taper);
}
// get pan from screen space coords
pan = worldToScreen(pos).x * 2/mainCanvas.width - 1;
}
// play the sound
const playbackRate = pitch + pitch * this.randomness*randomnessScale*rand(-1,1);
this.gainNode = audioContext.createGain();
this.source = playSamples(this.sampleChannels, volume, playbackRate, pan, loop, this.sampleRate, this.gainNode);
return this.source;
}
/** Set the sound volume of the most recently played instance of this sound
* @param {number} [volume] - How much to scale volume by
*/
setVolume(volume=1)
{
if (this.gainNode)
this.gainNode.gain.value = volume;
}
/** Stop the last instance of this sound that was played */
stop()
{
if (this.source)
this.source.stop();
this.source = undefined;
}
/** Get source of most recent instance of this sound that was played
* @return {AudioBufferSourceNode}
*/
getSource() { return this.source; }
/** Play the sound as a note with a semitone offset
* @param {number} semitoneOffset - How many semitones to offset pitch
* @param {Vector2} [pos] - World space position to play the sound, sound is not attenuated if null
* @param {number} [volume=1] - How much to scale volume by (in addition to range fade)
* @return {AudioBufferSourceNode} - The audio source node
*/
playNote(semitoneOffset, pos, volume)
{ return this.play(pos, volume, 2**(semitoneOffset/12), 0); }
/** Get how long this sound is in seconds
* @return {number} - How long the sound is in seconds (undefined if loading)
*/
getDuration()
{ return this.sampleChannels && this.sampleChannels[0].length / this.sampleRate; }
/** Check if sound is loading, for sounds fetched from a url
* @return {boolean} - True if sound is loading and not ready to play
*/
isLoading() { return !this.sampleChannels; }
}
/**
* Sound Wave Object - Stores a wave sound for later use and can be played positionally
* - this can be used to play wave, mp3, and ogg files
* @example
* // create a sound
* const sound_example = new SoundWave('sound.mp3');
*
* // play the sound
* sound_example.play();
*/
class SoundWave extends Sound
{
/** Create a sound object and cache the wave file for later use
* @param {string} filename - Filename of audio file to load
* @param {number} [randomness] - How much to randomize frequency each time sound plays
* @param {number} [range=soundDefaultRange] - World space max range of sound, will not play if camera is farther away
* @param {number} [taper=soundDefaultTaper] - At what percentage of range should it start tapering off
* @param {Function} [onloadCallback] - callback function to call when sound is loaded
*/
constructor(filename, randomness=0, range, taper, onloadCallback)
{
super(undefined, range, taper);
if (!soundEnable || headlessMode) return;
this.randomness = randomness;
fetch(filename)
.then(response => response.arrayBuffer())
.then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
.then(audioBuffer =>
{
this.sampleChannels = [];
for (let i = audioBuffer.numberOfChannels; i--;)
this.sampleChannels[i] = Array.from(audioBuffer.getChannelData(i));
this.sampleRate = audioBuffer.sampleRate;
}).then(() => onloadCallback && onloadCallback(this));
}
}
/** Play an mp3, ogg, or wav audio from a local file or url
* @param {string} filename - Location of sound file to play
* @param {number} [volume] - How much to scale volume by
* @param {boolean} [loop] - True if the music should loop
* @return {SoundWave} - The sound object for this file
* @memberof Audio */
function playAudioFile(filename, volume=1, loop=false)
{
if (!soundEnable || headlessMode) return;
return new SoundWave(filename,0,0,0, s=>s.play(undefined, volume, 1, 1, loop));
}
/**
* Music Object - Stores a zzfx music track for later use
*
* <a href=https://keithclark.github.io/ZzFXM/>Create music with the ZzFXM tracker.</a>
* @example
* // create some music
* const music_example = new Music(
* [
* [ // instruments
* [,0,400] // simple note
* ],
* [ // patterns
* [ // pattern 1
* [ // channel 0
* 0, -1, // instrument 0, left speaker
* 1, 0, 9, 1 // channel notes
* ],
* [ // channel 1
* 0, 1, // instrument 0, right speaker
* 0, 12, 17, -1 // channel notes
* ]
* ],
* ],
* [0, 0, 0, 0], // sequence, play pattern 0 four times
* 90 // BPM
* ]);
*
* // play the music
* music_example.play();
*/
class Music extends Sound
{
/** Create a music object and cache the zzfx music samples for later use
* @param {[Array, Array, Array, number]} zzfxMusic - Array of zzfx music parameters
*/
constructor(zzfxMusic)
{
super(undefined);
if (!soundEnable || headlessMode) return;
this.randomness = 0;
this.sampleChannels = zzfxM(...zzfxMusic);
this.sampleRate = zzfxR;
}
/** Play the music
* @param {number} [volume=1] - How much to scale volume by
* @param {boolean} [loop] - True if the music should loop
* @return {AudioBufferSourceNode} - The audio source node
*/
playMusic(volume, loop=false)
{ return super.play(undefined, volume, 1, 1, loop); }
}
/** Speak text with passed in settings
* @param {string} text - The text to speak
* @param {string} [language] - The language/accent to use (examples: en, it, ru, ja, zh)
* @param {number} [volume] - How much to scale volume by
* @param {number} [rate] - How quickly to speak
* @param {number} [pitch] - How much to change the pitch by
* @return {SpeechSynthesisUtterance} - The utterance that was spoken
* @memberof Audio */
function speak(text, language='', volume=1, rate=1, pitch=1)
{
if (!soundEnable || headlessMode) return;
if (!speechSynthesis) return;
// common languages (not supported by all browsers)
// en - english, it - italian, fr - french, de - german, es - spanish
// ja - japanese, ru - russian, zh - chinese, hi - hindi, ko - korean
// build utterance and speak
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = language;
utterance.volume = 2*volume*soundVolume;
utterance.rate = rate;
utterance.pitch = pitch;
speechSynthesis.speak(utterance);
return utterance;
}
/** Stop all queued speech
* @memberof Audio */
function speakStop() {speechSynthesis && speechSynthesis.cancel();}
/** Get frequency of a note on a musical scale
* @param {number} semitoneOffset - How many semitones away from the root note
* @param {number} [rootFrequency=220] - Frequency at semitone offset 0
* @return {number} - The frequency of the note
* @memberof Audio */
function getNoteFrequency(semitoneOffset, rootFrequency=220)
{ return rootFrequency * 2**(semitoneOffset/12); }
///////////////////////////////////////////////////////////////////////////////
/** Play cached audio samples with given settings
* @param {Array} sampleChannels - Array of arrays of samples to play (for stereo playback)
* @param {number} [volume] - How much to scale volume by
* @param {number} [rate] - The playback rate to use
* @param {number} [pan] - How much to apply stereo panning
* @param {boolean} [loop] - True if the sound should loop when it reaches the end
* @param {number} [sampleRate=44100] - Sample rate for the sound
* @param {GainNode} [gainNode] - Optional gain node for volume control while playing
* @return {AudioBufferSourceNode} - The audio node of the sound played
* @memberof Audio */
function playSamples(sampleChannels, volume=1, rate=1, pan=0, loop=false, sampleRate=zzfxR, gainNode)
{
if (!soundEnable || headlessMode) return;
// create buffer and source
const channelCount = sampleChannels.length;
const sampleLength = sampleChannels[0].length;
const buffer = audioContext.createBuffer(channelCount, sampleLength, sampleRate);
const source = audioContext.createBufferSource();
// copy samples to buffer and setup source
sampleChannels.forEach((c,i)=> buffer.getChannelData(i).set(c));
source.buffer = buffer;
source.playbackRate.value = rate;
source.loop = loop;
// create and connect gain node
gainNode = gainNode || audioContext.createGain();
gainNode.gain.value = volume;
gainNode.connect(audioGainNode);
// connect source to stereo panner and gain
const pannerNode = new StereoPannerNode(audioContext, {'pan':clamp(pan, -1, 1)});
source.connect(pannerNode).connect(gainNode);
// play the sound
if (audioContext.state != 'running')
{
// fix stalled audio and play
audioContext.resume().then(()=>source.start());
}
else
source.start();
// return sound
return source;
}
///////////////////////////////////////////////////////////////////////////////
// ZzFXMicro - Zuper Zmall Zound Zynth - v1.3.1 by Frank Force
/** Generate and play a ZzFX sound
*
* <a href=https://killedbyapixel.github.io/ZzFX/>Create sounds using the ZzFX Sound Designer.</a>
* @param {Array} zzfxSound - Array of ZzFX parameters, ex. [.5,.5]
* @return {AudioBufferSourceNode} - The audio node of the sound played
* @memberof Audio */
function zzfx(...zzfxSound) { return playSamples([zzfxG(...zzfxSound)]); }
/** Sample rate used for all ZzFX sounds
* @default 44100
* @memberof Audio */
const zzfxR = 44100;
/** Generate samples for a ZzFX sound
* @param {number} [volume] - Volume scale (percent)
* @param {number} [randomness] - How much to randomize frequency (percent Hz)
* @param {number} [frequency] - Frequency of sound (Hz)
* @param {number} [attack] - Attack time, how fast sound starts (seconds)
* @param {number} [sustain] - Sustain time, how long sound holds (seconds)
* @param {number} [release] - Release time, how fast sound fades out (seconds)
* @param {number} [shape] - Shape of the sound wave
* @param {number} [shapeCurve] - Squareness of wave (0=square, 1=normal, 2=pointy)
* @param {number} [slide] - How much to slide frequency (kHz/s)
* @param {number} [deltaSlide] - How much to change slide (kHz/s/s)
* @param {number} [pitchJump] - Frequency of pitch jump (Hz)
* @param {number} [pitchJumpTime] - Time of pitch jump (seconds)
* @param {number} [repeatTime] - Resets some parameters periodically (seconds)
* @param {number} [noise] - How much random noise to add (percent)
* @param {number} [modulation] - Frequency of modulation wave, negative flips phase (Hz)
* @param {number} [bitCrush] - Resamples at a lower frequency in (samples*100)
* @param {number} [delay] - Overlap sound with itself for reverb and flanger effects (seconds)
* @param {number} [sustainVolume] - Volume level for sustain (percent)
* @param {number} [decay] - Decay time, how long to reach sustain after attack (seconds)
* @param {number} [tremolo] - Trembling effect, rate controlled by repeat time (percent)
* @param {number} [filter] - Filter cutoff frequency, positive for HPF, negative for LPF (Hz)
* @return {Array} - Array of audio samples
* @memberof Audio
*/
function zzfxG
(
// parameters
volume = 1, randomness = .05, frequency = 220, attack = 0, sustain = 0,
release = .1, shape = 0, shapeCurve = 1, slide = 0, deltaSlide = 0,
pitchJump = 0, pitchJumpTime = 0, repeatTime = 0, noise = 0, modulation = 0,
bitCrush = 0, delay = 0, sustainVolume = 1, decay = 0, tremolo = 0, filter = 0
)
{
// LJS Note: ZZFX modded so randomness is handled by Sound class
// init parameters
let PI2 = PI*2, sampleRate = zzfxR,
startSlide = slide *= 500 * PI2 / sampleRate / sampleRate,
startFrequency = frequency *=
rand(1 + randomness, 1-randomness) * PI2 / sampleRate,
b = [], t = 0, tm = 0, i = 0, j = 1, r = 0, c = 0, s = 0, f, length,
// biquad LP/HP filter
quality = 2, w = PI2 * abs(filter) * 2 / sampleRate,
cos = Math.cos(w), alpha = Math.sin(w) / 2 / quality,
a0 = 1 + alpha, a1 = -2*cos / a0, a2 = (1 - alpha) / a0,
b0 = (1 + sign(filter) * cos) / 2 / a0,
b1 = -(sign(filter) + cos) / a0, b2 = b0,
x2 = 0, x1 = 0, y2 = 0, y1 = 0;
// scale by sample rate
attack = attack * sampleRate + 9; // minimum attack to prevent pop
decay *= sampleRate;
sustain *= sampleRate;
release *= sampleRate;
delay *= sampleRate;
deltaSlide *= 500 * PI2 / sampleRate**3;
modulation *= PI2 / sampleRate;
pitchJump *= PI2 / sampleRate;
pitchJumpTime *= sampleRate;
repeatTime = repeatTime * sampleRate | 0;
// generate waveform
for(length = attack + decay + sustain + release + delay | 0;
i < length; b[i++] = s * volume) // sample
{
if (!(++c%(bitCrush*100|0))) // bit crush
{
s = shape? shape>1? shape>2? shape>3? // wave shape
Math.sin(t**3) : // 4 noise
clamp(Math.tan(t),1,-1): // 3 tan
1-(2*t/PI2%2+2)%2: // 2 saw
1-4*abs(Math.round(t/PI2)-t/PI2): // 1 triangle
Math.sin(t); // 0 sin
s = (repeatTime ?
1 - tremolo + tremolo*Math.sin(PI2*i/repeatTime) // tremolo
: 1) *
sign(s)*(abs(s)**shapeCurve) * // curve
(i < attack ? i/attack : // attack
i < attack + decay ? // decay
1-((i-attack)/decay)*(1-sustainVolume) : // decay falloff
i < attack + decay + sustain ? // sustain
sustainVolume : // sustain volume
i < length - delay ? // release
(length - i - delay)/release * // release falloff
sustainVolume : // release volume
0); // post release
s = delay ? s/2 + (delay > i ? 0 : // delay
(i<length-delay? 1 : (length-i)/delay) * // release delay
b[i-delay|0]/2/volume) : s; // sample delay
if (filter) // apply filter
s = y1 = b2*x2 + b1*(x2=x1) + b0*(x1=s) - a2*y2 - a1*(y2=y1);
}
f = (frequency += slide += deltaSlide) *// frequency
Math.cos(modulation*tm++); // modulation
t += f + f*noise*Math.sin(i**5); // noise
if (j && ++j > pitchJumpTime) // pitch jump
{
frequency += pitchJump; // apply pitch jump
startFrequency += pitchJump; // also apply to start
j = 0; // stop pitch jump time
}
if (repeatTime && !(++r % repeatTime)) // repeat
{
frequency = startFrequency; // reset frequency
slide = startSlide; // reset slide
j = j || 1; // reset pitch jump time
}
}
return b;
}
///////////////////////////////////////////////////////////////////////////////
// ZzFX Music Renderer v2.0.3 by Keith Clark and Frank Force
/** Generate samples for a ZzFM song with given parameters
* @param {Array} instruments - Array of ZzFX sound parameters
* @param {Array} patterns - Array of pattern data
* @param {Array} sequence - Array of pattern indexes
* @param {number} [BPM] - Playback speed of the song in BPM
* @return {Array} - Left and right channel sample data
* @memberof Audio */
function zzfxM(instruments, patterns, sequence, BPM = 125)
{
let i, j, k;
let instrumentParameters;
let note;
let sample;
let patternChannel;
let notFirstBeat;
let stop;
let instrument;
let attenuation;
let outSampleOffset;
let isSequenceEnd;
let sampleOffset = 0;
let nextSampleOffset;
let sampleBuffer = [];
let leftChannelBuffer = [];
let rightChannelBuffer = [];
let channelIndex = 0;
let panning = 0;
let hasMore = 1;
let sampleCache = {};
let beatLength = zzfxR / BPM * 60 >> 2;
// for each channel in order until there are no more
for (; hasMore; channelIndex++) {
// reset current values
sampleBuffer = [hasMore = notFirstBeat = outSampleOffset = 0];
// for each pattern in sequence
sequence.forEach((patternIndex, sequenceIndex) => {
// get pattern for current channel, use empty 1 note pattern if none found
patternChannel = patterns[patternIndex][channelIndex] || [0, 0, 0];
// check if there are more channels
hasMore |= patterns[patternIndex][channelIndex]&&1;
// get next offset, use the length of first channel
nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
// for each beat in pattern, plus one extra if end of sequence
isSequenceEnd = sequenceIndex == sequence.length - 1;
for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
// <channel-note>
note = patternChannel[i];
// stop if end, different instrument or new note
stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
instrument != (patternChannel[0] || 0) || note | 0;
// fill buffer with samples for previous beat, most cpu intensive part
for (j = 0; j < beatLength && notFirstBeat;
// fade off attenuation at end of beat if stopping note, prevents clicking
j++ > beatLength - 99 && stop && attenuation < 1? attenuation += 1 / 99 : 0
) {
// copy sample to stereo buffers with panning
sample = (1 - attenuation) * sampleBuffer[sampleOffset++] / 2 || 0;
leftChannelBuffer[k] = (leftChannelBuffer[k] || 0) - sample * panning + sample;
rightChannelBuffer[k] = (rightChannelBuffer[k++] || 0) + sample * panning + sample;
}
// set up for next note
if (note) {
// set attenuation
attenuation = note % 1;
panning = patternChannel[1] || 0;
if (note |= 0) {
// get cached sample
sampleBuffer = sampleCache[
[
instrument = patternChannel[sampleOffset = 0] || 0,
note
]
] = sampleCache[[instrument, note]] || (
// add sample to cache
instrumentParameters = [...instruments[instrument]],
instrumentParameters[2] *= 2 ** ((note - 12) / 12),
// allow negative values to stop notes
note > 0 ? zzfxG(...instrumentParameters) : []
);
}
}
}
// update the sample offset
outSampleOffset = nextSampleOffset;
});
}
return [leftChannelBuffer, rightChannelBuffer];
}
/**
* LittleJS Tile Layer System
* - Caches arrays of tiles to off screen canvas for fast rendering
* - Unlimited numbers of layers, allocates canvases as needed
* - Interfaces with EngineObject for collision
* - Collision layer is separate from visible layers
* - It is recommended to have a visible layer that matches the collision
* - Tile layers can be drawn to using their context with canvas2d
* - Drawn directly to the main canvas without using WebGL
* @namespace TileCollision
*/
/** The tile collision layer grid, use setTileCollisionData and getTileCollisionData to access
* @type {Array<number>}
* @memberof TileCollision */
let tileCollision = [];
/** Size of the tile collision layer 2d grid
* @type {Vector2}
* @memberof TileCollision */
let tileCollisionSize = vec2();
/** Clear and initialize tile collision
* @param {Vector2} size - width and height of tile collision 2d grid
* @memberof TileCollision */
function initTileCollision(size)
{
tileCollisionSize = size;
tileCollision = [];
for (let i=tileCollision.length = tileCollisionSize.area(); i--;)
tileCollision[i] = 0;
}
/** Set tile collision data for a given cell in the grid
* @param {Vector2} pos
* @param {number} [data]
* @memberof TileCollision */
function setTileCollisionData(pos, data=0)
{
pos.arrayCheck(tileCollisionSize) && (tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] = data);
}
/** Get tile collision data for a given cell in the grid
* @param {Vector2} pos
* @return {number}
* @memberof TileCollision */
function getTileCollisionData(pos)
{
return pos.arrayCheck(tileCollisionSize) ? tileCollision[(pos.y|0)*tileCollisionSize.x+pos.x|0] : 0;
}
/** Check if collision with another object should occur
* @param {Vector2} pos
* @param {Vector2} [size=(0,0)]
* @param {EngineObject} [object]
* @return {boolean}
* @memberof TileCollision */
function tileCollisionTest(pos, size=vec2(), object)
{
const minX = max(pos.x - size.x/2|0, 0);
const minY = max(pos.y - size.y/2|0, 0);
const maxX = min(pos.x + size.x/2, tileCollisionSize.x);
const maxY = min(pos.y + size.y/2, tileCollisionSize.y);
for (let y = minY; y < maxY; ++y)
for (let x = minX; x < maxX; ++x)
{
const tileData = tileCollision[y*tileCollisionSize.x+x];
if (tileData && (!object || object.collideWithTile(tileData, vec2(x, y))))
return true;
}
return false;
}
/** Return the center of first tile hit, undefined if nothing was hit.
* This does not return the exact intersection, but the center of the tile hit.
* @param {Vector2} posStart
* @param {Vector2} posEnd
* @param {EngineObject} [object]
* @return {Vector2}
* @memberof TileCollision */
function tileCollisionRaycast(posStart, posEnd, object)
{
// test if a ray collides with tiles from start to end
// todo: a way to get the exact hit point, it must still be inside the hit tile
const delta = posEnd.subtract(posStart);
const totalLength = delta.length();
const normalizedDelta = delta.normalize();
const unit = vec2(abs(1/normalizedDelta.x), abs(1/normalizedDelta.y));
const flooredPosStart = posStart.floor();
// setup iteration variables
let pos = flooredPosStart;
let xi = unit.x * (delta.x < 0 ? posStart.x - pos.x : pos.x - posStart.x + 1);
let yi = unit.y * (delta.y < 0 ? posStart.y - pos.y : pos.y - posStart.y + 1);
while (true)
{
// check for tile collision
const tileData = getTileCollisionData(pos);
if (tileData && (!object || object.collideWithTile(tileData, pos)))
{
debugRaycast && debugLine(posStart, posEnd, '#f00', .02);
debugRaycast && debugPoint(pos.add(vec2(.5)), '#ff0');
return pos.add(vec2(.5));
}
// check if past the end
if (xi > totalLength && yi > totalLength)
break;
// get coordinates of the next tile to check
if (xi > yi)
pos.y += sign(delta.y), yi += unit.y;
else
pos.x += sign(delta.x), xi += unit.x;
}
debugRaycast && debugLine(posStart, posEnd, '#00f', .02);
}
///////////////////////////////////////////////////////////////////////////////
// Tile Layer Rendering System
/**
* Tile layer data object stores info about how to render a tile
* @example
* // create tile layer data with tile index 0 and random orientation and color
* const tileIndex = 0;
* const direction = randInt(4)
* const mirror = randInt(2);
* const color = randColor();
* const data = new TileLayerData(tileIndex, direction, mirror, color);
*/
class TileLayerData
{
/** Create a tile layer data object, one for each tile in a TileLayer
* @param {number} [tile] - The tile to use, untextured if undefined
* @param {number} [direction] - Integer direction of tile, in 90 degree increments
* @param {boolean} [mirror] - If the tile should be mirrored along the x axis
* @param {Color} [color] - Color of the tile */
constructor(tile, direction=0, mirror=false, color=new Color)
{
/** @property {number} - The tile to use, untextured if undefined */
this.tile = tile;
/** @property {number} - Integer direction of tile, in 90 degree increments */
this.direction = direction;
/** @property {boolean} - If the tile should be mirrored along the x axis */
this.mirror = mirror;
/** @property {Color} - Color of the tile */
this.color = color;
}
/** Set this tile to clear, it will not be rendered */
clear() { this.tile = this.direction = 0; this.mirror = false; this.color = new Color; }
}
/**
* Tile Layer - cached rendering system for tile layers
* - Each Tile layer is rendered to an off screen canvas
* - To allow dynamic modifications, layers are rendered using canvas 2d
* - Some devices like mobile phones are limited to 4k texture resolution
* - So with 16x16 tiles this limits layers to 256x256 on mobile devices
* @extends EngineObject
* @example
* // create tile collision and visible tile layer
* initTileCollision(vec2(200,100));
* const tileLayer = new TileLayer();
*/
class TileLayer extends EngineObject
{
/** Create a tile layer object
* @param {Vector2} [position=(0,0)] - World space position
* @param {Vector2} [size=tileCollisionSize] - World space size
* @param {TileInfo} [tileInfo] - Tile info for layer
* @param {Vector2} [scale=(1,1)] - How much to scale this layer when rendered
* @param {number} [renderOrder] - Objects are sorted by renderOrder
*/
constructor(position, size=tileCollisionSize, tileInfo=tile(), scale=vec2(1), renderOrder=0)
{
super(position, size, tileInfo, 0, undefined, renderOrder);
/** @property {HTMLCanvasElement} - The canvas used by this tile layer */
this.canvas = document.createElement('canvas');
/** @property {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
this.context = this.canvas.getContext('2d');
/** @property {Vector2} - How much to scale this layer when rendered */
this.scale = scale;
/** @property {boolean} - If true this layer will render to overlay canvas and appear above all objects */
this.isOverlay = false;
// init tile data
this.data = [];
for (let j = this.size.area(); j--;)
this.data.push(new TileLayerData);
if (headlessMode)
{
// disable rendering
this.redraw = () => {};
this.render = () => {};
this.redrawStart = () => {};
this.redrawEnd = () => {};
this.drawTileData = () => {};
this.drawCanvas2D = () => {};
}
}
/** Set data at a given position in the array
* @param {Vector2} layerPos - Local position in array
* @param {TileLayerData} data - Data to set
* @param {boolean} [redraw] - Force the tile to redraw if true */
setData(layerPos, data, redraw=false)
{
if (layerPos.arrayCheck(this.size))
{
this.data[(layerPos.y|0)*this.size.x+layerPos.x|0] = data;
redraw && this.drawTileData(layerPos);
}
}
/** Get data at a given position in the array
* @param {Vector2} layerPos - Local position in array
* @return {TileLayerData} */
getData(layerPos)
{ return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0]; }
// Tile layers are not updated
update() {}
// Render the tile layer, called automatically by the engine
render()
{
ASSERT(mainContext != this.context, 'must call redrawEnd() after drawing tiles');
// flush and copy gl canvas because tile canvas does not use webgl
!glOverlay && !this.isOverlay && glCopyToContext(mainContext);
// draw the entire cached level onto the canvas
let pos = worldToScreen(this.pos.add(vec2(0,this.size.y*this.scale.y)));
// fix canvas jitter in some browsers if position is not an integer
pos = pos.floor();
(this.isOverlay ? overlayContext : mainContext).drawImage
(
this.canvas, pos.x, pos.y,
cameraScale*this.size.x*this.scale.x, cameraScale*this.size.y*this.scale.y
);
}
/** Draw all the tile data to an offscreen canvas
* - This may be slow in some browsers but only needs to be done once */
redraw()
{
this.redrawStart(true);
for (let x = this.size.x; x--;)
for (let y = this.size.y; y--;)
this.drawTileData(vec2(x,y), false);
this.redrawEnd();
}
/** Call to start the redraw process
* - This can be used to manually update small parts of the level
* @param {boolean} [clear] - Should it clear the canvas before drawing */
redrawStart(clear=false)
{
// save current render settings
/** @type {[HTMLCanvasElement, CanvasRenderingContext2D, Vector2, Vector2, number]} */
this.savedRenderSettings = [mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale];
// use webgl rendering system to render the tiles if enabled
// this works by temporally taking control of the rendering system
mainCanvas = this.canvas;
mainContext = this.context;
mainCanvasSize = this.size.multiply(this.tileInfo.size);
cameraPos = this.size.scale(.5);
cameraScale = this.tileInfo.size.x;
if (clear)
{
// clear and set size
mainCanvas.width = mainCanvasSize.x;
mainCanvas.height = mainCanvasSize.y;
}
// disable smoothing for pixel art
this.context.imageSmoothingEnabled = !tilesPixelated;
// setup gl rendering if enabled
glPreRender();
}
/** Call to end the redraw process */
redrawEnd()
{
ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
glCopyToContext(mainContext, true);
//debugSaveCanvas(this.canvas);
// set stuff back to normal
[mainCanvas, mainContext, mainCanvasSize, cameraPos, cameraScale] = this.savedRenderSettings;
}
/** Draw the tile at a given position in the tile grid
* This can be used to clear out tiles when they are destroyed
* Tiles can also be redrawn if inside a redrawStart/End block
* @param {Vector2} layerPos
* @param {boolean} [clear] - should the old tile be cleared out
*/
drawTileData(layerPos, clear=true)
{
// clear out where the tile was, for full opaque tiles this can be skipped
const s = this.tileInfo.size;
if (clear)
{
const pos = layerPos.multiply(s);
this.context.clearRect(pos.x, this.canvas.height-pos.y, s.x, -s.y);
}
// draw the tile if not undefined
const d = this.getData(layerPos);
if (d.tile != undefined)
{
ASSERT(mainContext == this.context, 'must call redrawStart() before drawing tiles');
const pos = layerPos.add(vec2(.5));
const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex, this.tileInfo.padding);
drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
}
}
/** Draw directly to the 2D canvas in world space (bypass webgl)
* @param {Vector2} pos
* @param {Vector2} size
* @param {number} angle
* @param {boolean} mirror
* @param {Function} drawFunction */
drawCanvas2D(pos, size, angle, mirror, drawFunction)
{
const context = this.context;
context.save();
pos = pos.subtract(this.pos).multiply(this.tileInfo.size);
size = size.multiply(this.tileInfo.size);
context.translate(pos.x, this.canvas.height - pos.y);
context.rotate(angle);
context.scale(mirror ? -size.x : size.x, size.y);
drawFunction(context);
context.restore();
}
/** Draw a tile directly onto the layer canvas in world space
* @param {Vector2} pos
* @param {Vector2} [size=(1,1)]
* @param {TileInfo} [tileInfo]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [angle=0]
* @param {boolean} [mirror=0] */
drawTile(pos, size=vec2(1), tileInfo, color=new Color, angle, mirror)
{
this.drawCanvas2D(pos, size, angle, mirror, (context)=>
{
const textureInfo = tileInfo && tileInfo.getTextureInfo();
if (textureInfo)
{
context.globalAlpha = color.a; // only alpha is supported
context.drawImage(textureInfo.image,
tileInfo.pos.x, tileInfo.pos.y,
tileInfo.size.x, tileInfo.size.y, -.5, -.5, 1, 1);
context.globalAlpha = 1;
}
else
{
// untextured
context.fillStyle = color;
context.fillRect(-.5, -.5, 1, 1);
}
});
}
/** Draw a rectangle directly onto the layer canvas in world space
* @param {Vector2} pos
* @param {Vector2} [size=(1,1)]
* @param {Color} [color=(1,1,1,1)]
* @param {number} [angle=0] */
drawRect(pos, size, color, angle)
{ this.drawTile(pos, size, undefined, color, angle); }
}
/**
* LittleJS Particle System
*/
/**
* Particle Emitter - Spawns particles with the given settings
* @extends EngineObject
* @example
* // create a particle emitter
* let pos = vec2(2,3);
* let particleEmitter = new ParticleEmitter
* (
* pos, 0, 1, 0, 500, PI, // pos, angle, emitSize, emitTime, emitRate, emitCone
* tile(0, 16), // tileInfo
* rgb(1,1,1), rgb(0,0,0), // colorStartA, colorStartB
* rgb(1,1,1,0), rgb(0,0,0,0), // colorEndA, colorEndB
* 2, .2, .2, .1, .05, // particleTime, sizeStart, sizeEnd, particleSpeed, particleAngleSpeed
* .99, 1, 1, PI, .05, // damping, angleDamping, gravityScale, particleCone, fadeRate,
* .5, 1 // randomness, collide, additive, randomColorLinear, renderOrder
* );
*/
class ParticleEmitter extends EngineObject
{
/** Create a particle system with the given settings
* @param {Vector2} position - World space position of the emitter
* @param {Number} [angle] - Angle to emit the particles
* @param {Number|Vector2} [emitSize] - World space size of the emitter (float for circle diameter, vec2 for rect)
* @param {Number} [emitTime] - How long to stay alive (0 is forever)
* @param {Number} [emitRate] - How many particles per second to spawn, does not emit if 0
* @param {Number} [emitConeAngle=PI] - Local angle to apply velocity to particles from emitter
* @param {TileInfo} [tileInfo] - Tile info to render particles (undefined is untextured)
* @param {Color} [colorStartA=(1,1,1,1)] - Color at start of life 1, randomized between start colors
* @param {Color} [colorStartB=(1,1,1,1)] - Color at start of life 2, randomized between start colors
* @param {Color} [colorEndA=(1,1,1,0)] - Color at end of life 1, randomized between end colors
* @param {Color} [colorEndB=(1,1,1,0)] - Color at end of life 2, randomized between end colors
* @param {Number} [particleTime] - How long particles live
* @param {Number} [sizeStart] - How big are particles at start
* @param {Number} [sizeEnd] - How big are particles at end
* @param {Number} [speed] - How fast are particles when spawned
* @param {Number} [angleSpeed] - How fast are particles rotating
* @param {Number} [damping] - How much to dampen particle speed
* @param {Number} [angleDamping] - How much to dampen particle angular speed
* @param {Number} [gravityScale] - How much gravity effect particles
* @param {Number} [particleConeAngle] - Cone for start particle angle
* @param {Number} [fadeRate] - How quick to fade particles at start/end in percent of life
* @param {Number} [randomness] - Apply extra randomness percent
* @param {boolean} [collideTiles] - Do particles collide against tiles
* @param {boolean} [additive] - Should particles use additive blend
* @param {boolean} [randomColorLinear] - Should color be randomized linearly or across each component
* @param {Number} [renderOrder] - Render order for particles (additive is above other stuff by default)
* @param {boolean} [localSpace] - Should it be in local space of emitter (world space is default)
*/
constructor
(
position,
angle,
emitSize = 0,
emitTime = 0,
emitRate = 100,
emitConeAngle = PI,
tileInfo,
colorStartA = new Color,
colorStartB = new Color,
colorEndA = new Color(1,1,1,0),
colorEndB = new Color(1,1,1,0),
particleTime = .5,
sizeStart = .1,
sizeEnd = 1,
speed = .1,
angleSpeed = .05,
damping = 1,
angleDamping = 1,
gravityScale = 0,
particleConeAngle = PI,
fadeRate = .1,
randomness = .2,
collideTiles = false,
additive = false,
randomColorLinear = true,
renderOrder = additive ? 1e9 : 0,
localSpace = false
)
{
super(position, vec2(), tileInfo, angle, undefined, renderOrder);
// emitter settings
/** @property {Number|Vector2} - World space size of the emitter (float for circle diameter, vec2 for rect) */
this.emitSize = emitSize
/** @property {Number} - How long to stay alive (0 is forever) */
this.emitTime = emitTime;
/** @property {Number} - How many particles per second to spawn, does not emit if 0 */
this.emitRate = emitRate;
/** @property {Number} - Local angle to apply velocity to particles from emitter */
this.emitConeAngle = emitConeAngle;
// color settings
/** @property {Color} - Color at start of life 1, randomized between start colors */
this.colorStartA = colorStartA;
/** @property {Color} - Color at start of life 2, randomized between start colors */
this.colorStartB = colorStartB;
/** @property {Color} - Color at end of life 1, randomized between end colors */
this.colorEndA = colorEndA;
/** @property {Color} - Color at end of life 2, randomized between end colors */
this.colorEndB = colorEndB;
/** @property {boolean} - Should color be randomized linearly or across each component */
this.randomColorLinear = randomColorLinear;
// particle settings
/** @property {Number} - How long particles live */
this.particleTime = particleTime;
/** @property {Number} - How big are particles at start */
this.sizeStart = sizeStart;
/** @property {Number} - How big are particles at end */
this.sizeEnd = sizeEnd;
/** @property {Number} - How fast are particles when spawned */
this.speed = speed;
/** @property {Number} - How fast are particles rotating */
this.angleSpeed = angleSpeed;
/** @property {Number} - How much to dampen particle speed */
this.damping = damping;
/** @property {Number} - How much to dampen particle angular speed */
this.angleDamping = angleDamping;
/** @property {Number} - How much does gravity effect particles */
this.gravityScale = gravityScale;
/** @property {Number} - Cone for start particle angle */
this.particleConeAngle = particleConeAngle;
/** @property {Number} - How quick to fade in particles at start/end in percent of life */
this.fadeRate = fadeRate;
/** @property {Number} - Apply extra randomness percent */
this.randomness = randomness;
/** @property {boolean} - Do particles collide against tiles */
this.collideTiles = collideTiles;
/** @property {boolean} - Should particles use additive blend */
this.additive = additive;
/** @property {boolean} - Should it be in local space of emitter */
this.localSpace = localSpace;
/** @property {Number} - If non zero the particle is drawn as a trail, stretched in the direction of velocity */
this.trailScale = 0;
/** @property {Function} - Callback when particle is destroyed */
this.particleDestroyCallback = undefined;
/** @property {Function} - Callback when particle is created */
this.particleCreateCallback = undefined;
/** @property {Number} - Track particle emit time */
this.emitTimeBuffer = 0;
}
/** Update the emitter to spawn particles, called automatically by engine once each frame */
update()
{
// only do default update to apply parent transforms
this.parent && super.update();
// update emitter
if (!this.emitTime || this.getAliveTime() <= this.emitTime)
{
// emit particles
if (this.emitRate * particleEmitRateScale)
{
const rate = 1/this.emitRate/particleEmitRateScale;
for (this.emitTimeBuffer += timeDelta; this.emitTimeBuffer > 0; this.emitTimeBuffer -= rate)
this.emitParticle();
}
}
else
this.destroy();
debugParticles && debugRect(this.pos, vec2(this.emitSize), '#0f0', 0, this.angle);
}
/** Spawn one particle
* @return {Particle} */
emitParticle()
{
// spawn a particle
let pos = typeof this.emitSize === 'number' ? // check if number was used
randInCircle(this.emitSize/2) // circle emitter
: vec2(rand(-.5,.5), rand(-.5,.5)) // box emitter
.multiply(this.emitSize).rotate(this.angle)
let angle = rand(this.particleConeAngle, -this.particleConeAngle);
if (!this.localSpace)
{
pos = this.pos.add(pos);
angle += this.angle;
}
// randomness scales each parameter by a percentage
const randomness = this.randomness;
const randomizeScale = (v)=> v + v*rand(randomness, -randomness);
// randomize particle settings
const particleTime = randomizeScale(this.particleTime);
const sizeStart = randomizeScale(this.sizeStart);
const sizeEnd = randomizeScale(this.sizeEnd);
const speed = randomizeScale(this.speed);
const angleSpeed = randomizeScale(this.angleSpeed) * randSign();
const coneAngle = rand(this.emitConeAngle, -this.emitConeAngle);
const colorStart = randColor(this.colorStartA, this.colorStartB, this.randomColorLinear);
const colorEnd = randColor(this.colorEndA, this.colorEndB, this.randomColorLinear);
const velocityAngle = this.localSpace ? coneAngle : this.angle + coneAngle;
// build particle
const particle = new Particle(pos, this.tileInfo, angle, colorStart, colorEnd, particleTime, sizeStart, sizeEnd, this.fadeRate, this.additive, this.trailScale, this.localSpace && this, this.particleDestroyCallback);
particle.velocity = vec2().setAngle(velocityAngle, speed);
particle.angleVelocity = angleSpeed;
particle.fadeRate = this.fadeRate;
particle.damping = this.damping;
particle.angleDamping = this.angleDamping;
particle.elasticity = this.elasticity;
particle.friction = this.friction;
particle.gravityScale = this.gravityScale;
particle.collideTiles = this.collideTiles;
particle.renderOrder = this.renderOrder;
particle.mirror = !!randInt(2);
// call particle create callback
this.particleCreateCallback && this.particleCreateCallback(particle);
// return the newly created particle
return particle;
}
// Particle emitters are not rendered, only the particles are
render() {}
}
///////////////////////////////////////////////////////////////////////////////
/**
* Particle Object - Created automatically by Particle Emitters
* @extends EngineObject
*/
class Particle extends EngineObject
{
/**
* Create a particle with the passed in settings
* Typically this is created automatically by a ParticleEmitter
* @param {Vector2} position - World space position of the particle
* @param {TileInfo} tileInfo - Tile info to render particles
* @param {Number} angle - Angle to rotate the particle
* @param {Color} colorStart - Color at start of life
* @param {Color} colorEnd - Color at end of life
* @param {Number} lifeTime - How long to live for
* @param {Number} sizeStart - Size at start of life
* @param {Number} sizeEnd - Size at end of life
* @param {Number} fadeRate - How quick to fade in/out
* @param {boolean} additive - Does it use additive blend mode
* @param {Number} trailScale - If a trail, how long to make it
* @param {ParticleEmitter} [localSpaceEmitter] - Parent emitter if local space
* @param {Function} [destroyCallback] - Callback when particle dies
*/
constructor(position, tileInfo, angle, colorStart, colorEnd, lifeTime, sizeStart, sizeEnd, fadeRate, additive, trailScale, localSpaceEmitter, destroyCallback
)
{
super(position, vec2(), tileInfo, angle);
/** @property {Color} - Color at start of life */
this.colorStart = colorStart;
/** @property {Color} - Calculated change in color */
this.colorEndDelta = colorEnd.subtract(colorStart);
/** @property {Number} - How long to live for */
this.lifeTime = lifeTime;
/** @property {Number} - Size at start of life */
this.sizeStart = sizeStart;
/** @property {Number} - Calculated change in size */
this.sizeEndDelta = sizeEnd - sizeStart;
/** @property {Number} - How quick to fade in/out */
this.fadeRate = fadeRate;
/** @property {boolean} - Is it additive */
this.additive = additive;
/** @property {Number} - If a trail, how long to make it */
this.trailScale = trailScale;
/** @property {ParticleEmitter} - Parent emitter if local space */
this.localSpaceEmitter = localSpaceEmitter;
/** @property {Function} - Called when particle dies */
this.destroyCallback = destroyCallback;
// particles use circular clamped speed
this.clampSpeedLinear = false;
}
/** Render the particle, automatically called each frame, sorted by renderOrder */
render()
{
// modulate size and color
const p = this.lifeTime > 0 ? min((time - this.spawnTime) / this.lifeTime, 1) : 1;
const radius = this.sizeStart + p * this.sizeEndDelta;
const size = vec2(radius);
const fadeRate = this.fadeRate/2;
const color = new Color(
this.colorStart.r + p * this.colorEndDelta.r,
this.colorStart.g + p * this.colorEndDelta.g,
this.colorStart.b + p * this.colorEndDelta.b,
(this.colorStart.a + p * this.colorEndDelta.a) *
(p < fadeRate ? p/fadeRate : p > 1-fadeRate ? (1-p)/fadeRate : 1)); // fade alpha
// draw the particle
this.additive && setBlendMode(true);
let pos = this.pos, angle = this.angle;
if (this.localSpaceEmitter)
{
// in local space of emitter
pos = this.localSpaceEmitter.pos.add(pos.rotate(-this.localSpaceEmitter.angle));
angle += this.localSpaceEmitter.angle;
}
if (this.trailScale)
{
// trail style particles
let velocity = this.velocity;
if (this.localSpaceEmitter)
velocity = velocity.rotate(-this.localSpaceEmitter.angle);
const speed = velocity.length();
if (speed)
{
const direction = velocity.scale(1/speed);
const trailLength = speed * this.trailScale;
size.y = max(size.x, trailLength);
angle = direction.angle();
drawTile(pos.add(direction.multiply(vec2(0,-trailLength/2))), size, this.tileInfo, color, angle, this.mirror);
}
}
else
drawTile(pos, size, this.tileInfo, color, angle, this.mirror);
this.additive && setBlendMode();
debugParticles && debugRect(pos, size, '#f005', 0, angle);
if (p == 1)
{
// destroy particle when it's time runs out
this.color = color;
this.size = size;
this.destroyCallback && this.destroyCallback(this);
this.destroyed = 1;
}
}
}
/**
* LittleJS Medal System
* - Tracks and displays medals
* - Saves medals to local storage
* - Newgrounds integration
* @namespace Medals
*/
/** List of all medals
* @type {Object}
* @memberof Medals */
const medals = {};
// Engine internal variables not exposed to documentation
let medalsDisplayQueue = [], medalsSaveName, medalsDisplayTimeLast;
///////////////////////////////////////////////////////////////////////////////
/** Initialize medals with a save name used for storage
* - Call this after creating all medals
* - Checks if medals are unlocked
* @param {String} saveName
* @memberof Medals */
function medalsInit(saveName)
{
// check if medals are unlocked
medalsSaveName = saveName;
if (!debugMedals)
medalsForEach(medal=> medal.unlocked = !!localStorage[medal.storageKey()]);
// engine automatically renders medals
engineAddPlugin(undefined, medalsRender);
function medalsRender()
{
if (!medalsDisplayQueue.length)
return;
// update first medal in queue
const medal = medalsDisplayQueue[0];
const time = timeReal - medalsDisplayTimeLast;
if (!medalsDisplayTimeLast)
medalsDisplayTimeLast = timeReal;
else if (time > medalDisplayTime)
{
medalsDisplayTimeLast = 0;
medalsDisplayQueue.shift();
}
else
{
// slide on/off medals
const slideOffTime = medalDisplayTime - medalDisplaySlideTime;
const hidePercent =
time < medalDisplaySlideTime ? 1 - time / medalDisplaySlideTime :
time > slideOffTime ? (time - slideOffTime) / medalDisplaySlideTime : 0;
medal.render(hidePercent);
}
}
}
/** Calls a function for each medal
* @param {Function} callback
* @memberof Medals */
function medalsForEach(callback)
{ Object.values(medals).forEach(medal=>callback(medal)); }
///////////////////////////////////////////////////////////////////////////////
/**
* Medal - Tracks an unlockable medal
* @example
* // create a medal
* const medal_example = new Medal(0, 'Example Medal', 'More info about the medal goes here.', '🎖️');
*
* // initialize medals
* medalsInit('Example Game');
*
* // unlock the medal
* medal_example.unlock();
*/
class Medal
{
/** Create a medal object and adds it to the list of medals
* @param {Number} id - The unique identifier of the medal
* @param {String} name - Name of the medal
* @param {String} [description] - Description of the medal
* @param {String} [icon] - Icon for the medal
* @param {String} [src] - Image location for the medal
*/
constructor(id, name, description='', icon='🏆', src)
{
ASSERT(id >= 0 && !medals[id]);
/** @property {Number} - The unique identifier of the medal */
this.id = id;
/** @property {String} - Name of the medal */
this.name = name;
/** @property {String} - Description of the medal */
this.description = description;
/** @property {String} - Icon for the medal */
this.icon = icon;
/** @property {boolean} - Is the medal unlocked? */
this.unlocked = false;
// load the source image if provided
if (src)
(this.image = new Image).src = src;
// add this to list of medals
medals[id] = this;
}
/** Unlocks a medal if not already unlocked */
unlock()
{
if (medalsPreventUnlock || this.unlocked)
return;
// save the medal
ASSERT(medalsSaveName, 'save name must be set');
localStorage[this.storageKey()] = this.unlocked = true;
medalsDisplayQueue.push(this);
}
/** Render a medal
* @param {Number} [hidePercent] - How much to slide the medal off screen
*/
render(hidePercent=0)
{
const context = overlayContext;
const width = min(medalDisplaySize.x, mainCanvas.width);
const x = overlayCanvas.width - width;
const y = -medalDisplaySize.y*hidePercent;
// draw containing rect and clip to that region
context.save();
context.beginPath();
context.fillStyle = new Color(.9,.9,.9).toString();
context.strokeStyle = new Color(0,0,0).toString();
context.lineWidth = 3;
context.rect(x, y, width, medalDisplaySize.y);
context.fill();
context.stroke();
context.clip();
// draw the icon and text
this.renderIcon(vec2(x+15+medalDisplayIconSize/2, y+medalDisplaySize.y/2));
const pos = vec2(x+medalDisplayIconSize+30, y+28);
drawTextScreen(this.name, pos, 38, new Color(0,0,0), 0, undefined, 'left');
pos.y += 32;
drawTextScreen(this.description, pos, 24, new Color(0,0,0), 0, undefined, 'left');
context.restore();
}
/** Render the icon for a medal
* @param {Vector2} pos - Screen space position
* @param {Number} [size=medalDisplayIconSize] - Screen space size
*/
renderIcon(pos, size=medalDisplayIconSize)
{
// draw the image or icon
if (this.image)
overlayContext.drawImage(this.image, pos.x-size/2, pos.y-size/2, size, size);
else
drawTextScreen(this.icon, pos, size*.7, new Color(0,0,0));
}
// Get local storage key used by the medal
storageKey() { return medalsSaveName + '_' + this.id; }
}
/**
* LittleJS WebGL Interface
* - All webgl used by the engine is wrapped up here
* - For normal stuff you won't need to see or call anything in this file
* - For advanced stuff there are helper functions to create shaders, textures, etc
* - Can be disabled with glEnable to revert to 2D canvas rendering
* - Batches sprite rendering on GPU for incredibly fast performance
* - Sprite transform math is done in the shader where possible
* - Supports shadertoy style post processing shaders
* @namespace WebGL
*/
/** The WebGL canvas which appears above the main canvas and below the overlay canvas
* @type {HTMLCanvasElement}
* @memberof WebGL */
let glCanvas;
/** 2d context for glCanvas
* @type {WebGL2RenderingContext}
* @memberof WebGL */
let glContext;
/** Should webgl be setup with anti-aliasing? must be set before calling engineInit
* @type {boolean}
* @memberof WebGL */
let glAntialias = true;
// WebGL internal variables not exposed to documentation
let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
// WebGL internal constants
const gl_MAX_INSTANCES = 1e4;
const gl_INDICES_PER_INSTANCE = 11;
const gl_INSTANCE_BYTE_STRIDE = gl_INDICES_PER_INSTANCE * 4;
const gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;
///////////////////////////////////////////////////////////////////////////////
// Initialize WebGL, called automatically by the engine
function glInit()
{
if (!glEnable || headlessMode) return;
// create the canvas and textures
glCanvas = document.createElement('canvas');
glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
// some browsers are much faster without copying the gl buffer so we just overlay it instead
const rootElement = mainCanvas.parentElement;
glOverlay && rootElement.appendChild(glCanvas);
// setup vertex and fragment shaders
glShader = glCreateProgram(
'#version 300 es\n' + // specify GLSL ES version
'precision highp float;'+ // use highp for better accuracy
'uniform mat4 m;'+ // transform matrix
'in vec2 g;'+ // in: geometry
'in vec4 p,u,c,a;'+ // in: position/size, uvs, color, additiveColor
'in float r;'+ // in: rotation
'out vec2 v;'+ // out: uv
'out vec4 d,e;'+ // out: color, additiveColor
'void main(){'+ // shader entry point
'vec2 s=(g-.5)*p.zw;'+ // get size offset
'gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);'+ // transform position
'v=mix(u.xw,u.zy,g);'+ // pass uv to fragment shader
'd=c;e=a;'+ // pass colors to fragment shader
'}' // end of shader
,
'#version 300 es\n' + // specify GLSL ES version
'precision highp float;'+ // use highp for better accuracy
'uniform sampler2D s;'+ // texture
'in vec2 v;'+ // in: uv
'in vec4 d,e;'+ // in: color, additiveColor
'out vec4 c;'+ // out: color
'void main(){'+ // shader entry point
'c=texture(s,v)*d+e;'+ // modulate texture by color plus additive
'}' // end of shader
);
// init buffers
const glInstanceData = new ArrayBuffer(gl_INSTANCE_BUFFER_SIZE);
glPositionData = new Float32Array(glInstanceData);
glColorData = new Uint32Array(glInstanceData);
glArrayBuffer = glContext.createBuffer();
glGeometryBuffer = glContext.createBuffer();
// create the geometry buffer, triangle strip square
const geometry = new Float32Array([glInstanceCount=0,0,1,0,0,1,1,1]);
glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
}
// Setup render each frame, called automatically by engine
function glPreRender()
{
if (!glEnable || headlessMode) return;
// set up the shader and canvas
glClearCanvas();
glContext.useProgram(glShader);
glContext.activeTexture(glContext.TEXTURE0);
if (textureInfos[0])
glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
// set vertex attributes
let offset = glAdditive = glBatchAdditive = 0;
let initVertexAttribArray = (name, type, typeSize, size)=>
{
const location = glContext.getAttribLocation(glShader, name);
const stride = typeSize && gl_INSTANCE_BYTE_STRIDE; // only if not geometry
const divisor = typeSize && 1; // only if not geometry
const normalize = typeSize==1; // only if color
glContext.enableVertexAttribArray(location);
glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
glContext.vertexAttribDivisor(location, divisor);
offset += size*typeSize;
}
glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
initVertexAttribArray('g', glContext.FLOAT, 0, 2); // geometry
glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
glContext.bufferData(glContext.ARRAY_BUFFER, gl_INSTANCE_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
initVertexAttribArray('p', glContext.FLOAT, 4, 4); // position & size
initVertexAttribArray('u', glContext.FLOAT, 4, 4); // texture coords
initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
initVertexAttribArray('a', glContext.UNSIGNED_BYTE, 1, 4); // additiveColor
initVertexAttribArray('r', glContext.FLOAT, 4, 1); // rotation
// build the transform matrix
const s = vec2(2*cameraScale).divide(mainCanvasSize);
const p = vec2(-1).subtract(cameraPos.multiply(s));
glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), false,
[
s.x, 0, 0, 0,
0, s.y, 0, 0,
1, 1, 1, 1,
p.x, p.y, 0, 0
]
);
}
/** Clear the canvas and setup the viewport
* @memberof WebGL */
function glClearCanvas()
{
// clear and set to same size as main canvas
glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
glContext.clear(glContext.COLOR_BUFFER_BIT);
}
/** Set the WebGl texture, called automatically if using multiple textures
* - This may also flush the gl buffer resulting in more draw calls and worse performance
* @param {WebGLTexture} texture
* @memberof WebGL */
function glSetTexture(texture)
{
// must flush cache with the old texture to set a new one
if (headlessMode || texture == glActiveTexture)
return;
glFlush();
glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = texture);
}
/** Compile WebGL shader of the given type, will throw errors if in debug mode
* @param {String} source
* @param {Number} type
* @return {WebGLShader}
* @memberof WebGL */
function glCompileShader(source, type)
{
// build the shader
const shader = glContext.createShader(type);
glContext.shaderSource(shader, source);
glContext.compileShader(shader);
// check for errors
if (debug && !glContext.getShaderParameter(shader, glContext.COMPILE_STATUS))
throw glContext.getShaderInfoLog(shader);
return shader;
}
/** Create WebGL program with given shaders
* @param {String} vsSource
* @param {String} fsSource
* @return {WebGLProgram}
* @memberof WebGL */
function glCreateProgram(vsSource, fsSource)
{
// build the program
const program = glContext.createProgram();
glContext.attachShader(program, glCompileShader(vsSource, glContext.VERTEX_SHADER));
glContext.attachShader(program, glCompileShader(fsSource, glContext.FRAGMENT_SHADER));
glContext.linkProgram(program);
// check for errors
if (debug && !glContext.getProgramParameter(program, glContext.LINK_STATUS))
throw glContext.getProgramInfoLog(program);
return program;
}
/** Create WebGL texture from an image and init the texture settings
* @param {HTMLImageElement} image
* @return {WebGLTexture}
* @memberof WebGL */
function glCreateTexture(image)
{
// build the texture
const texture = glContext.createTexture();
glContext.bindTexture(glContext.TEXTURE_2D, texture);
if (image && image.width)
glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
else
{
// create a white texture
const whitePixel = new Uint8Array([255, 255, 255, 255]);
glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
}
// use point filtering for pixelated rendering
const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, filter);
return texture;
}
/** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
* @memberof WebGL */
function glFlush()
{
if (!glInstanceCount) return;
const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
glContext.enable(glContext.BLEND);
// draw all the sprites in the batch and reset the buffer
glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glInstanceCount);
if (showWatermark)
drawCount += glInstanceCount;
glInstanceCount = 0;
glBatchAdditive = glAdditive;
}
/** Draw any sprites still in the buffer and copy to main canvas
* @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
* @param {boolean} [forceDraw]
* @memberof WebGL */
function glCopyToContext(context, forceDraw=false)
{
if (!glEnable || !glInstanceCount && !forceDraw) return;
glFlush();
// do not draw in overlay mode because the canvas is visible
if (!glOverlay || forceDraw)
context.drawImage(glCanvas, 0, 0);
}
/** Set anti-aliasing for webgl canvas
* @param {boolean} [antialias]
* @memberof WebGL */
function glSetAntialias(antialias=true)
{
ASSERT(!glCanvas, 'must be called before engineInit');
glAntialias = antialias;
}
/** Add a sprite to the gl draw list, used by all gl draw functions
* @param {Number} x
* @param {Number} y
* @param {Number} sizeX
* @param {Number} sizeY
* @param {Number} angle
* @param {Number} uv0X
* @param {Number} uv0Y
* @param {Number} uv1X
* @param {Number} uv1Y
* @param {Number} rgba
* @param {Number} [rgbaAdditive=0]
* @memberof WebGL */
function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
{
ASSERT(typeof rgba == 'number' && typeof rgbaAdditive == 'number', 'invalid color');
// flush if there is not enough room or if different blend mode
if (glInstanceCount >= gl_MAX_INSTANCES || glBatchAdditive != glAdditive)
glFlush();
let offset = glInstanceCount++ * gl_INDICES_PER_INSTANCE;
glPositionData[offset++] = x;
glPositionData[offset++] = y;
glPositionData[offset++] = sizeX;
glPositionData[offset++] = sizeY;
glPositionData[offset++] = uv0X;
glPositionData[offset++] = uv0Y;
glPositionData[offset++] = uv1X;
glPositionData[offset++] = uv1Y;
glColorData[offset++] = rgba;
glColorData[offset++] = rgbaAdditive;
glPositionData[offset++] = angle;
}
/**
* LittleJS - The Tiny Fast JavaScript Game Engine
* MIT License - Copyright 2021 Frank Force
*
* Engine Features
* - Object oriented system with base class engine object
* - Base class object handles update, physics, collision, rendering, etc
* - Engine helper classes and functions like Vector2, Color, and Timer
* - Super fast rendering system for tile sheets
* - Sound effects audio with zzfx and music with zzfxm
* - Input processing system with gamepad and touchscreen support
* - Tile layer rendering and collision system
* - Particle effect system
* - Medal system tracks and displays achievements
* - Debug tools and debug rendering system
* - Post processing effects
* - Call engineInit() to start it up!
* @namespace Engine
*/
/** Name of engine
* @type {string}
* @default
* @memberof Engine */
const engineName = 'LittleJS';
/** Version of engine
* @type {string}
* @default
* @memberof Engine */
const engineVersion = '1.11.10';
/** Frames per second to update
* @type {number}
* @default
* @memberof Engine */
const frameRate = 60;
/** How many seconds each frame lasts, engine uses a fixed time step
* @type {number}
* @default 1/60
* @memberof Engine */
const timeDelta = 1/frameRate;
/** Array containing all engine objects
* @type {Array<EngineObject>}
* @memberof Engine */
let engineObjects = [];
/** Array with only objects set to collide with other objects this frame (for optimization)
* @type {Array<EngineObject>}
* @memberof Engine */
let engineObjectsCollide = [];
/** Current update frame, used to calculate time
* @type {number}
* @memberof Engine */
let frame = 0;
/** Current engine time since start in seconds
* @type {number}
* @memberof Engine */
let time = 0;
/** Actual clock time since start in seconds (not affected by pause or frame rate clamping)
* @type {number}
* @memberof Engine */
let timeReal = 0;
/** Is the game paused? Causes time and objects to not be updated
* @type {boolean}
* @default false
* @memberof Engine */
let paused = false;
/** Set if game is paused
* @param {boolean} isPaused
* @memberof Engine */
function setPaused(isPaused) { paused = isPaused; }
// Frame time tracking
let frameTimeLastMS = 0, frameTimeBufferMS = 0, averageFPS = 0;
///////////////////////////////////////////////////////////////////////////////
// plugin hooks
const pluginUpdateList = [], pluginRenderList = [];
/** Add a new update function for a plugin
* @param {Function} [updateFunction]
* @param {Function} [renderFunction]
* @memberof Engine */
function engineAddPlugin(updateFunction, renderFunction)
{
ASSERT(!pluginUpdateList.includes(updateFunction));
ASSERT(!pluginRenderList.includes(renderFunction));
updateFunction && pluginUpdateList.push(updateFunction);
renderFunction && pluginRenderList.push(renderFunction);
}
///////////////////////////////////////////////////////////////////////////////
// Main engine functions
/** Startup LittleJS engine with your callback functions
* @param {Function|function():Promise} gameInit - Called once after the engine starts up
* @param {Function} gameUpdate - Called every frame before objects are updated
* @param {Function} gameUpdatePost - Called after physics and objects are updated, even when paused
* @param {Function} gameRender - Called before objects are rendered, for drawing the background
* @param {Function} gameRenderPost - Called after objects are rendered, useful for drawing UI
* @param {Array<string>} [imageSources=[]] - List of images to load
* @param {HTMLElement} [rootElement] - Root element to attach to, the document body by default
* @memberof Engine */
function engineInit(gameInit, gameUpdate, gameUpdatePost, gameRender, gameRenderPost, imageSources=[], rootElement=document.body)
{
ASSERT(!mainContext, 'engine already initialized');
ASSERT(Array.isArray(imageSources), 'pass in images as array');
// allow passing in empty functions
if (!gameInit)
gameInit = ()=>{};
if (!gameUpdate)
gameUpdate = ()=>{};
if (!gameUpdatePost)
gameUpdatePost = ()=>{};
if (!gameRender)
gameRender = ()=>{};
if (!gameRenderPost)
gameRenderPost = ()=>{};
// Called automatically by engine to setup render system
function enginePreRender()
{
// save canvas size
mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
// disable smoothing for pixel art
overlayContext.imageSmoothingEnabled =
mainContext.imageSmoothingEnabled = !tilesPixelated;
// setup gl rendering if enabled
glPreRender();
}
// internal update loop for engine
function engineUpdate(frameTimeMS=0)
{
// update time keeping
let frameTimeDeltaMS = frameTimeMS - frameTimeLastMS;
frameTimeLastMS = frameTimeMS;
if (debug || showWatermark)
averageFPS = lerp(.05, averageFPS, 1e3/(frameTimeDeltaMS||1));
const debugSpeedUp = debug && keyIsDown('Equal'); // +
const debugSpeedDown = debug && keyIsDown('Minus'); // -
if (debug) // +/- to speed/slow time
frameTimeDeltaMS *= debugSpeedUp ? 5 : debugSpeedDown ? .2 : 1;
timeReal += frameTimeDeltaMS / 1e3;
frameTimeBufferMS += paused ? 0 : frameTimeDeltaMS;
if (!debugSpeedUp)
frameTimeBufferMS = min(frameTimeBufferMS, 50); // clamp in case of slow framerate
updateCanvas();
if (paused)
{
// update object transforms even when paused
for (const o of engineObjects)
o.parent || o.updateTransforms();
inputUpdate();
pluginUpdateList.forEach(f=>f());
debugUpdate();
gameUpdatePost();
inputUpdatePost();
}
else
{
// apply time delta smoothing, improves smoothness of framerate in some browsers
let deltaSmooth = 0;
if (frameTimeBufferMS < 0 && frameTimeBufferMS > -9)
{
// force at least one update each frame since it is waiting for refresh
deltaSmooth = frameTimeBufferMS;
frameTimeBufferMS = 0;
}
// update multiple frames if necessary in case of slow framerate
for (;frameTimeBufferMS >= 0; frameTimeBufferMS -= 1e3 / frameRate)
{
// increment frame and update time
time = frame++ / frameRate;
// update game and objects
inputUpdate();
gameUpdate();
pluginUpdateList.forEach(f=>f());
engineObjectsUpdate();
// do post update
debugUpdate();
gameUpdatePost();
inputUpdatePost();
}
// add the time smoothing back in
frameTimeBufferMS += deltaSmooth;
}
if (!headlessMode)
{
// render sort then render while removing destroyed objects
enginePreRender();
gameRender();
engineObjects.sort((a,b)=> a.renderOrder - b.renderOrder);
for (const o of engineObjects)
o.destroyed || o.render();
gameRenderPost();
pluginRenderList.forEach(f=>f());
touchGamepadRender();
debugRender();
glCopyToContext(mainContext);
if (showWatermark)
{
// update fps
overlayContext.textAlign = 'right';
overlayContext.textBaseline = 'top';
overlayContext.font = '1em monospace';
overlayContext.fillStyle = '#000';
const text = engineName + ' ' + 'v' + engineVersion + ' / '
+ drawCount + ' / ' + engineObjects.length + ' / ' + averageFPS.toFixed(1)
+ (glEnable ? ' GL' : ' 2D') ;
overlayContext.fillText(text, mainCanvas.width-3, 3);
overlayContext.fillStyle = '#fff';
overlayContext.fillText(text, mainCanvas.width-2, 2);
drawCount = 0;
}
}
requestAnimationFrame(engineUpdate);
}
function updateCanvas()
{
if (headlessMode) return;
if (canvasFixedSize.x)
{
// clear canvas and set fixed size
mainCanvas.width = canvasFixedSize.x;
mainCanvas.height = canvasFixedSize.y;
// fit to window by adding space on top or bottom if necessary
const aspect = innerWidth / innerHeight;
const fixedAspect = mainCanvas.width / mainCanvas.height;
(glCanvas||mainCanvas).style.width = mainCanvas.style.width = overlayCanvas.style.width = aspect < fixedAspect ? '100%' : '';
(glCanvas||mainCanvas).style.height = mainCanvas.style.height = overlayCanvas.style.height = aspect < fixedAspect ? '' : '100%';
}
else
{
// clear canvas and set size to same as window
mainCanvas.width = min(innerWidth, canvasMaxSize.x);
mainCanvas.height = min(innerHeight, canvasMaxSize.y);
}
// clear overlay canvas and set size
overlayCanvas.width = mainCanvas.width;
overlayCanvas.height = mainCanvas.height;
// save canvas size
mainCanvasSize = vec2(mainCanvas.width, mainCanvas.height);
}
function startEngine()
{
new Promise((resolve) => resolve(gameInit())).then(engineUpdate);
}
if (headlessMode)
{
startEngine();
return;
}
// setup html
const styleRoot =
'margin:0;overflow:hidden;' + // fill the window
'width:100vw;height:100vh;' + // fill the window
'display:flex;' + // use flexbox
'align-items:center;' + // horizontal center
'justify-content:center;' + // vertical center
'background:#000;' + // set background color
(canvasPixelated ? 'image-rendering:pixelated;' : '') + // pixel art
'user-select:none;' + // prevent hold to select
'-webkit-user-select:none;' + // compatibility for ios
(!touchInputEnable ? '' : // no touch css settings
'touch-action:none;' + // prevent mobile pinch to resize
'-webkit-touch-callout:none');// compatibility for ios
rootElement.style.cssText = styleRoot;
rootElement.appendChild(mainCanvas = document.createElement('canvas'));
mainContext = mainCanvas.getContext('2d');
// init stuff and start engine
inputInit();
audioInit();
debugInit();
glInit();
// create overlay canvas for hud to appear above gl canvas
rootElement.appendChild(overlayCanvas = document.createElement('canvas'));
overlayContext = overlayCanvas.getContext('2d');
// set canvas style
const styleCanvas = 'position:absolute'; // allow canvases to overlap
mainCanvas.style.cssText = overlayCanvas.style.cssText = styleCanvas;
if (glCanvas)
glCanvas.style.cssText = styleCanvas;
updateCanvas();
// create promises for loading images
const promises = imageSources.map((src, textureIndex)=>
new Promise(resolve =>
{
const image = new Image;
image.crossOrigin = 'anonymous';
image.onerror = image.onload = ()=>
{
textureInfos[textureIndex] = new TextureInfo(image);
resolve();
}
image.src = src;
})
);
if (!imageSources.length)
{
// no images to load
promises.push(new Promise(resolve =>
{
textureInfos[0] = new TextureInfo(new Image);
resolve();
}));
}
if (showSplashScreen)
{
// draw splash screen
promises.push(new Promise(resolve =>
{
let t = 0;
console.log(`${engineName} Engine v${engineVersion}`);
updateSplash();
function updateSplash()
{
clearInput();
drawEngineSplashScreen(t+=.01);
t>1 ? resolve() : setTimeout(updateSplash, 16);
}
}));
}
// load all of the images
Promise.all(promises).then(startEngine);
}
/** Update each engine object, remove destroyed objects, and update time
* @memberof Engine */
function engineObjectsUpdate()
{
// get list of solid objects for physics optimization
engineObjectsCollide = engineObjects.filter(o=>o.collideSolidObjects);
// recursive object update
function updateObject(o)
{
if (!o.destroyed)
{
o.update();
for (const child of o.children)
updateObject(child);
}
}
for (const o of engineObjects)
{
// update top level objects
if (!o.parent)
{
updateObject(o);
o.updateTransforms();
}
}
// remove destroyed objects
engineObjects = engineObjects.filter(o=>!o.destroyed);
}
/** Destroy and remove all objects
* @memberof Engine */
function engineObjectsDestroy()
{
for (const o of engineObjects)
o.parent || o.destroy();
engineObjects = engineObjects.filter(o=>!o.destroyed);
}
/** 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 {Array<EngineObject>} [objects=engineObjects] - List of objects to check
* @return {Array<EngineObject>} - List of collected objects
* @memberof Engine */
function engineObjectsCollect(pos, size, objects=engineObjects)
{
const collectedObjects = [];
if (!pos) // all objects
{
for (const o of objects)
collectedObjects.push(o);
}
else if (size instanceof Vector2) // bounding box test
{
for (const o of objects)
isOverlapping(pos, size, o.pos, o.size) && collectedObjects.push(o);
}
else // circle test
{
const sizeSquared = size*size;
for (const o of objects)
pos.distanceSquared(o.pos) < sizeSquared && collectedObjects.push(o);
}
return collectedObjects;
}
/** Triggers a callback for each 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 {Function} [callbackFunction] - Calls this function on every object that passes the test
* @param {Array<EngineObject>} [objects=engineObjects] - List of objects to check
* @memberof Engine */
function engineObjectsCallback(pos, size, callbackFunction, objects=engineObjects)
{ engineObjectsCollect(pos, size, objects).forEach(o => callbackFunction(o)); }
/** Return a list of objects intersecting a ray
* @param {Vector2} start
* @param {Vector2} end
* @param {Array<EngineObject>} [objects=engineObjects] - List of objects to check
* @return {Array<EngineObject>} - List of objects hit
* @memberof Engine */
function engineObjectsRaycast(start, end, objects=engineObjects)
{
const hitObjects = [];
for (const o of objects)
{
if (o.collideRaycast && isIntersecting(start, end, o.pos, o.size))
{
debugRaycast && debugRect(o.pos, o.size, '#f00');
hitObjects.push(o);
}
}
debugRaycast && debugLine(start, end, hitObjects.length ? '#f00' : '#00f', .02);
return hitObjects;
}
///////////////////////////////////////////////////////////////////////////////
// LittleJS splash screen and logo
function drawEngineSplashScreen(t)
{
const x = overlayContext;
const w = overlayCanvas.width = innerWidth;
const h = overlayCanvas.height = innerHeight;
{
// background
const p3 = percent(t, 1, .8);
const p4 = percent(t, 0, .5);
const g = x.createRadialGradient(w/2,h/2,0,w/2,h/2,Math.hypot(w,h)*.7);
g.addColorStop(0,hsl(0,0,lerp(p4,0,p3/2),p3).toString());
g.addColorStop(1,hsl(0,0,0,p3).toString());
x.save();
x.fillStyle = g;
x.fillRect(0,0,w,h);
}
// draw LittleJS logo...
const rect = (X, Y, W, H, C)=>
{
x.beginPath();
x.rect(X,Y,W,C?H*p:H);
x.fillStyle = C;
C ? x.fill() : x.stroke();
};
const line = (X, Y, Z, W)=>
{
x.beginPath();
x.lineTo(X,Y);
x.lineTo(Z,W);
x.stroke();
};
const circle = (X, Y, R, A=0, B=2*PI, C, F)=>
{
const D = (A+B)/2, E = p*(B-A)/2;
x.beginPath();
F && x.lineTo(X,Y);
x.arc(X,Y,R,D-E,D+E);
x.fillStyle = C;
C ? x.fill() : x.stroke();
};
const color = (c=0, l=0) =>
hsl([.98,.3,.57,.14][c%4]-10,.8,[0,.3,.5,.8,.9][l]).toString();
const alpha = wave(1,1,t);
const p = percent(alpha, .1, .5);
// setup
x.translate(w/2,h/2);
const size = min(6, min(w,h)/99); // fit to screen
x.scale(size,size);
x.translate(-40,-35);
x.lineJoin = x.lineCap = 'round';
x.lineWidth = .1 + p*1.9;
// drawing effect
const p2 = percent(alpha,.1,1);
x.setLineDash([99*p2,99]);
// cab top
rect(7,16,18,-8,color(2,2));
rect(7,8,18,4,color(2,3));
rect(25,8,8,8,color(2,1));
rect(25,8,-18,8);
rect(25,8,8,8);
// cab
rect(25,16,7,23,color());
rect(11,39,14,-23,color(1,1));
rect(11,16,14,18,color(1,2));
rect(11,16,14,8,color(1,3));
rect(25,16,-14,24);
// cab window
rect(15,29,6,-9,color(2,2));
circle(15,21,5,0,PI/2,color(2,4),1);
rect(21,21,-6,9);
// little stack
rect(37,14,9,6,color(3,2));
rect(37,14,4.5,6,color(3,3));
rect(37,14,9,6);
// big stack
rect(50,20,10,-8,color(0,1));
rect(50,20,6.5,-8,color(0,2));
rect(50,20,3.5,-8,color(0,3));
rect(50,20,10,-8);
circle(55,2,11.4,.5,PI-.5,color(3,3));
circle(55,2,11.4,.5,PI/2,color(3,2),1);
circle(55,2,11.4,.5,PI-.5);
rect(45,7,20,-7,color(0,2));
rect(45,-1,20,4,color(0,3));
rect(45,-1,20,8);
// engine
for (let i=5; i--;)
{
// stagger radius to fix slight seam
circle(60-i*6,30, 9.9,0,2*PI,color(i+2,3));
circle(60-i*6,30,10.0,-.5,PI+.5,color(i+2,2));
circle(60-i*6,30,10.1,.5,PI-.5,color(i+2,1));
}
// engine outline
circle(36,30,10,PI/2,PI*3/2);
circle(48,30,10,PI/2,PI*3/2);
circle(60,30,10);
line(36,20,60,20);
// engine front light
circle(60,30,4,PI,3*PI,color(3,2));
circle(60,30,4,PI,2*PI,color(3,3));
circle(60,30,4,PI,3*PI);
// front brush
for (let i=6; i--;)
{
x.beginPath();
x.lineTo(53,54);
x.lineTo(53,40);
x.lineTo(53+(1+i*2.9)*p,40);
x.lineTo(53+(4+i*3.5)*p,54);
x.fillStyle = color(0,i%2+2);
x.fill();
i%2 && x.stroke();
}
// wheels
rect(6,40,5,5);
rect(6,40,5,5,color());
rect(15,54,38,-14,color());
for (let i=3; i--;)
for (let j=2; j--;)
{
circle(15*i+15,47,j?7:1,PI,3*PI,color(i,3));
x.stroke();
circle(15*i+15,47,j?7:1,0,PI,color(i,2));
x.stroke();
}
line(6,40,68,40); // center
line(77,54,4,54); // bottom
// draw engine name
const s = engineName;
x.font = '900 16px arial';
x.textAlign = 'center';
x.textBaseline = 'top';
x.lineWidth = .1+p*3.9;
let w2 = 0;
for (let i=0; i<s.length; ++i)
w2 += x.measureText(s[i]).width;
for (let j=2; j--;)
for (let i=0, X=41-w2/2; i<s.length; ++i)
{
x.fillStyle = color(i,2);
const w = x.measureText(s[i]).width;
x[j?'strokeText':'fillText'](s[i],X+w/2,55.5,17*p);
X += w;
}
x.restore();
}
/**
* LittleJS Module Export
* - Export engine as a module
*/
export
{
// Engine
engineName,
engineVersion,
frameRate,
timeDelta,
engineObjects,
frame,
time,
timeReal,
paused,
setPaused,
engineInit,
engineObjectsUpdate,
engineObjectsDestroy,
engineObjectsCollect,
engineObjectsCallback,
engineObjectsRaycast,
engineAddPlugin,
// Globals
debug,
debugOverlay,
showWatermark,
// Debug
ASSERT,
debugRect,
debugPoly,
debugCircle,
debugPoint,
debugLine,
debugOverlap,
debugText,
debugClear,
debugScreenshot,
debugSaveCanvas,
debugSaveText,
debugSaveDataURL,
// Settings
cameraPos,
cameraScale,
canvasMaxSize,
canvasFixedSize,
canvasPixelated,
tilesPixelated,
fontDefault,
showSplashScreen,
headlessMode,
tileSizeDefault,
tileFixBleedScale,
enablePhysicsSolver,
objectDefaultMass,
objectDefaultDamping,
objectDefaultAngleDamping,
objectDefaultElasticity,
objectDefaultFriction,
objectMaxSpeed,
gravity,
particleEmitRateScale,
glEnable,
glOverlay,
gamepadsEnable,
gamepadDirectionEmulateStick,
inputWASDEmulateDirection,
touchGamepadEnable,
touchGamepadAnalog,
touchGamepadSize,
touchGamepadAlpha,
vibrateEnable,
soundEnable,
soundVolume,
soundDefaultRange,
soundDefaultTaper,
medalDisplayTime,
medalDisplaySlideTime,
medalDisplaySize,
medalDisplayIconSize,
// Setters for globals
setCameraPos,
setCameraScale,
setCanvasMaxSize,
setCanvasFixedSize,
setCanvasPixelated,
setTilesPixelated,
setFontDefault,
setShowSplashScreen,
setHeadlessMode,
setGlEnable,
setGlOverlay,
setTileSizeDefault,
setTileFixBleedScale,
setEnablePhysicsSolver,
setObjectDefaultMass,
setObjectDefaultDamping,
setObjectDefaultAngleDamping,
setObjectDefaultElasticity,
setObjectDefaultFriction,
setObjectMaxSpeed,
setGravity,
setParticleEmitRateScale,
setTouchInputEnable,
setGamepadsEnable,
setGamepadDirectionEmulateStick,
setInputWASDEmulateDirection,
setTouchGamepadEnable,
setTouchGamepadAnalog,
setTouchGamepadSize,
setTouchGamepadAlpha,
setVibrateEnable,
setSoundEnable,
setSoundVolume,
setSoundDefaultRange,
setSoundDefaultTaper,
setMedalDisplayTime,
setMedalDisplaySlideTime,
setMedalDisplaySize,
setMedalDisplayIconSize,
setMedalsPreventUnlock,
setShowWatermark,
setDebugKey,
// Utilities
PI,
abs,
min,
max,
sign,
mod,
clamp,
percent,
distanceWrap,
lerpWrap,
distanceAngle,
lerpAngle,
lerp,
smoothStep,
nearestPowerOfTwo,
isOverlapping,
isIntersecting,
wave,
formatTime,
// Random
rand,
randInt,
randSign,
randInCircle,
randVector,
randColor,
// Utility Classes
RandomGenerator,
Vector2,
Color,
Timer,
vec2,
rgb,
hsl,
isColor,
// Default Colors
WHITE,
BLACK,
GRAY,
RED,
ORANGE,
YELLOW,
GREEN,
CYAN,
BLUE,
PURPLE,
MAGENTA,
// Draw
textureInfos,
tile,
TileInfo,
TextureInfo,
mainCanvas,
mainContext,
overlayCanvas,
overlayContext,
mainCanvasSize,
screenToWorld,
worldToScreen,
drawTile,
drawRect,
drawLine,
drawPoly,
drawEllipse,
drawCircle,
drawCanvas2D,
drawText,
drawTextOverlay,
drawTextScreen,
setBlendMode,
combineCanvases,
engineFontImage,
FontImage,
isFullscreen,
toggleFullscreen,
setCursor,
getCameraSize,
// WebGL
glCanvas,
glContext,
glCompileShader,
glCopyToContext,
glCreateProgram,
glCreateTexture,
glDraw,
glFlush,
glSetTexture,
glSetAntialias,
glClearCanvas,
glAntialias,
glShader,
glActiveTexture,
glArrayBuffer,
glGeometryBuffer,
glPositionData,
glColorData,
glInstanceCount,
glAdditive,
glBatchAdditive,
// Input
keyIsDown,
keyWasPressed,
keyWasReleased,
keyDirection,
clearInput,
mouseIsDown,
mouseWasPressed,
mouseWasReleased,
mousePos,
mousePosScreen,
mouseWheel,
isUsingGamepad,
preventDefaultInput,
gamepadIsDown,
gamepadWasPressed,
gamepadWasReleased,
gamepadStick,
gamepadsUpdate,
vibrate,
vibrateStop,
isTouchDevice,
// Audio
Sound,
SoundWave,
Music,
playAudioFile,
speak,
speakStop,
getNoteFrequency,
audioContext,
playSamples,
zzfx,
// Base Object
EngineObject,
// Tiles
tileCollision,
tileCollisionSize,
initTileCollision,
setTileCollisionData,
getTileCollisionData,
tileCollisionTest,
tileCollisionRaycast,
TileLayerData,
TileLayer,
// Particles
ParticleEmitter,
Particle,
// Medals
medals,
medalsPreventUnlock,
medalsInit,
Medal,
};