KSP: UI (design) & Engine

In this Complex User Interface tutorial we will build a fully functional UI with multiple Screens: main screen, FX screen and about screen. Whereas the FX screen holds a sub menu for two different FX: a LoPass filter and a LoFi FX.

In this article we only create the GUI with a functional Navigation, the FX Knobs are not functional! Refer to the engine par article to let them control the Kontakt engine.

This UI was made with Kontakt 5 so it seems a little over the top compared to nowadays approaches. It is still recommended to read this article if you are new to Kontakt Scripting because it may still help you to understand KSP better. Read more »

Unfortunately once the initial wallpaper is set, we can’t alter the image file anymore. Even not by setting different initial wallpapers for each script tab. Because the last applied wallpaper will be the one and only initial wallpaper for the whole instrument.

But we can either offset the initial wallpaper that means moving it via set_skin_offset or we can use a label element to set up multiple backgrounds which is covered in this article. Even dynamically like switching them when hitting a navigation button.

Read more »

The instruments background image is called “wallpaper”. Its’ the basic background texture where all UI elements (knobs, buttons etc) get layered on top. Just to give you an example: we could take our default graphic software and design a realistic synth surface wallpaper (png file) containing “sockets” for some knobs and buttons with detailed shadows, light reflections etc. After that, we can create the individual knobs & buttons and place them exactly inside the designated sockets and areas by layering them on top of our background wallpaper.

Read more »