@needle-tools/engine 2.67.8-pre → 2.67.9-pre

package/src/engine-components/SpriteRenderer.ts

@@ -5,7 +5,8 @@ import { Color, Material, NearestFilter, Texture, Vector2, TextureFilter } from
 import { RGBAColor } from "./js-extensions/RGBAColor";
 import { getParam } from "../engine/engine_utils";
 
-const debug = getParam("debugspriterenderer")
+const debug = getParam("debugspriterenderer");
+const showWireframe = getParam("wireframe");
 
 class SpriteUtils {
 
@@ -83,45 +84,37 @@ export class Sprite {
     _geometry?: THREE.BufferGeometry;
 }
 
-
-class Slice {
-    @serializable()
-    name!: string;
-    @serializable(Vector2)
-    offset!: Vector2;
-    @serializable(Vector2)
-    size!: Vector2;
-}
-
 const $spriteTexOwner = Symbol("spriteOwner");
 
 export class SpriteSheet {
 
     @serializable(Sprite)
-    sprite?: Sprite;
+    sprites!: Sprite[];
+}
+
+export class SpriteData {
+
+    @serializable(SpriteSheet)
+    spriteSheet?: SpriteSheet;
+
     @serializable()
     index: number = 0;
-    @serializable(Slice)
-    slices!: Slice[];
 
     update() {
+        if (!this.spriteSheet) return;
         const index = this.index;
-        if (index < 0 || index >= this.slices.length)
+        if (index < 0 || index >= this.spriteSheet.sprites.length)
             return;
-        const slice = this.slices[index];
-        let tex = this.sprite?.texture;
+        const slice = this.spriteSheet.sprites[index];
+        let tex = slice?.texture;
         if (!tex) return;
         tex.encoding = THREE.sRGBEncoding;
-        tex.offset.set(slice.offset.x, slice.offset.y);
-        // aniso > 1 makes the texture blurry
         if (tex.minFilter == NearestFilter && tex.magFilter == NearestFilter)
             tex.anisotropy = 1;
-        // tex.repeat.set(slice.size.x, -slice.size.y);
         tex.needsUpdate = true;
     }
 }
 
-
 export class SpriteRenderer extends Behaviour {
 
     @serializable()
@@ -135,14 +128,14 @@ export class SpriteRenderer extends Behaviour {
     @serializable(Material)
     sharedMaterial?: THREE.Material;
 
-    @serializable(SpriteSheet)
-    get sprite(): SpriteSheet | undefined {
+    @serializable(SpriteData)
+    get sprite(): SpriteData | undefined {
         return this._spriteSheet;
     }
-    set sprite(value: SpriteSheet | undefined | number) {
+    set sprite(value: SpriteData | undefined | number) {
         if (value === this._spriteSheet) return;
         if (typeof value === "number") {
-            const index = Math.floor(value);;
+            const index = Math.floor(value);
             if (index === value)
                 this.spriteIndex = index;
             return;
@@ -156,24 +149,22 @@ export class SpriteRenderer extends Behaviour {
     set spriteIndex(value: number) {
         if (!this._spriteSheet) return;
         this._spriteSheet.index = value;
-        this._spriteSheet.update();
+        this.updateSprite();
     }
     get spriteIndex(): number {
         return this._spriteSheet?.index ?? 0;
     }
     get spriteFrames(): number {
-        return this._spriteSheet?.slices.length ?? 0;
+        return this._spriteSheet?.spriteSheet?.sprites.length ?? 0;
     }
 
-    private _spriteSheet?: SpriteSheet;
+    private _spriteSheet?: SpriteData;
     private _currentSprite?: THREE.Mesh;
 
     awake(): void {
         this._currentSprite = undefined;
         if(debug) {
-            console.log("Awake", this.name, this, this.sprite?.sprite?.texture);
-            if(this.sprite?.sprite?.texture)
-                console.log(this.sprite.sprite.texture.minFilter.toString(), this.sprite.sprite.texture.magFilter.toString());
+            console.log("Awake", this.name, this, this.sprite);
         }
     }
 
@@ -184,29 +175,21 @@ export class SpriteRenderer extends Behaviour {
             this.gameObject.add(this._currentSprite);
     }
 
-    // frame : number = 0;
-    // update(){
-    //     // const frameRate = 12;
-    //     // this.frame += frameRate * this.context.time.deltaTime;
-    //     // if(this.frame >= this.spriteFrames)
-    //     //     this.frame = 0;
-    //     // this.spriteIndex = Math.floor(this.frame);
-    //     // console.log(this.spriteIndex);
-    // }
-
     private updateSprite() {
         if (!this.__didAwake) return;
-        if (!this.sprite?.sprite) return;
-        const sprite = this.sprite.sprite;
+        if (!this.sprite?.spriteSheet?.sprites) return;
+        const sprite = this.sprite.spriteSheet.sprites[this.spriteIndex];
         if (!this._currentSprite) {
             const mat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
             if (!mat) return;
+            if (showWireframe)
+                mat.wireframe = true;
             if (this.color) {
                 if (!mat["color"]) mat["color"] = new THREE.Color();
                 mat["color"].copy(this.color);
                 mat["opacity"] = this.color.alpha;
             }
-            mat.alphaTest = 0.5;
+            mat.transparent = true;
 
             if (sprite.texture && !mat.wireframe) {
                 let tex = sprite.texture;

package/src/engine-components/codegen/components.ts

@@ -133,6 +133,7 @@ export { SpatialTriggerReceiver } from "../SpatialTrigger";
 export { SpectatorCamera } from "../SpectatorCamera";
 export { SphereCollider } from "../Collider";
 export { Sprite } from "../SpriteRenderer";
+export { SpriteData } from "../SpriteRenderer";
 export { SpriteRenderer } from "../SpriteRenderer";
 export { SpriteSheet } from "../SpriteRenderer";
 export { SubEmitterSystem } from "../ParticleSystem";