Proper belt underlays for splitters

res_built/atlas/atlas0_lq.json

@@ -1471,6 +1471,6 @@
 	"format": "RGBA8888",
 	"size": {"w":512,"h":1024},
 	"scale": "0.25",
-	"smartupdate": "$TexturePacker:SmartUpdate:d21082eda6f288e04b0739186004794d:0912211652d1c400e2846013f9de057b:908b89f5ca8ff73e331a35a3b14d0604$"
+	"smartupdate": "$TexturePacker:SmartUpdate:64d35c8d649d4bb41c7539e7e89c0865:2a9399f9a7c16dc686a4fb0941b02e6b:908b89f5ca8ff73e331a35a3b14d0604$"
 }
 }

src/js/core/sprites.js

@@ -2,9 +2,8 @@ import { DrawParameters } from "./draw_parameters";
 import { Rectangle } from "./rectangle";
 import { round3Digits } from "./utils";
 
-const floorSpriteCoordinates = false;
-
 export const ORIGINAL_SPRITE_SCALE = "0.75";
+export const FULL_CLIP_RECT = new Rectangle(0, 0, 1, 1);
 
 export class BaseSprite {
     /**
@@ -200,27 +199,62 @@ export class AtlasSprite extends BaseSprite {
             destH = intersection.h;
         }
 
-        if (floorSpriteCoordinates) {
         parameters.context.drawImage(
             link.atlas,
 
             // atlas src pos
-                Math.floor(srcX),
-                Math.floor(srcY),
-
-                // atlas src size
-                Math.floor(srcW),
-                Math.floor(srcH),
+            srcX,
+            srcY,
 
-                // dest pos
-                Math.floor(destX),
-                Math.floor(destY),
+            // atlas src siize
+            srcW,
+            srcH,
 
-                // dest size
-                Math.floor(destW),
-                Math.floor(destH)
+            // dest pos and size
+            destX,
+            destY,
+            destW,
+            destH
         );
-        } else {
+    }
+
+    /**
+     * Draws a subset of the sprite. Does NO culling
+     * @param {DrawParameters} parameters
+     * @param {number} x
+     * @param {number} y
+     * @param {number} w
+     * @param {number} h
+     * @param {Rectangle=} clipRect The rectangle in local space (0 ... 1) to draw of the image
+     */
+    drawCachedWithClipRect(parameters, x, y, w = null, h = null, clipRect = FULL_CLIP_RECT) {
+        if (G_IS_DEV) {
+            assert(parameters instanceof DrawParameters, "Not a valid context");
+            assert(!!w && w > 0, "Not a valid width:" + w);
+            assert(!!h && h > 0, "Not a valid height:" + h);
+            assert(clipRect, "No clip rect given!");
+        }
+
+        const scale = parameters.desiredAtlasScale;
+        const link = this.linksByResolution[scale];
+
+        if (!link) {
+            assert(false, `Link not known: ${scale} (having ${Object.keys(this.linksByResolution)})`);
+        }
+
+        const scaleW = w / link.w;
+        const scaleH = h / link.h;
+
+        let destX = x + link.packOffsetX * scaleW + clipRect.x * w;
+        let destY = y + link.packOffsetY * scaleH + clipRect.y * h;
+        let destW = link.packedW * scaleW * clipRect.w;
+        let destH = link.packedH * scaleH * clipRect.h;
+
+        let srcX = link.packedX + clipRect.x * link.packedW;
+        let srcY = link.packedY + clipRect.y * link.packedH;
+        let srcW = link.packedW * clipRect.w;
+        let srcH = link.packedH * clipRect.h;
+
         parameters.context.drawImage(
             link.atlas,
 
@@ -239,7 +273,6 @@ export class AtlasSprite extends BaseSprite {
             destH
         );
     }
-    }
 
     /**
      * Renders into an html element

src/js/core/stale_area_detector.js

@@ -1,6 +1,8 @@
+import { Component } from "../game/component";
+import { Entity } from "../game/entity";
+import { globalConfig } from "./config";
 import { createLogger } from "./logging";
 import { Rectangle } from "./rectangle";
-import { globalConfig } from "./config";
 
 const logger = createLogger("stale_areas");
 
@@ -34,6 +36,40 @@ export class StaleAreaDetector {
         }
     }
 
+    /**
+     * Makes this detector recompute the area of an entity whenever
+     * it changes in any way
+     * @param {Array<typeof Component>} components
+     * @param {number} tilesAround
+     */
+    recomputeOnComponentsChanged(components, tilesAround = 1) {
+        const componentIds = components.map(component => component.getId());
+
+        /**
+         * Internal checker method
+         * @param {Entity} entity
+         */
+        const checker = entity => {
+            // Check for all components
+            for (let i = 0; i < componentIds.length; ++i) {
+                if (entity.components[componentIds[i]]) {
+                    // Entity is relevant, compute affected area
+                    const area = entity.components.StaticMapEntity.getTileSpaceBounds().expandedInAllDirections(
+                        tilesAround
+                    );
+                    this.invalidate(area);
+                    return;
+                }
+            }
+        };
+
+        this.root.signals.entityAdded.add(checker);
+        this.root.signals.entityChanged.add(checker);
+        this.root.signals.entityComponentRemoved.add(checker);
+        this.root.signals.entityGotNewComponent.add(checker);
+        this.root.signals.entityDestroyed.add(checker);
+    }
+
     /**
      * Updates the stale area
      */

src/js/game/buildings/splitter.js

@@ -96,6 +96,7 @@ export class MetaSplitterBuilding extends MetaBuilding {
         entity.addComponent(
             new ItemEjectorComponent({
                 slots: [], // set later
+                renderFloatingItems: false,
             })
         );
 

src/js/game/components/belt_underlays.js

@@ -1,6 +1,29 @@
-import { Component } from "../component";
-import { types } from "../../savegame/serialization";
 import { enumDirection, Vector } from "../../core/vector";
+import { Component } from "../component";
+
+/**
+ * Store which type an underlay is, this is cached so we can easily
+ * render it.
+ *
+ * Full: Render underlay at top and bottom of tile
+ * Bottom Only: Only render underlay at the bottom half
+ * Top Only:
+ * @enum {string}
+ */
+export const enumClippedBeltUnderlayType = {
+    full: "full",
+    bottomOnly: "bottomOnly",
+    topOnly: "topOnly",
+    none: "none",
+};
+
+/**
+ * @typedef {{
+ *   pos: Vector,
+ *   direction: enumDirection,
+ *   cachedType?: enumClippedBeltUnderlayType
+ * }} BeltUnderlayTile
+ */
 
 export class BeltUnderlaysComponent extends Component {
     static getId() {
@@ -24,9 +47,9 @@ export class BeltUnderlaysComponent extends Component {
 
     /**
      * @param {object} param0
-     * @param {Array<{pos: Vector, direction: enumDirection}>=} param0.underlays Where to render belt underlays
+     * @param {Array<BeltUnderlayTile>=} param0.underlays Where to render belt underlays
      */
-    constructor({ underlays }) {
+    constructor({ underlays = [] }) {
         super();
         this.underlays = underlays;
     }

src/js/game/components/item_ejector.js

@@ -47,6 +47,7 @@ export class ItemEjectorComponent extends Component {
 
         return new ItemEjectorComponent({
             slots: slotsCopy,
+            renderFloatingItems: this.renderFloatingItems,
         });
     }
 
@@ -54,16 +55,13 @@ export class ItemEjectorComponent extends Component {
      *
      * @param {object} param0
      * @param {Array<{pos: Vector, direction: enumDirection }>=} param0.slots The slots to eject on
+     * @param {boolean=} param0.renderFloatingItems Whether to render items even if they are not connected
      */
-    constructor({ slots = [] }) {
+    constructor({ slots = [], renderFloatingItems = true }) {
         super();
 
         this.setSlots(slots);
-
-        /**
-         * Whether this ejector slot is enabled
-         */
-        this.enabled = true;
+        this.renderFloatingItems = renderFloatingItems;
     }
 
     /**

src/js/game/systems/belt_underlays.js

@@ -1,12 +1,35 @@
 import { globalConfig } from "../../core/config";
-import { drawRotatedSprite } from "../../core/draw_utils";
+import { DrawParameters } from "../../core/draw_parameters";
 import { Loader } from "../../core/loader";
-import { enumDirectionToAngle } from "../../core/vector";
-import { BeltUnderlaysComponent } from "../components/belt_underlays";
+import { Rectangle } from "../../core/rectangle";
+import { FULL_CLIP_RECT } from "../../core/sprites";
+import { StaleAreaDetector } from "../../core/stale_area_detector";
+import {
+    enumDirection,
+    enumDirectionToAngle,
+    enumDirectionToVector,
+    enumInvertedDirections,
+    Vector,
+} from "../../core/vector";
+import { BeltComponent } from "../components/belt";
+import { BeltUnderlaysComponent, enumClippedBeltUnderlayType } from "../components/belt_underlays";
+import { ItemAcceptorComponent } from "../components/item_acceptor";
+import { ItemEjectorComponent } from "../components/item_ejector";
+import { Entity } from "../entity";
 import { GameSystemWithFilter } from "../game_system_with_filter";
-import { BELT_ANIM_COUNT } from "./belt";
 import { MapChunkView } from "../map_chunk_view";
-import { DrawParameters } from "../../core/draw_parameters";
+import { BELT_ANIM_COUNT } from "./belt";
+
+/**
+ * Mapping from underlay type to clip rect
+ * @type {Object<enumClippedBeltUnderlayType, Rectangle>}
+ */
+const enumUnderlayTypeToClipRect = {
+    [enumClippedBeltUnderlayType.none]: null,
+    [enumClippedBeltUnderlayType.full]: FULL_CLIP_RECT,
+    [enumClippedBeltUnderlayType.topOnly]: new Rectangle(0, 0, 1, 0.5),
+    [enumClippedBeltUnderlayType.bottomOnly]: new Rectangle(0, 0.5, 1, 0.5),
+};
 
 export class BeltUnderlaysSystem extends GameSystemWithFilter {
     constructor(root) {
@@ -17,6 +40,180 @@ export class BeltUnderlaysSystem extends GameSystemWithFilter {
         for (let i = 0; i < BELT_ANIM_COUNT; ++i) {
             this.underlayBeltSprites.push(Loader.getSprite("sprites/belt/built/forward_" + i + ".png"));
         }
+
+        // Automatically recompute areas
+        this.staleArea = new StaleAreaDetector({
+            root,
+            name: "belt-underlay",
+            recomputeMethod: this.recomputeStaleArea.bind(this),
+        });
+
+        this.staleArea.recomputeOnComponentsChanged(
+            [BeltUnderlaysComponent, BeltComponent, ItemAcceptorComponent, ItemEjectorComponent],
+            1
+        );
+    }
+
+    update() {
+        this.staleArea.update();
+    }
+
+    /**
+     * Called when an area changed - Resets all caches in the given area
+     * @param {Rectangle} area
+     */
+    recomputeStaleArea(area) {
+        for (let x = 0; x < area.w; ++x) {
+            for (let y = 0; y < area.h; ++y) {
+                const tileX = area.x + x;
+                const tileY = area.y + y;
+                const entity = this.root.map.getLayerContentXY(tileX, tileY, "regular");
+                if (entity) {
+                    const underlayComp = entity.components.BeltUnderlays;
+                    if (underlayComp) {
+                        for (let i = 0; i < underlayComp.underlays.length; ++i) {
+                            underlayComp.underlays[i].cachedType = null;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Checks if a given tile is connected and has an acceptor
+     * @param {Vector} tile
+     * @param {enumDirection} fromDirection
+     * @returns {boolean}
+     */
+    checkIsAcceptorConnected(tile, fromDirection) {
+        const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
+        if (!contents) {
+            return false;
+        }
+
+        const staticComp = contents.components.StaticMapEntity;
+
+        // Check if its a belt, since then its simple
+        const beltComp = contents.components.Belt;
+        if (beltComp) {
+            return staticComp.localDirectionToWorld(enumDirection.bottom) === fromDirection;
+        }
+
+        // Check if there's an item acceptor
+        const acceptorComp = contents.components.ItemAcceptor;
+        if (acceptorComp) {
+            // Check each slot to see if its connected
+            for (let i = 0; i < acceptorComp.slots.length; ++i) {
+                const slot = acceptorComp.slots[i];
+                const slotTile = staticComp.localTileToWorld(slot.pos);
+
+                // Step 1: Check if the tile matches
+                if (!slotTile.equals(tile)) {
+                    continue;
+                }
+
+                // Step 2: Check if any of the directions matches
+                for (let j = 0; j < slot.directions.length; ++j) {
+                    const slotDirection = staticComp.localDirectionToWorld(slot.directions[j]);
+                    if (slotDirection === fromDirection) {
+                        return true;
+                    }
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Checks if a given tile is connected and has an ejector
+     * @param {Vector} tile
+     * @param {enumDirection} toDirection
+     * @returns {boolean}
+     */
+    checkIsEjectorConnected(tile, toDirection) {
+        const contents = this.root.map.getLayerContentXY(tile.x, tile.y, "regular");
+        if (!contents) {
+            return false;
+        }
+
+        const staticComp = contents.components.StaticMapEntity;
+
+        // Check if its a belt, since then its simple
+        const beltComp = contents.components.Belt;
+        if (beltComp) {
+            return staticComp.localDirectionToWorld(beltComp.direction) === toDirection;
+        }
+
+        // Check for an ejector
+        const ejectorComp = contents.components.ItemEjector;
+        if (ejectorComp) {
+            // Check each slot to see if its connected
+            for (let i = 0; i < ejectorComp.slots.length; ++i) {
+                const slot = ejectorComp.slots[i];
+                const slotTile = staticComp.localTileToWorld(slot.pos);
+
+                // Step 1: Check if the tile matches
+                if (!slotTile.equals(tile)) {
+                    continue;
+                }
+
+                // Step 2: Check if the direction matches
+                const slotDirection = staticComp.localDirectionToWorld(slot.direction);
+                if (slotDirection === toDirection) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    /**
+     * Computes the flag for a given tile
+     * @param {Entity} entity
+     * @param {import("../components/belt_underlays").BeltUnderlayTile} underlayTile
+     * @returns {enumClippedBeltUnderlayType} The type of the underlay
+     */
+    computeBeltUnderlayType(entity, underlayTile) {
+        if (underlayTile.cachedType) {
+            return underlayTile.cachedType;
+        }
+
+        const staticComp = entity.components.StaticMapEntity;
+
+        const transformedPos = staticComp.localTileToWorld(underlayTile.pos);
+        const destX = transformedPos.x * globalConfig.tileSize;
+        const destY = transformedPos.y * globalConfig.tileSize;
+
+        // Extract direction and angle
+        const worldDirection = staticComp.localDirectionToWorld(underlayTile.direction);
+        const worldDirectionVector = enumDirectionToVector[worldDirection];
+
+        // Figure out if there is anything connected at the top
+        const connectedTop = this.checkIsAcceptorConnected(
+            transformedPos.add(worldDirectionVector),
+            enumInvertedDirections[worldDirection]
+        );
+
+        // Figure out if there is anything connected at the bottom
+        const connectedBottom = this.checkIsEjectorConnected(
+            transformedPos.sub(worldDirectionVector),
+            worldDirection
+        );
+
+        let flag = enumClippedBeltUnderlayType.none;
+
+        if (connectedTop && connectedBottom) {
+            flag = enumClippedBeltUnderlayType.full;
+        } else if (connectedTop) {
+            flag = enumClippedBeltUnderlayType.topOnly;
+        } else if (connectedBottom) {
+            flag = enumClippedBeltUnderlayType.bottomOnly;
+        }
+
+        return (underlayTile.cachedType = flag);
     }
 
     /**
@@ -39,18 +236,18 @@ export class BeltUnderlaysSystem extends GameSystemWithFilter {
             const staticComp = entity.components.StaticMapEntity;
             const underlays = underlayComp.underlays;
             for (let i = 0; i < underlays.length; ++i) {
+                // Extract underlay parameters
                 const { pos, direction } = underlays[i];
                 const transformedPos = staticComp.localTileToWorld(pos);
+                const destX = transformedPos.x * globalConfig.tileSize;
+                const destY = transformedPos.y * globalConfig.tileSize;
 
-                // Culling
+                // Culling, Part 1: Check if the chunk contains the tile
                 if (!chunk.tileSpaceRectangle.containsPoint(transformedPos.x, transformedPos.y)) {
                     continue;
                 }
 
-                const destX = transformedPos.x * globalConfig.tileSize;
-                const destY = transformedPos.y * globalConfig.tileSize;
-
-                // Culling, #2
+                // Culling, Part 2: Check if the overlay is visible
                 if (
                     !parameters.visibleRect.containsRect4Params(
                         destX,
@@ -62,22 +259,41 @@ export class BeltUnderlaysSystem extends GameSystemWithFilter {
                     continue;
                 }
 
-                const angle = enumDirectionToAngle[staticComp.localDirectionToWorld(direction)];
+                // Extract direction and angle
+                const worldDirection = staticComp.localDirectionToWorld(direction);
+                const angle = enumDirectionToAngle[worldDirection];
+
+                const underlayType = this.computeBeltUnderlayType(entity, underlays[i]);
+                const clipRect = enumUnderlayTypeToClipRect[underlayType];
+                if (!clipRect) {
+                    // Empty
+                    return;
+                }
+
+                // Actually draw the sprite
+                const x = destX + globalConfig.halfTileSize;
+                const y = destY + globalConfig.halfTileSize;
+                const angleRadians = Math.radians(angle);
 
                 // SYNC with systems/belt.js:drawSingleEntity!
                 const animationIndex = Math.floor(
                     ((this.root.time.realtimeNow() * speedMultiplier * BELT_ANIM_COUNT * 126) / 42) *
                         globalConfig.itemSpacingOnBelts
                 );
-
-                drawRotatedSprite({
+                parameters.context.translate(x, y);
+                parameters.context.rotate(angleRadians);
+                this.underlayBeltSprites[
+                    animationIndex % this.underlayBeltSprites.length
+                ].drawCachedWithClipRect(
                     parameters,
-                    sprite: this.underlayBeltSprites[animationIndex % this.underlayBeltSprites.length],
-                    x: destX + globalConfig.halfTileSize,
-                    y: destY + globalConfig.halfTileSize,
-                    angle: Math.radians(angle),
-                    size: globalConfig.tileSize,
-                });
+                    -globalConfig.halfTileSize,
+                    -globalConfig.halfTileSize,
+                    globalConfig.tileSize,
+                    globalConfig.tileSize,
+                    clipRect
+                );
+                parameters.context.rotate(-angleRadians);
+                parameters.context.translate(-x, -y);
             }
         }
     }

src/js/game/systems/item_ejector.js

@@ -198,9 +198,6 @@ export class ItemEjectorSystem extends GameSystemWithFilter {
         for (let i = 0; i < this.allEntities.length; ++i) {
             const sourceEntity = this.allEntities[i];
             const sourceEjectorComp = sourceEntity.components.ItemEjector;
-            if (!sourceEjectorComp.enabled) {
-                continue;
-            }
 
             const slots = sourceEjectorComp.slots;
             for (let j = 0; j < slots.length; ++j) {
@@ -211,8 +208,6 @@ export class ItemEjectorSystem extends GameSystemWithFilter {
                     continue;
                 }
 
-                const targetEntity = sourceSlot.cachedTargetEntity;
-
                 // Advance items on the slot
                 sourceSlot.progress = Math.min(
                     1,
@@ -245,15 +240,16 @@ export class ItemEjectorSystem extends GameSystemWithFilter {
                 }
 
                 // Check if the target acceptor can actually accept this item
+                const destEntity = sourceSlot.cachedTargetEntity;
                 const destSlot = sourceSlot.cachedDestSlot;
                 if (destSlot) {
-                    const targetAcceptorComp = targetEntity.components.ItemAcceptor;
+                    const targetAcceptorComp = destEntity.components.ItemAcceptor;
                     if (!targetAcceptorComp.canAcceptItem(destSlot.index, item)) {
                         continue;
                     }
 
                     // Try to hand over the item
-                    if (this.tryPassOverItem(item, targetEntity, destSlot.index)) {
+                    if (this.tryPassOverItem(item, destEntity, destSlot.index)) {
                         // Handover successful, clear slot
                         targetAcceptorComp.onItemAccepted(destSlot.index, destSlot.acceptedDirection, item);
                         sourceSlot.item = null;
@@ -357,6 +353,11 @@ export class ItemEjectorSystem extends GameSystemWithFilter {
                     continue;
                 }
 
+                if (!ejectorComp.renderFloatingItems && !slot.cachedTargetEntity) {
+                    // Not connected to any building
+                    continue;
+                }
+
                 const realPosition = staticComp.localTileToWorld(slot.pos);
                 if (!chunk.tileSpaceRectangle.containsPoint(realPosition.x, realPosition.y)) {
                     // Not within this chunk