corrected spritebuilder frameRange

jerzakm · Feb 19, 2024 · 4121a83 · 4121a83
1 parent 7cf8a3a
commit 4121a83
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/.changeset/itchy-shrimps-cry.md b/.changeset/itchy-shrimps-cry.md
@@ -0,0 +1,5 @@
+---
+"@threejs-kit/instanced-sprite-mesh": patch
+---
+
+corrected spritebuilder frameRange
diff --git a/apps/playground/src/routes/instanced-sprite/AnimatedInstancedSprite.svelte b/apps/playground/src/routes/instanced-sprite/AnimatedInstancedSprite.svelte
@@ -130,12 +130,6 @@
 		if ($textureStore && mesh.material && !initialized && mesh) {
 			mesh.castShadow = true;
 
-			for (let i = 0; i < count; i++) {
-				// mesh.playmode.setAt(i, 'PAUSE');
-				// mesh.frame.setAt(i, 28);
-				mesh.frame.setAt(i, 7, 'death');
-			}
-
 			initialized = true;
 		}
 	}
@@ -158,7 +152,7 @@
 	};
 
 	const setAnimation = (instanceId: number, animationId: SpriteAnimations) => {
-		mesh.play(animationId, true, 'FORWARD').at(instanceId);
+		mesh.play(animationId, true, 'REVERSE').at(instanceId);
 	};
 
 	setContext('instanced-sprite-ctx', {

diff --git a/apps/playground/src/routes/instanced-sprite/Scene.svelte b/apps/playground/src/routes/instanced-sprite/Scene.svelte
@@ -18,10 +18,10 @@
 				height: 4
 			},
 			[
-				{ name: 'fly', frameRange: [0, 6] },
-				{ name: 'attack', frameRange: [8, 14] },
-				{ name: 'idle', frameRange: [16, 20] },
-				{ name: 'death', frameRange: [24, 32] }
+				{ name: 'fly', frameRange: [0, 5] },
+				{ name: 'attack', frameRange: [8, 13] },
+				{ name: 'idle', frameRange: [16, 19] },
+				{ name: 'death', frameRange: [24, 31] }
 			]
 		)
 		.build();
@@ -46,7 +46,12 @@
 				width: 10,
 				height: 1
 			},
-			'fly'
+			[
+				{
+					name: 'fly',
+					frameRange: [0, 9]
+				}
+			]
 		)
 		.build();
 </script>
@@ -67,23 +72,23 @@
 	<PlayerUpdater />
 </AnimatedInstancedSprite> -->
 
-{#await spritesheet then { spritesheet, texture }}
+<!-- {#await spritesheet then { spritesheet, texture }}
 	<AnimatedInstancedSprite {spritesheet} {texture} fps={10} loop={true} {count}>
 		<FlyerUpdater />
 	</AnimatedInstancedSprite>
-{/await}
+{/await} -->
 <!-- 
 {#await flyerSpritesheet then { spritesheet, texture }}
 	<AnimatedInstancedSprite {spritesheet} {texture} fps={10} loop={true} count={count * 25}>
 		<FlyerUpdater />
 	</AnimatedInstancedSprite>
 {/await} -->
 
-<!-- {#await countdownSpritesheet then { spritesheet, texture }}
+{#await countdownSpritesheet then { spritesheet, texture }}
 	<AnimatedInstancedSprite {spritesheet} {texture} fps={1} loop={true} count={count * 25}>
 		<FlyerUpdater />
 	</AnimatedInstancedSprite>
-{/await} -->
+{/await}
 
 <Sky elevation={0.15} />
 <!-- <T.AmbientLight /> -->

diff --git a/packages/instanced-sprite-mesh/src/spriteBuilder.ts b/packages/instanced-sprite-mesh/src/spriteBuilder.ts
@@ -183,11 +183,11 @@ class SpriteBuilder {
           for (const anim of a.multiAnimations) {
             spritesheet.animations[anim.name] = [];
             spritesheet.animationLengths.push(
-              anim.frameRange[1] - anim.frameRange[0]
+              anim.frameRange[1] - anim.frameRange[0] + 1
             );
             for (
               let frame = anim.frameRange[0];
-              frame < anim.frameRange[1];
+              frame <= anim.frameRange[1];
               frame++
             ) {
               spritesheet.animations[anim.name].push([frameMap.get(frame), 1]);