Struggling with API when making a custom editor script

Scripting
#1

Hi, new Flax user here. I’m struggling with the API for custom editor scripts. I’ve got the initial setup done as described by https://docs.flaxengine.com/manual/scripting/tutorials/custom-editor.html

I’ve spent hours reading the documentation, but can’t figure out how to do any of the following:

  1. After changes are made that update values in the Properties window (in my case, a Label field), the Properties window is not repainted automatically. I have to click on another actor, then my actor with the custom editor, to get the Properties window to repaint/refresh. I’ve seen the same behaviour in Unity which is solved by calling a Repaint() function. Flax’s GenericEditor class has a Refresh() function that looks like it should do the same thing, but calling Refresh() doesn’t have any effect. What’s the proper way to get the Properties windows to repaint?

  2. Each use of “var button = layout.Button( “SomeLabel” );” creates a button on a new row. How can I create a group of buttons on the same row (in the Properties windows, for a customer editor)?

  3. Is it possible to create a button labeled with an image instead of text (in the Properties windows, for a customer editor)?

#2

Hello!
I leave here how I have been using custom editor, I hope it answers your questions.

  1. You need to keep a reference for the elements that need to be updated, overriding Refresh method and set there the new value.

  2. You can use HorizontalPanelElement for having more than one element in the same row

  3. Use an ImageElement instead a button , get the GUI Image and use Click action Use BackgroundBrush GUI Button. Updated script.

Example:

#if FLAX_EDITOR
using FlaxEditor.CustomEditors;
using FlaxEditor.CustomEditors.Dedicated;
using FlaxEditor.CustomEditors.Elements;
using FlaxEngine;

namespace Game
{
    public class CustomEditor : Script
    {
        // Using ActorEditor for test pruporses and avoid having a Script.
        [CustomEditor(typeof(Spline))]
        public class MyScriptEditor : ActorEditor
        {
            private Spline Actor;
            private LabelElement labelThatNeedTextBeUpdated;

            private string GetLabelContent()
                => string.Format("My Custom Editor: {0}", Actor?.Position.ToString());

            public override void Initialize(LayoutElementsContainer layout)
            {
                Actor = (Spline)Values[0];
                labelThatNeedTextBeUpdated = layout.Label(GetLabelContent(), TextAlignment.Center);
                base.Initialize(layout);

               layout.Space(20);
                var groupOfButtons = layout.HorizontalPanel();
                var button1 = groupOfButtons.Button("Button 1");
                var button2 = groupOfButtons.Button("Button 2");
                var button3 = groupOfButtons.Button(string.Empty);

                button3.Button.Width = 64;
                button3.Button.Height = 64;
                button3.Button.BackgroundBrush = new SpriteBrush(FlaxEditor.Editor.Instance.Icons.Flax64);
                button3.Button.AnchorPreset = AnchorPresets.TopLeft;
            }

            public override void Refresh()
            {
                base.Refresh();

                if(labelThatNeedTextBeUpdated != null)
                    labelThatNeedTextBeUpdated.Label.Text = GetLabelContent();
            }
        }
    }
}
#endif

This is the result. The label is updated, tested changing the Actor name or moving it gets updated

image
image822×759 40.7 KB

1 Like
#3

That worked! I got all my questions answered, learned a ton about how Flax works under the hood, and taught myself how to set up a sprite atlas for my button’s sprites.

Thank you very much for the fast reply and especially for the example script.

#4

I want to change the texture of a button, but the method defined in the background of the visual script accepts only IBRUSH and this type does not have. Could C# or VisualScript code be done to do this? If you knew, please answer.