Giter Club home page Giter Club logo

bevy_mod_spritesheet's Introduction

Sprite Sheet Formats for Bevy

crates.io docs.rs

Create Bevy TextureAtlasLayouts from sprite sheet formats

⚠️ This is still a work in progress, expect breaking changes on every minor release ⚠️

Overview

To use sprite sheets within Bevy you have to create a TextureAtlasLayout, if the sprites are in grid form and are of equal size, then this is fairly straightforward to set up (see example), but sprite sheets come in different shapes and sizes and often times they a bit more complex.

While you can set up the texture atlas yourself, most likely you'll have all of the sprites and their positions defined in an accompanying metadata file.

At its core, this crate allows you to use the metadata file to build a TextureAtlasLayout for you.

Highlights

  • Supported formats:
    • JSON Array
    • JSON Hash
  • Choose a sprite by using the Frame component with the name of frame you want from the sprite sheet on an entity`
  • Automatic loading of textures, if supported by the sprite sheet format.

Getting Started

  1. Add the SpriteSheetPlugin to your app.
use bevy_mod_spritesheet::SpriteSheetPlugin;
...
app.add_plugins(SpriteSheetPlugin)
...
  1. Using Res<AssetServer>, load the sprite sheet file and corresponding texture and insert the handles onto an entity, along with the Frame component and a Bevy SpriteBundle.

⚠️ By default, automatic texture loading is turned off. If you want to enable this. Add the SpriteSheetOptions component and set texture_loading to true

use bevy_mod_spritesheet::{format::json::array::JsonArray, Frame, SpriteSheet, SpriteSheetBundle, SpriteSheetOptions, SpriteSheetPlugin};

let sprite_sheet: Handle<SpriteSheet<JsonArray>> = asset_server.load("gabe-idle-run.json");
let image: Handle<Image> = asset_server.load("gabe-idle-run.png");

commands.spawn((
    SpriteBundle {
        texture: image,
        sprite: Sprite {
            custom_size: Some(Vec2::splat(500.0)),
            ..default()
        },
        ..default()
    },
    Frame::name("gabe-idle-run 6.png".into()),
    sprite_sheet, 
));

/// Using `bevy_mod_spritesheet::SpriteSheetBundle`
commands.spawn((
    SpriteBundle {
        sprite: Sprite {
            custom_size: Some(Vec2::splat(500.0)),
            ..default()
        },
        ..default()
    },
    SpriteSheetBundle {
        frame: Frame::name("gabe-idle-run 6.png".into()),
        options: SpriteSheetOptions {
            texture_loading: true,
        },
        sprite_sheet,
    },
));
  1. The Handle<TextureAtlasLayout> and TextureAtlas will be created in the background and inserted on the entity. If the sprite doesn't render correctly, check the console for error messages.

Example

Check out the examples folder for ideas on usage.

Supported Bevy Versions

bevy bevy_mod_spritesheet
0.13 0.2.0
0.13 0.1.0

bevy_mod_spritesheet's People

Contributors

danielfeather avatar

Watchers

 avatar

Forkers

georgewilson96

bevy_mod_spritesheet's Issues

Stack overflow on `LoaderError`

When an error is returned from the asset loader it will cause Bevy's to stack overflow. This is due to the thiserror Error macro not being implemented on the LoaderError trait.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.