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 working! Refer to the engine par article to make them work.

You can skip this article:

  • If you are already working on Sublime and more advanced. Just move to working with macros
  • If you are on Kontakt 6. Also check out the ui_panel article which simplyfies a lot now.

Better not skip this

  • If you are new to kontakt scripting because this article still helps to better understande the other articles.

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 »