1
2
3

npm install react-native-skia-sprite-animator
# 依存ライブラリ（Expo 環境の場合）
npx expo install @shopify/react-native-skia expo-file-system

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import React from "react";
import { View } from "react-native";
import { SpriteAnimator } from "react-native-skia-sprite-animator";
// 画像は任意のアセットに置き換え
import spriteSheet from "../assets/piyo-sprite.png";

const frames = Array.from({ length: 7 }).map((_, i) => ({
  x: i * 64,
  y: 0,
  w: 64,
  h: 64,
}));

export function PiyoSprite() {
  return (
    <View style={{ width: 64, height: 64 }}>
      <SpriteAnimator
        image={spriteSheet}                // require(...) / import asset / SkImage をサポート
        data={{ frames }}                  // { x, y, w, h, duration? }[]
        fps={12}                           // duration 未指定フレームのデフォルト速度
        loop                               // ループ再生
        onEnd={() => console.log("Animation finished")}
        spriteScale={1}                    // 倍率。描画サイズ = w * scale, h * scale
        style={{ width: 64, height: 64 }}  // Canvas サイズ
      />
    </View>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import {
  saveSprite,
  loadSprite,
  listSprites,
  deleteSprite,
  configureSpriteStorage,
  getSpriteStoragePaths,
  clearSpriteStorage,
  type SpriteSavePayload,
} from "react-native-skia-sprite-animator";

// 任意のフレーム配列
const frames = [{ x: 0, y: 0, w: 64, h: 64 }, { x: 64, y: 0, w: 64, h: 64 }];

// 保存
const payload: SpriteSavePayload = {
  frames,
  meta: { displayName: "Piyo Walk", version: 1 },
  // 追加の任意フィールドもメタにマージ可能
};
const saved = await saveSprite({
  imageTempUri: "file:///path/to/temp.png", // 一時保存された画像URI
  sprite: payload,
});

// 一覧・読み込み・削除
const items = await listSprites();
const full = await loadSprite(saved.id);
await deleteSprite(saved.id);

// 保存パスを知りたい場合
const paths = getSpriteStoragePaths();
// { root, images, meta, registry }

// ルートをカスタムしたい場合
configureSpriteStorage({ rootDir: "file:///custom-root/" });

// すべて削除（テスト・リセット用）
await clearSpriteStorage();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function buildGridFrames(cols: number, rows: number, w: number, h: number) {
  const frames = [];
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      frames.push({ x: x * w, y: y * h, w, h });
    }
  }
  return frames;
}

// 例: 横7×縦1、64px
const frames = buildGridFrames(7, 1, 64, 64);