wgge 0.1.32 → 0.1.33

package/core/animation/ProgressValue.js

@@ -1,10 +1,11 @@
 export const EASING_FLAT = (x) => x;
-export const EASING_EXPONENTIAL_IN = (x, e = 2) => Math.pow(x,e);
+export const EASING_EXPONENTIAL_IN = (x, e = 2) => Math.pow(x, e);
 export const EASING_EXPONENTIAL_IN_OUT = (x, e = 2) => (x <= 0.5) ? Math.pow(x * 2, e) / 2 : 1 - Math.pow(2 - x * 2, e) / 2;
 export const EASING_QUAD_IN = EASING_EXPONENTIAL_IN;
 export const EASING_QUAD_IN_OUT = EASING_EXPONENTIAL_IN_OUT;
 export const EASING_CUBIC_IN = (x) => EASING_EXPONENTIAL_IN(x, 3);
 export const EASING_CUBIC_IN_OUT = (x) => EASING_EXPONENTIAL_IN_OUT(x, 3);
+export const EASING_LOG_OUT = (v) => Math.log2(v) / 4 + 1;
 
 export default class ProgressValue {
 	start;

package/core/particles/ParticleController.js

@@ -0,0 +1,35 @@
+import ControllerBase from "../controller/ControllerBase";
+
+export default class ParticleController extends ControllerBase {
+
+	/**
+	 * @type ParticleModel
+	 */
+	model;
+
+	constructor(game, model) {
+		super(game, model);
+
+		this.model = model;
+	}
+
+	updateInternal(delta) {
+		const deltaSecs = (delta / 1000);
+		this.model.lifetime.increase(-deltaSecs);
+		if (this.model.lifetime.get() < 0) {
+			this.model.removeMyself();
+			return;
+		}
+
+		if (this.model.fadeOutDuration.get() > 0 && this.model.lifetime.get() < this.model.fadeOutDuration.get()) {
+			this.model.opacity.set(this.model.lifetime.get() / this.model.fadeOutDuration.get());
+		}
+
+		this.model.position.set(this.model.position.add(this.model.movement.multiply(deltaSecs)));
+		this.model.scale.increase(this.model.scaleGrowth.get() * deltaSecs);
+		if (this.model.scale.get() < 0) {
+			this.model.scale.set(0);
+		}
+	}
+
+}

package/core/particles/ParticleModel.js

@@ -0,0 +1,68 @@
+import ObjectModel from "../model/ObjectModel";
+import StringValue from "../model/value/StringValue";
+import FloatValue from "../model/value/FloatValue";
+import Vector3 from "../model/vector/Vector3";
+
+export default class ParticleModel extends ObjectModel {
+
+	/**
+	 * @type StringValue
+	 */
+	imageUrl;
+
+	/**
+	 * @type Vector3
+	 */
+	position;
+
+	/**
+	 * @type FloatValue
+	 */
+	scale;
+
+	/**
+	 * @type FloatValue
+	 */
+	opacity;
+
+	/**
+	 * @type Vector3
+	 */
+	movement;
+
+	/**
+	 * Remaining lifetime in seconds
+	 * @type FloatValue
+	 */
+	lifetime;
+
+	/**
+	 * Per second
+	 * @type FloatValue
+	 */
+	scaleGrowth;
+
+	/**
+	 * In seconds
+	 * @type FloatValue
+	 */
+	fadeOutDuration;
+
+	constructor(persistent) {
+		super(persistent);
+
+		this.imageUrl = this.addProperty('imageUrl', new StringValue('img/smoke-white.png'));
+		this.position = this.addProperty('position', new Vector3());
+		this.scale = this.addProperty('scale', new FloatValue(1));
+		this.opacity = this.addProperty('opacity', new FloatValue(1));
+		this.movement = this.addProperty('movement', new Vector3());
+		this.lifetime = this.addProperty('lifetime', new FloatValue(1));
+		this.scaleGrowth = this.addProperty('scaleGrowth', new FloatValue(-0.12));
+		this.fadeOutDuration = this.addProperty('fadeOutDuration', new FloatValue(0.3));
+	}
+
+	getResourcesForPreloadInternal() {
+		return [this.imageUrl.get()];
+	}
+
+}

package/core/particles/ParticleRenderer.js

@@ -0,0 +1,53 @@
+import * as THREE from "three";
+import ThreeRenderer from "../renderer/three/ThreeRenderer";
+
+export default class ParticleRenderer extends ThreeRenderer {
+
+	/**
+	 * @type ParticleModel
+	 */
+	model;
+
+	sprite;
+
+	constructor(game, model, scene) {
+		super(game, model, scene);
+
+		this.model = model;
+	}
+
+	activateInternal() {
+		this.game.assets.getAsset(
+			this.model.imageUrl.get(),
+			(img) => {
+				const texture = new THREE.Texture();
+				texture.image = img;
+				texture.needsUpdate = true;
+				const material = new THREE.SpriteMaterial({map: texture});
+				this.sprite = new THREE.Sprite(material);
+				this.scene.add(this.sprite);
+				this.renderInternal();
+			}
+		);
+	}
+
+	deactivateInternal() {
+		if (this.sprite) {
+			this.sprite.opacity
+			this.sprite.removeFromParent();
+		}
+	}
+
+	renderInternal() {
+		if (!this.sprite) return;
+
+		this.sprite.position.set(this.model.position.x, this.model.position.y, this.model.position.z);
+		this.sprite.scale.set(this.model.scale.get(), this.model.scale.get(), this.model.scale.get());
+
+		if (this.model.opacity.isDirty) {
+			this.sprite.material.opacity = this.model.opacity.get();
+			this.sprite.material.needsUpdate = true;
+		}
+	}
+
+}

package/core/particles/generator/ParticleGeneratorController.js

@@ -0,0 +1,69 @@
+import ParticleController from "../ParticleController";
+import ControllerBase from "../../controller/ControllerBase";
+import Vector3 from "../../model/vector/Vector3";
+
+export default class ParticleGeneratorController extends ControllerBase {
+
+	/**
+	 * @type ParticleGeneratorModel
+	 */
+	model;
+
+	constructor(game, model) {
+		super(game, model);
+
+		this.model = model;
+
+		this.addChild(
+			new CollectionController(
+				this.game,
+				this.model.particles,
+				(m) => new ParticleController(this.game, m)
+			)
+		);
+	}
+
+	activateInternal() {
+		this.particleMaxTimeout = (1 / this.model.particlesPerSecond.get()) * 1000;
+		this.particleTimeout = Math.random() * this.particleMaxTimeout;
+	}
+
+	updateInternal(delta) {
+		if (this.model.on.get()) {
+			this.particleTimeout -= delta;
+			while (this.particleTimeout < 0) {
+				this.addParticle();
+				this.particleTimeout += this.particleMaxTimeout;
+			}
+		}
+	}
+
+	addParticle() {
+		const particle = this.model.particleTemplate.clone();
+
+		particle.position.set(
+			this.model.position.add(
+				new Vector3(
+					this.model.particlePositionSpread.x * (-0.5 + Math.random()),
+					this.model.particlePositionSpread.y * (-0.5 + Math.random()),
+					this.model.particlePositionSpread.z * (-0.5 + Math.random())
+				)
+			)
+		);
+
+		particle.scale.set(this.model.particleTemplate.scale.get() + (this.model.particleScaleSpread.get() * (-0.5 + Math.random())));
+		particle.lifetime.set(this.model.particleTemplate.lifetime.get() + (this.model.particleLifetimeSpread.get() * (-0.5 + Math.random())))
+		particle.movement.set(
+			this.model.particleTemplate.movement.add(
+				new Vector3(
+					this.model.particleMovementSpread.x * (-0.5 + Math.random()),
+					this.model.particleMovementSpread.y * (-0.5 + Math.random()),
+					this.model.particleMovementSpread.z * (-0.5 + Math.random())
+				)
+			)
+		);
+
+		this.model.particles.add(particle);
+	}
+
+}

package/core/particles/generator/ParticleGeneratorModel.js

@@ -0,0 +1,76 @@
+import ParticleModel from "../ParticleModel";
+import ObjectModel from "../../model/ObjectModel";
+import BoolValue from "../../model/value/BoolValue";
+import FloatValue from "../../model/value/FloatValue";
+import ModelNodeCollection from "../../model/collection/ModelNodeCollection";
+import Vector3 from "../../model/vector/Vector3";
+
+export default class ParticleGeneratorModel extends ObjectModel {
+
+	/**
+	 * @type Vector3
+	 */
+	position;
+
+	/**
+	 * @type BoolValue
+	 */
+	on;
+
+	/**
+	 * @type ParticleModel
+	 */
+	particleTemplate;
+
+	/**
+	 * @type FloatValue
+	 */
+	particlesPerSecond;
+
+	/**
+	 *  new particles may be smaller or bigger
+	 * @type FloatValue
+	 */
+	particleScaleSpread;
+
+	/**
+	 *  particles starting point offset
+	 * @type Vector3
+	 */
+	particlePositionSpread;
+
+	/**
+	 *  random movement change per second
+	 * @type Vector3
+	 */
+	particleMovementSpread;
+
+	/**
+	 * @type FloatValue
+	 */
+	particleLifetimeSpread;
+
+	/**
+	 * @type ModelNodeCollection
+	 */
+	particles;
+
+	constructor(persistent) {
+		super(persistent);
+
+		this.position = this.addProperty('position', new Vector3());
+		this.on = this.addProperty('on', new BoolValue(false));
+
+		this.particleTemplate = this.addProperty('particleTemplate', new ParticleModel());
+
+		this.particlesPerSecond = this.addProperty('particlesPerSecond', new FloatValue(50));
+
+		this.particleScaleSpread = this.addProperty('particleScaleSpread', new FloatValue(0.1));
+		this.particlePositionSpread = this.addProperty('particlePositionSpread', new Vector3());
+		this.particleMovementSpread = this.addProperty('particleMovementSpread', new Vector3(0.1, 0.1, 0.1));
+		this.particleLifetimeSpread = this.addProperty('particleLifetimeSpread', new FloatValue(1));
+
+		this.particles = this.addProperty('particles', new ModelNodeCollection());
+	}
+
+}

package/core/particles/generator/ParticleGeneratorRenderer.js

@@ -0,0 +1,27 @@
+import ParticleRenderer from "../ParticleRenderer";
+import ThreeRenderer from "../../renderer/three/ThreeRenderer";
+import CollectionRenderer from "../../renderer/generic/CollectionRenderer";
+
+export default class ParticleGeneratorRenderer extends ThreeRenderer {
+
+	/**
+	 * @type ParticleGeneratorModel
+	 */
+	model;
+
+	constructor(game, model, scene) {
+		super(game, model, scene);
+
+		this.model = model;
+
+		this.addChild(
+			new CollectionRenderer(
+				this.game,
+				this.model.particles,
+				(m) => new ParticleRenderer(this.game, m, this.scene)
+			)
+		);
+	}
+
+
+}

package/core/renderer/canvas/CanvasRenderer.js

@@ -117,17 +117,6 @@ export default class CanvasRenderer extends RendererBase {
 
 		if (clear) this.context2d.clearRect(drawStart.x, drawStart.y, drawEnd.x, drawEnd.y);
 		this.context2d.globalAlpha = opacity;
-		console.log(
-			'drawing to canvas',
-			imageStart.x,
-			imageStart.y,
-			imageEnd.x,
-			imageEnd.y,
-			drawStart.x,
-			drawStart.y,
-			drawEnd.x,
-			drawEnd.y
-		);
 		this.context2d.drawImage(
 			image,
 			imageStart.x,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wgge",
-	"version": "0.1.32",
+	"version": "0.1.33",
 	"description": "Web GL Game Engine",
 	"main": "index.js",
 	"dependencies": {