perf: draw portrait with canvas #32
Conversation
hera/character/Portrait.tsx
Outdated
| if (animate) { | ||
| setInterval(animate, 1000 / keyFrameYs.length); | ||
| } |
There was a problem hiding this comment.
This needs to return () => clearInterval(interval) so that it gets stopped properly.
There was a problem hiding this comment.
Also the effect needs to support the paused flag and ensure the animation is not started.
There was a problem hiding this comment.
-
returning () => clearInterval(interval)
feat: cleanup useLayoutEffect -
supporting
pausedflag
feat: support paused flag
fix: render image when animate, paused are not given
hera/character/Portrait.tsx
Outdated
|
|
||
| const { position } = unit.sprite.portrait; | ||
| const y = -(position.y + (variant || 0)) * PortraitHeight + 'px'; | ||
| const alternateY = -(position.y + (variant || 0) + 6) * PortraitHeight + 'px'; | ||
| const keyFrameYs = [ |
There was a problem hiding this comment.
Maybe we can call this positions?
There was a problem hiding this comment.
hera/character/Portrait.tsx
Outdated
| (position.y + (variant || 0)) * PortraitHeight, | ||
| (position.y + (variant || 0) + 6) * PortraitHeight, | ||
| ]; | ||
| let curKeyFrameY = 0; |
There was a problem hiding this comment.
Let's call this currentPosition, and move it inside the useLayoutEffect call. We can't mutate variables created in render like that.
There was a problem hiding this comment.
hera/character/Portrait.tsx
Outdated
| </div> | ||
| ); | ||
| }); | ||
|
|
||
| const vars = new CSSVariables<'x' | 'y' | 'alternate-y'>('p'); | ||
|
|
||
| const portraitStyle = css` | ||
| contain: content; |
There was a problem hiding this comment.
I think we don't need this line since we aren't overflowing the element anymore.
There was a problem hiding this comment.
|
@puroong wow, thanks for the contribution! This is very nice, and will make Athena Crisis work much better on low-end devices. I left a few comments to make sure we are cleaning things up. |
|
@cpojer |
|
My bad... I should have run the tests in local.. |
|
Thank you for your contribution. The funds were distributed to you. |
…ch#18) (nkzw-tech#32) Co-authored-by: Connor Lindsey <[email protected]> GitOrigin-RevId: 80499df94c87243652a05c36fa5c43bd079fae6b
Description
Resolves #14
spriteImagesetIntervalMemory Usage
with img tag (as is)
with canvas