Expand description
This crate is a Bevy plugin for animating sprites that are backed by spritesheets.
§Features
- Animate 2D and 3D sprites! 🎉
- A single Bevy component to add to your entities to play animations.
- Tunable parameters: duration, repetitions, direction, easing.
- Composable animations from multiple clips.
- Events to react to animations ending or reaching specific points.
- A convenient API to select frames in spritesheets.
§Quick start
- Add the SpritesheetAnimationPlugin to your app
- Use the AnimationLibrary resource to create new clips and animations
- Add a SpritesheetAnimation component to your entity
use bevy::prelude::*;
use bevy_spritesheet_animation::prelude::*;
fn main() {
let app = App::new()
.add_plugins(DefaultPlugins)
// Add the plugin to enable animations.
// This makes the AnimationLibrary resource available to your systems.
.add_plugins(SpritesheetAnimationPlugin::default())
.add_systems(Startup, setup);
// ...
}
fn setup(
mut commands: Commands,
mut library: ResMut<AnimationLibrary>,
mut atlas_layouts: ResMut<Assets<TextureAtlasLayout>>,
assets: Res<AssetServer>,
) {
// Create a clip that references some frames from a spritesheet
let spritesheet = Spritesheet::new(8, 8);
let clip = Clip::from_frames(spritesheet.row(3));
let clip_id = library.register_clip(clip);
// Create an animation that uses the clip
let animation = Animation::from_clip(clip_id);
let animation_id = library.register_animation(animation);
// This is a simple animation made of a single clip but we can create more sophisticated
// animations with multiple clips, each one having different parameters.
//
// See the `composition` example for more details.
// Spawn an animated sprite with a SpritesheetAnimation component that references our animation
let image = assets.load("character.png");
let atlas = TextureAtlas {
layout:atlas_layouts.add(spritesheet.atlas_layout(96, 96)),
..default()
};
commands.spawn((
Sprite::from_atlas_image(image, atlas),
SpritesheetAnimation::from_id(animation_id),
));
commands.spawn(Camera2d);
}