@woosh/meep-engine/src/engine/graphics/texture/atlas/TextureAtlasDebugger.js

Pure JavaScript game engine. Fully featured and production ready.

import Vector2 from "../../../../core/geom/Vector2.js";
import { CanvasView } from "../../../../view/elements/CanvasView.js";
import { FrameRunner } from "../../FrameRunner.js";

/**
 * Visualizer for TextureAtlas, to help understand current state of the atlas
 */
export class TextureAtlasDebugger {
    /**
     *
     * @param {TextureAtlas} atlas
     * @param {Vector2} [scale]
     * @param {boolean} [draw_padding]
     * @param {boolean} [draw_borders]
     */
    constructor(atlas, {
        scale = new Vector2(1, 1),
        draw_padding = true,
        draw_borders = true
    } = {}) {
        window.atlas = atlas;

        const vCanvas = new CanvasView();

        vCanvas.css({
            position: "absolute",
            top: "0",
            left: "0",
            zIndex: 1000,
            border: "1px solid red",
            pointerEvents: 'none',
            background: 'rgba(0,0,0,0.8)'
        });

        const ctx = vCanvas.context2d;

        let last_drawn_version = -1;

        function draw() {

            const size = atlas.size;


            if (size.x !== 0 && size.y !== 0) {
                ctx.clearRect(0, 0, size.x, size.y);

                const imageData = ctx.createImageData(size.x, size.y);

                imageData.data.set(atlas.sampler.data);

                ctx.putImageData(imageData, 0, 0);


                //draw patch boundaries
                for (let i = 0; i < atlas.patches.length; i++) {
                    const patch = atlas.patches[i];

                    if (draw_padding) {
                        // draw padding area
                        ctx.strokeStyle = 'rgba(0,166,255,0.5)';
                        ctx.lineWidth = patch.padding;

                        ctx.strokeRect(
                            patch.position.x - patch.padding * 0.5,
                            patch.position.y - patch.padding * 0.5,
                            patch.size.x + patch.padding,
                            patch.size.y + patch.padding,
                        );
                    }

                    if (draw_borders) {
                        const aabb2 = patch.packing;

                        // draw patch borders
                        ctx.strokeStyle = 'red';
                        ctx.lineWidth = 1;

                        ctx.strokeRect(aabb2.x0, aabb2.y0, aabb2.getWidth(), aabb2.getHeight());
                    }
                }

            } else {
                ctx.clearRect(0, 0, 1, 1);
            }

            // remember last drawn version
            last_drawn_version = atlas.sampler.version;
        }

        vCanvas.size.set(0, 0);

        function try_draw() {
            if (last_drawn_version !== atlas.sampler.version) {
                draw();
            }
        }

        const write_dimensions = () => {
            const x = atlas.size.x;
            const y = atlas.size.y;

            vCanvas.size.set(x, y);
            vCanvas.scale.copy(scale);
            vCanvas.transformOrigin.set(0, 0);
        };

        function full_update() {
            write_dimensions();
            draw();
        }

        const fr = new FrameRunner(try_draw);

        atlas.size.onChanged.add(full_update);

        vCanvas.on.linked.add(() => {
            full_update();
            fr.startup();
        });

        vCanvas.on.unlinked.add(() => {
            fr.shutdown();
        })

        atlas.on.painted.add(draw);

        this.vAtlasContent = vCanvas;
    }
}