🚀

react-native-skia-sprite-animator v0.4.0とiPadデモアプリ公開ノート

に公開
iOS
React Native
Expo
animation
skia
tech

はじめに

react-native-skia-sprite-animator を v0.3.0 から v0.4.0 へアップデートし、iPad専用アプリ「RN Skia Sprite Animator」（App Store 公開名）も同時にリリースしました。このエントリでは新ランタイム AnimatedSprite2D の正式化ポイントと、iPad版デモアプリで体験できるワークフローをまとめます。App Store の製品ページ から無料でダウンロードできます。

v0.4.0 ハイライト

  • AnimatedSprite2D が正式ランタイムへ格上げ。専用の Hook / ティッカー / プレビューが揃い、React の再レンダーに縛られない滑らかな再生が可能になりました。
  • AnimationStudio のストレージ層は JSON 永続化を前提に設計し直し、フレームごとの画像やオートプレイ情報を安全に扱えます。
  • Expo 製バンドルエディタはローカライズ済みの情報・法務モーダル、新アイコン/スプラッシュ、ストア向けの依存関係調整まで完了して配布品質に到達。
  • SpriteAnimator は v0.4.0 で非推奨になり、次リリースで削除予定。実行時に警告が出るため早めの移行を推奨します。

RN Skia Sprite Animator（iPadアプリ）の見どころ

  • iPadOS 15.1+ を対象にした専用 UI で、フレーム編集・ループ設定・再生方向の切り替え・JSON エクスポートまで一画面で完結。
  • RN Skia Sprite Animator 内で見える Animation Studio / Sprite Storage / AnimatedSprite2D Preview は npm パッケージのコンポーネントそのままなので、本番アプリへ持ち込む前に操作感をそのまま試せます。
  • JSON エクスポートは AnimatedSprite2D が期待する cleanSpriteData 形式で出力されるため、プロジェクトへコピペするだけで再生可能。

トップ画面

フレームピッカー

メタデータ

スプライトJSON

スプライトストレージ

AnimatedSprite2D 導入スニペット

v0.4.0 から推奨される AnimatedSprite2D は、Animation Studio の JSON を SpriteFramesResource としてそのまま読み込めます。以下はリポジトリ README に掲載している最小構成サンプルです。

import { AnimatedSprite2D, type SpriteFramesResource } from 'react-native-skia-sprite-animator';
import spriteSheet from '../assets/hero.png';
import spriteJson from '../assets/hero.json';

const frames: SpriteFramesResource = {
  frames: spriteJson.frames,
  animations: spriteJson.animations,
  animationsMeta: spriteJson.animationsMeta,
  autoPlayAnimation: spriteJson.autoPlayAnimation ?? null,
};

export function HeroPreview() {
  return (
    <AnimatedSprite2D
      frames={frames}
      animation="idle"
      autoplay="idle"
      speedScale={1}
      centered
      style={{ width: 128, height: 128 }}
    />
  );
}

自走ティッカーとプレビュー

AnimatedSprite2DPreview はエディタ統合用に integration.frameCursor を同期させるモードと、自走モードを切り替えられます。RN Skia Sprite Animator ではこのプレビューをそのまま使い、Animation Studio 内の編集結果が即座にランタイムへ反映される体験を提供しています。

SpriteAnimator からの移行ポイント

  1. まず AnimatedSprite2D を導入し、frames に Animation Studio が出力する JSON を渡す。
  2. 既存の SpriteAnimator 由来の props（speedScale や flipX/Y など）は多くが同名で存在するため置き換えが容易。
  3. 命令的制御は AnimatedSprite2DHandle（play, pause, seekFrame 等）で提供され、従来のコントロールロジックを流用できます。
  4. v0.4.1 で SpriteAnimator が削除される前に移行を完了させる。ビルド時には deprecation warning を見落とさない。

iPadアプリで確認できるワークフロー

  • Sprite Storage Manager から JSON を保存すると、Mac/Windows プロジェクトへ AirDrop などで直接受け渡し可能。
  • エディタで設定した autoPlayAnimation や再生方向は JSON に埋め込まれるため、iPad での検証結果と本番アプリの挙動が一致しやすくなります。
  • RN Skia Sprite Animator（App Store 表記名）自体が react-native-skia-sprite-animator を依存に持つ Expo プロジェクト（examples/standalone-editor）なので、実装例としてプロジェクトを参照可能。

まとめと次のステップ

  • react-native-skia-sprite-animator は iPad 上で動作するゲームエンジン開発の一環として整備しており、今回の v0.4.0 でいったんモジュール側の開発が区切りを迎えました。ここからはゲームエンジン本体の実装と検証に再フォーカスし、動作の見通しが立ち次第 react-native-skia-sprite-animator を 1.0.0 として正式リリースする予定です。逆にゲームエンジンの方向性次第では API や構成を大きく見直す可能性もあるため、今後のアップデートノートで方針を共有します。

  • v0.4.0 で AnimatedSprite2D のエコシステム（コンポーネント/Hook/プレビュー）が揃い、RN Skia Sprite Animator も App Store から即利用できる状態になりました。

  • 旧 SpriteAnimator を参照している箇所は v0.4.1 までに順次置き換えを進めてください。

  • リリースノート全文や GitHub の compare (v0.3.0...v0.4.0) も合わせて参照し、自分のプロジェクトに影響する差分を確認することをおすすめします。

  • GitHub: github.com/batako/react-native-skia-sprite-animator

  • npm: npmjs.com/package/react-native-skia-sprite-animator

Discussion