Getting Started: In-Game User Interface
Visual Novel Maker comes with a powerful In-Game UI System allowing you to create amazing UIs without real programming using JSON (JavaScript Object Notation) definitions. The following step-by-step guide gives you a rough overview plus a few examples about what is possible with the In-Game UI System.
But because of complexity this guide cannot cover all features. So please check the In-Game UI API Reference for details and don't hesitate to ask for help in the Visual Novel Maker forums.
Layouts
In-Game UIs are defined using layouts. You can find all default layouts for your Game in Script Editor > Layouts folder.
A layout contains a set of controls, like images, buttons, texts, etc. and manages the position and size of each depending on the layout-type. For example: A grid-layout shows its items in a grid of rows and columns:
(Grid Layout Example)
A layout can contain other layouts as well to build more complex layouts.
Controls
A control covers a piece of UI logic like displaying an image, a button, a text, etc. Technically, there is not much difference between a control and a layout. But a control cannot contain other controls in regular.
(Control Example)
Case Examples
Please check our In Game UI Examples to learn more about how to modify or make your own User Interface (In-Game UI)!
Example 1: Custom Title-Screen
In this example, we will make our own title-screen using Visual Novel Maker’s In-Game UI-System!
In this example, we will be teaching how to use styles to avoid redundant code and make it easier to modify your layout.
In this example, we will be teaching how to add animations to your UI!
We learned how styles can help us to avoid redundant data in our layouts. But since styles are limited, we are teaching you how to make and use Templates to overcome them!
In this example, we will be teaching you how to use actions for cases such as switching scenes or layouts!
Now that you know the basics, we will now teach you about this complex function. Data Binding allows us to display or change background-data (ex. In-Game settings)
In this example, we'll teach you another complex function called, Formulas. They are defined functions under a control and is executed under specific conditions.
In this example, we'll teach you another complex function called, Components. This allows you to specify a specific condition to a control.
Useful Tips
Don't make layouts more complex then actually needed. Think twice if maybe just a few simple images can solve a case more efficient instead of building up a huge complex layout structure. The more complex a layout is, the more performance it will cost. That is especially the case if you plan to publish your game on weaker mobile devices.