Archeia

Level 99 Demi-fiend
Staff member
Developer
Joined
Mar 1, 2012
Messages
15,646
Reaction score
16,317
First Language
Filipino
Primarily Uses
RMMZ
Scripted UI Tutorial Series
(Google Drive Link)
A collection of tutorials on how to create or modify the JSON layouts inside Visual Novel Maker. The UI is created in 1080p. This tutorial is a collaboration between @Dr.Yami and @Archeia.

Video Tutorial will be coming as well!

You can access the tutorials and the recent Extension build at our Google Drive Master Folder

Part 1 : Title Screen
(Press the Title for Google Drive Link)
epAxJG8UrI3FcosPlJvx6eXS8yDs9TRa_jmDOzLbt0XMBUVzVH_NoHQSh1iCsKEQ3YO6uqHjCJOLSGSC7--1dKdR8ZHrYSS8g34qaSjGuMjWUHOlqwArJQIFQj6VkyW8Ss_zhhrD


Goals

In this tutorial, we will be learning about the following:
  • Layout
  • Image
  • Buttons
  • Template
  • Basic Actions

Part 2 : Work in Progress
(Work In Progress)
 
Last edited:

Archeia

Level 99 Demi-fiend
Staff member
Developer
Joined
Mar 1, 2012
Messages
15,646
Reaction score
16,317
First Language
Filipino
Primarily Uses
RMMZ
Part 1 : Title Screen
(2017-12-07 17:43:33)

Introduction
This is the first tutorial in the Visual Novel Maker Scripted UI Series. The purpose of this guide is to help you understand on how to make your own Custom UI using JSON (JavaScript Object Notation).

In this tutorial, we will start by making the Title Screen. The final result can be seen below:

epAxJG8UrI3FcosPlJvx6eXS8yDs9TRa_jmDOzLbt0XMBUVzVH_NoHQSh1iCsKEQ3YO6uqHjCJOLSGSC7--1dKdR8ZHrYSS8g34qaSjGuMjWUHOlqwArJQIFQj6VkyW8Ss_zhhrD



Goals
In this tutorial, we will be learning about the following:
  • Layout
  • Image
  • Buttons
  • Template
  • Basic Actions
Foundation
Working with JSON UI
In VN Maker, there are multiple ways for you to create your own UI. You can either use the Scene Content commands as seen in the Action Game UI template or by programming it in JSON format.

You can see the JSON in action by creating a new project with Script-based UI or Empty Project templates, go to the Script Editor in VN Maker and open any Layout script in script folder Layouts.

The JSON ‘layout’ will contain many properties, such as Width, Height or any element (text, image, ...), in an easy to read syntax. To learn about the syntax, I recommend that you read the tutorial on MDN.

Where to Start?
Before we begin, it is important to know what layouts and elements are. You can think of it this way, a Layout is a container. Inside that container you can put in Elements; things you want to draw in the screen such as images and text. It can even contain another layout; which is what we will call a Child Layout. You can also have more than two layouts in one layout if necessary. To visualize, let’s use a screenshot from Yanfly’s RPG Maker Equipment script:

AFa-m5uiMJaCMXQMraC9Jo4uKFMV2vwOeTEfIvBSt-jHITVPMDM15ZUZxPirvcYU7ASjZlHk1BF9GHRBQHlloqTlNaFDO77afadJYAzNAkdUzueF2NYhekrMDNBgUy274LaF6L4f


The layout that holds all of this together will be called “Layout Equip.” Inside Layout Equip, you have the Help Window (Child Layout #1), Command Window (Child Layout #2), Actor Window (Child Layout #3), Equipment Window (Child Layout #4) and Status Display Window (Child Layout #5). In this case, Layout Equip will be known as the Parent Layout and the Child Layouts inside it will be called Children. If a child layout has its own layouts inside it, then that child layout is the parent layout for those child layouts.

As you can see, it becomes complicated quite easily. An easy approach to programming UI is to do things from Big to Small, from Layout to Children, from Easier to Harder. This approach will be described in more detail as the tutorial goes.

While the tutorial will lead you step by step, we still recommend that you read some tutorials about the foundations of JavaScript and JSON syntax.

Descriptors
We will call the JSON data that describes each element Descriptor. It is a JSON object that describes (or dictates) how an element will be shown on the screen.

Each descriptor will start and end with curly brackets ({}) and have two important properties: type and frame. Type determines what kind of element it is (text, image, ...) and Frame handles position and size.

{
"type": "ui.Text",
"frame": [0, 0, 100, 100], // [X, Y, WIDTH, HEIGHT]
}

Each Element type will have will have different properties to describe the element aside from the one we mentioned. For more information, please take a look at VN Maker Help file’s API documentation or the Scripter’s Guide.

Title Layout Creation!
Preparation
You need a project to start working on this tutorial. I recommend creating a new project with either Script-based UI or Empty Project template.
  1. Let's get the necessary images for the UI here and add them to Graphics/Pictures in Resource Manager: Download.
  2. Open the Script tab.
  3. Create a new script folder above Main but below everything else. Name it UI Series (or something else, it's up to you). This is important to avoid bugs as the order of the scripts matter.
  4. Then create a new JavaScript file inside that folder named Layout_TitleNew.
  5. Now we’re ready to work!
Start working
Every scene in VN Maker will be a ui.FreeLayout. This is a layout that gives us the freedom to put anything on screen at any position. Every scene will always start with these lines of code:

ui.UiFactory.layouts["titleLayout"] = {
"type": "ui.FreeLayout",
"frame": [0, 0, Graphics.width, Graphics.height],
"controls": [
// Everything displayed on the Title Screen will be inside these brackets
]
};

As you see the text titleLayout on the first line, it indicates to the engine that this is the JSON data for the Title Screen. Be careful when dealing with layouts[_]! Unless you know how the UI Engine works, we highly discourage from modifying it on your own.

Now we are going to add some elements onto the scene and display them on screen. As the comment in above code suggests, every element descriptor will be added into the controls section and between those two brackets.

Now let’s deconstruct our current design:

epAxJG8UrI3FcosPlJvx6eXS8yDs9TRa_jmDOzLbt0XMBUVzVH_NoHQSh1iCsKEQ3YO6uqHjCJOLSGSC7--1dKdR8ZHrYSS8g34qaSjGuMjWUHOlqwArJQIFQj6VkyW8Ss_zhhrD


There are 3 kinds of elements on this screen:
  • Background
  • Game Title / Logo
  • Buttons.
Since the Background and Game Title are only static images, we will start with them. Add a ui.Image to the scene to display the Background image first. This is because it will be below the Game Title and Buttons.

Add the code inside the control brackets in our starter code:
{
"type": "ui.Image",
"image": "TitleScreenBg",
"frame": [0, 0, Graphics.width, Graphics.height]
},

By the end, it should look like this:

ui.UiFactory.layouts["titleLayout"] = {
"type": "ui.FreeLayout",
"frame": [0, 0, Graphics.width, Graphics.height],
"controls": [
// Everything displays on Title Screen will be inside those brackets
{
"type": "ui.Image",
"image": "TitleScreenBg",
"frame": [0, 0, Graphics.width, Graphics.height]
},
]
};

Save and test the game. The title scene and should look like this:

LyiiiA7nXBtbpUQL3CIKWHE0mWssyf7_E3yzg3OBcrGFEGs_cnzWbr2XW4A3C1u30Y2wmGibVyS4_E5w2FHJ6svcc4UhqHwpyY_UZW7pOZiTqumThkwJux60En1Asyssfa9LwHhx


As you can see, we use an ui.Image element to display an image on the screen. This type of element will display an image with image name assigned to property image. By default, the element will search the image match given name inside the Graphics/Pictures. And for the frame, we display it at position (X=0, Y=0) while scaling it to match the screen's size. We can remove the sizes in frame to display the image at its original size. To understand this concept, we highly recommend reading about image positioning in Visual Novel Maker’s help file.

Like the background, we’ll add the game title image (or Logo) onto the screen just below the first blocks of code:

{
"type": "ui.Image",
"image": "LOGO",
"alignmentY": "center",
"frame": ["10%", 0]
},

If you want to add more elements between descriptors, make sure to add a comma (,) between them. This is a must because of JSON syntax. , the JSON Lint tool would throw an error.

There are two new things in this descriptor: the alignmentY and the percentage in frame. For the alignmentY, it will align the logo to the middle of the screen for you for its y-axis (meaning up/down). If you want to know more about the properties alignmentX and alignmentY, you can read more about it in the official documentation.

You may have also noticed the percentage in position X, the way it’s calculated is based on the game's resolution and the image’s width. Remember, it should be wrapped inside quotation marks [“ ”] for it to work. You can also use basic arithmetic operations as well.

Here’s an image to show the difference in positioning.

kj8ONtn_tIv_7cJ3xHIm80nIhITkjex9n7HzYhnWwyfLHUwu-PR_c52g0Fs9tvpFT-lMdD5u4d4Yl0qQzbDMcU9aP7TFFstjcN_5_RZzP7cVc1cBi0-n7w6jRdNohr6Yp3IPz9CR


If we left it at [0,0] you’ll notice that the image is at the very edge of the screen, we don’t want that to happen. So it’s positioning was offset by 10% from the edge of the screen. Once again, we highly recommend reading about image positioning in Visual Novel Maker’s help file.

This is our title scene now:

YvTHqmMHclsTnHSyj1LRcY-MFndEVtjka8P_7Cl8lb3_uwDlWQl0Q59ZRKwaDNceJ8CornhAiFGEnen3y2L2hXSzFYeOrgnR9tpXrBQhrxCRectDFTh_AV-SG8jeTrerj1lqkXrN


The screen is looking like a title screen. Now all we need to do is add some buttons to allow the player to start a new game, load a game and so on. Let’s go back to our mockup:

epAxJG8UrI3FcosPlJvx6eXS8yDs9TRa_jmDOzLbt0XMBUVzVH_NoHQSh1iCsKEQ3YO6uqHjCJOLSGSC7--1dKdR8ZHrYSS8g34qaSjGuMjWUHOlqwArJQIFQj6VkyW8Ss_zhhrD


We can see how all the buttons are aligned on the right and grouped together. Now let's create a child layout to handle it. For this one, we’ll be using ui.StackLayout instead of ui.FreeLayout. This allows all elements in this layout to be automatically positioned right next to each other without manually setting up each position.

{
"type": "ui.StackLayout",
"orientation": "vertical",
"sizeToFit": true,
"alignmentY": "center",
"frame": ["100% - 420"],
"controls": [
// Put button elements here!
]
},

Since our buttons are aligned vertically, we’ll set an element named orientation with the value vertical. This means that the elements will be placed from top to bottom automatically. There is also a new property called sizeToFit. If this is set to true, we don't need to setup the sizes for the layout or element, it will be scaled to fit the contents inside.

Next we will add some buttons into the newly created child layout.

{
"type": "ui.Image",
"image": "NewGame_Idle"
},
{
"type": "ui.Image",
"image": "LoadGame_Idle"
},
{
"type": "ui.Image",
"image": "Options_Idle"
},
{
"type": "ui.Image",
"image": "Extra_Idle"
},
{
"type": "ui.Image",
"image": "Quit_Idle"
},

Now hit save and let’s test it out!

YP72STQikAIBU-EpGwpztREba3F25vlW224GTgOEbcpVtGd6hnXa8BBNhgfNoF9ebI-WzGO60WPi1AA9K-z0-t_CtxxEwmhPPUNPhWmjQRRpAaSURnqGDhJnOFFKCS7RqJXPC4T3


It’s looking great!

Next, we will need to setup the buttons so that they will show the Title_Pointer image whenever you hover on them. To do so, we need to make a template for each button. Let's create a new JavaScript file under our Layout_TitleNew and name it Template_TitleButton. Put this starter code inside the newly created script:

ui.UiFactory.customTypes["ui.TitleButton"] = {
"type": "ui.FreeLayout",
"style": "titleButton",
"frame": [0, 0, 420, 64],
"controls":[
// Elements here!
]
};

It looks a lot like our starter code for layout, except we’re using customTypes instead. What it does is that it defines a new element type. In this case, our custom element type is ui.TitleButton. Let's leave the style property for now. We will need that to setup our style for the pointer later.

Let's add an ui.Image into the template:

{
"type": "ui.Image",
"alignmentY": "center",
"image": function() { return p.image; },
"frame": [0, 0]
},

And, we have a new alien in image property: a function. This is a bit complicated, and will be explained on the next tutorial. For now, all you need to know is that it’s reading an element property, in this case image, so that everything under our ui.TitleButton layout and its children can use that property!

Let's go back to the Layout_TitleNew and replace our buttons with these new code:

{
"type": "ui.TitleButton",
"params": {
"image": "NewGame_Idle",
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "LoadGame_Idle",
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "Options_Idle",
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "Extra_Idle",
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "Quit_Idle",
}
},

The custom properties should be placed in params property like the image above. The result will not be much different, but the code will work for sure! So you might be wondering why we have to do this? What params does is pass data to the layout or template. It allows us to add more functionality to the buttons which would be elaborated later.

Let's go back to Template_TitleButton to add the pointer, add following code below the ui.Image element:

{
"type": "ui.Image",
"alignmentY": "center",
"style": "titlePointer",
"image": "Title_Pointer",
"frame": [0, 0]
}

It will show the pointer in title scene now, but our problem is that it’s visible even though we’re not hovering on any buttons. Our next goal would be to make it invisible until you hover onto a button. Let's add these styles at the end of Template_TitleButton script:

ui.UIManager.styles["titleButton"] = {

};

ui.UIManager.styles["titlePointer"] = {
"opacity": 0
};

ui.UIManager.styles["titleButton:hover titlePointer"] = {
"opacity": 255
};

What these styles do is add more properties into the elements in the defined layouts. So what our code does is that, it reduces default opacity of the pointer to zero making it invisible by default. When we hover on a titleButton the pointer would return to maximum opacity and turn visible. Save the game and try again, the pointer should work properly now!

Z7HhbfDscjgDJsHCODT4hOg1KuZik8k7PFcjoJB7ZXQxlydK97XvqyLiuC0zzAq6vsQDMk1C0INMmC-fxwydvFfAyNeogSYxM13uyRXvafUzu482INkkw5zIBA1qyntMDNihA_-u


We’re almost there! Now all we need to do is to make the UI react to player input. You’ll notice that when you click on those buttons, nothing happens. This is because we haven’t added any action property to each button. Let's take all the actions from default Layout_Title and put them to our Layout_TitleNew like so:

{
"type": "ui.TitleButton",
"params": {
"image": "NewGame_Idle",
},
"action": {
"name": "newGame"
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "LoadGame_Idle",
},
"action": {
"name": "switchLayout" ,
"params": {
"name": "loadMenuLayout",
"savePrevious": true,
"snapshot": true
}
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "Options_Idle",
},
"action": {
"name": "switchLayout",
"params": {
"name": "settingsMenuLayout",
"savePrevious": true
}
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "Extra_Idle",
},
"action": {
"name": "switchLayout",
"params": {
"name": "cgGalleryLayout",
"savePrevious": true
}
}
},
{
"type": "ui.TitleButton",
"params": {
"image": "Quit_Idle",
},
"action": {
"name": "quitGame"
}
},

What our action does is basically the Switch to Layout Command. What our action command does is calling pre-existing layouts, such CG Gallery; and remembering the previous scene which in this case our Title Screen. The action property is a bit complicated to explain more in-depth so we will discuss about it in a future tutorial.

Save the game and try a play test. Hope you like the result!

Next Tutorial
On the next tutorial, we will be learning how to:
  • Add button states such as enabled/disabled for unlocking parts of your game.
  • Implement Extras button
Final Notes
We hope that this tutorial helped you understand how Visual Novel Maker handles UI and find ways to customize your game to your liking. Even something simple like some decorators or changing default UI elements to match your style. Just remember that when you want to experiment with the default UI, make sure to make a copy of that script and modify that one instead. If you don’t, when the software updates, all your changes will be overwritten! Always make a backup of your code and your project. Save them locally and in websites like Github, Google Drive and/or Pastebin to avoid loss of progress. We highly recommend adding comments to your code as well.


It is also a good practice to read the default layouts and templates provided with Visual Novel Maker to learn more about how the UI works. The official documentation (also known as Help File) is a good place to start if you wish to learn more about types and properties for UI elements.
 
Last edited:

Latest Threads

Latest Profile Posts

And today we got some insides maps from the town i posted last time.

Map044.png
Map045.png
Map046.png
Map047.png Map048.png Map049.png Map050.png
So a big bug that was on a glue trap at home is now magically not on the glue trap. This feeling of terror I'm experiencing could be a fun thing to put in my game project (not the IGMC one).
Hoping that Unite has a character generator with black hairs/lips and other features.. it is such a pain making characters without these...
Today is my dad's birthday! And he's still going strong in his retirement days!

Forum statistics

Threads
123,395
Messages
1,156,257
Members
161,850
Latest member
cyk070428
Top