Community Showcase: Skin Composer

Hey everybody! As announced in Status Report #5 we want to give creators of interesting community projects the opportunity to present their exciting libraries or tools on the official blog. This is the very first of these Community Showcases, in which Raeleus is going to present his tool Skin Composer!

If you are interested in other cool community projects, be sure to check out the libGDX Awesome List as well. To participate in future showcases, take a look here.

Skin Composer is a tool to help creators make skins for libGDX’s extensive user-interface library, Scene2D.UI. When I started, I found very few resources in regards to custom designed libGDX menus. I tried creating my own skin, which involves creating a JSON file, texture atlas, and a bitmap font. The process was slow, unintuitive, and irksome. With research and experimentation, I created Skin Composer to address the issue.

Features

• Live preview of all widgets as they are designed within the GUI.
• Drawables view allowing easy selection of images for widgets.
• Creation of tinted and tiled versions of drawables directly in the tool.
• An editor for quick creation and editing of nine-patch images.
• Multiple tools for creating bitmap fonts and freetype fonts to support a variety of font techniques.
• TenPatch, an extension to libGDX’s basic drawable classes, is fully integrated, allowing for animations, gradients, smart-resizing, and more.
• VisUI and user created widgets are supported with the custom class functionality.
• Scene Composer module allows the user to create their menus in a WYSIWYG editor and export directly to their game.
• An extensive wiki which explains every aspect of the tool and even covers the basics of Scene2D layout.

Example skins

These are just some of the skins created with Skin Composer:

How to get started

• Download Skin Composer from GitHub
• Follow the wiki to learn the tools provided
• Watch the video tutorial series

• Raeleus is active on the libGDX Discord. Feel free to ask questions in the #Scene-2D channel!