Animated sprite sheets documentation

[ayushbgl]

Hi, I have a sprite sheet with size 2048x2048. Each sprite is of size 128x128 and there are 16x16 sprites in the image. I am trying to use Skia to animate these sprites but I am unable to do so.

RN Skia version: 1.0.2
Renimated version: 3.5.4
RN version: 0.72.6
iOS Simulator (ios: 17.2)

Code:

import React, {useEffect} from 'react';

import {
  Skia,
  Canvas,
  Atlas,
  useImage,
  useRectBuffer,
  useClock,
  rect,
} from '@shopify/react-native-skia';

import Animated, {
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const size = {width: 2048, height: 2048};

export default function SpriteSheetAnimationTest() {
  const dice = useImage(require('../assets/spritesheet.png'));
  const offset = useSharedValue(0);

  const rects = [0];
  const transform = Skia.RSXform(1, 0, 64, 32);

  useEffect(() => {
    offset.value = withRepeat(withTiming(128, {duration: 100}), -1, true);
  }, [offset]);

  // const sprites = useRectBuffer(rects, (rect, i) => {
  //   'worklet';
  //   console.log(i, offset.value, offset.value, 128, 128);
  //   rect.setXYWH(offset.value, offset.value, 128, 128);
  // });

  const sprites = [rect(offset.value, 2048 - 128, 128, 128), rect(640, 640, 128, 128)];

  return (
    <Canvas style={{flex: 1}}>
      <Atlas image={dice} sprites={sprites} transforms={[transform]} />
    </Canvas>
  );
}

Behaviour: I am only seeing the image cropped/set by first value of offset, or whatever I hard code in the sprites array. There is no animation happening. I have also tried using useRectBuffer but no help there as well. Some documentation/example on how to use sprite sheets and animate them will be helpful especially for those who are new to Skia.

[wcandillon]

this is because sprites should be in a useDerivedValue for it to be evaluated on every frame