PUG

pug_logo PUG is a tool for creating complex 2D game GUIs. Coding GUIs and in-game animations by hand annoyed me beyond measure during every game jam, so I’ve created PUG to create flexible GUIs quickly in a WYSIWYG way, including animations. PUG stands for “Prepare Ur Gui” :]

PUGedit

is a visual editor that can produce .pug files. Heavily inspired by Flash IDE and Demopaja. pugedit

The .pug file

is actually a .zip containing a couple of .png files and a .xml describing the hierarchy.

PUG features

Library – the .pug file contains a set of symbols (similar to Flash) Symbol – is either a multi-frame sprite or a Layer symbol (a hierarchy of other symbols) Layer symbol – consists of multiple states, each state is a hierarchy of symbol instances with frame-based animations and curve-defined properties (alpha, transformations, frame, etc.) SVG – import .svg vector drawing (Inkscape <3), use its parts as symbols, animate them Particle Systems – use other symbols or sprite frames as particles Text Fields – label can be updated at runtime

Usage

STEP 1: Create your GUI using multiple .pngs or .svgs, draw all game screens and GUI animations, then export it to a single .pug file. STEP 2: Load the .pug file at runtime within your game, render any of the symbols, play and switch their states, change text labels. STEP 3: Profit!

Platforms

PUGedit is currently written in haXe NME, builds will be available for Windows, Linux and Mac, there’s also a browser-based Flash version. PUG itself is currently available for haXe NME only (tested on flash, neko and android targets). In future there might be loaders for other languages or engines (flash, Javascript, Unity, Löve).

License

Sources for PUG and PUGedit will be open, PUGedit builds are paid.

Roadmap

  • bitmap editor
  • polished GUI
  • better asset management
  • export .png spritesheets
  • import .xcf (GIMP file)
I’m making the PUG mainly for my games. The PUGedit itself is still very crude and hard to use, I’ll release it when it’s ready.

 Why “PUG”?

My fiancé saw some of my scribblings and misread “dog.png” as “dog.pug”. Then I thought that pugs are quite cool and thus the name was settled.