JSON Formulas and UI

[Kino]

Hey guys, I'm wondering how formulas work in depth.

I'm trying to use formulas to generate the properties of the UI elements, such as the text on buttons, but they don't seem to do anything to the current UI.

It works for simple properties like text in ui.Text, but when I use them on buttons there is no response.

Here's the code I'm working with as an example:

 controls: [
              {
                type: "ui.Text",
                text: "Categories :",
                font: { "name": "Tahoma", size: 32},
                sizeToFit: true,
                frame:[0, 0, "19%", "70%"],
                margin: [10, 10, 0, 10]
              },
              {
                type: "ui.Button",
                params:{text: "Category"},
                action: {name:"amaEmit", params:{name:"categoryClick", data: `${"Category"}`}},
                resizable: true,
                categoryName: "Test",
                margin: [0, 0, 0, 10]
              },
              {
                type: "ui.Button",
                params:{text: {}},
                action: {name:"amaEmit", params:{name:"categoryClick", data: `${"Category"}`}},
                formulas: [$(()=> o.params = {
                  text: `${amryl.unique($dataFields.database.librarium.map(x => x.category ))[o.index - 1]}`
                  })
                ],
                resizable: true,
                categoryName: "Test",
                margin: [0, 0, 0, 10]
              }
          ]

I really want to be able to dynamically update bits and pieces of the UI I'm building, but that doesn't seem to be a possibility here. It's all very static for me.

 

[Kentou]

Hi Kino,

{
                type: "ui.Button",
                params:{text: {}},
                action: {name:"amaEmit", params:{name:"categoryClick", data: `${"Category"}`}},
                formulas: [$(()=> o.params = {
                  text: `${amryl.unique($dataFields.database.librarium.map(x => x.category ))[o.index - 1]}`
                  })
                ],
                resizable: true,
                categoryName: "Test",
                margin: [0, 0, 0, 10]
              }

You almost did it. If you change the o.params at runtime, it has no effect since the params are only processed one time at layout initialization. The ui.Button is a template defined in Templates folder as:

ui.UiFactory.customTypes["ui.Button"] = {
    "type": "ui.FreeLayout",
    "style": "button",
    "controls":[
        {
            "type": "ui.SelectableWindow",
            "frame": [0, 0, "100%", "100%"],
            "margin": [0, 0, 0, 30],
            "inheritProperties": true,
            "params": {
                "actions": -> p.actions,
                "action": -> if !p.actions then Object.mixin({ "sound": $dataFields.database.system.menuSelectSound }, p.action) else null,
                "sound": -> p.sound
            },
            "zIndex": 4999
        },
        {
            "type": "ui.Text",
            "executeFieldFormulas": true,
            "inheritProperties": true,
            "sizeToFit": true,
            "style": "buttonText",
            "frame": [0, 0],
            "text": -> p.text,
            "zIndex": 5100
        }
    ]
}

You can see that ui.Text object, which displays the button's text, is at the second position in the controls-array. If you wonder what the "-> p.text" means, it is a placeholder function which will put the "text" from the params property here at initialization time. To change the text at runtime, it needs to look like this:

$(()=> o.controls[1].text = amryl.unique($dataFields.database.librarium.map(x => x.category ))[o.parent.index - 1])

I didn't test this code, since I don't have your scripts, but it should work. If it is still static, try to add:

"updateBehavior": "continuous"

to the button. Let me know if that helps you out.


Also, maybe as general hint:

It is totally up to you how you work with the JSON based system. The built-in default UI is completely constructed from the basic UI objects. Those are UI objects which are not templates and implemented in code like ui.Image, ui.Text, etc. You can see all the templates and layouts in the Layouts folder.

But you can also extend the list of and implement your own UI objects in code for a lot more control and then use them in JSON. Check out ui.UIManager.createControl method to see how those basic UI objects are created. You can inherit from ui.UIManager and override createControl to implement your own non-template based UI objects in code. Or, you can even skip the entire JSON system and make the entire UI in code. Whatever you prefer more, there should be enough flexibility.

Let me know if you have any questions.

 

[Kino]

Ahh okay, gotcha and thanks. This definitely helps push things forward.

I think I need to do more reading of the entire code base. Much appreciated!

Some other questions I have is in the scripts tab, code is processed sequentially down the folder structure correct? Like does layout get processed after Components etc or is their an internal ordering?

 

[Kentou]

Some other questions I have is in the scripts tab, code is processed sequentially down the folder structure correct?

Yes, it is that way.

 

[Kino]

Alright, and one more question. How would you go about having a UI update in-game, for example having text UI update? Is that possible?

Or as you said, it's only generated once at runtime, thus updating the individual components is a no go?

 

[Kentou]

How would you go about having a UI update in-game, for example having text UI update? Is that possible?

Sure, it even happens in the built-in UI at several places. I think I posted you a solution how to do that?

Or as you said, it's only generated once at runtime, thus updating the individual components is a no go?

Not sure if you read this one here: https://asset.visualnovelmaker.com/help/index.htm#t=In-Game_UI.htm

But in short, the JSON layouts are just one level above the actual UI system. The JSON structure is processed and the necessary objects with their components are created out of it. I meant that the processing, converting the JSON structure into a game object hierarchy only happens once . But of course you can dynamically modify those objects at runtime or create new ones. Without JSON, you would just instantiate all the objects directly in code, connect them and set their properties.

Maybe that makes it a bit more clear but feel free to ask further questions.

 

[Kino]

Alright, thanks. And yea I just changed the update behavior of some UI components and I think I got pretty far now.
Using formulas seems to be the way to go to do what I want.

I also was able to generate UI elements using the UIManager class.