import {Layer} from 'parallax/src/layer.mjs'
+ + + + constructor() +
+ + + + config(horizontalSpeed: number, verticalSpeed: number, plane: number, backgrounds: Diob[] | MapObject[], instances: Set): Object +
The configuration object of this layer.
+ + + + add(pInstance: Diob, pConfig: Object) +
Adds the instance to the parallax layer.
+ + + + remove(pInstance: Diob) +
Removes the instance from the parallax layer.
+ + + + updateConfigSpeed(pConfig: Object, pUpdateLayerConfigOnly: boolean) +
Updates the configuration speed of the layer.
+ + + + updateHorizontalSpeed(pHorizontalSpeed: number, pUpdateLayerConfigOnly: boolean) +
Updates the horizontal speed of this layer.
+ + + + updateVerticalSpeed(pVerticalSpeed: number, pUpdateLayerConfigOnly: boolean) +
Updates the vertical speed of the layer.
Adds the instance to the parallax layer. +When using this API the instance should already be on the map.
The instance to add to the layer.
The personal config of this instance. Akin to the parallax info passed via the Parallax.add API.
Parallax.add
The instance to remove from the layer.
The speed configuration of the parallax layer.
If only to update the layer config and not the instance config.
The new horizontal speed.
The new vertical speed.
+ + + + Layer: Layer +
The layer class.
An array of instances that use the parallax system.
An set of instances that use the parallax system.
Adds an instance to the parallax system.
+ + + + handleOnRelocated(pInstance: Diob | MapObject, pChildren: MapObject[]) +
Handles the onRelocated event for instances.
Adds an instance to the parallax system. +Call this first and then add your instance to the map.
The instance to add to the parallax system.
The parallax info that tells this module how to control this instance.
The x position this instance will start at.
The y position this instance will start at.
The map this instance will start at.
(x | y) < 1 = faster behind the camera eg: (-> Player goes this way = Instance goes this way <-)(x | y) > 1 faster against the camera eg: (-> Player goes this way = Instance goes this way ->)(x | y) = 0 = static to the camera eg: (-> Player goes this way = Instance does nothing, and moves with the camera)(x | y) = 1 = moves with the camera eg: (-> Player goes this way = Instance goes this way -> at position of camera)
Handles the onRelocated event for instances. Moves their children in relativity to their position.
The instance to handle the event for.
An array of children belonging to the instance.
The y position of the camera.
The simulated position. This is used to simulate a position larger than possible, but internally it treats it as its downscaled position. -One such reason for using this paramater would be to simulate a map larger than you actually have, to convince the parallax that it is infinite.
import { Parallax } from './parallax.mjs'; + +export class Layer { + /** + * The configuration object of this layer. + * @private + * @type {Object} + * @param {number} horizontalSpeed - The horizontal speed of the layer. + * @param {number} verticalSpeed - The vertical speed of the layer. + * @param {number} plane - The plane this parallax layer will occupy. + * @param {Diob[] | MapObject[]} backgrounds - An array of instances that will serve as the background. These are automatically toggled to repeat. + * @param {Set} instances - A set of instances currently on the layer. + */ + config = { + // Move the instance with the camera if the parallax is set to 0 + horizontalSpeed: 0, + verticalSpeed: 0, + plane: 1, + backgrounds: new Set(), + instances: new Set() + } + /** + * Creates a new Parallax layer with the supplied configuration. + * When creating a layer, all instances and backgrounds should already be on the map. + * @param {Object} pConfig - The configuration of the parallax layer. + * @prop {number} pConfig.horizontalSpeed - The horizontal speed of the layer. + * @prop {number} pConfig.verticalSpeed - The vertical speed of the layer. + * @prop {number} pConfig.plane - The plane this layer will occupy. + * @param {Diob[] | MapObject[]} pConfig.backgrounds - An array of instances that will serve as the background. These are automatically toggled to repeat. + * @prop {Diob[] | MapObject[]} pConfig.instances - The instances that will be added to the layer. + */ + constructor(pConfig) { + this.updateConfigSpeed(pConfig, true); + + if (!typeof pConfig.plane === 'number') { + Parallax.logger.prefix('Parallax-Module').warn('Expected a number for "pConfig.plane", but received:', typeof pConfig.plane, '\n Default plane of "1" used.'); + } else { + this.config.plane = pConfig.plane; + } + + const instanceConfig = { + x: this.config.horizontalSpeed, + y: this.config.verticalSpeed + } + + if (Array.isArray(pConfig.instances)) { + pConfig.instances.forEach(pInstance => { + pInstance.plane = this.config.plane; + this.add(pInstance, instanceConfig) + }); + } + + if (Array.isArray(pConfig.backgrounds)) { + // Backgrounds automatically loop + instanceConfig.loop = true; + pConfig.backgrounds.forEach(pInstance => { + pInstance.plane = this.config.plane; + this.add(pInstance, instanceConfig) + }); + } + } + /** + * Updates the configuration speed of the layer. + * @param {Object} pConfig - The speed configuration of the parallax layer. + * @prop {number} pConfig.horizontalSpeed - The horizontal speed of the layer. + * @prop {number} pConfig.verticalSpeed - The vertical speed of the layer. + * @param {boolean} pUpdateLayerConfigOnly - If only to update the layer config and not the instance config. + */ + updateConfigSpeed(pConfig, pUpdateLayerConfigOnly) { + this.updateHorizontalSpeed(pConfig.horizontalSpeed, pUpdateLayerConfigOnly); + this.updateVerticalSpeed(pConfig.verticalSpeed, pUpdateLayerConfigOnly); + } + /** + * Updates the horizontal speed of this layer. + * @param {number} pHorizontalSpeed - The new horizontal speed. + * @param {boolean} pUpdateLayerConfigOnly - If only to update the layer config and not the instance config. + */ + updateHorizontalSpeed(pHorizontalSpeed, pUpdateLayerConfigOnly) { + const inValidHorizontal = pHorizontalSpeed && typeof pHorizontalSpeed !== 'number'; + + if (inValidHorizontal) { + Parallax.logger.prefix('Parallax-Module').warn('Expected a number for "pHorizontalSpeed", but received:', typeof pHorizontalSpeed); + return + } + + this.config.horizontalSpeed = pHorizontalSpeed; + + if (!pUpdateLayerConfigOnly) { + const update = (pInstance) => { + const parallaxInfo = Parallax.instanceWeakMap.get(pInstance); + parallaxInfo.x = pVerticalSpeed; + } + + this.instances.forEach(pInstance => { + update(pInstance); + }); + this.backgrounds.forEach(pInstance => { + update(pInstance); + }); + } + } + /** + * Updates the vertical speed of the layer. + * @param {number} pVerticalSpeed - The new vertical speed. + * @param {boolean} pUpdateLayerConfigOnly - If only to update the layer config and not the instance config. + */ + updateVerticalSpeed(pVerticalSpeed, pUpdateLayerConfigOnly) { + const inValidVertical = pVerticalSpeed && typeof pVerticalSpeed !== 'number'; + + if (inValidVertical) { + Parallax.logger.prefix('Parallax-Module').warn('Expected a number for "pVerticalSpeed", but received:', typeof pVerticalSpeed); + return + } + + this.config.verticalSpeed = pVerticalSpeed; + + if (!pUpdateLayerConfigOnly) { + const update = (pInstance) => { + const parallaxInfo = Parallax.instanceWeakMap.get(pInstance); + parallaxInfo.y = pVerticalSpeed; + } + + this.instances.forEach(pInstance => { + update(pInstance); + }); + this.backgrounds.forEach(pInstance => { + update(pInstance); + }); + } + } + /** + * Adds the instance to the parallax layer. + * When using this API the instance should already be on the map. + * @param {Diob} pInstance - The instance to add to the layer. + * @param {Object} pConfig - The personal config of this instance. Akin to the parallax info passed via the `Parallax.add` API. + * @prop {number} pConfig.x - The horizontal speed of this instance. (This will be ignored and the layer's speed will be used.) + * @prop {number} pConfig.y - The vertical speed of this instance. (This will be ignored and the layer's speed will be used.) + * @prop {boolean} pConfig.loop - Whether this instance will be treated as a background and loop seamlessly. + */ + add(pInstance, pConfig) { + if (this.config.instances.has(pInstance)) return; + this.config.instances.add(pInstance); + const config = pConfig + ? pConfig + : { + x: this.config.horizontalSpeed, + y: this.config.verticalSpeed + } + Parallax.add(pInstance, config); + } + /** + * Removes the instance from the parallax layer. + * @param {Diob} pInstance - The instance to remove from the layer. + */ + remove(pInstance) { + this.config.instances.delete(pInstance); + Parallax.remove(pInstance); + } +}
import { Logger } from './vendor/logger.min.mjs'; +import { Layer } from './layer.mjs' class ParallaxSingleton { /** @@ -49,17 +51,16 @@ */ logger = new Logger(); /** - * @private + * The layer class. + * @type {Layer} */ - constructor() { - this.logger.registerType('Parallax-Module', '#ff6600'); - } + Layer = Layer; /** - * An array of instances that use the parallax system. + * An set of instances that use the parallax system. * @private - * @type {Array} + * @type {Set} */ - instances = []; + instances = new Set(); /** * Weakmap to store info on instances used in this module. * @private @@ -75,126 +76,150 @@ x: 0, y: 0 } + /** + * @private + */ + constructor() { + this.logger.registerType('Parallax-Module', '#ff6600'); + } /** * Adds an instance to the parallax system. * Call this first and then add your instance to the map. * @param {Object} pInstance - The instance to add to the parallax system. - * @param {Object} pParallaxInfo - The parallax info that tells this module how to control this instance. - * @property {number} pParallaxInfo.x - The x multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 1 to move with camera. - * @property {number} pParallaxInfo.y - The y multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 1 to move with camera. - * @property {boolean} pParallaxInfo.loop - Whether this instance will loop endlessly. + * @param {Object} pConfig - The parallax info that tells this module how to control this instance. + * @prop {number} pConfig.x - The x multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 1 to move with camera. + * @prop {number} pConfig.y - The y multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 1 to move with camera. + * @prop {boolean} pConfig.loop - Whether this instance will loop endlessly. * @param {number} [pX] - The x position this instance will start at. * @param {number} [pY] - The y position this instance will start at. * @param {string} [pMap] - The map this instance will start at. + * + * ## The following is how the speed of the parallax multipliers are factored in. + (x | y) < 1 = faster behind the camera eg: (-> Player goes this way = Instance goes this way <-) + (x | y) > 1 faster against the camera eg: (-> Player goes this way = Instance goes this way ->) + (x | y) = 0 = static to the camera eg: (-> Player goes this way = Instance does nothing, and moves with the camera) + (x | y) = 1 = moves with the camera eg: (-> Player goes this way = Instance goes this way -> at position of camera) */ - add(pInstance, pParallaxInfo, pX, pY, pMap) { - if (pInstance) { - if (pParallaxInfo instanceof Object) { - if (!this.instances.includes(pInstance)) { - const x = typeof(pX) === 'number' ? pX : pInstance.x; - const y = typeof(pY) === 'number' ? pY : pInstance.y; - const map = typeof(pMap) === 'string' ? pMap : pInstance.mapName; - // Clone the parallax object - const parallaxInfo = { ...pParallaxInfo }; - this.init(pInstance, parallaxInfo, x, y, map); - // Set the parallax info to the instance - this.instanceWeakMap.set(pInstance, parallaxInfo); - this.instances.push(pInstance); - } - } else { - this.logger.prefix('Parallax-Module').error('No pParallaxInfo passed or invalid type found!'); + add(pInstance, pConfig, pX, pY, pMap) { + if (!pInstance) { + this.logger.prefix('Parallax-Module').error('No pInstance passed!'); + return; + } + + if (pConfig instanceof Object) { + if (!this.instances.has(pInstance)) { + const x = typeof pX === 'number' ? pX : pInstance.x; + const y = typeof pY === 'number' ? pY : pInstance.y; + const map = typeof pMap === 'string' ? pMap : pInstance.mapName; + // Clone the parallax object + const parallaxInfo = { ...pConfig }; + this.init(pInstance, parallaxInfo, x, y, map); + // Set the parallax info to the instance + this.instanceWeakMap.set(pInstance, parallaxInfo); + this.instances.add(pInstance); } } else { - this.logger.prefix('Parallax-Module').error('No pInstance passed!'); + this.logger.prefix('Parallax-Module').error('No pConfig passed or invalid type found!'); } } /** * Initializes this instance. * @param {Object} pInstance - The instance to initialize. - * @param {Object} pParallaxInfo - The parallax info that tells this module how to control this instance. - * @property {number} pParallaxInfo.x - The x multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 1 to move with camera. - * @property {number} pParallaxInfo.y - The y multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 1 to move with camera. - * @property {boolean} pParallaxInfo.loop - Whether this instance will loop endlessly. + * @param {Object} pConfig - The parallax info that tells this module how to control this instance. + * @prop {number} pConfig.x - The x multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 0 to move with camera. + * @prop {number} pConfig.y - The y multiplier for this instance. Controls how fast or slow this instance moves. -Infinity to Infinity. 0 to move with camera. + * @prop {boolean} pConfig.loop - Whether this instance will loop endlessly. * @param {number} pX - The x position this parallax will start at. * @param {number} pY - The y position this parallax will start at. * @param {string} pMap - The map this instance will start at. * @private */ - init(pInstance, pParallaxInfo, pX, pY, pMap) { - if (VYLO) { - // If this instance is set to loop, then it needs a left and right clone - if (pParallaxInfo.loop) { - // Create a left and right clone - const left = VYLO.newDiob('Particle'); - const right = VYLO.newDiob('Particle'); - // Make the left and right clone particle look the same as the initial instance - left.setAppearance(pInstance); - right.setAppearance(pInstance); - // Position the left clone - left.x = pX - pInstance.icon.width; - left.y = pY; - // Position the right clone - right.x = pX + pInstance.icon.width; - right.y = pY; - // Store the clones in a temporary array - const children = [left, right]; - // Loop the clones and store their relative positions to the main instance - children.forEach((pChild) => { - pChild.relativeX = pChild.x - pX; - pChild.relativeY = pChild.y - pY; - }); - // When the main instance moves, move the clones with their relative position to it. - pInstance.onRelocated = function(pX, pY) { - // Update the children's position when the parent moves - children.forEach((pChild) => { - pChild.x = this.x + pChild.relativeX; - pChild.y = this.y + pChild.relativeY; - pChild.mapName = this.mapName; - }); + init(pInstance, pConfig, pX, pY, pMap) { + if (!VYLO) { + this.logger.prefix('Parallax-Module').error('VYLO not found! This module depends on the VYLO object being in the global name space.'); + return; + } + + // If this instance is set to loop, then it needs a left and right clone + if (pConfig.loop) { + // Create a left and right clone + const left = VYLO.newDiob('MapObject'); + const right = VYLO.newDiob('MapObject'); + + // Make the left and right clone particle look the same as the initial instance + left.setAppearance(pInstance); + right.setAppearance(pInstance); + + // Force the renderer to render it, as if its placed offscreen its not rendered. + left.setPos(pX, pY, pMap); + right.setPos(pX, pY, pMap); + + // Position the left clone + left.x = pX - pInstance.icon.width; + left.y = pY; + // Position the right clone + right.x = pX + pInstance.icon.width; + right.y = pY; + // Store the clones in a temporary array + const children = [left, right]; + // Loop the clones and store their relative positions to the main instance + children.forEach((pChild) => { + pChild.relativeX = pChild.x - pX; + pChild.relativeY = pChild.y - pY; + }); + + // Do not mutate event if one is found. Call alongside it. + const oldRelocatedEvent = pInstance.onRelocated; + // When the main instance moves, move the clones with their relative position to it. + if (typeof oldRelocatedEvent === 'function') { + pInstance.onRelocated = (pX, pY) => { + oldRelocatedEvent.call(pInstance, pX, pY); + this.handleOnRelocated(pInstance, children); + } + } else { + pInstance.onRelocated = (pX, pY) => { + this.handleOnRelocated(pInstance, children); } } - const viewEye = VYLO.Client.getViewEye(); - let lastCamX = 0; - let lastCamY = 0; - if (viewEye) { - lastCamX = viewEye.x; - lastCamY = viewEye.y; - } - this.lastCamPos.x = lastCamX; - this.lastCamPos.y = lastCamY; - pInstance.setPos(0, 0, pMap); - pInstance.setPos(pX, pY, pMap); - } else { - this.logger.prefix('Parallax-Module').error('VYLO not found! This module depends on the VYLO object being in the global name space.'); } + const viewEye = VYLO.Client.getViewEye(); + let lastCamX = 0; + let lastCamY = 0; + if (viewEye) { + lastCamX = viewEye.x; + lastCamY = viewEye.y; + } + this.lastCamPos.x = lastCamX; + this.lastCamPos.y = lastCamY; + pInstance.setPos(pX, pY, pMap); } /** * Removes an instance to the parallax system. * @param {Object} pInstance - The instance to remove to the parallax system. */ remove(pInstance) { - if (pInstance) { - if (this.instances.includes(pInstance)) { - this.instances.splice(this.instances.indexOf(pInstance), 1); - } - } else { + if (!pInstance) { this.logger.prefix('Parallax-Module').error('No pInstance passed!'); + return; + } + + if (this.instances.has(pInstance)) { + this.instances.delete(pInstance); + this.instanceWeakMap.delete(pInstance); } } /** * Updates the parallax system. * @param {number} pCameraX - The x position of the camera. * @param {number} pCameraY - The y position of the camera. - * @param {number} pSimulatedPosition - The simulated position. This is used to simulate a position larger than possible, but internally it treats it as its downscaled position. - * One such reason for using this paramater would be to simulate a map larger than you actually have, to convince the parallax that it is infinite. */ - update(pCameraX = 0, pCameraY = 0, pSimulatedPosition) { - // The camera's x position. May be adjusted if pSimulatedPosition is used. + update(pCameraX = 0, pCameraY = 0) { + // The camera's x position. let cameraX = pCameraX; - // The camera's x position. May be adjusted if pSimulatedPosition is used. + // The camera's x position. let cameraY = pCameraY; - for (const instance of this.instances) { - const parallaxInfo = this.instanceWeakMap.get(instance); + this.instances.forEach((pInstance) => { + const parallaxInfo = this.instanceWeakMap.get(pInstance); // Move the instance with the camera if the parallax is set to 0 const isBackgroundX = parallaxInfo.x === 0; @@ -205,43 +230,56 @@ let y; if (isBackgroundX) { - x = cameraX - instance.icon.width / 2; + x = cameraX - pInstance.icon.width / 2; } else { let deltaX = cameraX - this.lastCamPos.x; let distX = deltaX * parallaxInfo.x; - x = instance.x + distX; + x = pInstance.x + distX; } if (isBackgroundY) { - y = cameraY - instance.icon.height / 2; + y = cameraY - pInstance.icon.height / 2; } else { let deltaY = cameraY - this.lastCamPos.y; let distY = deltaY * parallaxInfo.y; - y = instance.y + distY; + y = pInstance.y + distY; } // Set the position - instance.x = x; - instance.y = y; + pInstance.x = x; + pInstance.y = y; // Logic cannot be ran on background instances as they should not loop if (!isBackgroundX && !isBackgroundY) { if (parallaxInfo.loop) { // The start pos + total width - const rightEnd = instance.x + instance.icon.width; + const rightEnd = pInstance.x + pInstance.icon.width; // The start pos - total width / 2 - const leftEnd = instance.x - instance.icon.width / 6; + const leftEnd = pInstance.x - pInstance.icon.width / 6; if (cameraX > rightEnd) { - instance.x += instance.icon.width; + pInstance.x += pInstance.icon.width; } else if (cameraX < leftEnd) { - instance.x -= instance.icon.width; + pInstance.x -= pInstance.icon.width; } } } - } + }); this.lastCamPos.x = cameraX; this.lastCamPos.y = cameraY; } + /** + * Handles the onRelocated event for instances. Moves their children in relativity to their position. + * @param {Diob | MapObject} pInstance - The instance to handle the event for. + * @param {MapObject[]} pChildren - An array of children belonging to the instance. + */ + handleOnRelocated(pInstance, pChildren) { + // Update the children's position when the parent moves + pChildren.forEach((pChild) => { + pChild.x = pInstance.x + pChild.relativeX; + pChild.y = pInstance.y + pChild.relativeY; + pChild.mapName = pInstance.mapName; + }); + } } const Parallax = new ParallaxSingleton(); diff --git a/docs/identifiers.html b/docs/identifiers.html index fd09650..57e7e3e 100644 --- a/docs/identifiers.html +++ b/docs/identifiers.html @@ -29,7 +29,8 @@ - CParallaxSingleton + CLayer +CParallaxSingleton VParallax @@ -52,6 +53,34 @@ + +
+ C + + + Layer +
import {Parallax} from 'parallax'
+
+ 