Skip to content

Commit

Permalink
fix for unnecessary re-render
Browse files Browse the repository at this point in the history
  • Loading branch information
@netgfx
netgfx committed Nov 15, 2024
1 parent 140fe43 commit d219708
Showing 1 changed file with 21 additions and 43 deletions.
64 changes: 21 additions & 43 deletions src/core/SpriteAnimator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
undefined,
canvasRenderingContext2DSettings
)
const frameNameRef = React.useRef(frameName)

// lite version for pre-loaded assets
const parseSpriteDataLite = React.useCallback(
Expand All @@ -198,8 +199,8 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
spriteData.current = data
if (spriteData.current && Array.isArray(spriteData.current.frames)) {
totalFrames.current = spriteData.current.frames.length
} else if (spriteData.current && typeof spriteData.current === 'object' && frameName) {
totalFrames.current = spriteData.current.frames[frameName].length
} else if (spriteData.current && typeof spriteData.current === 'object' && frameNameRef.current) {
totalFrames.current = spriteData.current.frames[frameNameRef.current].length
} else {
totalFrames.current = 0
}
Expand All @@ -208,7 +209,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
currentFrame.current = totalFrames.current - 1
}

const { w, h } = getFirstFrame(spriteData.current?.frames ?? [], frameName).sourceSize
const { w, h } = getFirstFrame(spriteData.current?.frames ?? [], frameNameRef.current).sourceSize
const aspect = calculateAspectRatio(w, h)

setAspect(aspect)
Expand All @@ -217,41 +218,26 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
}
}

// buffer for instanced
// if (instanceItems) {
// for (var i = 0; i < instanceItems.length; i++) {
// const keys = Object.keys(spriteData.current?.frames ?? {})
// const randomKey = keys[Math.floor(Math.random() * keys.length)]

// frameBuffer.current.push({
// key: i,
// frames: spriteData.current?.frames ?? [],
// selectedFrame: randomKey,
// offset: { x: 0, y: 0 }
// })
// }
// }

setSpriteTexture(textureData)
},
[frameName, numberOfFrames, playBackwards]
[numberOfFrames, playBackwards]
)

// modify the sprite material after json is parsed and state updated
const modifySpritePosition = React.useCallback((): void => {
if (!spriteData.current) return
const {
meta: { size: metaInfo },
frames,
frames
} = spriteData.current

const { w: frameW, h: frameH } = Array.isArray(frames)
? frames[0].sourceSize
: frameName
? frames[frameName]
? frames[frameName][0].sourceSize
: { w: 0, h: 0 }
? frames[frameName]
? frames[frameName][0].sourceSize
: { w: 0, h: 0 }
: { w: 0, h: 0 }

if (matRef.current && matRef.current.map) {
matRef.current.map.wrapS = matRef.current.map.wrapT = THREE.RepeatWrapping
Expand All @@ -269,7 +255,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
if (onStart) {
onStart({
currentFrameName: frameName ?? '',
currentFrame: currentFrame.current,
currentFrame: currentFrame.current
})
}
}, [flipOffset, frameName, onStart])
Expand All @@ -280,7 +266,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
offset: pos.current,
imageUrl: textureImageURL,
hasEnded: false,
ref: fref,
ref: fref
}),
[textureImageURL, fref]
)
Expand Down Expand Up @@ -359,7 +345,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri

const {
meta: { size: metaInfo },
frames,
frames
} = spriteData.current
const { w: frameW, h: frameH } = getFirstFrame(frames, frameName).sourceSize
const spriteFrames = Array.isArray(frames) ? frames : frameName ? frames[frameName] : []
Expand All @@ -383,7 +369,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
var manualProgressEndCondition = playBackwards ? currentFrame.current < 0 : currentFrame.current >= _endFrame

if (endCondition) {
currentFrame.current = loop ? (startFrame ?? 0) : 0
currentFrame.current = loop ? startFrame ?? 0 : 0

if (playBackwards) {
currentFrame.current = _endFrame
Expand All @@ -392,12 +378,12 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
if (loop) {
onLoopEnd?.({
currentFrameName: frameName ?? '',
currentFrame: currentFrame.current,
currentFrame: currentFrame.current
})
} else {
onEnd?.({
currentFrameName: frameName ?? '',
currentFrame: currentFrame.current,
currentFrame: currentFrame.current
})

state.hasEnded = !resetOnEnd
Expand All @@ -411,7 +397,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
} else if (onStartCondition) {
onStart?.({
currentFrameName: frameName ?? '',
currentFrame: currentFrame.current,
currentFrame: currentFrame.current
})
}

Expand All @@ -420,7 +406,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
if (softEnd.current === false) {
onEnd?.({
currentFrameName: frameName ?? '',
currentFrame: currentFrame.current,
currentFrame: currentFrame.current
})
softEnd.current = true
}
Expand Down Expand Up @@ -453,16 +439,14 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri

const {
frame: { x: frameX, y: frameY },
sourceSize: { w: originalSizeX, h: originalSizeY },
sourceSize: { w: originalSizeX, h: originalSizeY }
} = spriteFrames[targetFrame]

const frameOffsetX = 1 / framesH
const frameOffsetY = 1 / framesV
if (matRef.current && matRef.current.map) {
finalValX =
flipOffset > 0
? frameOffsetX * (frameX / originalSizeX)
: frameOffsetX * (frameX / originalSizeX) - matRef.current.map.repeat.x
flipOffset > 0 ? frameOffsetX * (frameX / originalSizeX) : frameOffsetX * (frameX / originalSizeX) - matRef.current.map.repeat.x
finalValY = Math.abs(1 - frameOffsetY) - frameOffsetY * (frameY / originalSizeY)

matRef.current.map.offset.x = finalValX
Expand Down Expand Up @@ -505,7 +489,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
runAnimation()
onFrame?.({
currentFrameName: currentFrameName.current,
currentFrame: currentFrame.current,
currentFrame: currentFrame.current
})
}
})
Expand Down Expand Up @@ -546,13 +530,7 @@ export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, Spri
alphaTest={alphaTest ?? 0.0}
/>
{(instanceItems ?? [0]).map((item, index) => (
<Instance
key={index}
ref={instanceItems?.length === 1 ? spriteRef : null}
position={item}
scale={1.0}
{...meshProps}
/>
<Instance key={index} ref={instanceItems?.length === 1 ? spriteRef : null} position={item} scale={1.0} {...meshProps} />
))}
</Instances>
)}
Expand Down

0 comments on commit d219708

Please sign in to comment.