sgly / spine-viewer

Spine Viewer

A simple spine viewer and debugger app!

View Project · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. License

About The Project

The project is build with pixi.js and pixi-spine and serves as a viewer and debugger for spine exports. In order to used you'll need spine export files (.atlas file, .json file, .png file).

The main features are:

• Play animations present on the spine export
• Changed skins attached to the spine export
• Debug all elements of you spine
• Create a timeline with multiple animations
• Change the background

Keep in mind that it might not work with all versions of exports!

(back to top)

Getting Started

Prerequisites

You will need nodejs and npm installed in order to run this project

Installation

1. Clone the repo

   git clone https://github.com/TudorFlorea/spine-viewer.git

2. Install NPM packages

   cd spine-viewer && npm install

3. Run

   npm run dev

4. Visit http://localhost:5173/

If you want to load a spine from a link use the http://localhost:5173?loadUrl=LINK_TO_JSON_FILE link.

(back to top)

Roadmap

• Better handling of window events and check for memory leaks
• Turn the app into a pwa
• Add support for loading a spine from a link
• Better code splitting for faster load times
• Add multiple demo spines
• Add support for mixins
• Add support for viewing the list of bones / slots

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)