Events editor improvements : we need your opinion

As some people suggested here [Résolu] Diriger le héros vers le viseur, the event editor usability can be improved. That’s why we are currently investigating how we can improve it. So, we’ve begun working on an improvement of the event editor in order to fulfill two objectives : be easy to use for beginners and allow fast/quick editing for more experienced users. We also want to modernize the look of the events : by using simple colors instead of gradients (flat design).

[size=150]Here what it looks like :[/size]

[size=150]Explanation : [/size]
The conditions/actions lists (in each events) have a thick grey line. Moving the mouse over the conditions/actions list (not only the line) extends this line that becomes an “Add condition/action” button.
Currently, the panel with “Add event”, “Add a sub event”, etc. will be changed next.

The event without the mouse over the list of condition/action :

The event with the mouse over the list (but not over the button) :
You can see that the thick grey line becomes a button (a bit bigger than the line so as it’s easy to click on it).

The event with the mouse over the button :
The button changes color.

[size=150]We need your opinion on this because it’s difficult for developers to see how a user really uses the software.[/size]

[size=150]For the curious : [/size]
You can test the current state of this mock-up by compiling GDevelop from the feature/improve-event-editor Github branch here : … ent-editor
Note : this is not a stable version (it’s the base of the future v4 with the event editor modified) and using your projects with it will make them incompatible with the current GDevelop version

Thanks. :smiley:

Nice! :smiley:
I think there is not a better (faster and easy) way to add new actions/conditions, are you planning to put a similar expandable line to add new events/sub-events?

Don’t know. I might be too much “lines”. Maybe button on the left or right side of the events would be ok.

Wherever you want, wonder if worth to put it handy, we need more opinions :slight_smile:

Personally I would prefer using right mouse click to choose what kind of event I wish to add or comment or group also if right clicked on a condition able to choose add new condition or in case right clicked on an action able to choose to add new action. Also if I choose to add sub event (mouse is over add sub event), would be nice to be able to choose from a sub menu what kind of sub event we wish to add: I have in mind something like this:

Regarding design, well, if you want it to look more modern I wold go with the mockup made by ‘who_is_da’. it really cool.

Don’t know if it’s a good idea : this create a lot of menus and you need two clicks to add a condition/action.
But, it’s sure that we need to find a way to allow users to add any event at a subevent.

That’s already what I used to add the bottom buttons (see the first post of this topic) to the condition/action lists. I made some adjustements like adding a text when the list is hovered so as it’s more user friendly, especially for beginning. Then, I don’t like the idea of adding sub-events by shift clicking on the same button that is used to add condition and clicking on the small left part of the event to show a menu to add an event.

[size=150]Some news ![/size]
I’m currently searching how to replace the “Add event” panel. I came up with this solution : adding a “+” button when the event is hovered by the mouse. This button allows to add an event under the hovered one. There is also a “…” to add sub-event (of every kind) or other kind of event under (not as sub-events).

The event with the mouse over it :

The event with the mouse over the “+” or “…” :

A green line appears in the bottom of the event to show that the event will be added under.

[size=150]What do you think of this ?[/size]

No, I mean in the mockup I like specifically the way it looks
For example, there are those narrow red lines at the left side of the events, how about that, when the mouse is over the event, those lines would play a slide in and slide out animation to show the plus (add) sign?

So it would looks something like this with no mouse over the event:

With mouse over the event:

With mouse over the plus sign:

Anyway yeah, I agree on the plus sign whether it is just appear, disappear on mouse over or play some kind of animation :slight_smile:

Regarding the mockup, I also like the way how condition and actions are separated:

And I also like the way the gap looks like between the events and sub events:

Also the way comments breaks the gap and express the comment is belongs to the event right below the comment

I think it would be nice to pay attention to such details as well in v4.0 not only to functionality.

For the animation, it’s not possible : it would require too much work and will need complicated code.
For the “arrow” between conditions and actions, it is possible but only one by events (not every lines because it would suggest that each condition is related to one action in the event).

I’m sorry for that :frowning:

Actually, it doesn’t really need to play a smooth slide in and out animation if it really that complicated, but maybe a simple animation change would do:

  1. mouse is not over
    2.mouse is over event
  2. mouse is over plus sign
    as seem on my images.

I was just thinking about that the color line could be used also as a solid indication of the event:

Faulty (error in expression or something)

Oh well… So the plus sign going to appear when the mouse is over the event and change it color to green when the mouse is over the plus sign or the plus sign will be visible for each event and only change it color when the mouse is over?

How about changing event editor into sorta-but-not-quite webpage and allow users to skin it using CSS3? I personally like gradients and wouldn’t want them to go (don’t like flat design - gradients, if properly used, can make things like buttons pop out so you won’t have to wonder whether it’s a button or unclickable/untouchable label).

I already have been thinking about this. Alas, for now integrating a webpage with wxWidgets is still difficult/clunky and interacting with it is even more difficult. :frowning:
But my long term goal is to be able to merge GDevApp/GDevelop events editors. :smiley:

I guess here Victor is aiming to make small changes keeping the same codebase for the events editor. And he is right: the events editor is already a solid codebase without bugs, it’s quite usable and proven. We should stay focus on these “small” aesthetic/buttons changes that are still able to bring the events editor to the next level! :slight_smile:

Maybe? :slight_smile:

Nice :slight_smile:
But can you explain what each button stands for ?

Oh, my English is bad. Sorry.

  1. Normal condition.
  2. Mouse hover on the blue area. Add sub event. Main / Advanced
  3. Add an event. Main / Advanced
  4. Add a condition.
  5. Add an event. Main / Advanced

Thanks :slight_smile:
But your mockup has some problems (in my opinion) : they are too many buttons and the user doesn’t know if they add conditions or events (as they are just under the condition list). Also, it would be nice to have the “events related” buttons not mixed with the “add condition” button because, some events like the “While event” have two condition lists : it doesn’t make sence to display the “add event” button on both.

You see, they are two condition lists.

[size=150]Some other news ![/size]
First, thanks for your feedback. :slight_smile: I’ll take some of your remark into account like changing the colors a bit to follow more GDevelop style.

Secondly, I made some tests for the “Add event” button and here is the result :
A button appears on the left side of the event hovered by the mouse. When the mouse is on the button, the button changes color and a rectangle (ended with a triangle) with “Add event” written appears just under the event to show that the added event would go there. It’s also written that the user can right-click instead of left-clicking to have more options like “Add sub-event” or the other event kinds.

[size=150]Your opinion ?[/size] (except on the colors that will be changed to follow GDevelop style)

Keep it up! :smiley:
How this more-options-display would look like? Have you something in mind?

Just a simple menu with “Add sub-event”, "Add sub-event (other types) > ", a separator and the other type of events.