rename w and h to width and height

jerzakm · Feb 12, 2024 · 75cfd6c · 75cfd6c
1 parent 4a1a065
commit 75cfd6c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 25 deletions.
diff --git a/.changeset/sour-pianos-juggle.md b/.changeset/sour-pianos-juggle.md
@@ -0,0 +1,5 @@
+---
+"@threejs-kit/instanced-sprite-mesh": patch
+---
+
+rename w and h to width and height
diff --git a/apps/docs/src/content/docs/instancedSprite/03-spritesheet-format.mdx b/apps/docs/src/content/docs/instancedSprite/03-spritesheet-format.mdx
@@ -10,9 +10,9 @@ Each instanced mesh has to be provided with a spritesheet formatted like this. T
 
 ```ts
 type SpritesheetFormat = {
-  frames: [x: number, y: number, w: number, h: number][];
+  frames: [x: number, y: number, width: number, height: number][];
   animations: Record<string, [frameId: number, duration: number][]>;
-  sheetSize: [w: number, h: number][];
+  sheetSize: [width: number, height: number][];
   animationLengths: number[];
 };
 ```

diff --git a/apps/docs/src/content/docs/instancedSprite/04-instanced-sprite-building.mdx b/apps/docs/src/content/docs/instancedSprite/04-instanced-sprite-building.mdx
@@ -116,8 +116,8 @@ const spritesheet = createSpritesheet()
 			'/textures/sprites/cacodaemon.png',
 			{
 				type: 'rowColumn',
-				w: 8,
-				h: 4
+				width: 8,
+				height: 4
 			},
 			[
 				{ name: 'fly', frameRange: [0, 6] },

diff --git a/apps/playground/src/routes/instanced-sprite/Scene.svelte b/apps/playground/src/routes/instanced-sprite/Scene.svelte
@@ -14,8 +14,8 @@
 			'/textures/sprites/cacodaemon.png',
 			{
 				type: 'rowColumn',
-				w: 8,
-				h: 4
+				width: 8,
+				height: 4
 			},
 			[
 				{ name: 'fly', frameRange: [0, 6] },
@@ -31,8 +31,8 @@
 			'/textures/sprites/Monsters_Creatures_Fantasy/Flying_eye/Flight.png',
 			{
 				type: 'rowColumn',
-				w: 8,
-				h: 1
+				width: 8,
+				height: 1
 			},
 			'fly'
 		)
@@ -43,8 +43,8 @@
 			'/textures/sprites/countdown_sprite.png',
 			{
 				type: 'rowColumn',
-				w: 10,
-				h: 1
+				width: 10,
+				height: 1
 			},
 			'fly'
 		)

diff --git a/packages/instanced-sprite-mesh/src/material.ts b/packages/instanced-sprite-mesh/src/material.ts
@@ -259,9 +259,9 @@ export const parseAseprite = (json: any) => {
 };
 
 export type SpritesheetFormat = {
-  frames: [x: number, y: number, w: number, h: number][];
+  frames: [x: number, y: number, width: number, height: number][];
   animations: Record<string, [frameId: number, duration: number][]>;
-  sheetSize: [w: number, h: number];
+  sheetSize: [width: number, height: number];
   animationLengths: number[];
 };
 

diff --git a/packages/instanced-sprite-mesh/src/spriteBuilder.ts b/packages/instanced-sprite-mesh/src/spriteBuilder.ts
@@ -14,9 +14,8 @@ type AnimationDefitinion = {
   custom?: SpritesheetFormat["frames"];
   auto?: {
     type: "rowColumn" | "frameSize";
-    w: number;
-    h: number;
-    // rowMajor: boolean;
+    width: number;
+    height: number;
   };
   multiAnimations?: { name: string; frameRange: [from: number, to: number] }[];
 };
@@ -42,8 +41,8 @@ class SpriteBuilder {
     imageUrl: string,
     config: {
       type: "rowColumn" | "frameSize";
-      w: number;
-      h: number;
+      width: number;
+      height: number;
       name?: string;
     },
     meta: AnimationMeta
@@ -62,16 +61,16 @@ class SpriteBuilder {
     if (config.type == "rowColumn") {
       animation["auto"] = {
         type: "rowColumn",
-        w: config.w,
-        h: config.h,
+        width: config.width,
+        height: config.height,
       };
     }
 
     if (config.type == "frameSize") {
       animation["auto"] = {
         type: "frameSize",
-        w: config.w,
-        h: config.h,
+        width: config.width,
+        height: config.height,
       };
     }
 
@@ -140,12 +139,12 @@ class SpriteBuilder {
         let columns = 0;
 
         if (a.auto.type == "frameSize") {
-          columns = img.w / a.auto.w;
-          rows = img.h / a.auto.h;
+          columns = img.w / a.auto.width;
+          rows = img.h / a.auto.height;
         }
         if (a.auto.type == "rowColumn") {
-          columns = a.auto.w;
-          rows = a.auto.h;
+          columns = a.auto.width;
+          rows = a.auto.height;
         }
         const imgPartialW = img.w / columns;
         const imgPartialH = img.h / rows;