KSP: Custom UI (design)

Animations via image sprite sheet let your Kontakt instruments feel more organic and vivid. Sprite sheets can also be used for displaying dynamic info like note names or other information. This article is kept simple for a better understanding. The download contains a more advanced version of an oscilloscope, reacting on note height & velocity, easing out on note release, and displaying the note numbers (see video)

Read more »

based on the button matrix this script lets you easily create a scrollable area like shown in the video. You can adjust many parameters (and even use custom images for the buttons and scroll bar) by changing a few variables at the top of the script. The relevant code parts are explained in the article as well in case you want to customize it and use it for your instruments. It is recommended that you also read the button matrix article.

Read more »

this tutorial is based on the Wallpaper and the Dynamic Wallpaper (via label element) tutorial. Actually once the initial wallpaper is set we can’t change it anymore but we can move the wallpaper image vertically via set_skin_offset(). So if we create a wallpaper sprite which is as double as high as our ui_size (in this case 2 x 608px) we can put 2 wallpapers into this one image file like shown on the left. The visible area is only from 0 pixel to 608 pixel.

We can now set a button for example which moves the background skin 608 pixel vertically to put the second wallpaper into the visible area. This short demo video shows how it works:

Read more »

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.

If you are on Kontakt 6 also check out the ui_panel article which simplyfies a lot now.

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 (covered in this article). Even dynamically like switching them when hitting a navigation button. The set_skin_offset method is explained in this article

Read more »