Having low FPS with sprite animation

[imVinayPandya]

Hello there
I am learning React native Skia and Renimated. Other day I was watching html canvas tutorial on youtube and decided to implement that in react-native using Skia. This is how it looks.

RPReplay_Final1716198200.MP4

Question: I am having low FPS, not sure what am I doing wrong here?

Here is my Sprite file: https://imgbb.com/QrB1Kyt

Node version: v20.12.0

Package.json:

{
  "name": "skia-tutorial",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "@shopify/react-native-skia": "^1.2.3",
    "expo": "~51.0.8",
    "expo-constants": "~16.0.1",
    "expo-font": "~12.0.5",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.14",
    "expo-splash-screen": "~0.27.4",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.4",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.2",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

Here is how my code looks index.tsx

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import {
  Atlas,
  Canvas,
  useImage,
  useRSXformBuffer,
  useRectBuffer,
} from "@shopify/react-native-skia";
import {
  useSharedValue,
  withDelay,
  withRepeat,
  withSequence,
  withTiming,
} from "react-native-reanimated";

const movements: { [key: string]: { noOfFrames: number } } = {
  ideal: {
    noOfFrames: 7,
  },
  takeOff: {
    noOfFrames: 7,
  },
  land: {
    noOfFrames: 7,
  },
  run: {
    noOfFrames: 9,
  },
  dizzy: {
    noOfFrames: 11,
  },
  seat: {
    noOfFrames: 5,
  },
  roll: {
    noOfFrames: 7,
  },
  bit: {
    noOfFrames: 7,
  },
  dead: {
    noOfFrames: 12,
  },
  dodge: {
    noOfFrames: 4,
  },
};

const SpriteDemo = () => {
  const [numberOfFrames, setNumberOfFrames] = useState(
    movements.ideal.noOfFrames - 1
  );
  const [frameY, setFrameY] = useState(0);

  const dogImage = useImage(require("../assets/images/dog.png"));
  const frameX = useSharedValue(0);

  const canvasWidth = 600;
  const canvasHeight = 600;
  const spriteWidth = 575;
  const spriteHeight = 523;

  useEffect(() => {
    frameX.value = withRepeat(
      withSequence(
        ...Array.from({ length: numberOfFrames }, (_, i) => {
          return withDelay(50, withTiming(i + 1, { duration: 0 }));
        })
      ),
      -1,
      false
    );

    return () => {
      frameX.value = 0;
    };
  }, [numberOfFrames]);

  const sprites = useRectBuffer(numberOfFrames, (val, i) => {
    "worklet";
    val.setXYWH(
      frameX.value * spriteWidth,
      frameY * spriteHeight,
      spriteWidth,
      spriteHeight
    );
  });

  const transforms = useRSXformBuffer(numberOfFrames, (val, i) => {
    "worklet";
    val.set(0.8, 0, spriteWidth * i + 60, spriteHeight * i);
  });

  const changeAction = (movement: string, index: number) => {
    setNumberOfFrames(movements[movement].noOfFrames - 1);
    setFrameY(index);
  };

  return (
    <>
      <View style={[styles.container]}>
        <Canvas
          style={{
            width: canvasWidth,
            height: canvasHeight,
            backgroundColor: "white",
            padding: 0,
          }}
        >
          <Atlas image={dogImage} sprites={sprites} transforms={transforms} />
        </Canvas>

        <View style={[styles.buttonWrapper]}>
          {Object.keys(movements).map((movement, index) => {
            return (
              <TouchableOpacity
                key={movement}
                onPress={() => changeAction(movement, index)}
              >
                <Text style={[styles.button]}>{movement}</Text>
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
    </>
  );
};

export default SpriteDemo;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
  },
  buttonWrapper: {
    marginTop: 10,
    flexWrap: "wrap",
    flexDirection: "row",
    gap: 20,
    justifyContent: "center",
  },
  button: {
    padding: 15,
    backgroundColor: "yellow",
    borderRadius: 5,
    textTransform: "capitalize",
    fontWeight: "bold",
  },
});

[wcandillon]

You might want to take inspiration from our useVideo hook where we control the playback speed with Reanimated: https://github.com/Shopify/react-native-skia/blob/main/package/src/external/reanimated/useVideo.ts