KSP: Custom UI (design)
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 use an image 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:
in this tutorial we will create “animated” buttons for Kontakt 5 with the following states:
- pressed off
- pressed on
- mouse hover off
- mouse hover on
In this Tutorial we will build a fully functional UI with multiple Screens. One main screen, an FX screen and an about screen. Whereas the FX screen again holds a sub-menu for two different FX: a hi-cut filter and a lo-fi fx. In this first part we only set up the GUI or the Navigation.Read more »
Unfortunately once the initial wallpaper is set, we can’t change the image 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. Even dynamically like switching them on a button event. The
set_skin_offset method is explained in this article
to create your custom UI and place custom controls you can chose between a grid system or exact pixels.
The instruments background image is called “wallpaper”. Its’ the basic background texture where all UI elemnts (knobs, buttons etc) get layered on top. We can for example create a realistic synth surface containing placeholders and “sockets” for all your knobs and buttons with detailed shadows, light reflections etc. After on we create the individual knobs & buttons and place those controls exactly inside the designated sockets and areas by layering them on top of our background wallpaper just like we would do within our graphic software when designing a complete GUI.