Plugin Assets

A plugin uses assets for its visual design, sound content, presets, and other runtime resources. Keep these files in the project’s assets/ directory and organize them by purpose.

A typical project contains:

assets/
  fonts/
  images/
  instruments/
  Presets/
    Factory/

Register the asset directories in the Gorilla Engine project file (.ugep) so Gorilla Compiler includes them in the installed product. Application code addresses packaged assets with paths relative to the asset root, such as images/Rotary.png or fonts/Roboto-Medium.otf.

Filmstrips

A filmstrip is a single image containing every visual state of a control. Filmstrips are commonly used for knobs, sliders, switches, and other controls whose appearance changes with their value.

Frames are normally arranged vertically. A two-state switch might contain its on state above its off state, while a smooth knob or slider might contain 128 frames. Every frame must have the same dimensions.

For a vertical filmstrip with $n$ frames:

$$ \text{frame height} = \frac{\text{image height}}{n} $$

For example, a 72 by 80 pixel image containing two frames produces a control frame measuring 72 by 40 pixels. A 24 pixel high control with 128 frames requires a filmstrip 3,072 pixels high.

In Gorilla Engine React, provide the image path, frame count, and direction to the control or higher-level component:

const knobStyle = {
  filmstrip: {
    path: 'images/Rotary.png',
    count: 128,
    direction: 'vertical' as const,
  },
};

The control’s displayed width and height describe one frame, not the dimensions of the complete filmstrip.

Retina Images

Provide a standard-resolution image and an optional @2x Retina variant in the same directory:

images/Rotary.png
images/Rotary@2x.png

Reference the standard filename in application code. On macOS, Gorilla Engine can select the matching @2x image on a Retina display without a different component path. This automatic selection does not apply on Windows.

The Retina image must preserve the same frame count and layout, with each dimension doubled. For example, if a standard filmstrip frame is 64 by 64 pixels, each frame in its @2x counterpart is 128 by 128 pixels.

Fonts

Gorilla Engine supports OpenType (.otf) fonts. Store product fonts in assets/fonts/ and refer to them by their packaged path:

const FONT_REGULAR = 'fonts/Roboto-Regular.otf';
const FONT_MEDIUM = 'fonts/Roboto-Medium.otf';

<geLabel
  text="Filter"
  font={FONT_MEDIUM}
  fontSize={14}
/>

Include every weight and style used by the application. Do not rely on a font being installed on the user’s operating system.

Instruments and Blob Files

Place the two blob files exported by Gorilla Editor together in the instrument asset directory:

assets/instruments/<instrument-name>_part1.blob
assets/instruments/<instrument-name>_part2.blob

The JavaScript application can locate and load these files through @gorilla-engine-sdk/ge-blob-manager or the native Gorilla Engine API. See JavaScript Interface for both approaches.

Presets

Keep factory presets in a dedicated directory such as assets/Presets/Factory/. The installed application can scan that packaged directory while saving user presets to the appropriate user-data location.

The @gorilla-engine-sdk/ge-session-presets-lib package handles factory and user preset discovery, loading, saving, deletion, and DAW session state. @gorilla-engine-sdk/ge-preset-browser provides the corresponding React interface.

Other Runtime Assets

Any file required while the plugin runs is a product asset. Depending on the application, this may include:

• Backgrounds, logos, icons, and control graphics
• Animations
• Impulse responses and additional audio files
• MIDI files and pattern data
• Product configuration and other structured data
• Help content or legal notices displayed by the application

Use separate directories for distinct asset types and stable, relative paths in application code. Avoid references to files outside the project because those files will not automatically exist in an installed product.

Develop and Validate Assets

The development workflow watches application source and assets, but a running plugin instance may retain previously loaded resources. Re-instantiate the plugin in the DAW after asset changes when necessary.

Before release, test the installed product on every supported platform and verify that:

• All registered assets are packaged.
• Paths match their exact case.
• Standard and Retina graphics select the expected frames on macOS.
• Every font weight renders correctly.
• Factory presets and blob files load from installed locations.
• No asset depends on a developer-machine path.