Documentation

SpookyGhost interface is made with ImGui. You can use most of ImGui’s user interaction capabilities while using the program.

You can drag windows around and anchor them into any corner, change the split space between them or tab them one next to another.

If you press Ctrl while clicking on a slider or a drag box you can input the value with the keyboard. Another interesting functionality is the ability to modify the speed of change of drag boxes by pressing Shift or Alt. With the first key, the change will be faster while with the second one it will be slower. Try it now while changing a texture rectangle in the Sprite window.

You can use the usual Ctrl+X, Ctrl+C, and Ctrl+V to cut, copy, and paste text in a text input widget.

You can drag and drop colors around, for example, the background color of the Canvas window onto the sprite color in the Sprite window.

When you have to browse your filesystem to load and save files or choose directories, the program will present you with a file dialog window.

The file dialog will show you all the entries inside a directory together with their types (file or directory), access permissions, sizes, and last modification dates. It will also color executables with a shade of green and filter files by extension if needed, for example when loading a project file or a texture.

When saving a project file the file dialog will be slightly different. It will have an Overwrite checkbox to bypass the check for an existing file and it will allow you to write in the text input widget and choose a name for the new file.

When deciding the destination directory for rendered frames the file dialog will allow directories to be selected.

All kinds of file dialogs have a set of checkboxes to show or hide pinned directories, file permissions, sizes, and dates plus a checkbox that when enabled will show hidden files or directories. As you can see in the last screenshot there is also a drop-down menu to select the entries sorting based on names, sizes, or dates.

When the checkbox for the pinned directories is enabled you will see a panel on the left that shows a list of directories that are currently pinned for a quicker access: just click on one of them to navigate there. You can reorder the list by drag and drop.

To add a new directory to the list of pinned directories just browse to the desired directory and click the Pin button. To remove an element from the list either browse to it and click Unpin, or right-click it and select Unpin from the context menu. The list of pinned directories is automatically saved to the configuration file when you quit the program.

The Tips window will show you a random tip about the program every time you start it.

You can read the previous or the next tip with the Prev and Next buttons. You can also navigate them with the left or right arrow key while the cursor is over this window.

There is also a checkbox to enable or disable the default behavior of automatically showing this window on start. The same checkbox is also present in the Configuration window.

The Configuration window contains some customizable properties that will be used every time the program starts.

The top section allows you to change the window size or to choose a fullscreen mode. You can make the window Resizable or not as well as Apply your changes immediately or go back to Current window settings.

Next, you can enable or disable Vertical Sync. If you disable it you can specify a Frame Limit to control the number of frames rendered per second or select 0 to switch it off. To apply the changes in this section you need to save the configuration and restart the program.

You can choose the initial canvas size that will be used when the program starts for the first time.

After that, you can choose the name of a project file that will be loaded the first time you start the program and optionally play it right away.

The three text input widgets will let you choose a path for textures, sprites, and scripts that will be concatenated if you specify a relative path when loading.

With the last checkbox you can enable or disable the automatic showing of the Tips window when the program starts up.

Upon closing the window the configuration will be saved in the config.lua file in the same directory as the program executable.

One of the tabs in the top left corner of the interface is the Textures window.

Before being able to create any sprite you need to load at least one texture from here. Clicking the Load button will open the File dialog window. The file dialog will only show files with the png extension.

You can delete the selected texture by clicking the Remove button or pressing the Delete key while the cursor is over this window.

You can load a different file for your texture using the Reload button. Your sprites and your animations will update with the new image.

Some of those actions are also available in the context menu that appears when you right-click on a texture.

When you create a new sprite it will use the texture you selected in this window.

Next to the Textures window tab, you will find the Sprites window. You can use it to Add and Remove sprites or to move an existing sprite to a higher or lower drawing layer.

With the Add Group button you can create sprite groups, use them to organize your sprites or other groups.

Next to a sprite or a group there is a color square that will help you locate the corresponding animations in the Animations window. You can click on any of those squares to pick a different color. A sprite inside a group will use its parent group color but it will revert to the original one once it is taken out.

You can also delete the selected sprite or group by pressing the Delete key while the cursor is over this window.

With the Clone button, it is possible to create a copy of the selected sprite. The animations assigned to the original sprite will be cloned as well. If the selected sprite has children sprites they will be cloned too. If you select a group and clone it then every contained sprites will be clones, including their animations and children sprites.

Some of those actions are also available in the context menu that appears when you right-click on a sprite.

At the beginning of each entry, there is a checkbox you can use to make the sprite visible or not.

The list order is reversed so that the top sprite is also the one that will be rendered on top of the others.

You can reorder the list with the Move Up and Move Down buttons or by drag and drop. You can also move them with the up or down arrow key while the cursor is over this window.

Next to the Sprites window tab, you will find the Scripts window.

At the top, there is a combo box with a list of scripts that are distributed with the program: use it to easily load the default scripts.

Below you will find some buttons that you can use to Load and Remove Lua scripts as well as Reload them when they have changed on disk.

You can also delete the selected script by pressing the Delete key while the cursor is over this window.

Some of those actions are also available in the context menu that appears when you right-click on a script.

At the end of each entry, you will find either a checkmark or a cross icon. The first one tells you that there are no syntax errors and the script can run while the second indicates the opposite.

In case of errors that prevent a script from running, you can hover on the entry to show a tooltip with the error message.

In the lower part of the left side of the interface, you will find the Animations window.

You can use it to Add and Remove animations and to change their state with the Stop, Pause, and Play buttons.

Below those buttons there is slider to control the global speed multiplier, it can be used to change the speed of all animations at once.

You can delete the selected animation also by pressing the Delete key while the cursor is over this window.

With the Clone button, it is possible to create a copy of the selected animation or animation group.

Some of those actions are also available in the context menu that appears when you right-click on an animation.

At the beginning of each entry, there is a color square that matches the color of the assigned sprite or its parent group.

Next to it there is a checkbox you can use to make the animation enabled or not. A disabled animation will not be played by the parent group that contains it.

You can find an icon about the current animation state at the end of an animation entry.

Before pressing the Add button, choose one of the four animation types.

On the top part of the right side of the interface, you will find the Sprite window.

You can change all the properties of the selected sprite from here.

You will be able to give it a name, change its texture, set a parent sprite, change its position, rotation, scale, and anchor point. You will also be able to select a texture rectangle, flip the texture, select a blending type separately for the RGB and alpha channels and change its color.

When you set a parent for a sprite its properties will depend upon its parent’s properties, the properties of its grandparent, and so on. The parent-child sprite relationship is a powerful way to achieve very complex chained transformations.

Selecting a texture rectangle is useful when your texture is a sprite sheet and you only want to use a specific area as your sprite.

Next to the Sprite window tab, you will find the Animation window, where you can change all the properties of the selected animation.

For every type of animation, including a group one, you will be able to change its name at the top of the interface.

When you are happy with the results of your animation it is time to export it.

Clicking the button on top will open the File dialog window to choose a destination directory.

You can then choose a prefix for the files that are going to be created. Just specify a filename without the extension.

You can then choose to resize the canvas before saving its contents and then choose how many frames to generate per second. The resize combo box will also show the size of a resized frame.

Based on the FPS value you will then be able to change the number of frames produced either by setting its number directly or by choosing a duration.

The Layout combo box will let you specify how the frames will be arranged inside a spritesheet. You can choose between a rectangle arrangement that prioritizes the horizontal or vertical dimension (HRectangle and VRectangle), a horizontal or vertical strip (HStrip and VStrip), or specify Custom values for the two dimensions.

When you are ready you can either press Save Frames and have all the frames saved as distinct PNG images or press Save Spritesheet and save all frames in a single big PNG image.

While the operation is in progress you can click the Cancel button or press the Esc key to cancel it.

When the saving operation is completed the window and the system taskbar will flash to notify its success.

You can read how big a single frame and the sprite sheet are going to be in the Frame size and Spritesheet size text widgets.

At the center of the interface lies the Canvas window. The canvas is your working area for animations.

If you press Alt you can drag the selected sprite around by clicking anywhere in the canvas.

At the top of this window, you will find some controls to change the zoom level, its size, and its background color.

When you change the background color don’t forget to change the alpha opacity or you might not see the color you selected in the canvas.

When the Borders checkbox is enabled a colored rectangle will show the current size of the canvas.

You can also change the sprite anchor point by pressing Shift and the left mouse button and dragging the red point around the red rectangle.

If you instead press Ctrl and the left mouse button a blue point and a blue rectangle will appear to allow you to set the grid anchor point used by Grid animations.

You can also press Shift+Ctrl together and use the mouse to set both the sprite and the grid anchor points in one go.

The TexRect window shows you which part of the texture will be used by the sprite for rendering.

You can use the mouse to select a rectangular region and fine-tune its size in the [Sprites section] of the interface.

If you press Alt and click inside the rectangle, you can drag it around by moving the mouse.

If you press Shift and click inside the rectangle, you can resize it by moving the mouse. If you are close to a corner you will be able to resize the rectangle by moving that corner. If you are close to a side, but not to a specific corner, you will be able to resize the rectangle by moving that side.

At the bottom of the interface, you will find the status bar. It will show error and information messages as well as the mouse coordinates during some operations.

The program comes with some bundled project files to show its features and potential.

Those three files are the classic projects distributed since the first versions of the program. They show what is visually and artistically achievable by using very few and simple animations.

The project uses some very simple property animations that, together with different delay values, can achieve an interesting result.

The project uses the texrect.lua script to modify the texture rectangle and animate using a sprite sheet.

The project uses the skewx.lua, skewy.lua, wavex.lua, wavey.lua, and zoom.lua scripts to show how a Lua script can replicate the same functions of a grid animation, albeit consuming a bit more CPU power.

The project uses the circle.lua script to show some rotating ghost sprites.

The project is very similar to scripted_rotations.lua and it also uses the circle.lua script. The difference here is the use of different initial values to create out-of-phase rotations.

The project uses two sequential animation groups to move a sprite along a path shaped as a square while also using some grid animations to perform a zoom at the same time.

The project has a long sequential animation group that can perfectly loop by automatically change the direction of the property animations it contains.

The project animates each letter of the SpookyGhost logo differently and it is used for the Itch.io GIF cover.