Skip to content
Snippets Groups Projects
README.md 3.12 KiB
Newer Older
Louis's avatar
Louis committed
# Bevy Sprite Animations

Louis's avatar
Louis committed
Easily manage complex 2D sprite animations

## Quick Start

- Add the `BanimatePluginGroup` to your app
- Load one or more animation sets (see below for defining animation sets in files)
- Spawn an entity with a `SpriteSheetBundle` and attach a `SpriteAnimationBundle` component, providing a `Handle` to an
  animation set
- Watch your sprites doing their thing!
- Optional: Use `AnimationQuery` in one of your systems to control the animations

```rust
fn main() {
  App::new()
    .add_plugins(micro_banimate::BanimatePluginGroup)
    // Other plugins
    .add_startup_system(spawn_animated)
    .run();
}

pub fn spawn_animated(mut commands: Commands, assets: Res<AssetServer>) {
  commands
    .spawn_bundle(SpriteSheetBundle {
      texture_atlas: assets.load("my_sprite_sheet.atlas"),
      sprite: TextureAtlasSprite::new(0),
      ..Default::default()
    })
    .insert_bundle(SpriteAnimationBundle::new(
      String::from("idle"), 
      server.load("my_animatoins.anim.json")
    ));
}
Louis's avatar
Louis committed
```

Louis's avatar
Louis committed
## Types of Animation
Louis's avatar
Louis committed

Louis's avatar
Louis committed
### Simple Animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
TODO: Describe simple animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
- A simple looping animation with a single set of frames and frame rate, no control needed or provided
Louis's avatar
Louis committed

Louis's avatar
Louis committed
### Sprite Animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
TODO: Describe sprite animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
- Sets the name of the animation to play, play the animation. Simple.
- Interrupt the current animation temporarily with an `AnimationOverride`
Louis's avatar
Louis committed

Louis's avatar
Louis committed
### Directional Animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
TODO: Describe directional animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
- Includes a component for altering the name of a playing animation based on its value, representing direction
Louis's avatar
Louis committed

Louis's avatar
Louis committed
### Child Animations
Louis's avatar
Louis committed

Louis's avatar
Louis committed
Adding a `ChildAnimationBundle` to an entity will cause its status to by synced to it's `Parent` entity
Louis's avatar
Louis committed

Louis's avatar
Louis committed
## Animation Sets
Louis's avatar
Louis committed

Louis's avatar
Louis committed
An animation set maps a name to a series of frames and a frame rate. A given animation has one frame rate for the whole
animation,
but different animations can have different frame rates (i.e. a "walk" animation could play at 100ms per frame,
and an "idle" animation could play at 250ms per frame, but you can not set the duration of an individual frame within
either animation).
Louis's avatar
Louis committed

Louis's avatar
Louis committed
An `AnimationSet` might contains many animations, and a given `AnimationSet` is likely to be attached to many entities.
As such,
animations use the `Asset` system to avoid passing around relatively large duplicate objects. Loaders are included
for `JSON` and `TOML`
data types, but only `JSON` is enabled by default. The loaders are not required, and so can therefore be disabled if
another method
of creating `AnimationSet` assets is desired.
Louis's avatar
Louis committed

Louis's avatar
Louis committed
### Defining animations with JSON
Louis's avatar
Louis committed

Louis's avatar
Louis committed
With the `json_loader` feature enabled, you can load an animation set from a file with a `.anim.json` suffix that looks
like this:
Louis's avatar
Louis committed

Louis's avatar
Louis committed
```json
{
  "idle": {
	"frames": [
	  1,
	  2,
	  3
	],
	"frame_time": 250
  },
  "shoot_right": {
	"frames": [
	  34,
	  34,
	  34,
	  35,
	  36
	],
	"frame_time": 100
  }
}
```
Louis's avatar
Louis committed

Louis's avatar
Louis committed
### Defining animations with TOML
Louis's avatar
Louis committed

Louis's avatar
Louis committed
With the `toml_loader` feature enabled, you can load an animation set from a file with a `.anim.toml` suffix that looks
like this:
Louis's avatar
Louis committed

Louis's avatar
Louis committed
```toml
[idle]
frames = [1, 2, 3]
frame_time = 250
Louis's avatar
Louis committed

Louis's avatar
Louis committed
[shoot_right]
frames = [34, 34, 34, 35, 36]
frame_time = 100
```