the-world-engine/dist/esm/engine/script/physics2d/collider/BoxCollider2D.js

three.js based, unity like game engine for browser

import { Vector2, Vector3 } from "three/src/Three";

import { PolygonShape } from "../../../../box2d.ts/build/index";

import { CssHtmlElementRenderer } from "../../render/CssHtmlElementRenderer";

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

import { getOrCreatePhysicsDebugRenderObject } from "../PhysicsDebugRender";

import { Collider2D } from "./Collider2D";

export class BoxCollider2D extends Collider2D {
    Ei=new Vector2(1, 1);
    bl=0;
    gl=true;
    pl=null;
    ml() {
        if (this.gl) {
            let e = this.gameObject.getComponent(ObjectAttacher2D);
            if (!e) e = this.gameObject.addComponent(ObjectAttacher2D);
            if (this.pl) {
                const e = this.pl.getComponentInChildren(CssHtmlElementRenderer);
                e.element.style.borderRadius = this.edgeRadius * 100 + "px";
                e.elementWidth = this.Ei.x + this.edgeRadius * 2;
                e.elementHeight = this.Ei.y + this.edgeRadius * 2;
            } else {
                const t = getOrCreatePhysicsDebugRenderObject(this.engine);
                this.pl = t.addChildFromBuilder(this.engine.instantiater.buildGameObject(this.gameObject.name + "_debug_box").withChild(this.engine.instantiater.buildGameObject("debug_box", new Vector3(this.offset.x, this.offset.y, 200)).withComponent(CssHtmlElementRenderer, (e => {
                    const t = document.createElement("div");
                    t.style.border = "2px solid rgba(255, 255, 0, 0.3)";
                    t.style.borderRadius = this.edgeRadius * 100 + "px";
                    t.style.margin = "0";
                    t.style.padding = "0";
                    t.style.backgroundColor = "rgba(0, 0, 0, 0)";
                    e.element = t;
                    e.elementWidth = this.Ei.x + this.edgeRadius * 2;
                    e.elementHeight = this.Ei.y + this.edgeRadius * 2;
                    e.viewScale = .01;
                    e.pointerEvents = false;
                }))));
                e.target = this.pl;
            }
        }
    }
    onEnable() {
        super.onEnable();
        this.ml();
    }
    onDisable() {
        super.onDisable();
        if (this.pl) {
            this.pl.destroy();
            this.pl = null;
        }
    }
    _l=[ new PolygonShape ];
    createShapes() {
        const e = this._l[0];
        e.SetAsBox(this.Ei.x / 2, this.Ei.y / 2, this.offset);
        e.m_radius = this.bl;
        return this._l;
    }
    get size() {
        return this.Ei;
    }
    set size(e) {
        if (e.x <= 0 || e.y <= 0) throw new Error("size must be greater than 0");
        this.Ei.copy(e);
        this.updateFixture();
        this.ml();
    }
    get edgeRadius() {
        return this.bl;
    }
    set edgeRadius(e) {
        this.bl = e;
        this.updateFixture();
        this.ml();
    }
    get debugDraw() {
        return this.gl;
    }
    set debugDraw(e) {
        this.gl = e;
        if (this.enabled && this.gameObject.activeInHierarchy) {
            if (e) {
                this.ml();
            } else {
                if (this.pl) {
                    this.pl.destroy();
                    this.pl = null;
                }
            }
        }
    }
}