Improve color rendering performance

res_raw/atlas.tps

@@ -197,7 +197,7 @@
             <key>scaleMode</key>
             <enum type="ScaleMode">Smooth</enum>
             <key>extrude</key>
-            <uint>4</uint>
+            <uint>3</uint>
             <key>trimThreshold</key>
             <uint>2</uint>
             <key>trimMargin</key>
@@ -507,6 +507,28 @@
                 <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>
+            <key type="filename">sprites/colors/purple.png</key>
+            <key type="filename">sprites/colors/red.png</key>
+            <key type="filename">sprites/colors/uncolored.png</key>
+            <key type="filename">sprites/colors/white.png</key>
+            <key type="filename">sprites/colors/yellow.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>18,18,36,36</rect>
+                <key>scale9Paddings</key>
+                <rect>18,18,36,36</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
             <key type="filename">sprites/debug/acceptor_slot.png</key>
             <key type="filename">sprites/debug/ejector_slot.png</key>
             <key type="filename">sprites/misc/hub_direction_indicator.png</key>

src/js/game/items/color_item.js

@@ -1,11 +1,10 @@
 import { globalConfig } from "../../core/config";
-import { smoothenDpi } from "../../core/dpi_manager";
 import { DrawParameters } from "../../core/draw_parameters";
+import { Loader } from "../../core/loader";
 import { types } from "../../savegame/serialization";
 import { BaseItem } from "../base_item";
-import { enumColors, enumColorsToHexCode } from "../colors";
+import { enumColors } from "../colors";
 import { THEME } from "../theme";
-import { drawSpriteClipped } from "../../core/draw_utils";
 
 export class ColorItem extends BaseItem {
     static getId() {
@@ -42,7 +41,6 @@ export class ColorItem extends BaseItem {
     constructor(color) {
         super();
         this.color = color;
-        this.bufferGenerator = null;
     }
 
     getBackgroundColorAsResource() {
@@ -55,59 +53,12 @@ export class ColorItem extends BaseItem {
      * @param {number} diameter
      * @param {DrawParameters} parameters
      */
-    drawItemCenteredImpl(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
+    drawItemCenteredClipped(x, y, parameters, diameter = globalConfig.defaultItemDiameter) {
-        if (!this.bufferGenerator) {
-            this.bufferGenerator = this.internalGenerateColorBuffer.bind(this);
-        }
-
         const realDiameter = diameter * 0.6;
-        const dpi = smoothenDpi(globalConfig.shapesSharpness * parameters.zoomLevel);
+        if (!this.cachedSprite) {
-        const key = realDiameter + "/" + dpi + "/" + this.color;
+            this.cachedSprite = Loader.getSprite("sprites/colors/" + this.color + ".png");
-        const canvas = parameters.root.buffers.getForKey({
-            key: "coloritem",
-            subKey: key,
-            w: realDiameter,
-            h: realDiameter,
-            dpi,
-            redrawMethod: this.bufferGenerator,
-        });
-
-        drawSpriteClipped({
-            parameters,
-            sprite: canvas,
-            x: x - realDiameter / 2,
-            y: y - realDiameter / 2,
-            w: realDiameter,
-            h: realDiameter,
-            originalW: realDiameter * dpi,
-            originalH: realDiameter * dpi,
-        });
         }
-    /**
+        this.cachedSprite.drawCachedCentered(parameters, x, y, realDiameter);
-     *
-     * @param {HTMLCanvasElement} canvas
-     * @param {CanvasRenderingContext2D} context
-     * @param {number} w
-     * @param {number} h
-     * @param {number} dpi
-     */
-    internalGenerateColorBuffer(canvas, context, w, h, dpi) {
-        context.translate((w * dpi) / 2, (h * dpi) / 2);
-        context.scale((dpi * w) / 12, (dpi * h) / 12);
-
-        context.fillStyle = enumColorsToHexCode[this.color];
-        context.strokeStyle = THEME.items.outline;
-        context.lineWidth = 2 * THEME.items.outlineWidth;
-        context.beginCircle(2, -1, 3);
-        context.stroke();
-        context.fill();
-        context.beginCircle(-2, -1, 3);
-        context.stroke();
-        context.fill();
-        context.beginCircle(0, 2, 3);
-        context.closePath();
-        context.stroke();
-        context.fill();
     }
 }