feat: Spine bridge package (flame-engine#2530)

This PR introduces a bridge package for Spine.

https://user-images.githubusercontent.com/744771/236058480-75c8212b-98e6-4e3b-834a-c1a9d4de31a8.mp4

Author: spydon

.github/.cspell/flame_dictionary.txt

@@ -22,6 +22,8 @@ erayzesen
 padracing
 ptero
 riverpod
+spineboy
+spineboys
 spydon
 stpasha
 tavian

.github/cspell.json

@@ -13,6 +13,7 @@
       "\\$\\w+",
       "\\{\\w+",
       "\\`\\w+",
+      "\\.\\w+",
       "\\:\\w+",
       "\\/\\w+",
       "\\#[\\w\\-]+"
@@ -39,14 +40,14 @@
           "addWords": true
       },
       {
-        "name": "gamedev_dictionary",
-        "path": "./.cspell/gamedev_dictionary.txt",
-        "addWords": true
+          "name": "gamedev_dictionary",
+          "path": "./.cspell/gamedev_dictionary.txt",
+          "addWords": true
       },
       {
-        "name": "sphinx_dictionary",
-        "path": "./.cspell/sphinx_dictionary.txt",
-        "addWords": true
+          "name": "sphinx_dictionary",
+          "path": "./.cspell/sphinx_dictionary.txt",
+          "addWords": true
       }
   ]
 }

doc/bridge_packages/bridge_packages.md

@@ -25,6 +25,11 @@ A Box2D physics engine (bridge package for [Forge2D]).
 Use isolates to offload heavy computations to another thread.
 :::
 
+:::{package} flame_lottie
+
+Use Lottie animations in Flame (bridge package for [Lottie]).
+:::
+
 :::{package} flame_network_assets
 
 Fetch assets over the network.
@@ -40,6 +45,11 @@ Replace FCS with the Oxygen Entity Component System.
 Create interactive animations (bridge package for [Rive]).
 :::
 
+:::{package} flame_spine
+
+Use Spine skeletal animations (bridge package for [Spine]).
+:::
+
 :::{package} flame_splash_screen
 
 Add the "Powered by Flame" splash screen.
@@ -59,24 +69,27 @@ Draw SVG files in Flutter (bridge package for [flutter_svg]).
 [Bloc]: https://github.com/felangel/bloc
 [FireAtlas]: https://github.com/flame-engine/fire-atlas
 [Forge2D]: https://github.com/flame-engine/forge2d
+[Lottie]: https://pub.dev/packages/lottie
 [Rive]: https://rive.app/
+[Spine]: https://pub.dev/packages/spine_flutter
 [Tiled]: https://www.mapeditor.org/
 [flutter_svg]: https://github.com/dnfield/flutter_svg
 
 
 ```{toctree}
 :hidden:
 
-flame_audio         <flame_audio/flame_audio.md>
-flame_bloc          <flame_bloc/flame_bloc.md>
-flame_fire_atlas    <flame_fire_atlas/flame_fire_atlas.md>
-flame_forge2d       <flame_forge2d/flame_forge2d.md>
-flame_isolate       <flame_isolate/flame_isolate.md>
-flame_lottie        <flame_lottie/flame_lottie.md>
+flame_audio                 <flame_audio/flame_audio.md>
+flame_bloc                  <flame_bloc/flame_bloc.md>
+flame_fire_atlas            <flame_fire_atlas/flame_fire_atlas.md>
+flame_forge2d               <flame_forge2d/flame_forge2d.md>
+flame_isolate               <flame_isolate/flame_isolate.md>
+flame_lottie                <flame_lottie/flame_lottie.md>
 flame_network_assets        <flame_network_assets/flame_network_assets.md>
-flame_oxygen        <flame_oxygen/flame_oxygen.md>
-flame_rive          <flame_rive/flame_rive.md>
-flame_splash_screen <flame_splash_screen/flame_splash_screen.md>
-flame_svg           <flame_svg/flame_svg.md>
-flame_tiled         <flame_tiled/flame_tiled.md>
+flame_oxygen                <flame_oxygen/flame_oxygen.md>
+flame_rive                  <flame_rive/flame_rive.md>
+flame_splash_screen         <flame_splash_screen/flame_splash_screen.md>
+flame_spine                 <flame_spine/flame_spine.md>
+flame_svg                   <flame_svg/flame_svg.md>
+flame_tiled                 <flame_tiled/flame_tiled.md>
 ```

doc/bridge_packages/flame_spine/flame_spine.md

@@ -0,0 +1,52 @@
+# flame_spine
+
+This package allows you to load and add Spine skeletal animations to your Flame game.
+
+
+## Usage
+
+To use it in your game you just need to add `flame_spine` to your pubspec.yaml and your spine
+assets to your `assets/` directory, and you can add a `SpineComponent` to your `FlameGame`.
+
+```{note}
+Remember to call `await initSpineFlutter();` in your `main` method, or in `onLoad`.
+```
+
+Example:
+
+```dart
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+  await initSpineFlutter();
+  runApp(const GameWidget.controlled(gameFactory: SpineExample.new));
+}
+
+class FlameSpineExample extends FlameGame with TapDetector {
+ late final SpineComponent spineboy;
+
+ @override
+ Future<void> onLoad() async {
+  await initSpineFlutter();
+  // Load the Spineboy atlas and skeleton data from asset files
+  // and create a SpineComponent from them, scaled down and
+  // centered on the screen
+  spineboy = await SpineComponent.fromAssets(
+   atlasFile: 'assets/spine/spineboy.atlas',
+   skeletonFile: 'assets/spine/spineboy-pro.skel',
+   scale: Vector2(0.4, 0.4),
+   anchor: Anchor.center,
+   position: size / 2,
+  );
+
+  // Set the "walk" animation on track 0 in looping mode
+  spineboy.animationState.setAnimationByName(0, 'walk', true);
+  await add(spineboy);
+ }
+
+ @override
+ void onDetach() {
+  // Dispose the native resources that have been loaded for spineboy.
+  spineboy.dispose();
+ }
+}
+```

examples/assets/spine/LICENSE

@@ -0,0 +1,8 @@
+Copyright (c) 2013, Esoteric Software
+
+The images in this project may be redistributed as long as they are accompanied
+by this license file. The images may not be used for commercial use of any
+kind.
+
+The project file is released into the public domain. It may be used as the basis
+for derivative work.