Improving GDevelop usability

Gdevelop is great, but i’d like to make an suggestion.
I’d like to see a dark skin added soon. The bright look hurts my eyes after sometime.
3D model import might be cool someday, but that’s a rather difficult suggestion probably.

Hello,

I made a mock up of how the event system’s usability can be improved. I’ve documented my observations in this post:

I encourage other users to add their own changes and improvements. The following PDF is editable in Illustrator and I can supply a SVG for anyone who wants it.

I’ve read @blurymind talk about visual programming at great lengths in other forums. It would be great to have feedback from you guys as well as @4ian.


Other things I wanted to mention

-Keyboard Shortcuts
Keyboard shortcuts like shift+ E for new event and shift + A for a new action, shift S for a subevent, D for disabling a code line etc.

-Font problem
In this example I’ve used Myriad Pro which is available in many systems. Alternatively any simple lightweight sans font would do. Gdevelop does provide the option to customise the event editor font but it doesn’t take non fixed width fonts. Is there any way to remedy this?

-Right Click Menu
Option in the ‘Add other’ can be used in the right click context menu.

Nice mockup ! :smiley:
But I see some problems with your layout : why do you want to have a “column” for the objects the action is applied on ? GDevelop doesn’t need objects for every actions/conditions (not like Construct 2) so some actions/conditions will not fit correctly in this layout. Also, the use of colored areas to add actions/conditions and events is not very user friendly because if you don’t know what it is, you’ll never think of clicking of these.

Really nice mockup indeed. :smiley:
What is fun is that I was improving GDevApp with a reworked events editor and I added the same “arrows” as you did between the conditions and actions lists! :slight_smile:
(I’d like to be able to share the events editor of GDevApp with the one in GDevelop, but looks like it’s technically difficult to achieve right now).

Mmm in the current implementation, the fact that a fixed width font is used is necessary as it is used to greatly optimize the rendering of events and allow to compute the positions of parameters to be able to click on them to edit them!

In any case this PDF and mockup is highly useful. I’ve added it here: trello.com/c/Tu8AoWNY/25-redesi … nts-editor
To be sure it is not forgotten :slight_smile: Let me know if you update it according to other members suggestions :slight_smile:

@Victor

Thank you. :slight_smile:

For the first part of your concern, having columns increases the readability of the events. Currently it is a bit time consuming to find which object the action is assigned to because in every row the name of the object ends up in a different place. This way the user knows where to look following the object row. It also means there will have to be a couple of rephrasing to be done (Which might be a bit hard). For the events that don’t use objects the column could just say ‘Do’ like it already does.

For the second part, I was also a bit concerned about this and thus wrote that this is be one of the bumps i the process of learning the software. But it will be only for the first time as its not a very hard concept. As I envisioned when the user hovers over the bar the bar will highlight and a tool tip will appear. Also the bar serves another important function of dividing the rows which increases the readability. :slight_smile:

@4ian

Thank you again:)

I was wondering how technically feasible this mock up would be but I was having a lot of fun so I kept some of the things in.

I understand the concept with the font now. Perhaps we can find a neat fixed width font that you can ship together with GDevelop.

It will be great to see what you guys come up with this. I’ll keep updating it with more user inputs :slight_smile:

Nice! It would be a great improvement, no doubts :smiley:
Let me post my thoughts here:

  • The main concept is excellent, even rewrite every action/condition syntax to fit with the column system would be worthwhile, but we have admit that we would be copying Construct2 style.
  • Have a fast way to add a sub-event is a nice detail too, very impressive.
  • By the way the flat design (very popular) fit better with the software default look :wink:

Just some doubts and notes:

  • What does the circle beside each object? Is it just aesthetic or can you select/check it for something?
  • The “OR” statement is a bit hidden, and you can have more complex conditions: “AND” inside “OR” and so on, maybe we have to work a bit on it. The current system show the conditions inside nice boxes, easy to see even with complex “combinations”

I haven’t found where to add new events (except at the end of the event list). Seems that I fought about sub-event but not events. It’s sometimes useful to be able to insert an event where we want.

I think we can put a thumbnail of the object (the same as in the object editor) in this place (it would be a square though).

@Lizard-13

Hi,
I do agree it would look a bit more like construct but then again I have made a huge list of observations which I’ve posted elsewhere about this.

For you Doubts,
-The Circles are just place holders for Icons of the objects just like @Victor said. It doesn’t need to be round. Sorry for not making this clear.
-Yes, you are right. I do think that complex conditions needs a bit more work. I’ll look into it and hope other members also come up with a better solution.:slight_smile:

@Victor

Just to clear any confusion

New Events can be added in 3 ways:

  • Using the add new event Block in the bottom.
  • Using the Left hand block infront of the rows (this will create a new event below the row. Also, will present with other options like adding events and other event types, all created under the row used to initiate the action)
  • Right Click context menu

-(Also using the ribbon which is by default)

The bar under the rows (event side) will add a new condition and shift-clicking the bar will create a sub-event. :slight_smile:

The problem is that it seems that it’s easier to add a sub-event than an event.

When you start a new project, the project is automatically saved under a project name. However, the “Choose a file for the project:” is overlooked extremely easily.

I was messing about with the editor and created new projects a bunch of times, not realizing it’d create the project path right away before I even decided or not whether I wanted to save whatever I was going to start. My Projects path is now filled with thirty-odd “New Project ##” folders.

Possible alternatives:

  • Show a second step in the “new project” wizard where you can set the name and path. This also provides the opportunity to set the other project properties right away.
  • You could possibly not save the project from the start, but only when the “save” option is used for the first time.

Then, there is a problem with picture relative paths (as GDevelop uses relative paths to images).

I figured that might be an issue. Then from a temp path until it’s saved, or the two-step wizard thing (which seems the better of the two anyway)? :slight_smile:

I got another usability thing:

Whenever you create a new object, you see a special window with settings for that specific type of object. For example, a sprite will show the “Edit the sprite object” window.

Then, when you’re done, you’ve clicked OK, and your object is placed into the scene, it suddenly becomes unintuitive to get back into this screen: double-clicking it gives you the properties window, and you have to study the properties window a bit and find the “General object properties - click to edit” fields in order to get back into this window. That’s a lot of steps for getting to a rather important window.

Possible alternatives:

  • Show an “Edit this object” item in the context menu
  • This requires some polling/analytics, but do most people have the Properties window open somewhere by default anyway? Because if that’s the case, maybe double-clicking could show this behavior.
  • Related to the previous thing: when a properties window is open, make a double-click open the “Edit the X object” window.

I failed to mention that you’re doing very nice work with this program, by the way. As you can tell I’m still seeing some issues, but it seems to be pretty far along already. :slight_smile:

I have a few small usability things that I noticed while using it, that could possibly be improved:

There is a little arrow below “Open”. When I click it, the only thing I see is “Open an example”. I expected it to have the list of “recently opened” files too, but that’s only available in the File menu.

After having opened an older project, there is no clear indication that it is happened (mainly because the File menu is, at that point, still obscuring the left panel’s content). It would be nice if info about the scenes you were working on is saved in the project file, so it just opens the scenes in new tabs right away.

The “Add automatism” window is very small: you cannot read the full description of the items in the list. It looks like this for me:

Same for the Variables window: it is so small you don’t even get to see the initial value field.

Finally, and this is probably a Linux-only issue: the default path that is shown in the “Open” dialog is always /opt/gdevelop. When opening a project, this should really be “/home/username/GDevelop Projects” and when opening an image or anything else it might be better to start in the specific project folder.

One tiny bit of change I’d like in the desktop version of the app to make production easier:

I usually render my sprites at high resolution so that I don’t have to keep re-rendering them depending on needs. But for prototyping / testing especially, I just use high-res sprites and resize them in-game, because it saves me time. However, doing so in GDevelop will likely change the aspect ratio because it doesn’t seem to have a “snap” function anywhere (I tried hitting Alt / Shift / Ctrl, but they wouldn’t work). Nor would the snapping in rotation would work for me.

Would you be able to implement such a mechanism? Almost every other software has the feature to lock aspect-ratio while scaling, or snapping while rotating, so I can’t imagine why this shouldn’t.

Thanks! :slight_smile:

Sorry for double-posting, there’s some more things I’d like in GDevelop that would really help out in making more complex projects:

Organizing Animations

This would make complex animations MUCH easier. Basically, each object can have all the sprites needed to animate throughout the game. HOWEVER, there should be a mechanism to group those sprites into Actions, such as running, jumping, shooting, back-flipping, etc. This would be great if you have like 500 sprites per object, and you really need to focus on one action at a time instead of shuffling through hundreds “sprites” instead. I’m not entirely sure if Construct 2 does it, but OpenBOR’s text system can organize sprites to action, so that each time an event occurs you only call that specific action you need.

Organizing Events

Basically, simplifying the events system. I know, you guys are working on making a better UI for it, and I can’t wait for it. But there might also be a need to organizing events systematically by group so it’ll be easier to debug or find them when working on more complex projects. Perhaps “per object” or something like that?

I dunno, I’m just a non-programmer with just a tiny bit of programming experience (with HTML and CSS, etc.) and looking at an endless list of codes / events with no idea where to look really scares tha bejeezus out of me. :laughing:

The order of the event can have an importance to how the game run so we can’t just sort the events. :wink:

That’s okay, and I can see why this format would ensure stability of game. I’m just talking from the “front-end” position, where it should be easier to organize the events / code but not necessarily “change” the order. One example off the top of my head would be having a tag-system, where if an event is associated with – say – a character, then you’ll find that event every time you type the character’s name in a search bar (or right-click the character and view “Associated Events”) instead of reading through a list of events. :slight_smile:

Can you explain it? Because it sounds like ordinary animations :confused:

It’s a nice practice organizing the events by yourself while making the game. For example try to encapsulate all the events related to the character in a Character group, so when you have to add a functionality or found a problem, just need to check this group (if the problem is related to interaction with other object, you will have to check this object group as well) :wink:

Auto zoom sprite preview
When working with pixelart it is hard to differentiate the tiles from each other because they are displayed at 100% zoom.
It would be nice if the preview would enlarge the sprite to fill the whole preview area.

Example with 16x16px tiles:

Added, will be available in next version (pressing Shift while resizing will lock aspect ratio, or when rotating will ensure that the angle is a multiple of 45) :slight_smile: