emeraldengine 2.0.1 → 2.1.0

package/imports/Drawable.js

@@ -50,7 +50,7 @@ class Drawable {
     this.texture = null;
     this.useTexture = useTexture;
     if (useTexture) {
-      this.initTexture().then(() => {});
+      this.initTexture().then(() => { });
     }
     this.frameWidth = frameWidth;
     this.frameHeight = frameHeight;
@@ -73,7 +73,7 @@ class Drawable {
     this.parentObject = null;
     this.isActive = false;
     this.isWireframe = false;
-    this.callbackFunction = () => {};
+    this.callbackFunction = () => { };
     this.pixelart = pixelart;
     this.useLighting = useLighting; // Default to true to maintain existing behavior
   }
@@ -430,13 +430,18 @@ class Drawable {
         const col = this.currentFrame % this.framesPerRow;
         const row = Math.floor(this.currentFrame / this.framesPerRow);
 
-        texLeft = ((col + 1) * this.frameWidth) / this.textureWidth;
-        texRight = (col * this.frameWidth) / this.textureWidth;
+        const halfTexelWidth = 0.5 / this.textureWidth;
+        const halfTexelHeight = 0.5 / this.textureHeight;
+
+        texLeft = ((col + 1) * this.frameWidth) / this.textureWidth - halfTexelWidth;
+        texRight = (col * this.frameWidth) / this.textureWidth + halfTexelWidth;
         texTop =
           (this.textureHeight - row * this.frameHeight - this.frameHeight) /
-          this.textureHeight;
+          this.textureHeight +
+          halfTexelHeight;
         texBottom =
-          (this.textureHeight - row * this.frameHeight) / this.textureHeight;
+          (this.textureHeight - row * this.frameHeight) / this.textureHeight -
+          halfTexelHeight;
       } else {
         // Static image
         texLeft = 1.0;
@@ -447,25 +452,25 @@ class Drawable {
       // If mirrored change texLeft and texRight in places
       const texCoords = this.mirrored
         ? new Float32Array([
-            texRight,
-            texBottom,
-            texLeft,
-            texBottom,
-            texRight,
-            texTop,
-            texLeft,
-            texTop,
-          ])
+          texRight,
+          texBottom,
+          texLeft,
+          texBottom,
+          texRight,
+          texTop,
+          texLeft,
+          texTop,
+        ])
         : new Float32Array([
-            texLeft,
-            texBottom,
-            texRight,
-            texBottom,
-            texLeft,
-            texTop,
-            texRight,
-            texTop,
-          ]);
+          texLeft,
+          texBottom,
+          texRight,
+          texBottom,
+          texLeft,
+          texTop,
+          texRight,
+          texTop,
+        ]);
       // Update texture coordinate buffer
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
       this.gl.bufferData(this.gl.ARRAY_BUFFER, texCoords, this.gl.STATIC_DRAW);
@@ -493,9 +498,9 @@ class Drawable {
       vertexCount = this.vertices.length / 2;
     }
 
-    if(this.isWireframe) {
+    if (this.isWireframe) {
       // Fix the wireframe for square
-      if(this.vertices.length === 8) {
+      if (this.vertices.length === 8) {
         let tempBuffer = this.gl.createBuffer();
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, tempBuffer);
 

package/imports/InstancedTexture.js

@@ -406,13 +406,18 @@ class InstancedTexture extends Drawable {
       const col = frame % this.framesPerRow;
       const row = Math.floor(frame / this.framesPerRow);
 
-      texLeft = ((col + 1) * this.frameWidth) / this.textureWidth;
-      texRight = (col * this.frameWidth) / this.textureWidth;
+      const halfTexelWidth = 0.5 / this.textureWidth;
+      const halfTexelHeight = 0.5 / this.textureHeight;
+
+      texLeft = ((col + 1) * this.frameWidth) / this.textureWidth - halfTexelWidth;
+      texRight = (col * this.frameWidth) / this.textureWidth + halfTexelWidth;
       texTop =
         (this.textureHeight - row * this.frameHeight - this.frameHeight) /
-        this.textureHeight;
+          this.textureHeight +
+        halfTexelHeight;
       texBottom =
-        (this.textureHeight - row * this.frameHeight) / this.textureHeight;
+        (this.textureHeight - row * this.frameHeight) / this.textureHeight -
+        halfTexelHeight;
     } else {
       // Static image
       texLeft = 1.0;

package/imports/managers/EventManager.js

@@ -16,8 +16,6 @@ class EventManager {
     this.keyDownListeners = new Map();
     this.keyUpListeners = new Map();
     this.clickListeners = new Map();
-    this.canvasWidth = canvas.width;
-    this.canvasHeight = canvas.height;
     this.hoverListeners = new Map();
     this.lastHoveredObject = null;
     this.lastHoveredInstance = null;
@@ -187,9 +185,9 @@ class EventManager {
 
     // Convert to world coordinates
     const worldX =
-      canvasX - this.canvasWidth / 2 - this.camera.transform.position.x;
+      canvasX - this.canvas.width / 2 - this.camera.transform.position.x;
     const worldY =
-      this.canvasHeight / 2 - canvasY - this.camera.transform.position.y;
+      this.canvas.height / 2 - canvasY - this.camera.transform.position.y;
 
     this.scene.objects.forEach((sceneObject) => {
       if (!sceneObject.isActive) return; // Skip inactive objects
@@ -326,9 +324,9 @@ class EventManager {
 
     // Convert to world coordinates
     const worldX =
-      canvasX - this.canvasWidth / 2 - this.camera.transform.position.x;
+      canvasX - this.canvas.width / 2 - this.camera.transform.position.x;
     const worldY =
-      this.canvasHeight / 2 - canvasY - this.camera.transform.position.y;
+      this.canvas.height / 2 - canvasY - this.camera.transform.position.y;
     this.mousePosition.x = worldX;
     this.mousePosition.y = worldY;
     let hoveredObject = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emeraldengine",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "2D graphics library for Web",
   "type": "module",
   "main": "index.js",