Animating a sequence of sprites in FrayTools

FrayTools is a multi-purpose, cross-platform, engine-agnostic multimedia software designed to streamline the asset management process for video games and other mediums. It offers a variety of features one might need when working on an interactive project. Some example features are as follows:

  • 2D sprite animations with a traditional keyframe-based timeline
  • Script/text editing
  • Audio packaging
  • Bitmap font packaging
  • Binary asset packaging

One of the things that makes FrayTools particularly powerful is its plugin system. Plugins expand the capabilities of FrayTools far beyond its base feature set by allowing simple JavaScript-capable modules to be embedded into the editor. By itself, FrayTools isn’t capable of much beyond organizing sprite animations and editing text. By adding plugins, you can add features that turn FrayTools into a catalyst for your development workflow.

There are currently 3 types of plugins available:

  • Publish
  • Metadata Definitions
  • Type Definitions

Publish Plugins

Publish plugins are one of the most powerful plugin types, since they provide the ability for FrayTools to output a custom file format. FrayTools provides a generic JSON-based format that can be programmatically converted to other formats.

A prime example of this plugin type is the Fraymakers Content Exporter Plugin:


Publish window for the Fraymakers Content Exporter Plugin

If you examine its source code you can see that the Fraymakers Content Exporter talks to the editor by requesting the project’s JSON and file assets, and consolidates them into to a single file with a format specific to Fraymakers content (characters, assists, stages, etc.). This same process could be used to hypothetically build an export format for any 2D game engine!

Metadata Definition Plugins

Metadata Definition plugins are another powerful tool to expand the functionality of FrayTools itself. In a nutshell, they let you introduce custom UI into the Properties Panel for various object types within the editor (animation metadata, layer metadata, binary asset metadata, etc.). This allows custom properties to be saved into the metadata of your FrayTools assets, which allows other plugins to benefit from them.

A great example of this plugin type is the Fraymakers Metadata Definitions Plugin:


Custom fields provided by Metadata Definitions plugins

Both Publish plugins and Type Definition plugins benefit from this by having additional context available provided by the user. For example, one can create a Sprite Entity with a custom “Spritesheet Group” field and be marked as a “Character” via the Properties panel. The Publish plugin can use the knowledge of the Spritesheet Group to determine which specific spritesheet the entity should have its animations written to, and the Type Definitions plugin can use the knowledge of the object being a character to provide character-specific code auto-completion within your timeline script code.

Types Definition Plugins

Type definition plugins provide useful code intelligence to the FrayTools text editor so you can get inline documentation and auto-completion while typing out your code. This is accomplished by embedding TypeScript Type Declaration files into the editor.

Code auto-completion in the FrayTools script editor

Since the FrayTools text editor uses Monaco Editor (the same core used by VSCode), TypeScript-based type declarations are essentially free. However because the text editor is currently limited to JavaScript-like syntax validation, you may not be able to get full auto-completion with all other languages.

A real-world example of this plugin type is the Fraymakers API Types Plugin:


FrayTools is currently under active development, as it is the very tool used internally to implement content for our other project: Fraymakers. Fraymakers is our customizable platform fighting game that is currently live on Steam in Early Access, so be sure to check it out if you want to see what the tool is capable of!