VNMaker UI

Visual Novel Maker UI

Visual Novel Maker has a robust UI system that makes use of built UI components and custom components. By using JSON, you can create your own UI. Here’s an example of a basic UI built using JSON. Today, we’re going to break down that UI system. Here’s a UI Example JSON.

As you can see, we use JSON to create a button and add the necessary parameters. Now, this JSON is just a thin language of sorts that is built on top of the base UI code; as a programmer, you could extend this code and create your own UI components.


Creating A custom UI Component

As mentioned, you can create your own UI components. The ui.BUtton component is a custom component. Let’s take a look at the code for that custom component.

As you can see, the “ui.Button” is made of smaller components like a frame and text components. The code you see above is known as a “descriptor”. Using this, components are broken down even further. But, how your own custom components  JSON are turned into UI? Let’s find out. Or make it completely from scratch. But, how exactly is this JSON turned into a tangible UI? The UI Manager.


King UI Manager

The UI Manager is the king that creates UI components from “descriptors.” Descriptors are the JSON. You could write all the UI in JSON. All of the UI base components are stored on UI Manager object; the manager is truly the king of UI creation and management. Now, let’s explain how it works.


Descriptor to UI

The UI Manager takes the descriptor and recursively traverses the elements that are part of the UI. Think of the manager going link by link between each element until there are no descriptors left. And, like magic, you have created a new UI element. Now, this has a quite a few uses for you.



An understanding of how the components work allows you the developer to create flexible UI’s that can be generated while the game is running. Or, make your own new UI components from scratch. Furthermore, it allows you to create UI that blends multiple components from the game’s default UI components. For example, here’s a scene I created a UI layout that’s generated directly from game data.


This is a scene that will be used to create and manage definitions and information about characters, and more! And here’s the following code that makes it work.


As you can see, this layout descriptor uses JavaScript to generate UI components in real time. The UI Manager creates each element recursively. Also, note that I use the UI Manager in the code to create my own components in real time. This is incredibly powerful and allows user interfaces to be flexible. Furthermore, you’ll notice many formulas used in the code. formulas allow you to run code that directly modifies UI components. The “o“, represents the current UI object; because it’s an object, you can modify and add the properties like you would if you typed them out in JSON.


Using these ideas, you can create more dynamic scenes in your Visual Novel Maker game and should be taken advantage of for making new systems. By taking a deeper look at the UI components in Visual Novel Maker, you can really make your Visual Novel your own. Good luck creating the Visual Novel of your dreams!


Leave a Reply

Your email address will not be published.