Merge branch 'master' into master

README.md

@@ -92,6 +92,28 @@ This project is based on ES5. Some ES2015 features are used but most of them are
 4. Add the system in `src/js/game/game_system_manager.js` (To `this.systems` and also call `add` in the `internalInitSystems()` method)
 5. If your system should draw stuff, this is a bit more complicated. Have a look at existing systems on how they do it.
 
+#### Checklist for a new building / testing it
+
+This is a quick checklist, if a new building is added this points should be fulfilled:
+
+2. The translation for all variants is done and finalized
+3. The artwork (regular sprite) is finalized
+4. The blueprint sprite has been generated and is up to date
+5. The building has been added to the appropriate toolbar
+6. The building has a keybinding which makes sense
+7. The building has a reward assigned and is unlocked at a meaningful point
+8. The reward for the building has a proper translation
+9. The reward for the building has a proper image
+10. The building has a proper tutorial image assigned
+11. The buliding has a proper toolbar icon
+12. The reward requires a proper shape
+13. The building has a proper silhouette color
+14. The building has a proper matrix for being rendered on the minimap
+15. The building has proper statistics in the dialog
+16. The building properly contributes to the shapes produced analytics
+17. The building is properly persisted in the savegame
+18. The building is explained properly, ideally via an interactive tutorial
+
 ### Assets
 
 For most assets I use Adobe Photoshop, you can find them in `assets/`.

gulp/convert_atlas.js

@@ -1,96 +0,0 @@
-// Converts the atlas description to a JSON file
-
-String.prototype.replaceAll = function (search, replacement) {
-    var target = this;
-    return target.split(search).join(replacement);
-};
-
-const fs = require("fs");
-const path = require("path");
-
-const folder = path.join(__dirname, "res_built", "atlas");
-const files = fs.readdirSync(folder);
-
-const metadata = [];
-
-files.forEach(filename => {
-    if (filename.endsWith(".atlas")) {
-        // Read content
-
-        const content = fs.readFileSync(path.join(folder, filename), "ascii");
-
-        const lines = content.replaceAll("\r", "").replaceAll("\t", "").split("\n");
-
-        const readLine = () => lines.splice(0, 1)[0];
-        const readValue = () => readLine().replaceAll(" ", "").split(":")[1];
-        const readVector = () =>
-            readValue()
-                .split(",")
-                .map(d => parseInt(d, 10));
-
-        let maxAtlas = 100;
-
-        atlasLoop: while (maxAtlas-- > 0 && lines.length >= 7) {
-            const result = {
-                entries: [],
-            };
-
-            // Extract header
-            const header_fileStart = readLine();
-            const header_fileName = readLine();
-            const header_size = readVector();
-            const header_format = readLine();
-            const header_filter = readLine();
-            const header_repeat = readLine();
-            const baseAtlasName = header_fileName.replace(".png", "");
-
-            // Store size
-            result.size = header_size;
-
-            lineLoop: while (lines.length >= 7) {
-                const entryResult = {};
-
-                const nextLine = lines[0];
-                if (nextLine.length === 0) {
-                    break;
-                }
-
-                const entry_fileName = readLine() + ".png";
-
-                const entry_rotate = readValue();
-                const entry_xy = readVector();
-                const entry_size = readVector();
-                const entry_orig = readVector();
-                const entry_offset = readVector();
-                const entry_index = readValue();
-
-                entryResult.filename = entry_fileName;
-                entryResult.xy = entry_xy;
-                entryResult.size = entry_size;
-                // entryResult.offset = entry_offset;
-
-                entryResult.origSize = entry_orig;
-
-                let offset = [0, 0];
-
-                // GDX Atlas packer uses 1 - y coordinates. This sucks, and we have to convert it
-                offset[0] = entry_offset[0];
-                offset[1] = entry_orig[1] - entry_offset[1] - entry_size[1];
-
-                entryResult.offset = offset;
-
-                result.entries.push(entryResult);
-            }
-
-            console.log("[Atlas]", "'" + baseAtlasName + "'", "has", result.entries.length, "entries");
-            // fs.writeFileSync(path.join(folder, baseAtlasName + ".gen.json"), JSON.stringify(result));
-
-            metadata.push({
-                filename: baseAtlasName + ".png",
-                entries: result,
-            });
-        }
-    }
-});
-
-fs.writeFileSync(path.join(folder, "meta.gen.json"), JSON.stringify(metadata, null, 4));

gulp/image-resources.js

@@ -61,17 +61,13 @@ function gulptasksImageResources($, gulp, buildFolder) {
 
     // Copies the atlas to the final destination
     gulp.task("imgres.atlas", () => {
-        return gulp
-            .src(["../res_built/atlas/*.png"])
-            .pipe($.cached("imgres.atlas"))
-            .pipe(gulp.dest(resourcesDestFolder));
+        return gulp.src(["../res_built/atlas/*.png"]).pipe(gulp.dest(resourcesDestFolder));
     });
 
     // Copies the atlas to the final destination after optimizing it (lossy compression)
     gulp.task("imgres.atlasOptimized", () => {
         return gulp
             .src(["../res_built/atlas/*.png"])
-            .pipe($.cached("imgres.atlasOptimized"))
             .pipe(
                 $.if(
                     fname => fileMustBeLossless(fname.history[0]),
@@ -86,17 +82,15 @@ function gulptasksImageResources($, gulp, buildFolder) {
 
     // Copies all resources which are no ui resources
     gulp.task("imgres.copyNonImageResources", () => {
-        return gulp
-            .src(nonImageResourcesGlobs)
-            .pipe($.cached("imgres.copyNonImageResources"))
-            .pipe(gulp.dest(resourcesDestFolder));
+        return gulp.src(nonImageResourcesGlobs).pipe(gulp.dest(resourcesDestFolder));
     });
 
     // Copies all ui resources
     gulp.task("imgres.copyImageResources", () => {
         return gulp
             .src(imageResourcesGlobs)
-            .pipe($.cached("copyImageResources"))
+
+            .pipe($.cached("imgres.copyImageResources"))
             .pipe(gulp.dest(path.join(resourcesDestFolder)));
     });
 
@@ -104,7 +98,6 @@ function gulptasksImageResources($, gulp, buildFolder) {
     gulp.task("imgres.copyImageResourcesOptimized", () => {
         return gulp
             .src(imageResourcesGlobs)
-            .pipe($.cached("imgres.copyImageResourcesOptimized"))
             .pipe(
                 $.if(
                     fname => fileMustBeLossless(fname.history[0]),

gulp/sounds.js

@@ -18,7 +18,7 @@ function gulptasksSounds($, gulp, buildFolder) {
 
     function getFileCacheValue(file) {
         const { _isVinyl, base, cwd, contents, history, stat, path } = file;
-        const encodedContents = Buffer.from(contents).toString('base64');
+        const encodedContents = Buffer.from(contents).toString("base64");
         return { _isVinyl, base, cwd, contents: encodedContents, history, stat, path };
     }
 
@@ -118,7 +118,6 @@ function gulptasksSounds($, gulp, buildFolder) {
         return gulp
             .src(path.join(builtSoundsDir, "**", "*.mp3"))
             .pipe($.plumber())
-            .pipe($.cached("sounds.copy"))
             .pipe(gulp.dest(path.join(buildFolder, "res", "sounds")));
     });
 

res_raw/atlas.tps

@@ -104,7 +104,7 @@
             </struct>
         </struct>
         <key>shapePadding</key>
-        <uint>0</uint>
+        <uint>2</uint>
         <key>jpgQuality</key>
         <uint>80</uint>
         <key>pngOptimizationLevel</key>
@@ -118,7 +118,7 @@
         <key>textureFormat</key>
         <enum type="SettingsBase::TextureFormat">png</enum>
         <key>borderPadding</key>
-        <uint>1</uint>
+        <uint>3</uint>
         <key>maxTextureSize</key>
         <QSize>
             <key>width</key>
@@ -197,7 +197,7 @@
             <key>scaleMode</key>
             <enum type="ScaleMode">Smooth</enum>
             <key>extrude</key>
-            <uint>3</uint>
+            <uint>2</uint>
             <key>trimThreshold</key>
             <uint>2</uint>
             <key>trimMargin</key>
@@ -257,16 +257,20 @@
             <key type="filename">sprites/belt/built/right_7.png</key>
             <key type="filename">sprites/belt/built/right_8.png</key>
             <key type="filename">sprites/belt/built/right_9.png</key>
+            <key type="filename">sprites/blueprints/analyzer.png</key>
             <key type="filename">sprites/blueprints/balancer-merger-inverse.png</key>
             <key type="filename">sprites/blueprints/balancer-merger.png</key>
             <key type="filename">sprites/blueprints/balancer-splitter-inverse.png</key>
             <key type="filename">sprites/blueprints/balancer-splitter.png</key>
+            <key type="filename">sprites/blueprints/belt_left.png</key>
+            <key type="filename">sprites/blueprints/belt_right.png</key>
+            <key type="filename">sprites/blueprints/belt_top.png</key>
+            <key type="filename">sprites/blueprints/comparator.png</key>
             <key type="filename">sprites/blueprints/constant_signal.png</key>
             <key type="filename">sprites/blueprints/display.png</key>
             <key type="filename">sprites/blueprints/lever.png</key>
             <key type="filename">sprites/blueprints/logic_gate-not.png</key>
             <key type="filename">sprites/blueprints/logic_gate-or.png</key>
-            <key type="filename">sprites/blueprints/logic_gate-transistor.png</key>
             <key type="filename">sprites/blueprints/logic_gate-xor.png</key>
             <key type="filename">sprites/blueprints/logic_gate.png</key>
             <key type="filename">sprites/blueprints/miner-chainable.png</key>
@@ -275,67 +279,62 @@
             <key type="filename">sprites/blueprints/rotater-ccw.png</key>
             <key type="filename">sprites/blueprints/rotater-rotate180.png</key>
             <key type="filename">sprites/blueprints/rotater.png</key>
+            <key type="filename">sprites/blueprints/transistor-mirrored.png</key>
+            <key type="filename">sprites/blueprints/transistor.png</key>
             <key type="filename">sprites/blueprints/trash.png</key>
             <key type="filename">sprites/blueprints/underground_belt_entry-tier2.png</key>
             <key type="filename">sprites/blueprints/underground_belt_entry.png</key>
             <key type="filename">sprites/blueprints/underground_belt_exit-tier2.png</key>
             <key type="filename">sprites/blueprints/underground_belt_exit.png</key>
-            <key type="filename">sprites/blueprints/virtual_processor-analyzer.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-painter.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-rotater.png</key>
-            <key type="filename">sprites/blueprints/virtual_processor-shapecompare.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-stacker.png</key>
             <key type="filename">sprites/blueprints/virtual_processor-unstacker.png</key>
             <key type="filename">sprites/blueprints/virtual_processor.png</key>
-            <key type="filename">sprites/blueprints/wire_tunnel-coating.png</key>
             <key type="filename">sprites/blueprints/wire_tunnel.png</key>
+            <key type="filename">sprites/buildings/analyzer.png</key>
             <key type="filename">sprites/buildings/balancer-merger-inverse.png</key>
             <key type="filename">sprites/buildings/balancer-merger.png</key>
             <key type="filename">sprites/buildings/balancer-splitter-inverse.png</key>
             <key type="filename">sprites/buildings/balancer-splitter.png</key>
+            <key type="filename">sprites/buildings/comparator.png</key>
             <key type="filename">sprites/buildings/constant_signal.png</key>
             <key type="filename">sprites/buildings/display.png</key>
             <key type="filename">sprites/buildings/lever.png</key>
             <key type="filename">sprites/buildings/logic_gate-not.png</key>
             <key type="filename">sprites/buildings/logic_gate-or.png</key>
-            <key type="filename">sprites/buildings/logic_gate-transistor.png</key>
             <key type="filename">sprites/buildings/logic_gate-xor.png</key>
             <key type="filename">sprites/buildings/logic_gate.png</key>
             <key type="filename">sprites/buildings/miner-chainable.png</key>
             <key type="filename">sprites/buildings/reader.png</key>
             <key type="filename">sprites/buildings/rotater-ccw.png</key>
             <key type="filename">sprites/buildings/rotater-rotate180.png</key>
+            <key type="filename">sprites/buildings/transistor-mirrored.png</key>
+            <key type="filename">sprites/buildings/transistor.png</key>
             <key type="filename">sprites/buildings/underground_belt_entry-tier2.png</key>
             <key type="filename">sprites/buildings/underground_belt_entry.png</key>
             <key type="filename">sprites/buildings/underground_belt_exit-tier2.png</key>
             <key type="filename">sprites/buildings/underground_belt_exit.png</key>
-            <key type="filename">sprites/buildings/virtual_processor-analyzer.png</key>
             <key type="filename">sprites/buildings/virtual_processor-painter.png</key>
             <key type="filename">sprites/buildings/virtual_processor-rotater.png</key>
-            <key type="filename">sprites/buildings/virtual_processor-shapecompare.png</key>
             <key type="filename">sprites/buildings/virtual_processor-stacker.png</key>
             <key type="filename">sprites/buildings/virtual_processor-unstacker.png</key>
             <key type="filename">sprites/buildings/virtual_processor.png</key>
-            <key type="filename">sprites/buildings/wire_tunnel-coating.png</key>
             <key type="filename">sprites/buildings/wire_tunnel.png</key>
             <key type="filename">sprites/misc/reader_overlay.png</key>
             <key type="filename">sprites/wires/lever_on.png</key>
-            <key type="filename">sprites/wires/sets/color_cross.png</key>
-            <key type="filename">sprites/wires/sets/color_forward.png</key>
-            <key type="filename">sprites/wires/sets/color_split.png</key>
-            <key type="filename">sprites/wires/sets/color_turn.png</key>
             <key type="filename">sprites/wires/sets/conflict_cross.png</key>
             <key type="filename">sprites/wires/sets/conflict_forward.png</key>
             <key type="filename">sprites/wires/sets/conflict_split.png</key>
             <key type="filename">sprites/wires/sets/conflict_turn.png</key>
-            <key type="filename">sprites/wires/sets/regular_cross.png</key>
-            <key type="filename">sprites/wires/sets/regular_forward.png</key>
-            <key type="filename">sprites/wires/sets/regular_split.png</key>
-            <key type="filename">sprites/wires/sets/regular_turn.png</key>
-            <key type="filename">sprites/wires/sets/shape_cross.png</key>
-            <key type="filename">sprites/wires/sets/shape_forward.png</key>
-            <key type="filename">sprites/wires/sets/shape_split.png</key>
-            <key type="filename">sprites/wires/sets/shape_turn.png</key>
+            <key type="filename">sprites/wires/sets/first_cross.png</key>
+            <key type="filename">sprites/wires/sets/first_forward.png</key>
+            <key type="filename">sprites/wires/sets/first_split.png</key>
+            <key type="filename">sprites/wires/sets/first_turn.png</key>
+            <key type="filename">sprites/wires/sets/second_cross.png</key>
+            <key type="filename">sprites/wires/sets/second_forward.png</key>
+            <key type="filename">sprites/wires/sets/second_split.png</key>
+            <key type="filename">sprites/wires/sets/second_turn.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
                 <point_f>0.5,0.5</point_f>
@@ -374,34 +373,6 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
-            <key type="filename">sprites/blueprints/belt_left.png</key>
-            <key type="filename">sprites/blueprints/belt_right.png</key>
-            <key type="filename">sprites/blueprints/belt_top.png</key>
-            <key type="filename">sprites/blueprints/wire-cross.png</key>
-            <key type="filename">sprites/blueprints/wire-split.png</key>
-            <key type="filename">sprites/blueprints/wire-turn.png</key>
-            <key type="filename">sprites/blueprints/wire.png</key>
-            <key type="filename">sprites/buildings/belt_left.png</key>
-            <key type="filename">sprites/buildings/belt_right.png</key>
-            <key type="filename">sprites/buildings/belt_top.png</key>
-            <key type="filename">sprites/buildings/wire-cross.png</key>
-            <key type="filename">sprites/buildings/wire-split.png</key>
-            <key type="filename">sprites/buildings/wire-turn.png</key>
-            <key type="filename">sprites/buildings/wire.png</key>
-            <struct type="IndividualSpriteSettings">
-                <key>pivotPoint</key>
-                <point_f>0.5,0.5</point_f>
-                <key>spriteScale</key>
-                <double>1</double>
-                <key>scale9Enabled</key>
-                <false/>
-                <key>scale9Borders</key>
-                <rect>32,32,63,63</rect>
-                <key>scale9Paddings</key>
-                <rect>32,32,63,63</rect>
-                <key>scale9FromFile</key>
-                <false/>
-            </struct>
             <key type="filename">sprites/blueprints/cutter-quad.png</key>
             <key type="filename">sprites/blueprints/painter-quad.png</key>
             <key type="filename">sprites/buildings/cutter-quad.png</key>
@@ -421,8 +392,9 @@
                 <false/>
             </struct>
             <key type="filename">sprites/blueprints/painter-double.png</key>
-            <key type="filename">sprites/blueprints/trash-storage.png</key>
+            <key type="filename">sprites/blueprints/storage.png</key>
             <key type="filename">sprites/buildings/painter-double.png</key>
+            <key type="filename">sprites/buildings/storage.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
                 <point_f>0.5,0.5</point_f>
@@ -437,6 +409,23 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/buildings/belt_left.png</key>
+            <key type="filename">sprites/buildings/belt_right.png</key>
+            <key type="filename">sprites/buildings/belt_top.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>32,32,63,63</rect>
+                <key>scale9Paddings</key>
+                <rect>32,32,63,63</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
             <key type="filename">sprites/buildings/cutter.png</key>
             <key type="filename">sprites/buildings/mixer.png</key>
             <key type="filename">sprites/buildings/painter.png</key>
@@ -492,21 +481,6 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
-            <key type="filename">sprites/buildings/trash-storage.png</key>
-            <struct type="IndividualSpriteSettings">
-                <key>pivotPoint</key>
-                <point_f>0.5,0.5</point_f>
-                <key>spriteScale</key>
-                <double>1</double>
-                <key>scale9Enabled</key>
-                <false/>
-                <key>scale9Borders</key>
-                <rect>144,144,288,288</rect>
-                <key>scale9Paddings</key>
-                <rect>144,144,288,288</rect>
-                <key>scale9FromFile</key>
-                <false/>
-            </struct>
             <key type="filename">sprites/colors/blue.png</key>
             <key type="filename">sprites/colors/cyan.png</key>
             <key type="filename">sprites/colors/green.png</key>

res_raw/sprites/belt/generate_wire_sprites.js

@@ -10,8 +10,14 @@ const path = require("path");
 const outputFolder = path.join(__dirname, "..", "wires", "sets");
 
 const dimensions = 192;
-const lineSize = 12;
-const lowerLineSize = 20;
+const lineSize = 14;
+const lowerLineSize = 32;
+
+const variants = {
+    first: "#61ef6f",
+    second: "#5fb2f1",
+    conflict: "#f74c4c",
+};
 
 function hexToRGB(h) {
     let r = 0,
@@ -122,13 +128,6 @@ function HSLToRGB(h, s, l) {
 async function run() {
     console.log("Running");
 
-    const variants = {
-        regular: "#25fff2",
-        color: "#eba458",
-        shape: "#8858eb",
-        conflict: "#ff3e3e",
-    };
-
     const promises = [];
 
     for (const variantId in variants) {
@@ -163,19 +162,29 @@ async function run() {
             context.quality = "best";
             context.clearRect(0, 0, dimensions, dimensions);
 
-            context.strokeStyle = hexDarkenedColor;
-            context.lineWidth = lowerLineSize;
-            context.lineCap = "square";
-            context.imageSmoothingEnabled = false;
+            const lineCanvas = createCanvas(dimensions, dimensions);
+            const lineContext = lineCanvas.getContext("2d");
+            lineContext.quality = "best";
+            lineContext.clearRect(0, 0, dimensions, dimensions);
+            lineContext.strokeStyle = hexDarkenedColor;
+            lineContext.lineWidth = lowerLineSize;
+            lineContext.lineCap = "square";
+            lineContext.imageSmoothingEnabled = false;
 
             // Draw lower lines
             partLines.forEach(([x1, y1, x2, y2]) => {
-                context.beginPath();
-                context.moveTo(x1 * dimensions, y1 * dimensions);
-                context.lineTo(x2 * dimensions, y2 * dimensions);
-                context.stroke();
+                lineContext.beginPath();
+                lineContext.moveTo(x1 * dimensions, y1 * dimensions);
+                lineContext.lineTo(x2 * dimensions, y2 * dimensions);
+                lineContext.stroke();
             });
 
+            context.globalAlpha = 0.4;
+            context.drawImage(lineCanvas, 0, 0, dimensions, dimensions);
+
+            context.globalAlpha = 1;
+            context.imageSmoothingEnabled = false;
+            context.lineCap = "square";
             context.strokeStyle = variantColor;
             context.lineWidth = lineSize;
 
@@ -197,29 +206,6 @@ async function run() {
     console.log("Waiting for completion");
     await Promise.all(promises);
 
-    // Also wait a bit more
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    console.log("Copying files to all locations");
-
-    // // Copy other files
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_forward.png"),
-        path.join(__dirname, "..", "buildings", "wire.png")
-    );
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_turn.png"),
-        path.join(__dirname, "..", "buildings", "wire-turn.png")
-    );
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_split.png"),
-        path.join(__dirname, "..", "buildings", "wire-split.png")
-    );
-    fs.copyFileSync(
-        path.join(outputFolder, "regular_cross.png"),
-        path.join(__dirname, "..", "buildings", "wire-cross.png")
-    );
-
     console.log("Done!");
 }
 

res_raw/sprites/create_blueprint_previews.py

@@ -8,11 +8,11 @@ import math
 from os import listdir
 from os.path import isdir, isfile
 
-roberts_cross_v = np.array([[0, 0, 0],
+generate_blueprint_sprite_v = np.array([[0, 0, 0],
                             [0, 1, 0],
                             [0, 0, -1]])
 
-roberts_cross_h = np.array([[0, 0, 0],
+generate_blueprint_sprite_h = np.array([[0, 0, 0],
                             [0, 0, 1],
                             [0, -1, 0]])
 
@@ -20,10 +20,7 @@ roberts_cross_h = np.array([[0, 0, 0],
 def rgb2gray(rgb):
     return np.dot(rgb[..., :3], [0.2989, 0.5870, 0.1140])
 
-
-
-
-def save_image(data, outfilename, src_image):
+def process_image(data, outfilename, src_image):
     img = Image.fromarray(np.asarray(
         np.clip(data, 0, 255), dtype="uint8"), "L")
     dest = Image.new("RGBA", (img.width, img.height))
@@ -34,8 +31,8 @@ def save_image(data, outfilename, src_image):
     mask = src_image.filter(ImageFilter.GaussianBlur(10)).load()
     orig = src_image.load()
 
-
-    isWire = "wire" in outfilename
+    # isWire = "wire" in outfilename
+    isWire = False
 
     targetR = 104
     targetG = 200
@@ -72,34 +69,17 @@ def save_image(data, outfilename, src_image):
     dest.save(outfilename)
 
 
-def roberts_cross(infilename, outfilename):
+def generate_blueprint_sprite(infilename, outfilename):
     print("Processing", infilename)
     img = Image.open(infilename)
     img.load()
     img = img.filter(ImageFilter.GaussianBlur(0.5))
 
     image = rgb2gray(np.asarray(img, dtype="int32"))
-    vertical = ndimage.convolve(image, roberts_cross_v)
-    horizontal = ndimage.convolve(image, roberts_cross_h)
+    vertical = ndimage.convolve(image, generate_blueprint_sprite_v)
+    horizontal = ndimage.convolve(image, generate_blueprint_sprite_h)
     output_image = np.sqrt(np.square(horizontal) + np.square(vertical))
-    save_image(output_image, outfilename, img)
-
-
-def generateUiPreview(srcPath, buildingId):
-    print(srcPath, buildingId)
-    img = Image.open(srcPath)
-    img.load()
-    img.thumbnail((110, 110), Image.ANTIALIAS)
-    img.save("../res/ui/hud/building_previews/" + buildingId + ".png")
-
-    img = img.convert("LA")
-
-    data = img.load()
-    for x in range(img.width):
-        for y in range(img.height):
-            data[x, y] = (data[x, y][0], int(data[x, y][1] * 0.5))
-
-    img.save("../res/ui/hud/building_previews/" + buildingId + "_disabled.png")
+    process_image(output_image, outfilename, img)
 
 
 buildings = listdir("buildings")
@@ -107,4 +87,6 @@ buildings = listdir("buildings")
 for buildingId in buildings:
     if "hub" in buildingId:
         continue
-    roberts_cross("buildings/" + buildingId + "", "blueprints/" + buildingId + "")
+    if "wire-" in buildingId:
+        continue
+    generate_blueprint_sprite("buildings/" + buildingId + "", "blueprints/" + buildingId + "")

src/css/resources.scss

@@ -1,5 +1,6 @@
 $buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire,
-    constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage, portable_hub;
+    constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage,
+    transistor, analyzer, comparator, portable_hub;
 
 @each $building in $buildings {
     [data-icon="building_icons/#{$building}.png"] {
@@ -8,10 +9,12 @@ $buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, tra
     }
 }
 
-$buildingsAndVariants: belt, balancer, balancer-merger, balancer-splitter, underground_belt,
-    underground_belt-tier2, miner, miner-chainable, cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer,
-    painter, painter-double, painter-quad, trash, storage, reader, rotater-rotate180, lever, display,
-    constant_signal, portable_hub;
+$buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable,
+    cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage,
+    reader, rotater-rotate180, display, constant_signal, wire, wire_tunnel, logic_gate-or, logic_gate-not,
+    logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker,
+    virtual_processor-stacker, virtual_processor-painter, wire-second, painter, painter-mirrored, portable_hub;
+
 @each $building in $buildingsAndVariants {
     [data-icon="building_tutorials/#{$building}.png"] {
         /* @load-async */
@@ -19,26 +22,43 @@ $buildingsAndVariants: belt, balancer, balancer-merger, balancer-splitter, under
     }
 }
 
-// @TODO: New buildings (balancer, wires, etc)
-
-// Special cases for mirrored vairants
-[data-icon="building_tutorials/painter-mirrored.png"] {
-    /* @load-async */
-    background-image: uiResource("res/ui/building_tutorials/painter.png") !important;
-}
+[data-icon="building_tutorials/balancer-merger.png"],
 [data-icon="building_tutorials/balancer-merger-inverse.png"] {
     /* @load-async */
     background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important;
 }
+
+[data-icon="building_tutorials/balancer-splitter.png"],
 [data-icon="building_tutorials/balancer-splitter-inverse.png"] {
     /* @load-async */
     background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important;
 }
-[data-icon="building_tutorials/filter.png"] {
+
+[data-icon="building_tutorials/transistor.png"],
+[data-icon="building_tutorials/transistor-mirrored.png"] {
+    /* @load-async */
+    background-image: uiResource("res/ui/building_tutorials/transistor.png") !important;
+}
+
+// Filter and lever share tutorials
+[data-icon="building_tutorials/filter.png"],
+[data-icon="building_tutorials/lever.png"] {
     /* @load-async */
     background-image: uiResource("res/ui/building_tutorials/lever.png") !important;
 }
 
+// Logic gate
+[data-icon="building_tutorials/logic_gate.png"] {
+    /* @load-async */
+    background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important;
+}
+
+// Virtual processor
+[data-icon="building_tutorials/virtual_processor.png"] {
+    /* @load-async */
+    background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important;
+}
+
 $icons: notification_saved, notification_success, notification_upgrade;
 @each $icon in $icons {
     [data-icon="icons/#{$icon}.png"] {

src/js/core/config.js

@@ -65,7 +65,7 @@ export const globalConfig = {
 
     buildingSpeeds: {
         cutter: 1 / 4,
-        cutterQuad: 1 / 3,
+        cutterQuad: 1 / 4,
         rotater: 1 / 1,
         rotaterCCW: 1 / 1,
         rotater180: 1 / 1,
@@ -73,7 +73,7 @@ export const globalConfig = {
         painterDouble: 1 / 8,
         painterQuad: 1 / 2,
         mixer: 1 / 5,
-        stacker: 1 / 6,
+        stacker: 1 / 8,
     },
 
     // Zooming

src/js/core/config.local.js

@@ -26,9 +26,6 @@ export default {
     // Allow to zoom freely without limits
     // disableZoomLimits: true,
     // -----------------------------------------------------------------------------------
-    // Shows a border arround every chunk
-    // showChunkBorders: true,
-    // -----------------------------------------------------------------------------------
     // All rewards can be unlocked by passing just 1 of any shape
     // rewardsInstant: true,
     // -----------------------------------------------------------------------------------
@@ -110,5 +107,8 @@ export default {
     // Allows manual ticking
     // manualTickOnly: true,
     // -----------------------------------------------------------------------------------
+    // Disables slow asserts, useful for debugging performance
+    // disableSlowAsserts: true,
+    // -----------------------------------------------------------------------------------
     /* dev:end */
 };

src/js/game/buildings/analyzer.js

@@ -0,0 +1,79 @@
+import { generateMatrixRotations } from "../../core/utils";
+import { enumDirection, Vector } from "../../core/vector";
+import { enumLogicGateType, LogicGateComponent } from "../components/logic_gate";
+import { enumPinSlotType, WiredPinsComponent } from "../components/wired_pins";
+import { Entity } from "../entity";
+import { MetaBuilding } from "../meta_building";
+import { GameRoot } from "../root";
+
+const overlayMatrix = generateMatrixRotations([1, 1, 0, 1, 1, 1, 0, 1, 0]);
+
+export class MetaAnalyzerBuilding extends MetaBuilding {
+    constructor() {
+        super("analyzer");
+    }
+
+    getSilhouetteColor() {
+        return "#3a52bc";
+    }
+
+    /**
+     * @param {GameRoot} root
+     */
+    getIsUnlocked(root) {
+        // @todo
+        return true;
+    }
+
+    /** @returns {"wires"} **/
+    getLayer() {
+        return "wires";
+    }
+
+    getDimensions() {
+        return new Vector(1, 1);
+    }
+
+    getRenderPins() {
+        // We already have it included
+        return false;
+    }
+
+    getSpecialOverlayRenderMatrix(rotation, rotationVariant, variant) {
+        return overlayMatrix[rotation];
+    }
+
+    /**
+     * Creates the entity at the given location
+     * @param {Entity} entity
+     */
+    setupEntityComponents(entity) {
+        entity.addComponent(
+            new WiredPinsComponent({
+                slots: [
+                    {
+                        pos: new Vector(0, 0),
+                        direction: enumDirection.left,
+                        type: enumPinSlotType.logicalEjector,
+                    },
+                    {
+                        pos: new Vector(0, 0),
+                        direction: enumDirection.right,
+                        type: enumPinSlotType.logicalEjector,
+                    },
+                    {
+                        pos: new Vector(0, 0),
+                        direction: enumDirection.bottom,
+                        type: enumPinSlotType.logicalAcceptor,
+                    },
+                ],
+            })
+        );
+
+        entity.addComponent(
+            new LogicGateComponent({
+                type: enumLogicGateType.analyzer,
+            })
+        );
+    }
+}

src/js/game/buildings/comparator.js

@@ -0,0 +1,72 @@
+import { enumDirection, Vector } from "../../core/vector";
+import { enumLogicGateType, LogicGateComponent } from "../components/logic_gate";
+import { enumPinSlotType, WiredPinsComponent } from "../components/wired_pins";
+import { Entity } from "../entity";
+import { MetaBuilding } from "../meta_building";
+import { GameRoot } from "../root";
+
+export class MetaComparatorBuilding extends MetaBuilding {
+    constructor() {
+        super("comparator");
+    }
+
+    getSilhouetteColor() {
+        return "#823cab";
+    }
+
+    /**
+     * @param {GameRoot} root
+     */
+    getIsUnlocked(root) {
+        // @todo
+        return true;
+    }
+
+    /** @returns {"wires"} **/
+    getLayer() {
+        return "wires";
+    }
+
+    getDimensions() {
+        return new Vector(1, 1);
+    }
+
+    getRenderPins() {
+        // We already have it included
+        return false;
+    }
+
+    /**
+     * Creates the entity at the given location
+     * @param {Entity} entity
+     */
+    setupEntityComponents(entity) {
+        entity.addComponent(
+            new WiredPinsComponent({
+                slots: [
+                    {
+                        pos: new Vector(0, 0),
+                        direction: enumDirection.top,
+                        type: enumPinSlotType.logicalEjector,
+                    },
+                    {
+                        pos: new Vector(0, 0),
+                        direction: enumDirection.left,
+                        type: enumPinSlotType.logicalAcceptor,
+                    },
+                    {
+                        pos: new Vector(0, 0),
+                        direction: enumDirection.right,
+                        type: enumPinSlotType.logicalAcceptor,
+                    },
+                ],
+            })
+        );
+
+        entity.addComponent(
+            new LogicGateComponent({
+                type: enumLogicGateType.compare,
+            })
+        );
+    }
+}

src/js/game/buildings/constant_signal.js

@@ -4,6 +4,10 @@ import { Entity } from "../entity";
 import { MetaBuilding } from "../meta_building";
 import { GameRoot } from "../root";
 import { ConstantSignalComponent } from "../components/constant_signal";
+import { generateMatrixRotations } from "../../core/utils";
+import { enumHubGoalRewards } from "../tutorial_goals";
+
+const overlayMatrix = generateMatrixRotations([0, 1, 0, 1, 1, 1, 1, 1, 1]);
 
 export class MetaConstantSignalBuilding extends MetaBuilding {
     constructor() {
@@ -11,15 +15,14 @@ export class MetaConstantSignalBuilding extends MetaBuilding {
     }
 
     getSilhouetteColor() {
-        return "#2bafda";
+        return "#2b84fd";
     }
 
     /**
      * @param {GameRoot} root
      */
     getIsUnlocked(root) {
-        // @todo
-        return true;
+        return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_constant_signal);
     }
 
     /** @returns {"wires"} **/
@@ -35,6 +38,10 @@ export class MetaConstantSignalBuilding extends MetaBuilding {
         return false;
     }
 
+    getSpecialOverlayRenderMatrix(rotation) {
+        return overlayMatrix[rotation];
+    }
+
     /**
      * Creates the entity at the given location
      * @param {Entity} entity