@woosh/meep-engine 2.46.29 → 2.46.30

package/editor/tools/FoliagePaintTool.js

@@ -0,0 +1,168 @@
+import Tool from "./engine/Tool.js";
+import Vector1 from "../../src/core/geom/Vector1.js";
+import ObservedValue from "../../src/core/model/ObservedValue.js";
+import Vector4 from "../../src/core/geom/Vector4.js";
+import loadSampler2D from "../../src/engine/graphics/texture/sampler/loadSampler2D.js";
+import convertSampler2D2Canvas from "../../src/engine/graphics/texture/sampler/Sampler2D2Canvas.js";
+import { InstancedMeshComponent } from "../../src/engine/ecs/foliage/ecs/InstancedMeshComponent.js";
+import { parseHex } from "../../src/core/color/parseHex.js";
+import { obtainTerrain } from "../../src/engine/ecs/terrain/util/obtainTerrain.js";
+
+class FoliagePaintTool extends Tool {
+    constructor() {
+        super();
+        this.name = "foliage_paint";
+
+        this.settings.layer = new Vector1(0);
+        this.settings.value = new Vector1(1);
+        this.settings.alphaMultiplier = new Vector1(1);
+        this.settings.color = new ObservedValue("#FFFFFF");
+
+        this.settings.baseColor = new ObservedValue("#000000");
+        this.settings.baseColorAlpha = new Vector1(0.6);
+
+        const self = this;
+
+    }
+
+    updateSelection() {
+        self.paint();
+    }
+
+    buildColor() {
+
+        const color = new Vector4();
+        const baseColor = parseHex(this.settings.color.get());
+        color.set(baseColor.r, baseColor.g, baseColor.b, 0);
+        color.multiplyScalar(1 / 255);
+
+        return color;
+    }
+
+    buildBaseColor() {
+
+        const color = new Vector4();
+        const baseColor = parseHex(this.settings.baseColor.get());
+        color.set(baseColor.r, baseColor.g, baseColor.b, 0);
+        color.multiplyScalar(1 / 255);
+
+        color.w = this.settings.baseColorAlpha.getValue();
+
+        return color;
+    }
+
+    initialize() {
+        super.initialize();
+
+        const engine = this.engine;
+        const editor = this.editor;
+
+        this.terrain = obtainTerrain(engine.entityManager.dataset, function (t, entity) {
+            self.terrainEntity = entity;
+        });
+
+        this.terrain.overlay.push();
+
+        this.terrain.overlay.borderWidth.set(0);
+
+        this.paint();
+
+        editor.selection.on.added.add(this.updateSelection);
+        editor.selection.on.removed.add(this.updateSelection);
+    }
+
+    shutdown() {
+        this.terrain.overlay.pop();
+
+        this.editor.selection.on.added.remove(this.updateSelection);
+        this.editor.selection.on.removed.remove(this.updateSelection);
+
+        this.settings.value.onChanged.remove(this.updateSelection);
+        this.settings.alphaMultiplier.onChanged.remove(this.updateSelection);
+        this.settings.color.onChanged.remove(this.updateSelection);
+
+        super.shutdown();
+    }
+
+    paint() {
+
+        const alphaMultiplier = this.settings.alphaMultiplier.getValue();
+        const overlay = this.terrain.overlay;
+        overlay.clear();
+
+        const layer = this.settings.layer.getValue();
+
+        const color = this.buildColor();
+
+        const baseColor = this.buildBaseColor();
+
+        const engine = this.engine;
+
+        /**
+         *
+         * @param {InstancedMeshComponent} foliage
+         * @param {Number} entity
+         */
+        function visit(foliage, entity) {
+            const foliageLayer = foliage.layers.get(layer);
+            loadSampler2D(foliageLayer.densityMap.get(), engine.assetManager).then(function (sampler) {
+
+                overlay.size.set(sampler.width, sampler.height);
+                overlay.clear();
+
+                const v4c = new Vector4(0, 0, 0, 0);
+
+                function mappingFunction(index, array, x, y) {
+                    const address = index;
+                    const alpha = sampler.data[address / 4] * alphaMultiplier;
+                    color.w = alpha;
+
+                    Vector4.lerp(color, baseColor, (1 - alpha), v4c);
+
+                    //scale to unsigned byte value
+                    v4c.multiplyScalar(255);
+
+
+                    array[address] = v4c.x;
+                    array[address + 1] = v4c.y;
+                    array[address + 2] = v4c.z;
+                    //alpha
+                    array[address + 3] = v4c.w;
+                }
+
+                convertSampler2D2Canvas(sampler, 1, 0, overlay.canvas, mappingFunction);
+
+                overlay.update();
+            });
+        }
+
+        //initialize overlay
+        this.traverse(visit);
+    }
+
+    traverse(callback) {
+        /**
+         * @type {EntityManager}
+         */
+        const entityManger = this.engine.entityManager;
+        this.editor.selection.forEach(function (entity) {
+
+            /**
+             *
+             * @type {InstancedMeshComponent}
+             */
+            const foliage = entityManger.getComponent(entity, InstancedMeshComponent);
+
+
+            if (foliage === null) {
+                //do nothing
+                return;
+            }
+
+            callback(foliage, entity);
+        });
+    }
+}
+
+
+export default FoliagePaintTool;

package/editor/tools/GridPaintTool.js

@@ -0,0 +1,247 @@
+import Tool from "./engine/Tool.js";
+import GridPosition from "../../src/engine/grid/components/GridPosition.js";
+import GridObstacle from "../../src/engine/grid/components/GridObstacle.js";
+import Vector4 from "../../src/core/geom/Vector4.js";
+import ObservedValue from "../../src/core/model/ObservedValue.js";
+import Vector1 from "../../src/core/geom/Vector1.js";
+import WriteGridValueAction from "../actions/concrete/WriteGridValueAction.js";
+import PaintTerrainOverlayAction from "../actions/concrete/PaintTerrainOverlayAction.js";
+import { decodeMouseEventButtons, PointerDevice } from "../../src/engine/input/devices/PointerDevice.js";
+import Vector2 from "../../src/core/geom/Vector2.js";
+import TopDownCameraControllerSystem
+    from "../../src/engine/graphics/ecs/camera/topdown/TopDownCameraControllerSystem.js";
+import { parseHex } from "../../src/core/color/parseHex.js";
+import { obtainTerrain } from "../../src/engine/ecs/terrain/util/obtainTerrain.js";
+import { pick } from "../../src/ecs/grid/pick.js";
+
+class GridPaintTool extends Tool {
+    constructor() {
+        super();
+        this.name = "grid_paint";
+
+        this.settings.value = new Vector1(1);
+        this.settings.alphaMultiplier = new Vector1(0.15);
+        this.settings.color = new ObservedValue("#00FF00");
+
+    }
+
+
+    initialize() {
+        super.initialize();
+
+        const engine = this.engine;
+        const editor = this.editor;
+
+        this.terrain = obtainTerrain(engine.entityManager.dataset, function (t, entity) {
+            self.terrainEntity = entity;
+        });
+
+        this.terrain.overlay.push();
+
+        this.paint();
+
+        editor.selection.on.added.add(this.paint, this);
+        editor.selection.on.removed.add(this.paint, this);
+
+
+        this.settings.value.onChanged.add(this.paint, this);
+        this.settings.alphaMultiplier.onChanged.add(this.paint, this);
+        this.settings.color.onChanged.add(this.paint, this);
+
+        this.cameraController = buildCameraController(engine, engine.entityManager);
+        this.cameraController.start();
+    }
+
+    buildColor() {
+
+        const color = new Vector4();
+        const baseColor = parseHex(this.settings.color.get());
+        color.set(baseColor.r, baseColor.g, baseColor.b, 0);
+        color.multiplyScalar(1 / 255);
+
+        return color;
+    }
+
+    paint() {
+
+        const alphaMultiplier = this.settings.alphaMultiplier.getValue();
+        const overlay = this.terrain.overlay;
+        overlay.clear();
+
+        const color = this.buildColor();
+
+        /**
+         *
+         * @param {GridPosition} gridPosition
+         * @param {GridObstacle} obstacle
+         * @param {Number} entity
+         */
+        function visit(gridPosition, obstacle, entity) {
+            obstacle.traverseMask(gridPosition.x, gridPosition.y, function (x, y, value) {
+                color.w = value * alphaMultiplier;
+
+                overlay.clearPoint(x, y);
+                overlay.paintPoint(x, y, color);
+            });
+        }
+
+        //initialize overlay
+        this.traverse(visit);
+    }
+
+    traverse(callback) {
+        /**
+         * @type {EntityManager}
+         */
+        const entityManger = this.engine.entityManager;
+        this.editor.selection.forEach(function (entity) {
+
+            /**
+             *
+             * @type {GridPosition}
+             */
+            const gp = entityManger.getComponent(entity, GridPosition);
+
+            /**
+             *
+             * @type {GridObstacle}
+             */
+            const obstacle = entityManger.getComponent(entity, GridObstacle);
+
+            if (gp === null || obstacle === null) {
+                //do nothing
+                return;
+            }
+            callback(gp, obstacle, entity);
+        });
+    }
+
+    shutdown() {
+        this.terrain.overlay.pop();
+
+        this.editor.selection.on.added.remove(this.paint, this);
+        this.editor.selection.on.removed.remove(this.paint, this);
+
+        this.settings.value.onChanged.remove(this.paint, this);
+        this.settings.alphaMultiplier.onChanged.remove(this.paint, this);
+        this.settings.color.onChanged.remove(this.paint, this);
+
+        this.cameraController.stop();
+
+        super.shutdown();
+    }
+
+    affectTile(_x, _y) {
+        const x = _x | 0;
+        const y = _y | 0;
+
+
+        const self = this;
+        const alphaMultiplier = this.settings.alphaMultiplier.getValue();
+        const paintValue = this.settings.value.getValue();
+
+        /**
+         *
+         * @param gp
+         * @param {GridObstacle} obstacle
+         * @param entity
+         */
+        function visit(gp, obstacle, entity) {
+
+            const localX = x - gp.x;
+            const localY = y - gp.y;
+
+            if (!obstacle.isPointWithin(localX, localY)) {
+                //painting outside
+                return;
+            }
+
+            const actions = self.editor.actions;
+
+            const aModifyGrid = new WriteGridValueAction(entity, localX, localY, paintValue);
+
+            const color = self.buildColor();
+            color.w = paintValue * alphaMultiplier;
+
+            const aPaintGrid = new PaintTerrainOverlayAction(self.terrainEntity, x, y, color);
+
+            actions.do(aModifyGrid);
+            actions.do(aPaintGrid);
+        }
+
+        this.traverse(visit);
+    }
+
+    affectTileByMousePosition(position) {
+        const engine = this.engine;
+
+        const self = this;
+
+        pick(position.x, position.y, engine.graphics, this.terrain, function (gridPosition) {
+            self.affectTile(gridPosition.x, gridPosition.y);
+        });
+    }
+
+    start() {
+        this.editor.actions.mark('Paining Tiles');
+        this.update();
+    }
+
+    update() {
+        if (this.isRunning()) {
+            const p = new Vector2(0, 0);
+            this.engine.gameView.positionGlobalToLocal(this.engine.devices.pointer.position, p);
+            this.affectTileByMousePosition(p);
+        }
+    }
+}
+
+/**
+ *
+ * @param {Engine} engine
+ * @param {EntityManager} em
+ * @returns {{start: function, stop: function}}
+ */
+function buildCameraController(engine, em) {
+    const TopDownCameraController = em.getComponentClassByName("TopDownCameraController");
+    const system = em.getSystem(TopDownCameraControllerSystem);
+    system.enabled.set(true);
+
+
+    let cameraController = null;
+    em.traverseEntities([TopDownCameraController], function (c) {
+        cameraController = c;
+    });
+
+    const pointerDevice = new PointerDevice(window);
+    pointerDevice.on.drag.add(function (position, origin, previousPosition, mouseEvent) {
+        const buttons = mouseEvent.buttons;
+        const pressedButtons = decodeMouseEventButtons(buttons);
+        if (pressedButtons[2]) {
+            const camera = engine.graphics.camera;
+            TopDownCameraController.pan(previousPosition.clone().sub(position), camera, engine.graphics.domElement, cameraController.distance, camera.fov, cameraController.target);
+        }
+    });
+
+    pointerDevice.on.wheel.add(function (delta) {
+        cameraController.distance += delta.y / 70;
+    });
+
+    function start() {
+        system.enabled.set(true);
+        pointerDevice.start();
+    }
+
+    function stop() {
+        system.enabled.set(false);
+        pointerDevice.stop();
+    }
+
+    return {
+        start,
+        stop
+    };
+}
+
+
+export default GridPaintTool;