Help to translate Atlas items

[AChevallier]

Hello,

I am doing a prototype of a battle game.

I am a bit blocked with the Atlas transformation.

Here the battleground, I tried to transform each rectangle of the Atlas to the "target" with a timing animation.

I tried a lot of thing but nothing worked.
I took the code from the https://shopify.github.io/react-native-skia/docs/shapes/atlas/#rsxform

I tried useRSXformBuffer but It's only for rotate scale transforms

useRectBuffer is only to transform the rectangle and not its position.

I rework the code to not use <Atlas/> but I had some performance issue with huge number of bullets.

import {
  drawAsImage,
  Group,
  Rect,
  Atlas,
  rect,
  useRSXformBuffer,
  Skia,
} from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const size = { width: 25, height: 5 };
const strokeWidth = 2;
const imageSize = {
  width: size.width + strokeWidth,
  height: size.height + strokeWidth,
};
const image = drawAsImage(
  <Group>
    <Rect
      rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
      color="cyan"
    />
    <Rect
      rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
      color="blue"
      style="stroke"
      strokeWidth={strokeWidth}
    />
  </Group>,
  imageSize
);

type BlueMiddleBulletAtlasProps = {
  target: { x: number; y: number };
  people: { x: number; y: number }[];
};

export const BlueMiddleBulletAtlas = ({
  target,
  people,
}: BlueMiddleBulletAtlasProps) => {
  const numberOfBoxes = people?.length;

  if (!numberOfBoxes) return null;

  const pos = target;
  const sprites = new Array(numberOfBoxes)
    .fill(0)
    .map(() => rect(0, 0, imageSize.width, imageSize.height));

  const transforms = people.map((_, i) => {
    const tx = people[i].x;
    const ty = people[i].y;
    const r = Math.atan2(pos.y - ty, pos.x - tx);

    return Skia.RSXform(Math.cos(r), Math.sin(r), tx, ty);
  });

  return <Atlas image={image} sprites={sprites} transforms={transforms} />;
};

Do you know how I can do that ?

Thanks for the futur answers !

[AChevallier]

Actually, I think I made a mistake assuming it is possible to translate atlas element.
So I rework my code to make it work with , I optimised it and it works well (small frame drop)