Prexel, a 2D toolkit for UE4

Prexel is a very WIP 2D toolkit plugin for UE4 I’m working on in my spare time. It’s based on some ideas I collected while working on my last project - a 2D arcade brawler called Guntastic, which is out in Early Access BTW! :slight_smile:

Update #1: Sprite Sheets


](Prexel, a 2D toolkit for UE4 - #2 by minifloppy - Showcase - Unreal Engine Forums)
[HR][/HR]
For now I’ve been working on the basics: sprite creation and rendering. At its core, the plugin is loosely inspired by 2D Toolkit (a old plugin for Unity) and designed on the assumption that since atlasing sprites is generally good for performance and project organization, the process of generating/managing atlases should be as convenient as possible.

While in other frameworks creating sprites and atlasing them are usually separate steps, the idea I’m experimenting with is to make it possible to do everything at the same time.

Sprites are created by adding textures to Sprite Collection assets. Each texture produces one or more sprites (in case of a spritesheet), which are automatically packed into one or more atlases for runtime use. Sprites can be added/removed/changed as needed, with the system taking care of automatically rebuilding the atlases after each change.

Conceptually related sprites should ideally go into the same collection. For example, the main character and enemies might use different collections, while assets belonging to a level could be put together in a single collection or broken up in multiple ones (i.e. backgrounds, trees, lights, etc.) and so on.

Everything’s still at an early concept stage. I’m curious to see if there’s any interest for something like this and looking for feedback on how to improve/evolve things! :slight_smile:

What’s in for now

  • Basic sprite renderer.
  • Basic sprite workflow & editor:
    [LIST]
  • Support for generating a single sprite per-texture.
  • Basic atlas packing (using Rectpack2D), with support for dilating sprites and border padding.
  • Source region editing.

  • Initial support for generating various types of rendering geometry.

	This was ported over from the Guntastic codebase and supports additive/subtractive polygons (i.e. to create holes in the geometry or geometry islands), simplification of the generated shapes and clean triangulation of the resulting geometry. It was used extensively in Guntastic to keep overdraw to a minimum and relies on a number of open source tools: [Clipper](http://www.angusj.com/delphi/clipper.php), [Simplify-JS](https://mourner.github.io/simplify-js/) and [Earcut](https://github.com/mapbox/earcut.hpp).

	Here's the same sprite in Paper2D for comparison:

  • Initial support for generating collision geometry. Mostly broken for now. :rolleyes:

[/LIST]
Download & Example Project

A very early version of the plugin can be downloaded below in case you’d like to play with it! To put Prexel at work in a (more or less) real life usage scenario, I’ve also been working on a simple example project: a clone of Angry Birds, unimaginatively called Grumpy Birds, that’s also available for download.

Plugin download (UE4.24, Win64)

Example project download (UE4.24, Win64)

Since the plugin was put together in my spare time expect crashes, uncomplete features, etc.! I’d like Prexel to become a fully supported commercial product at some point, so the plugin source code isn’t included in the downloads. To try the plugin simply create a project (both Blueprint and C++ projects work fine) and add Prexel to the project’s Plugins folder. I look forward to your feedback!

Most of the assets used in the example project are from Kenny.nl. Make sure to check out his great collection of game assets!

Considerations

There are some things with the current implementation that kind of bother me and that will surely need more experimentation going forward.

  1. Sprite Collections assets are quite complex since they contain all the information needed to build sprites and also act as containers for the final atlases/sprites. Even with good editor tools they might still be difficult to manage and might hide too much complexity.
  2. Generated sprites are simple structs stored in Sprite Collections assets so they’re extremely lightweight and (I hope) easier to manage compared to Paper2D where each sprite is an asset on its own. However, since UE4 is a very asset-centric engine this has a number of drawbacks. Most notably: sprites aren’t visible in the content browser! So goodbye built-in asset pickers, drag-and-drop, etc. To work around these issues I’m experimenting with some dedicated tools, such as a sprite picker accessible directly from the content browser and standalone sprite browser.

Thanks for reading this far! I look forward to any feedback/questions! :slight_smile:

Update 1: Sprite Sheets

I finally had some time over the past few days to work on adding basic support for spritesheets to Prexel.

Spritesheets can be sliced directly inside the editor (only grid setups are supported for now) or they can be imported from external files. Both Paper2D and JSON spritesheet files generated by Texture Packer are supported.

If multiple textures with matching names are found in the same folder of the main spritesheet texture, the system will take care of importing those as well. Naming conventions for additional textures can be configured in project settings:

The system can also be configured to enforce naming conventions on imported assets (such as textures) to help keeping project content organized.

An updated version of the library and example project is available for download in the first post. Spritesheet support will be extremely useful for testing the next feature I’d like to work on: flipbooks!

Assets used in the images above are from the free Platform Game Assets pack by Bayat.