fix: SpriteAnimator/useSpriteLoader types (#2171)

* feat: added optional Sprite or Plane geometry for SpriteAnimator * fix: added more strict types to spriteanimator * improved documentation * replaced interface with type, added prop comments * removed unused types, preferred type inferring when possible * fixes for types and more accurate type handling * prettier fixes * improved dependencies, fixed eslint errors * no more any * removing more type-assertions * cleaned up some comments on documentation * more types enhancements * removing more type-assertions * CommonProps * fix for useSpriteLoader types * common props * added default values * removed unused functions * Spriteanimator is now pulling types from useSpriteLoader * renamed function * removed extra dependencies, removed duplicate variables * simplified promise to callback * added eslint fixes * added proper types on some internal variables * streamlined types for onLoad * sharing getFirstFrame * killing deps * simplifying useSpriteLoader * added spriteAnimator interactive story * reverted story, added a new story with json data * removed unused assets * Revert "simplifying useSpriteLoader" This reverts commit 9deb57f. * Revert "killing deps" This reverts commit c097c0d. * fix for unnecessary re-render * prettier formatting --------- Co-authored-by: Antoine BERNIER <antoine.bernier@gmail.com>
pmndrs · Nov 15, 2024 · 6197c6a · 6197c6a
1 parent 78a526b
commit 6197c6a
Show file tree

Hide file tree

Showing 6 changed files with 1,031 additions and 625 deletions.
diff --git a/.storybook/public/cyclops.json b/.storybook/public/cyclops.json
@@ -0,0 +1,300 @@
+{"frames": {
+
+"Attacking_000":
+{
+	"frame": {"x":1,"y":1,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_001":
+{
+	"frame": {"x":643,"y":1,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_002":
+{
+	"frame": {"x":1285,"y":1,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_003":
+{
+	"frame": {"x":1927,"y":1,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_004":
+{
+	"frame": {"x":2569,"y":1,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_005":
+{
+	"frame": {"x":3211,"y":1,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_006":
+{
+	"frame": {"x":1,"y":483,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_007":
+{
+	"frame": {"x":643,"y":483,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_008":
+{
+	"frame": {"x":1285,"y":483,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_009":
+{
+	"frame": {"x":1927,"y":483,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_010":
+{
+	"frame": {"x":2569,"y":483,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Attacking_011":
+{
+	"frame": {"x":3211,"y":483,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_000":
+{
+	"frame": {"x":1,"y":965,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_001":
+{
+	"frame": {"x":643,"y":965,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_002":
+{
+	"frame": {"x":1285,"y":965,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_003":
+{
+	"frame": {"x":1927,"y":965,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_004":
+{
+	"frame": {"x":2569,"y":965,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_005":
+{
+	"frame": {"x":3211,"y":965,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_006":
+{
+	"frame": {"x":1,"y":1447,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_007":
+{
+	"frame": {"x":643,"y":1447,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_008":
+{
+	"frame": {"x":1285,"y":1447,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_009":
+{
+	"frame": {"x":1927,"y":1447,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_010":
+{
+	"frame": {"x":2569,"y":1447,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Hurt_011":
+{
+	"frame": {"x":3211,"y":1447,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_000":
+{
+	"frame": {"x":1,"y":1929,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_001":
+{
+	"frame": {"x":643,"y":1929,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_002":
+{
+	"frame": {"x":1285,"y":1929,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_003":
+{
+	"frame": {"x":1927,"y":1929,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_004":
+{
+	"frame": {"x":2569,"y":1929,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_005":
+{
+	"frame": {"x":3211,"y":1929,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_006":
+{
+	"frame": {"x":1,"y":2411,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_007":
+{
+	"frame": {"x":643,"y":2411,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_008":
+{
+	"frame": {"x":1285,"y":2411,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_009":
+{
+	"frame": {"x":1927,"y":2411,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_010":
+{
+	"frame": {"x":2569,"y":2411,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+},
+"Idle_011":
+{
+	"frame": {"x":3211,"y":2411,"w":640,"h":480},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":640,"h":480},
+	"sourceSize": {"w":640,"h":480}
+}},
+"meta": {
+	"app": "https://www.codeandweb.com/texturepacker",
+	"version": "1.0",
+	"image": "cyclops.png",
+	"format": "RGBA8888",
+	"size": {"w":3852,"h":2892},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:0e87593e152aa1b96dcc023abeafd158:bb7257f44207a87046359dab31983daf:cf3b5afa5774b99a9ed80f2056562301$"
+}
+}
diff --git a/.storybook/public/cyclops.png b/.storybook/public/cyclops.png
diff --git a/.storybook/stories/SpriteAnimator.stories.tsx b/.storybook/stories/SpriteAnimator.stories.tsx
@@ -6,6 +6,8 @@ import { SpriteAnimator, useSpriteLoader } from '../../src'
 
 const SPRITE_IMAGE = 'story.png'
 const SPRITE_DATA = 'story.json'
+const CYCLOPS_IMAGE = 'cyclops.png'
+const CYCLOPS_JSON = 'cyclops.json'
 
 export default {
   title: 'Misc/SpriteAnimator',
@@ -82,3 +84,23 @@ export const SpriteAnimatorSt3 = {
   render: (args) => <SpriteAnimatorScene3 {...args} />,
   name: 'Multiple',
 } satisfies Story
+
+function SpriteAnimatorScene4(props: React.ComponentProps<typeof SpriteAnimator>) {
+  const commonProps = {
+    textureImageURL: CYCLOPS_IMAGE,
+    textureDataURL: CYCLOPS_JSON,
+    animationNames: ['idle', 'attacking', 'hurt'],
+  }
+
+  return (
+    <>
+      <SpriteAnimator {...props} position={[-2, 0, 0.01]} {...commonProps} fps={18} scale={2.5} frameName={'idle'} />
+    </>
+  )
+}
+
+export const SpriteAnimatorSt4 = {
+  args: {},
+  render: (args) => <SpriteAnimatorScene4 {...args} />,
+  name: 'Image & JSON',
+} satisfies Story