Stencyl 3: Some small, but important UI tweeks to the IDE

After a couple of months of really intense day to day work with Stencyl on personal projects and also within our company as a prototyping tool, I gathered some feedback and "feature requests".

The idea behind all of this is simple:

It doesn't matter how powerfull a tool is (or not), if it's not fun and easy to work with, it's not getting used. Don't add a function thats not easy to use. If it is to complicated, customers tend to find other ways and the investment in the development was a waste of time and money.

Overall:
I have no idea who's the UX and UI Designer of Stencyl, but he or she should consider changing the job (I am kidding, Jon!) But I have collected some more or less smaller tweaks who would help us game developers to make the IDE much more comfortable and more efficient to use, especially when the projects grow bigger.

• Even if the tool and the idea behind is mouse driven, introduce more keyboard commands. As larger screens / higher resolutions getting common this days, we benefit from this screen estate. But your mouse has to travel a lot. This makes the "development" harder than it should be (making the window smaller is a possible solution, but then you're loosing the screen estate you need for the code and scene designer).
• get rid of the gradients in bars and buttons. It costs time to render them and they look old fashioned
• rework the "signature" editor for custom events, allow to edit / add attributes and return types

In detail:

1. Events pane (left):

• Allow to sort the events by name
• Allow to sort the events by type
• A filter for event types (i.e. show only keybord events, or collisions, or timers...)
• If a event is selected and you create a new event, place this new event right after the last selected and not to the bottom.
• Complete the keyboard navigation for creation of events. At the moment, I can iniate the creation of an event <CMD-/> and select the group, but then I have to use the mouse to select the event I want to create.

2. Main Editor

• Allow code folding (as requested before, not an easy task, I know)
• Allow zooming of the "code" (fixed like 25%, 50%, and "fit to screen")
• Overview/Map/Navigator Widget to to right (where the trash is) that shows a overview of the code and helps navigating with larger code chunks
• Allow to select blocks, highlight them with a white outline
• Once highlighted, allow cursor navigation / cycling through the blocks, allow Enter/Return to activate input on textfields in a highlighted block
• Allow the user to change the font and -size of the blocks in the events pane and code and palette views
• Enable a "flat mode" that gets rid of the rounded corners and simulated 3d effect of the blocks. This makes nested code blocks easier to read, and increases the drawing speed and responsivness with larger chunks of code.

3. Blocks and attributes pane (right)

• Please relocate back the tabs "Palette", "Attributes" and "Favorites" above the seach bar. Place the the buttons Screenshot, Code Preview and the Gear-Menu also in this line. Get rid of the bottom bar (not needed anymore).  If you own a large screen, placing the buttons in the most bottom right corner isn't a good idea.
• Allow to tab and navigate through the blocks palette (see 2.4.), allow to press enter to add the current highlighted block to the current event (at the end). Very handy if you create new events and you know what you want to do (think of IF statements, maths, drawing ... )
• When creating new attributes in the attributes pane, create the attribute right after the current highlighted attribute or at the end if nothing is selected.
• When deleting attributes DO NOT AUTOMATICALLY HIGHLIGHT THE FIRST IN THE LIST. It is very easy to delete the wrong attribute by accident then (because you thought it's the last in the list).
• Allow to sort attributes by name
• Allow to sort attributes by type
• Allow to filter attributes by name (fragments)
• Allow to filter attributes by type
• Allow to drag (or on keypress-enter) an attribute as an getter block into the code pane  (implemented via getter / setter lookup via context menu)
• Allow to option-drag (or on keypress-enter) an attribute as an setter block into the code pane (implemented via getter / setter lookup via context menu)
• Favorites: allow to place favorites into the context menu (up to ten, marked by a star or so) to give direct access

4. Log/Debug window (now obsolete with the new log viewer)

• Break points would be great :-) (I know, this is not possible)
• Introduce either a Log-Level-popup or a switch that allows to toggle between output from Stencyl itself and from the game only.
• Allow to change the font/font-size for the log window
• Allow to change to toggle the display of the class names for traces between [full|classname only|none]. This gives less information in the output, allows smaller windows or more game related information
• Get rid of the build information in the window. Display this only on request of the developer (Switch?)
• Dock the window on the bottom of the IDE and allow the dev to undock it, like Eclipse/IntelliJ or the inspector windows in Safari or Chrome. It's boring to close the window after each launch to access the Stencyl IDE behind.

[/s]
[/list]

5. Scene Editor

• Remember the size of the right assets pane (Tiles, Actors, Layers)
• In the actor pane, implement a popup / selector for either Actor Groups or Folder, if any created.
• Launch current scene by keyboard shortcut
  
  • Allow to change the color of the grid and screen bounds. (Color is now inversed color of background)
  
  6. Dashboard
  
  • Allow to organize games into folders like all other assets
  
  So, let me know what you think
  
  /dripple

[/list]

I've stickied this, so I don't lose track of it. Justin's been keeping track of a lot (years worth) of smallish suggestions like this in a doc, so we're going to peek and see what's already been said before and what's new. Thanks!

Thanks, Jon.

This is done now.

3. When creating new attributes in the attributes pane, create the attribute right after the current highlighted attribute or at the end if nothing is selected.
4. When deleting attributes DO NOT AUTOMATICALLY HIGHLIGHT THE FIRST IN THE LIST. It is very easy to delete the wrong attribute by accident then (because you thought it's the last in the list).

And now this one too:

If a event is selected and you create a new event, place this new event right after the last selected and not to the bottom.

Awesome, Captain. Good ones!
Updated the initial post to reflect the changes.

I'm also really happy about the inserting of new attribute after current selection. Makes it so much easier to keep the attributes organized.

Small tweak: Now the last attribute is selected when opening a behavior (so that new attributes are still added at the end, if the selection isn't changed).

I'm also really happy about the inserting of new attribute after current selection. Makes it so much easier to keep the attributes organized.

How much work is it to make the list sortable, using the column header like in other apps? That would be perfect solution.
(i.e. I organize my attributes with canonical names, so I can group them.)

Not sure how difficult it would be, it also depends on the following: Would you expect it to affect the ordering in the configure page of the behavior (the page where you choose values of non-hidden attributes, when you attach the behavior to an actor/scene)?

I think it would be more natural if the order in the configure page would not be affected by the sorting, since you normally would want them to be sorted there by in a certain way, like the most important attributes on top, and related ones next to each other.

 

By the way, do you still have a need for this one?

Allow to change the color of the grid and screen bounds.

The color used to be black in the beginning, but now it is the inverse of the color in the back, so it is well visible in all situations. I think that's a cleaner solution than a configurable color.

You're  right, that sound like a more efficient solution.

Allow to drag (or on keypress-enter) an attribute as an getter block into the code pane
Allow to option-drag (or on keypress-enter) an attribute as an setter block into the code pane

Not quite the same, but close: you can now right-click on an attribute and chose Find Getter/Setter in Palette to quickly get to the blocks.

- It would be useful when you create a new attribute also to be able to fill it's description in that pop up.
- To have a description field for game attributes.
- To be able to create folders to organize the games in Welcome Center.

- To be able to create folders to organize the games in Welcome Center.

+1 for this one as well. I requested it a long time ago but got no useful answer

Not sure how difficult it would be, it also depends on the following: Would you expect it to affect the ordering in the configure page of the behavior (the page where you choose values of non-hidden attributes, when you attach the behavior to an actor/scene)?

Yes, only the pane itself, as the ordering might change on the needs of the dev during the development phase. The configuration is more like a dialog and shouldn't change (I think it's the order of creation).

Sorting itself could be indicated by arrows like all other table sorts you now. The only question: where to put a "display non sorted" (i.e. the natural sort like now)