Since version 1.0.0, Vidsquish has featured a skinnable interface using external images and skin definition files. While the default skin will suffice for most common uses, skins offer more than just visual flair to the Vidsquish GUI: they determine functionality as well. Over the years, Vidsquish's skinning engine has improved behind the scenes, and today exists as a separate project known as VS Forms. You can see VS Forms in action outside of Vidsquish in the FFXV Radio Tuner Mod, for example.
With version 2.0.0, VS Forms has become much more modular and standardized, and with that comes new and improved skin definition files. Vidsquish includes three by default, including the standard skin at two DPI levels, and a recreation of the "classic" beta skin. For very advanced and/or very customizable game profiles, these skins may not provide a suitable layout to display all profile contents, in which case it is recommended to create a custom skin.
Skin Format
Vidsquish skins are stored in separate folders, each containing a skin.ui definitions file and any font, image, and sound assets that go with it. For these assets, please keep in mind the following limitations:
- Fonts must be stored in *.ttf format.
- Images must be stored in *.png, *.jpg, or *.gif formats.
- Animated GIFs are not supported. Only the first frame of a GIF will be imported.
- Animated GIFs are not supported. Only the first frame of a GIF will be imported.
- Sounds must be stored in *.ogg format.
New skin.ui files themselves are written in JSON format. Old files using the previous INI format are no longer supported and will not be applied when loaded.
While a complete tutorial on JSON format is beyond the scope of this guide, the basic principle is simple: JSON stores data in key/value pairs, separated by a colon (":"). Categories of keys are grouped together by curly brackets ("{ }"), and keys within a category are separated by commas (","). Keys are always written as strings (enclosed in quotes). For example:
{
"ui": {
"width": 1920,
"height": 1080
}
}(Note that categories also include a colon before the opening curly bracket. That's because the contents of the category are considered the value of the category key, just like other key/value pairs!)
Note that the entire JSON file is considered a single object, and therefore should always begin and end with curly brackets enclosing all other contents together.
VS Forms definitions are divided into two different levels: views and forms. A view can be thought of as the window itself, while forms comprise the window's contents.
View Definitions
It may surprise you, but Vidsquish uses only two views: the Splash screen, and the primary UI.
The Splash screen is what users first see upon running Vidsquish. It is comprised of a background image, header image, status text, version information, and copyright notices. Because so much content here is obligatory, not all elements can be customized in skin.ui files. However, it's still important to create a design that will be legible for users to tell the current progress on unpacking and verifying libraries.
The UI is automatically loaded after the Splash screen is finished. This is where all Vidsquish operations will be performed, so it's important to design a UI with sufficient space for all needed selectors, preview images, the progress bar, and buttons for "start" and "settings".
In case your design can't accommodate all these features at once, Vidsquish also supports compact mode, as seen in the Classic skin. Compact mode will automatically be enabled if the preview image and/or progress bar overlap with the main option selectors. In this case, preview and progress will be hidden while the conversion process is paused, and selectors will be hidden while the conversion process is active.
Another unique feature of View definitions is the completion sound. This is defined under the UI view category, and as its name suggests, indicates an OGG audio file to be played when a conversion process has completed. For anyone running Vidsquish in the background while doing other tasks, a unique notification sound is helpful to return their attention to the right application.
Form Definitions
VS Forms supports many different types of interactive features (called forms), such as the previously mentioned selectors, preview images, progress bar, and buttons. These are all collected in a single "forms" category, where each child is its own form. Some forms can also have their own child forms as well.
Most forms will share a common set of properties, such as position, dimensions, colors, images, and fonts. Position and dimensions are input as numerical values (not enclosed in quotes), while all other values are input as strings (enclosed in quotes).
{
"forms": {
"preview": {
"x": 1180,
"y": 248,
"width": 640,
"height": 360,
"color": {
"primary": "#FFF",
"accent": "#777",
},
"image": {
"background": "main\\preview_bg.png"
}
}
}
}Of string values in this example, there are a few things to note.
First, note that image paths are relative to the location of the skin.ui file. In this example, the file "preview_bg.png" is stored in the subfolder "main". How you organize your skin assets is up to you, but any subfolders must be listed without an opening backslash, and any subsequent backslashes must be escaped ("\\").
Second, note that colors are written in Hex color notation. This is a widely supported standard written as 3 or 6 characters representing red, green, and blue channels.
How colors are applied varies from form to form, but in the example above, the "accent" color applies to the image border while the "primary" color applies to the image itself. This is because Vidsquish supports color blending on all images, enabling one image to be used for multiple color schemes. A blending color of "#FFF" (white) equals no blending. However, if a different primary color were supplied, any white parts of the background image would be tinted to match the primary color. This can be seen throughout the default skin: although nearly all image assets are white and gray, they appear as Vidsquish purple in the skin. Why is that? You guessed it: color blending. It is highly recommended to follow this example in your own designs as well rather than using image assets with inherent color built-in.
Finally, note that all dimensions and coordinates are considered as values of pixels. Form coordinates are always relative to the top-left corner of the view, but with a catch: coordinates are not always relative to the top-left corner of the form itself. Though forms are aligned to their top-left corners by default, if their coordinates + dimensions would cause them to go off-screen in either axis, they will automatically realign to the opposite side.
Stated differently: a form in the top-left corner of the view will align to its own top-left corner. A form in the bottom-right corner of the view will align to its own bottom-right corner.
It might seem complicated, but in reality is quite helpful when creating new designs. Instead of calculating "x + width" or "y + height", just worry about "x" and "y" and let VS Forms handle the rest!
Now it's your turn!
Unlike profiles, all Vidsquish skins must be created equal. Now that you're acquainted with the basics, it is recommended to copy an existing skin and modify it with your own values and assets. Then, simply open the Settings menu in the Vidsquish GUI and click "Choose Skin (Alt + S)" to see your work in action!
0 comments