DisplayBox!

jacklehamster · Jan 20, 2024 · a8c2056 · a8c2056
1 parent 92d3daf
commit a8c2056
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 50 deletions.
diff --git a/build/index.js b/build/index.js
@@ -25889,7 +25889,7 @@ void main() {
   vec2 vFragment = vTex;
   float blur = bgBlur * pow(dist, .7) / 20000.;
   vec4 color = getTextureColor(vTextureIndex, vTex);
-  if (color.a < rand(vTex)) {
+  if (color.a < .1) {//rand(vTex)) {
     discard;
   };
   int blurPass = 8;
@@ -28255,17 +28255,18 @@ class Looper {
 // src/motor/ControlledLooper.ts
 class ControlledLooper extends Looper {
   controls;
+  triggerred;
   _listener;
   constructor(motor, controls, triggerred, data, refresher) {
     super(motor, false, data, refresher);
     this.controls = controls;
-    this._listener = {
-      onAction: (controls2) => {
-        if (triggerred(controls2)) {
-          this.start();
-        }
-      }
-    };
+    this.triggerred = triggerred;
+    this._listener = this;
+  }
+  onAction(controls) {
+    if (this.triggerred(controls)) {
+      this.start();
+    }
   }
   activate() {
     super.activate();
@@ -29207,9 +29208,7 @@ class TiltAuxiliary extends ControlledLooper {
 // src/world/aux/SmoothFollowAuxiliary.ts
 class SmoothFollowAuxiliary extends Looper {
   followee;
-  listener = () => {
-    this.start();
-  };
+  listener = () => this.start();
   constructor({ followee, follower, motor }, config) {
     super(motor, false, { followee, follower, speed: config?.speed ?? 1 });
     this.followee = followee;
@@ -29557,6 +29556,45 @@ class TurnStepAuxiliary extends ControlledLooper {
   }
 }
 
+// src/world/collision/DisplayBox.ts
+class DisplayBox {
+  sprites;
+  constructor(box, imageId) {
+    const cX = (box.left + box.right) / 2;
+    const cY = (box.top + box.bottom) / 2;
+    const cZ = (box.near + box.far) / 2;
+    const groundScale = [box.right - box.left, 2, box.near - box.far];
+    const sideScale = [2, box.top - box.bottom, box.near - box.far];
+    const faceScale = [box.right - box.left, box.top - box.bottom, 2];
+    const outside = [
+      Matrix_default.create().translate(cX, box.bottom, cZ).scale(...groundScale).scale(0.5).rotateX(Math.PI / 2),
+      Matrix_default.create().translate(cX, box.top, cZ).scale(...groundScale).scale(0.5).rotateX(-Math.PI / 2),
+      Matrix_default.create().translate(box.left, cY, cZ).scale(...sideScale).scale(0.5).rotateY(-Math.PI / 2),
+      Matrix_default.create().translate(box.right, cY, cZ).scale(...sideScale).scale(0.5).rotateY(Math.PI / 2),
+      Matrix_default.create().translate(cX, cY, box.near).scale(...faceScale).scale(0.5).rotateY(0),
+      Matrix_default.create().translate(cX, cY, box.far).scale(...faceScale).scale(0.5).rotateY(Math.PI)
+    ].map((transform) => ({ imageId, transform }));
+    const inside = [
+      Matrix_default.create().translate(cX, box.bottom, cZ).scale(...groundScale).scale(0.5).rotateX(-Math.PI / 2),
+      Matrix_default.create().translate(cX, box.top, cZ).scale(...groundScale).scale(0.5).rotateX(+Math.PI / 2),
+      Matrix_default.create().translate(box.left, cY, cZ).scale(...sideScale).scale(0.5).rotateY(+Math.PI / 2),
+      Matrix_default.create().translate(box.right, cY, cZ).scale(...sideScale).scale(0.5).rotateY(-Math.PI / 2),
+      Matrix_default.create().translate(cX, cY, box.near).scale(...faceScale).scale(0.5).rotateY(Math.PI),
+      Matrix_default.create().translate(cX, cY, box.far).scale(...faceScale).scale(0.5).rotateY(0)
+    ].map((transform) => ({ imageId, transform }));
+    this.sprites = [...inside, ...outside];
+  }
+  get length() {
+    return this.sprites.length;
+  }
+  at(index) {
+    return this.sprites.at(index);
+  }
+  informUpdate(_id, _type) {
+    throw new Error("Method not implemented.");
+  }
+}
+
 // src/demo/DemoWorld.ts
 var Assets;
 (function(Assets2) {
@@ -29693,9 +29731,9 @@ class DemoWorld extends AuxiliaryHolder {
           const { canvas } = ctx;
           canvas.width = LOGO_SIZE;
           canvas.height = LOGO_SIZE;
-          ctx.lineWidth = 8;
-          ctx.setLineDash([5, 2]);
-          ctx.strokeStyle = "green";
+          ctx.lineWidth = 40;
+          ctx.setLineDash([20, 5]);
+          ctx.strokeStyle = "red";
           ctx.beginPath();
           ctx.rect(10, 10, canvas.width - 20, canvas.height - 20);
           ctx.stroke();
@@ -29780,8 +29818,17 @@ class DemoWorld extends AuxiliaryHolder {
         bag.addSprite(ground, ceiling);
       }
     })));
+    const heroBox = {
+      top: 1,
+      bottom: -1,
+      left: -0.9,
+      right: 0.9,
+      near: 0.9,
+      far: -0.9
+    };
     const heroPos = new PositionMatrix().onChange(() => {
       forEach3(heroSprites, (_, index) => heroSprites.informUpdate(index, SpriteUpdateType.TRANSFORM));
+      forEach3(displayBox, (_, index) => displayBox.informUpdate(index, SpriteUpdateType.TRANSFORM));
     });
     const heroSprites = new SpriteGroup([
       {
@@ -29791,6 +29838,9 @@ class DemoWorld extends AuxiliaryHolder {
         animationId: Anims.STILL
       }
     ], [heroPos]);
+    spritesAccumulator.addAuxiliary(heroSprites);
+    const displayBox = new SpriteGroup(new DisplayBox(heroBox, Assets.WIREFRAME), [heroPos]);
+    spritesAccumulator.addAuxiliary(displayBox);
     const shadowPos = new PositionMatrix().onChange(() => {
       forEach3(shadowHeroSprites, (_, index) => shadowHeroSprites.informUpdate(index, SpriteUpdateType.TRANSFORM));
     });
@@ -29808,7 +29858,6 @@ class DemoWorld extends AuxiliaryHolder {
     }, {
       followY: false
     }));
-    spritesAccumulator.addAuxiliary(heroSprites);
     spritesAccumulator.addAuxiliary(shadowHeroSprites);
     heroPos.moveBlocker = {
       isBlocked(to, from) {
@@ -30007,4 +30056,4 @@ export {
   hello
 };
 
-//# debugId=AD0D4E435B2099A164756e2164756e21
+//# debugId=E0ADD7188206BD7264756e2164756e21
diff --git a/build/index.js.map b/build/index.js.map
diff --git a/example/index.html b/example/index.html
@@ -35,7 +35,6 @@
   </style>
   <body>
     <canvas id="root"></canvas>
-    <div id="overlay" class="BlurredBackground hidden"></div>
   </body>
   <script>
     window.global = globalThis;

diff --git a/src/demo/DemoWorld.ts b/src/demo/DemoWorld.ts
@@ -43,6 +43,7 @@ import { WebGlCanvas } from "graphics/WebGlCanvas";
 import { Hud } from "ui/Hud";
 import { TurnStepAuxiliary } from "world/aux/TurnStepAuxiliary";
 import { IPositionMatrix } from "gl/transform/IPositionMatrix";
+import { DisplayBox } from "world/collision/DisplayBox";
 
 enum Assets {
   DOBUKI = 0,
@@ -207,10 +208,10 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
               const { canvas } = ctx;
               canvas.width = LOGO_SIZE;
               canvas.height = LOGO_SIZE;
-              ctx.lineWidth = 8;
-              ctx.setLineDash([5, 2]);
+              ctx.lineWidth = 40;
+              ctx.setLineDash([20, 5]);
 
-              ctx.strokeStyle = 'green';
+              ctx.strokeStyle = 'red';
 
               ctx.beginPath();
               ctx.rect(10, 10, canvas.width - 20, canvas.height - 20);
@@ -329,18 +330,29 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
       })
     ));
 
+    const heroBox = {
+      top: 1,
+      bottom: -1,
+      left: -.9,
+      right: .9,
+      near: .9,
+      far: -.9,
+    };
     const heroPos: IPositionMatrix = new PositionMatrix()
       .onChange(() => {
         forEach(heroSprites, (_, index) => heroSprites.informUpdate(index, SpriteUpdateType.TRANSFORM));
+        forEach(displayBox, (_, index) => displayBox.informUpdate(index, SpriteUpdateType.TRANSFORM));
       });
-    const heroSprites = new SpriteGroup([
-      {
-        imageId: Assets.DODO,
-        spriteType: SpriteType.SPRITE,
-        transform: Matrix.create().translate(0, -.5, 0),
-        animationId: Anims.STILL,
-      },
-    ], [heroPos]);
+    const heroSprites = new SpriteGroup([{
+      imageId: Assets.DODO,
+      spriteType: SpriteType.SPRITE,
+      transform: Matrix.create().translate(0, -.5, 0),
+      animationId: Anims.STILL,
+    },], [heroPos]);
+    spritesAccumulator.addAuxiliary(heroSprites);
+
+    const displayBox = new SpriteGroup(new DisplayBox(heroBox, Assets.WIREFRAME), [heroPos]);
+    spritesAccumulator.addAuxiliary(displayBox);
 
     const shadowPos: IPositionMatrix = new PositionMatrix()
       .onChange(() => {
@@ -360,8 +372,6 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
     }, {
       followY: false,
     }));
-
-    spritesAccumulator.addAuxiliary(heroSprites);
     spritesAccumulator.addAuxiliary(shadowHeroSprites);
 
     //  * A move blocker just determines where you can or cannot move.

diff --git a/src/gl/resources/fragmentShader.frag b/src/gl/resources/fragmentShader.frag
@@ -33,7 +33,7 @@ void main() {
   vec2 vFragment = vTex;
   float blur = bgBlur * pow(dist, .7) / 20000.;
   vec4 color = getTextureColor(vTextureIndex, vTex);
-  if (color.a < rand(vTex)) {
+  if (color.a < .1) {//rand(vTex)) {
     discard;
   };
   int blurPass = 8;

diff --git a/src/motor/ControlledLooper.ts b/src/motor/ControlledLooper.ts
@@ -3,17 +3,17 @@ import { IMotor } from "./IMotor";
 import { Looper } from "./Looper";
 import { ControlsListener, IControls } from "controls/IControls";
 
-export class ControlledLooper<T = undefined> extends Looper<T> {
+export class ControlledLooper<T = undefined> extends Looper<T> implements ControlsListener {
   private _listener: ControlsListener;
-  constructor(motor: IMotor, private readonly controls: IControls, triggerred: (controls: IControls) => boolean, data: T, refresher?: Refresh<T>) {
+  constructor(motor: IMotor, private readonly controls: IControls, private triggerred: (controls: IControls) => boolean, data: T, refresher?: Refresh<T>) {
     super(motor, false, data, refresher);
-    this._listener = {
-      onAction: (controls): void => {
-        if (triggerred(controls)) {
-          this.start();
-        }
-      },
-    };
+    this._listener = this;
+  }
+
+  onAction(controls: IControls): void {
+    if (this.triggerred(controls)) {
+      this.start();
+    }
   }
 
   activate(): void {

diff --git a/src/world/aux/SmoothFollowAuxiliary.ts b/src/world/aux/SmoothFollowAuxiliary.ts
@@ -22,9 +22,7 @@ interface Config {
 
 export class SmoothFollowAuxiliary extends Looper<Data> implements Auxiliary {
   private followee: IPositionMatrix;
-  private listener: ChangeListener = () => {
-    this.start();
-  };
+  private listener: ChangeListener = () => this.start();
 
   constructor({ followee, follower, motor }: Props, config?: Partial<Config>) {
     super(motor, false, { followee, follower, speed: config?.speed ?? 1 });

diff --git a/src/world/collision/DisplayBox.ts b/src/world/collision/DisplayBox.ts
@@ -0,0 +1,48 @@
+import { MediaId } from "gl/texture/ImageManager";
+import { Box } from "./Box";
+import Matrix from "gl/transform/Matrix";
+import { Sprite } from "world/sprite/Sprite";
+import { Sprites } from "world/sprite/Sprites";
+
+export class DisplayBox implements Sprites {
+  private readonly sprites: Sprite[];
+  constructor(box: Box, imageId: MediaId) {
+    const cX = (box.left + box.right) / 2;
+    const cY = (box.top + box.bottom) / 2;
+    const cZ = (box.near + box.far) / 2;
+    const groundScale: [number, number, number] = [box.right - box.left, 2, box.near - box.far];
+    const sideScale: [number, number, number] = [2, box.top - box.bottom, box.near - box.far];
+    const faceScale: [number, number, number] = [box.right - box.left, box.top - box.bottom, 2];
+
+    const outside = [
+      Matrix.create().translate(cX, box.bottom, cZ).scale(...groundScale).scale(1 / 2).rotateX(Math.PI / 2),
+      Matrix.create().translate(cX, box.top, cZ).scale(...groundScale).scale(1 / 2).rotateX(-Math.PI / 2),
+      Matrix.create().translate(box.left, cY, cZ).scale(...sideScale).scale(1 / 2).rotateY(-Math.PI / 2),
+      Matrix.create().translate(box.right, cY, cZ).scale(...sideScale).scale(1 / 2).rotateY(Math.PI / 2),
+      Matrix.create().translate(cX, cY, box.near).scale(...faceScale).scale(1 / 2).rotateY(0),
+      Matrix.create().translate(cX, cY, box.far).scale(...faceScale).scale(1 / 2).rotateY(Math.PI),
+    ].map(transform => ({ imageId, transform }));
+
+    const inside = [
+      Matrix.create().translate(cX, box.bottom, cZ).scale(...groundScale).scale(1 / 2).rotateX(-Math.PI / 2),
+      Matrix.create().translate(cX, box.top, cZ).scale(...groundScale).scale(1 / 2).rotateX(+Math.PI / 2),
+      Matrix.create().translate(box.left, cY, cZ).scale(...sideScale).scale(1 / 2).rotateY(+Math.PI / 2),
+      Matrix.create().translate(box.right, cY, cZ).scale(...sideScale).scale(1 / 2).rotateY(-Math.PI / 2),
+      Matrix.create().translate(cX, cY, box.near).scale(...faceScale).scale(1 / 2).rotateY(Math.PI),
+      Matrix.create().translate(cX, cY, box.far).scale(...faceScale).scale(1 / 2).rotateY(0),
+    ].map(transform => ({ imageId, transform }));
+    this.sprites = [...inside, ...outside];
+  }
+
+  get length(): number {
+    return this.sprites.length;
+  }
+
+  at(index: number): Sprite | undefined {
+    return this.sprites.at(index);
+  }
+
+  informUpdate(_id: number, _type: number | undefined): void {
+    throw new Error("Method not implemented.");
+  }
+}