q5play 4.0.1 → 4.0.4

package/LICENSE.md

@@ -1,3 +1,5 @@
+SPDX-License-Identifier: LicenseRef-q5play-Creator-License
+
 # q5play Creator License
 
 This License Agreement ("Agreement") is made between Quinton Ashley, the sole copyright owner of q5play ("Licensor") and an individual, organization, or company ("Licensee") that is using q5play.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "q5play",
-	"version": "4.0.1",
+	"version": "4.0.4",
 	"author": "quinton-ashley",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"description": "A web-based game engine that uses q5.js WebGPU for graphics and Box2D v3 WASM for physics.",

package/q5play.d.ts

@@ -41,17 +41,6 @@ declare global {
 		 * @default true
 		 */
 		friendlyRounding: boolean;
-		/**
-		 * Snaps sprites to the nearest `q5play.gridSize`
-		 * increment when they are moved.
-		 * @default false
-		 */
-		snapToGrid: boolean;
-		/**
-		 * The size of the grid cells that sprites are snapped to.
-		 * @default 0.5
-		 */
-		gridSize: number;
 		/**
 		 * Information about the operating system being used.
 		 */
@@ -596,11 +585,6 @@ declare global {
 		 */
 		get heading(): string;
 		set heading(val: string);
-		/**
-		 * True if the sprite is moving.
-		 * @readonly
-		 */
-		get isMoving(): boolean;
 		/**
 		 * Set this to true if the sprite goes really fast to prevent
 		 * inaccurate physics simulation.
@@ -2600,6 +2584,18 @@ declare global {
 		 * @returns true on the first frame that the user releases the input after dragging the mouse
 		 */
 		dragged(inp?: string): boolean;
+		/**
+		 * @returns true on the first frame that the user scrolls the mouse wheel
+		 */
+		scrolls(): boolean;
+		/**
+		 * @returns the amount of frames the user has been scrolling the mouse wheel
+		 */
+		scrolling(): number;
+		/**
+		 * @returns true on the first frame that the user stops scrolling the mouse wheel
+		 */
+		scrolled(): boolean;
 	}
 
 	class _Pointer extends InputDevice {

package/q5play.js

@@ -30,8 +30,9 @@ if (typeof globalThis.Q5 == 'undefined') {
 let box2dPromise;
 
 // called when a new instance of Q5 is created
-async function q5playPreSetup($, q) {
-	const log = console.log;
+async function q5playPreSetup(q) {
+	const $ = this,
+		log = console.log;
 
 	if (!box2dPromise) {
 		box2dPromise = (async () => {
@@ -243,8 +244,6 @@ async function q5playPreSetup($, q) {
 			this.spritesDrawn = 0;
 			this.images = {};
 			this.palettes = [];
-			this.snapToGrid = false;
-			this.gridSize = 0.5;
 			this.emojiScale = 1;
 			this.os = {};
 			this.context = 'web';
@@ -584,11 +583,18 @@ async function q5playPreSetup($, q) {
 			this.x += this.vx * timeScale;
 			this.y += this.vy * timeScale;
 
+			if (this.tint) $.tint(this.tint);
+			if (this.opacity) $.opacity(this.opacity);
+
 			if (this.ani) {
 				$.animation(this.ani, this.x, this.y);
 			} else if (this._img) {
 				$.image(this._img, this.x, this.y);
 			}
+
+			if (this.tint) $.noTint();
+			if (this.opacity) $.opacity(1);
+
 			this.life -= timeScale;
 		}
 
@@ -698,24 +704,26 @@ async function q5playPreSetup($, q) {
 		}
 
 		changeAni(name) {
-			let ani = this._anis?.[name];
+			let ani = this.anis[name];
 			if (!ani) {
-				for (let g of this.groups || []) {
-					ani = g._anis?.[name] || g._anis?.[name];
-					if (ani) {
-						ani = ani.clone();
-						break;
+				const groups = this.groups;
+				if (groups) {
+					for (let g of groups) {
+						ani = g._anis?.[name];
+						if (ani) break;
 					}
+				} else {
+					let v = this._visuals;
+					ani = v._anis?.[name];
 				}
-				if (!ani) {
-					console.error('Ani not found: ' + name);
-					return;
-				}
+				if (ani) ani = ani.clone();
+				else return console.error('Ani not found: ' + name);
 			}
 			// reset to frame 0 of that animation
 			if (this.resetAniOnChange) ani._frame = 0;
 			ani.name = name;
 			this.ani = ani;
+			this.anis[name] = ani;
 		}
 
 		playAni(name) {
@@ -1013,18 +1021,17 @@ async function q5playPreSetup($, q) {
 				else y = 0;
 			}
 
-			let rr;
-
 			let forcedBoxShape = false;
 			if (w === undefined) {
 				w = group.w || group.width || group.d || group.diameter;
 				if (!h && !group.d && !group.diameter) {
 					h = group.h || group.height;
 					forcedBoxShape = true;
-					rr = group.roundedRadius;
 				}
 			}
 
+			let rr = group.roundedRadius;
+
 			if (typeof x == 'function') x = x(group.length);
 			if (typeof y == 'function') y = y(group.length);
 			if (typeof w == 'function') w = w(group.length);
@@ -1866,10 +1873,6 @@ async function q5playPreSetup($, q) {
 			this.direction = val;
 		}
 
-		get isMoving() {
-			return this.vel.x != 0 || this.vel.y != 0;
-		}
-
 		get isSuperFast() {
 			return b2Body_IsBullet(this.bdID);
 		}
@@ -2292,6 +2295,21 @@ async function q5playPreSetup($, q) {
 			this.d = val;
 		}
 
+		get roundedRadius() {
+			return this._roundedRadius;
+		}
+		set roundedRadius(val) {
+			if (val == this._roundedRadius) return;
+
+			this._roundedRadius = val;
+			if (this.watch) this.mod[37] = true;
+
+			while (this._shapes.length) {
+				this._shapes.at(-1).delete();
+			}
+			this._add(false, 0, 0, this._w, this._h, val);
+		}
+
 		/*
 		 * Validates convexity.
 		 */
@@ -2329,13 +2347,6 @@ async function q5playPreSetup($, q) {
 			this._customUpdate = val;
 		}
 
-		get postDraw() {
-			return this._postDraw;
-		}
-		set postDraw(val) {
-			this._customPostDraw = val;
-		}
-
 		get vel() {
 			return this._vel;
 		}
@@ -2610,13 +2621,6 @@ async function q5playPreSetup($, q) {
 			}
 		}
 
-		_postDraw() {
-			if (this._customPostDraw) this._customPostDraw();
-
-			this.autoDraw ??= true;
-			this.autoUpdate ??= true;
-		}
-
 		_args2Vec(x, y) {
 			if (Array.isArray(x)) {
 				return { x: x[0], y: x[1] };
@@ -3167,9 +3171,12 @@ async function q5playPreSetup($, q) {
 			}
 
 			// loading promise
-			this.promise = new Promise((resolve) => {
-				this._resolve = resolve;
-			});
+			if (args.length) {
+				this.promise = new Promise((resolve) => {
+					this._resolve = resolve;
+				});
+				$._loaders.push(this.promise);
+			}
 
 			this._frame = 0;
 			this._cycles = 0;
@@ -3384,12 +3391,16 @@ async function q5playPreSetup($, q) {
 
 			// play by default but a single frame ani doesn't need to play
 			this.playing = this.length != 1 && anis.playing != false;
+
+			if (this.length > 0 && !this.spriteSheet) {
+				Promise.all(this.map((img) => img.promise)).then(() => this._resolve(this));
+			}
 		}
 
-		// make loading Ani objects awaitable
-		// then(resolve, reject) {
-		// 	return this.promise.then(resolve, reject);
-		// }
+		// use a plain Array constructor for map/filter/etc.
+		static get [Symbol.species]() {
+			return Array;
+		}
 
 		get frame() {
 			return this._frame;
@@ -3700,6 +3711,7 @@ async function q5playPreSetup($, q) {
 					else this.img = _this._img;
 					_this.push(this);
 					_this.amount++;
+					this._visuals = _this;
 				}
 			};
 		}
@@ -3953,6 +3965,10 @@ async function q5playPreSetup($, q) {
 				constructor() {
 					super(_this, ...arguments);
 				}
+
+				static withSensor() {
+					return new $.Sprite(null, _this, ...arguments);
+				}
 			};
 
 			this.Group = class extends $.Group {
@@ -4710,12 +4726,6 @@ async function q5playPreSetup($, q) {
 
 			$.imageMode(ogImgMode);
 		}
-
-		postDraw() {
-			for (let s of this) {
-				s.postDraw();
-			}
-		}
 	};
 
 	$.Group.prototype.__step = $.Sprite.prototype.__step;
@@ -5214,6 +5224,26 @@ async function q5playPreSetup($, q) {
 			this._calcBoundsY(val);
 		}
 
+		get zoom() {
+			return this._zoom;
+		}
+		set zoom(val) {
+			if (val === undefined || isNaN(val)) return;
+			this._zoom = val;
+			let x = -this._pos.x;
+			if ($._c2d) x += $.canvas.hw / val;
+			let y = -this._pos.y;
+			if ($._c2d) y += $.canvas.hh / val;
+			this.__pos.x = x;
+			this.__pos.y = y;
+			if ($.allSprites.pixelPerfect) {
+				this.__pos.rounded.x = Math.round(x);
+				this.__pos.rounded.y = Math.round(y);
+			}
+			this._calcBoundsX(this._pos.x);
+			this._calcBoundsY(this._pos.y);
+		}
+
 		moveTo(x, y, speed) {
 			if (x === undefined) return;
 			if (isNaN(x)) {
@@ -5243,7 +5273,7 @@ async function q5playPreSetup($, q) {
 					this.x += velX;
 					this.y += velY;
 
-					await $.delay(16);
+					await $.delay();
 					if (destIdx != this._destIdx) return false;
 				}
 				this.x = x;
@@ -5252,26 +5282,6 @@ async function q5playPreSetup($, q) {
 			})();
 		}
 
-		get zoom() {
-			return this._zoom;
-		}
-		set zoom(val) {
-			if (val === undefined || isNaN(val)) return;
-			this._zoom = val;
-			let x = -this._pos.x;
-			if ($._c2d) x += $.canvas.hw / val;
-			let y = -this._pos.y;
-			if ($._c2d) y += $.canvas.hh / val;
-			this.__pos.x = x;
-			this.__pos.y = y;
-			if ($.allSprites.pixelPerfect) {
-				this.__pos.rounded.x = Math.round(x);
-				this.__pos.rounded.y = Math.round(y);
-			}
-			this._calcBoundsX(this._pos.x);
-			this._calcBoundsY(this._pos.y);
-		}
-
 		zoomTo(target, speed) {
 			if (target == this._zoom) return Promise.resolve(true);
 			speed ??= 0.1;
@@ -5287,7 +5297,7 @@ async function q5playPreSetup($, q) {
 				for (let i = 0; i < frames; i++) {
 					if (zoomIdx != this._zoomIdx) return false;
 					this.zoom += speed;
-					await $.delay(16);
+					await $.delay();
 				}
 				this.zoom = target;
 				return true;
@@ -6106,8 +6116,11 @@ async function q5playPreSetup($, q) {
 	}
 
 	function isArrowFunction(fn) {
-		return !/^(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*(?:(?:(?:async\s(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*)?function|class)(?:\s|(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*)|(?:[_$\w][\w0-9_$]*\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\()|(?:\[\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*(?:(?:['][^']+['])|(?:["][^"]+["]))\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\]\())/.test(
-			fn.toString()
+		return (
+			fn.name == 'jsobj' || // brython lambda function check
+			!/^(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*(?:(?:(?:async\s(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*\s*)?function|class)(?:\s|(?:(?:\/\*[^(?:\*\/)]*\*\/\s*)|(?:\/\/[^\r\n]*))*)|(?:[_$\w][\w0-9_$]*\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\()|(?:\[\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*(?:(?:['][^']+['])|(?:["][^"]+["]))\s*(?:\/\*[^(?:\*\/)]*\*\/\s*)*\s*\]\())/.test(
+				fn.toString()
+			)
 		);
 	}
 
@@ -6224,6 +6237,8 @@ async function q5playPreSetup($, q) {
 
 		let img = g.get(left, top, right - left + 1, bottom - top + 1);
 		img.src = emoji;
+		img.defaultWidth = img.width;
+		img.defaultHeight = img.height;
 
 		g.remove();
 
@@ -6468,6 +6483,7 @@ async function q5playPreSetup($, q) {
 			args[0] = window.innerWidth;
 			args[1] = window.innerHeight;
 		}
+		args[1] ??= args[0];
 		args[0] = Math.floor(args[0] / 2) * 2;
 		args[1] = Math.floor(args[1] / 2) * 2;
 		let rend = _createCanvas.call($, ...args);
@@ -6505,6 +6521,9 @@ async function q5playPreSetup($, q) {
 				let sd = $.mouse.scrollDelta;
 				sd.x = e.deltaX;
 				sd.y = e.deltaY;
+				if (Math.abs(sd.x) > 1 || Math.abs(sd.y) > 1) {
+					$.mouse.scroll++;
+				}
 			});
 			c.addEventListener('touchstart', (e) => e.preventDefault());
 			// this stops the right click menu from appearing
@@ -6794,8 +6813,14 @@ async function q5playPreSetup($, q) {
 
 		_update() {
 			let cam = $.camera;
-			this.x = $.mouseX / cam.zoom + cam.x;
-			this.y = $.mouseY / cam.zoom + cam.y;
+			let m = this;
+			m.x = $.mouseX / cam.zoom + cam.x;
+			m.y = $.mouseY / cam.zoom + cam.y;
+
+			if (m.scroll < 0) m.scroll = 0;
+			if (m.scrollDelta.x == 0 && m.scrollDelta.y == 0) {
+				m.scroll = m.scroll == 1 ? -3 : m.scroll > 0 ? -1 : 0;
+			}
 		}
 
 		get pos() {
@@ -6837,6 +6862,16 @@ async function q5playPreSetup($, q) {
 			inp ??= this._default;
 			return this.drag[inp] <= -1;
 		}
+
+		scrolls() {
+			return this.scroll == 1;
+		}
+		scrolling() {
+			return this.scroll > 0 ? this.scroll : 0;
+		}
+		scrolled() {
+			return this.scroll <= -1;
+		}
 	};
 
 	$.mouse = new $._Mouse();
@@ -7024,18 +7059,26 @@ async function q5playPreSetup($, q) {
 			super();
 			this._default = ' ';
 
-			this.alt = 0;
-			this.arrowUp = 0;
-			this.arrowDown = 0;
-			this.arrowLeft = 0;
-			this.arrowRight = 0;
-			this.backspace = 0;
-			this.capsLock = 0;
-			this.control = 0;
-			this.enter = 0;
-			this.meta = 0;
-			this.shift = 0;
-			this.tab = 0;
+			let keys = [
+				' ',
+				'alt',
+				'arrowUp',
+				'arrowDown',
+				'arrowLeft',
+				'arrowRight',
+				'backspace',
+				'capsLock',
+				'control',
+				'enter',
+				'meta',
+				'shift',
+				'tab'
+			];
+			keys = keys.concat("abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-=[];,./'".split(''));
+			// initializing these props to 0 makes brython happy
+			for (let key of keys) {
+				this[key] = 0;
+			}
 
 			let k = (this._simpleKeyControls = {
 				arrowUp: 'up',
@@ -7959,6 +8002,8 @@ async function q5playPreSetup($, q) {
 			window[p] = $[p];
 		}
 	}
+
+	if (Q5.applyLang) Q5.applyLang(q, q5playLibLangs, q5playClassLangs);
 }
 
 // called once after setup
@@ -8087,7 +8132,10 @@ function q5playPostDraw() {
 
 	if (cam.isActive) cam.off();
 
-	$.allSprites.postDraw();
+	for (let s of $.allSprites) {
+		s.autoDraw ??= true;
+		s.autoUpdate ??= true;
+	}
 
 	if ($.q5play.renderStats) $.renderStats();
 
@@ -8131,9 +8179,203 @@ function q5playPostDraw() {
 }
 
 function q5playRemove() {
-	this.world.delete();
+	this.world?.delete();
 }
 
+const q5playLibLangs = `
+allSprites -> es:todosLosSprites
+world -> es:mundo
+camera -> es:cámara
+mouse -> es:ratón
+kb -> es:tec
+keyboard -> es:teclado
+contro -> es:mando
+controllers -> es:mandos
+pointer -> es:puntero
+pointers -> es:punteros
+spriteArt -> es:arteSprite
+delay -> es:esperar
+animation -> es:animación
+renderStats -> es:estadísticasRenderizado
+EmojiImage -> es:ImagenEmoji
+parseTextureAtlas -> es:parsearAtlasTextura
+DYNAMIC -> es:DINÁMICO
+STATIC -> es:ESTÁTICO
+KINEMATIC -> es:CINEMÁTICO
+Group -> es:Grupo
+Joint -> es:Articulación
+`;
+
+const q5playClassLangs = {
+	Sprite: `
+rotation -> es:rotación
+rotationSpeed -> es:velocidadRotación
+rotationDrag -> es:resistenciaRotación
+rotationLock -> es:bloqueoRotación
+speed -> es:velocidad
+direction -> es:dirección
+drag -> es:amortiguación
+mass -> es:masa
+density -> es:densidad
+bounciness -> es:elasticidad
+friction -> es:fricción
+physicsEnabled -> es:físicaActivada
+physicsType -> es:tipoFísica
+physics -> es:física
+sleeping -> es:durmiendo
+allowSleeping -> es:permitirDormir
+layer -> es:capa
+life -> es:vida
+scale -> es:escala
+tint -> es:tinte
+opacity -> es:opacidad
+visible -> es:visible
+debug -> es:depurar
+deleted -> es:eliminado
+bearing -> es:rumbo
+heading -> es:orientación
+isSuperFast -> es:esUltraRápido
+pixelPerfect -> es:perfectoEnPíxeles
+gravityScale -> es:escalaGravedad
+diameter -> es:diámetro
+roundedRadius -> es:radioRedondeado
+centerOfMass -> es:centroMasa
+previousPosition -> es:posiciónAnterior
+previousRotation -> es:rotaciónAnterior
+velocity -> es:vectorVelocidad
+position -> es:posición
+canvasPos -> es:posiciónLienzo
+addCollider -> es:añadirColisionador
+addSensor -> es:añadirSensor
+deleteColliders -> es:eliminarColisionadores
+deleteSensors -> es:eliminarSensores
+collide -> es:colisionar
+collides -> es:colisiona
+colliding -> es:colisionando
+collided -> es:colisionó
+overlap -> es:solapar
+overlaps -> es:solapa
+overlapping -> es:solapando
+overlapped -> es:solapó
+passes -> es:pasa
+addAni -> es:añadirAni
+addAnis -> es:añadirAnis
+changeAni -> es:cambiarAni
+playAni -> es:reproducirAni
+playAnis -> es:reproducirAnis
+moveTowards -> es:moverHacia
+rotateTowards -> es:rotarHacia
+applyForce -> es:aplicarFuerza
+applyForceScaled -> es:aplicarFuerzaEscalada
+attractTo -> es:atraerA
+repelFrom -> es:repelerDe
+applyTorque -> es:aplicarTorque
+angleTo -> es:ánguloHacia
+rotationToFace -> es:rotaciónParaMirar
+angleToFace -> es:ánguloParaMirar
+setSpeedAndDirection -> es:establecerVelocidadYDirección
+scaleBy -> es:escalarPor
+resetMass -> es:reiniciarMasa
+distanceTo -> es:distanciaA
+delete -> es:eliminar
+addDefaultSensors -> es:añadirSensoresDefecto
+autoDraw -> es:autoDibujar
+draw -> es:dibujar
+autoUpdate -> es:autoActualizar
+update -> es:actualizar
+`,
+	Group: `
+Group -> es:Grupo
+amount -> es:cantidad
+autoCull -> es:descartarFueraCampo
+cull -> es:descartar
+contains -> es:contiene
+remove -> es:quitar
+removeAll -> es:quitarTodo
+delete -> es:eliminar
+deleteAll -> es:eliminarTodo
+`,
+	World: `
+gravity -> es:gravedad
+timeScale -> es:escalaVelocidad
+meterSize -> es:tamañoMetro
+allowSleeping -> es:permitirDormir
+awakeBodies -> es:cuerposDespiertos
+bounceThreshold -> es:umbralRebote
+hitThreshold -> es:umbralGolpe
+autoStep -> es:pasoAutomático
+subSteps -> es:subPasos
+explodeAt -> es:explosionEn
+delete -> es:eliminar
+`,
+	Camera: `
+position -> es:posición
+zoom ->
+moveTo -> es:moverA
+zoomTo -> es:acercarA
+on -> es:activar
+off -> es:desactivar
+`,
+	Ani: `
+play -> es:reproducir
+pause -> es:pausar
+stop -> es:parar
+loop -> es:bucle
+noLoop -> es:sinBucle
+rewind -> es:rebobinar
+nextFrame -> es:siguienteFotograma
+previousFrame -> es:fotogramaAnterior
+goToFrame -> es:irAlFotograma
+clone -> es:clonar
+frame -> es:fotograma
+lastFrame -> es:últimoFotograma
+frameImage -> es:imagenFotograma
+playing -> es:reproduciendo
+looping -> es:enBucle
+frameDelay -> es:retardoFotograma
+`,
+	InputDevice: `
+presses -> es:presiona
+pressing -> es:presionando
+holds -> es:mantiene
+holding -> es:manteniendo
+held -> es:mantuvo
+released -> es:soltó
+releases -> es:suelta
+holdThreshold -> es:umbralMantener
+`,
+	_Mouse: `
+position -> es:posición
+visible -> es:visible
+isOnCanvas -> es:estaEnLienzo
+scroll -> es:desplazamiento
+drags -> es:arrastra
+dragging -> es:arrastrando
+dragged -> es:arrastró
+scrolls -> es:desplaza
+scrolling -> es:desplazando
+scrolled -> es:desplazó
+`,
+	_Pointer: `
+prev -> es:previo
+canvasPos -> es:posEnLienzo
+type -> es:tipo
+duration -> es:duración
+holdThreshold -> es:umbralDeSostenido
+drags -> es:arrastra
+dragging -> es:arrastrando
+dragged -> es:arrastró
+grabs -> es:agarra
+grabbing -> es:agarrando
+grabbed -> es:agarró
+overlaps -> es:superpone
+overlapping -> es:superponiendo
+overlapped -> es:superpuso
+pressure -> es:presión
+`
+};
+q5playClassLangs.Group += q5playClassLangs.Sprite;
+
 Q5.addHook('presetup', q5playPreSetup);
 Q5.addHook('postsetup', q5playPostSetup);
 Q5.addHook('predraw', q5playPreDraw);