Belt drawing improvements, again

src/js/core/config.js

@@ -42,7 +42,7 @@ export const globalConfig = {
     // Which dpi the assets have
     assetsDpi: 192 / 32,
     assetsSharpness: 1.5,
-    shapesSharpness: 1.4,
+    shapesSharpness: 1.3,
 
     // Achievements
     achievementSliceDuration: 10, // Seconds
@@ -58,9 +58,11 @@ export const globalConfig = {
     // Map
     mapChunkSize: 16,
     chunkAggregateSize: 4,
-    mapChunkOverviewMinZoom: 0.9,
+    mapChunkOverviewMinZoom: 0,
     mapChunkWorldSize: null, // COMPUTED
 
+    maxBeltShapeBundleSize: 20,
+
     // Belt speeds
     // NOTICE: Update webpack.production.config too!
     beltSpeedItemsPerSecond: 2,

src/js/core/config.local.template.js

@@ -119,5 +119,8 @@ export default {
     // Allows to load a mod from an external source for developing it
     // externalModUrl: "http://localhost:3005/combined.js",
     // -----------------------------------------------------------------------------------
+    // Visualizes the shape grouping on belts
+    // showShapeGrouping: true
+    // -----------------------------------------------------------------------------------
     /* dev:end */
 };

src/js/game/belt_path.js

@@ -1460,6 +1460,19 @@ export class BeltPath extends BasicSerializableObject {
                 const item = distanceAndItem[1 /* item */];
                 const nextItemDistance = distanceAndItem[0 /* nextDistance */];
 
+                if (
+                    !parameters.visibleRect.containsCircle(
+                        worldPos.x,
+                        worldPos.y,
+                        globalConfig.defaultItemDiameter
+                    )
+                ) {
+                    // this one isn't visible, do not  append it
+                    // Start a new stack
+                    this.drawDrawStack(drawStack, parameters, drawStackProp);
+                    drawStack = [];
+                    drawStackProp = "";
+                } else {
                     if (drawStack.length > 1) {
                         // Check if we can append to the stack, since its already a stack of two same items
                         const referenceItem = drawStack[0];
@@ -1500,12 +1513,16 @@ export class BeltPath extends BasicSerializableObject {
                     }
 
                     drawStack.push([worldPos, item]);
+                }
 
                 // Check for the next item
                 currentItemPos += nextItemDistance;
                 ++currentItemIndex;
 
-                if (nextItemDistance > globalConfig.itemSpacingOnBelts + 0.001 || drawStack.length > 20) {
+                if (
+                    nextItemDistance > globalConfig.itemSpacingOnBelts + 0.001 ||
+                    drawStack.length > globalConfig.maxBeltShapeBundleSize
+                ) {
                     // If next item is not directly following, abort drawing
                     this.drawDrawStack(drawStack, parameters, drawStackProp);
                     drawStack = [];
@@ -1541,8 +1558,11 @@ export class BeltPath extends BasicSerializableObject {
      */
     drawShapesInARow(canvas, context, w, h, dpi, { direction, stack, root, zoomLevel }) {
         context.scale(dpi, dpi);
+
+        if (G_IS_DEV && globalConfig.debug.showShapeGrouping) {
             context.fillStyle = "rgba(0, 0, 255, 0.5)";
             context.fillRect(0, 0, w, h);
+        }
 
         const parameters = new DrawParameters({
             context,
@@ -1554,7 +1574,6 @@ export class BeltPath extends BasicSerializableObject {
 
         const itemSize = globalConfig.itemSpacingOnBelts * globalConfig.tileSize;
         const item = stack[0];
-        console.log(w, h, dpi, direction, item[1].serialize());
         const pos = new Vector(itemSize / 2, itemSize / 2);
 
         for (let i = 0; i < stack.length; i++) {