the-world-engine/dist/esm/engine/script/render/CssSpriteRenderer.js

three.js based, unity like game engine for browser

import { GlobalConfig } from "../../../GlobalConfig";

import { Transform } from "../../hierarchy_object/Transform";

import { CssRenderer } from "./CssRenderer";

export var ImageRenderingMode;

(function(i) {
    i["Auto"] = "auto";
    i["CrispEdges"] = "crisp-edges";
    i["Pixelated"] = "pixelated";
})(ImageRenderingMode || (ImageRenderingMode = {}));

export class CssSpriteRenderer extends CssRenderer {
    tp=0;
    ip=0;
    sp=false;
    ep=false;
    hp=1;
    cn=ImageRenderingMode.Pixelated;
    wa=null;
    renderInitialize() {
        if (this.wa) {
            this.wa();
        } else {
            this.asyncSetImageFromPath(GlobalConfig.defaultSpriteSrc);
        }
    }
    updateCenterOffset(i) {
        if (!this.css3DObject) return;
        this.css3DObject.position.set(this.tp * this.centerOffset.x, this.ip * this.centerOffset.y, 0);
        if (i) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    updateViewScale(i) {
        if (!this.css3DObject) return;
        const t = this.viewScale;
        const s = this.htmlElement;
        s.style.width = this.tp / this.viewScale + "px";
        s.style.height = this.ip / this.viewScale + "px";
        const e = this.sp ? -1 : 1;
        const h = this.ep ? -1 : 1;
        this.css3DObject.scale.set(t * e, t * h, t);
        if (i) {
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    get image() {
        return this.htmlElement;
    }
    asyncSetImageFromPath(i, t) {
        if (!this.readyToDraw) {
            this.wa = () => this.asyncSetImageFromPath(i, t);
            return;
        }
        const s = this.htmlElement ?? new Image;
        s.src = i;
        const onLoad = i => {
            if (!this.exists) return;
            s.removeEventListener("load", onLoad);
            this.setImage(s);
            t?.();
        };
        s.addEventListener("load", onLoad);
    }
    setImage(i) {
        if (!i.complete) throw new Error(`Image {${i.src}} is not loaded.`);
        this.htmlElement = i;
        if (!this.readyToDraw) {
            this.wa = () => this.setImage(i);
            return;
        }
        i.alt = this.gameObject.name + "_sprite";
        i.style.imageRendering = this.cn;
        if (this.tp === 0) this.tp = i.naturalWidth * .1;
        if (this.ip === 0) this.ip = i.naturalHeight * .1;
        i.style.width = this.tp / this.viewScale + "px";
        i.style.height = this.ip / this.viewScale + "px";
        i.style.opacity = this.hp.toString();
        const t = this.initializeBaseComponents(false);
        Transform.updateRawObject3DWorldMatrixRecursively(t);
        this.transform.enqueueRenderAttachedObject3D(t);
    }
    get imageWidth() {
        return this.tp;
    }
    set imageWidth(i) {
        this.tp = i;
        if (this.htmlElement) {
            this.htmlElement.style.width = i / this.viewScale + "px";
        }
        this.updateCenterOffset(true);
    }
    get imageHeight() {
        return this.ip;
    }
    set imageHeight(i) {
        this.ip = i;
        if (this.htmlElement) {
            this.htmlElement.style.height = i / this.viewScale + "px";
        }
        this.updateCenterOffset(true);
    }
    get imageFlipX() {
        return this.sp;
    }
    set imageFlipX(i) {
        this.sp = i;
        if (this.css3DObject) {
            if (this.sp) {
                if (0 < this.css3DObject.scale.x) {
                    this.css3DObject.scale.x *= -1;
                }
            } else {
                if (this.css3DObject.scale.x < 0) {
                    this.css3DObject.scale.x *= -1;
                }
            }
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    get imageFlipY() {
        return this.ep;
    }
    set imageFlipY(i) {
        this.ep = i;
        if (this.css3DObject) {
            if (this.ep) {
                if (0 < this.css3DObject.scale.y) {
                    this.css3DObject.scale.y *= -1;
                }
            } else {
                if (this.css3DObject.scale.y < 0) {
                    this.css3DObject.scale.y *= -1;
                }
            }
            Transform.updateRawObject3DWorldMatrixRecursively(this.css3DObject);
            this.transform.enqueueRenderAttachedObject3D(this.css3DObject);
        }
    }
    get opacity() {
        return this.hp;
    }
    set opacity(i) {
        this.hp = i;
        if (this.htmlElement) {
            this.htmlElement.style.opacity = this.hp.toString();
        }
    }
    get imageRenderingMode() {
        return this.cn;
    }
    set imageRenderingMode(i) {
        this.cn = i;
        if (this.htmlElement) {
            this.htmlElement.style.imageRendering = this.cn;
        }
    }
}