csanyk.com

video games, programming, the internet, and stuff

GameMaker Studio 2 impressions: IDE/UI

The biggest change in GMS2 is the new IDE. Completely re-coded and largely re-designed, it has some things in common with the old IDE, but overall it has been re-organized and updated in many ways.

GMS2 IDE

Every form in the UI is dockable, and can be moved around into whatever layout works best for you. This is great. Even better, you can pop out any part of the IDE into its own window, which means that you can spread your IDE out over a few display screens if your computer is set up this way. GMS1.x didn’t play nearly so well on multiple displays.

The resource tree is probably the most familiar element of the new IDE. By default, YYG have positioned it at the right side of the screen, presumably to follow other development environments such as Microsoft Visual Studio. It’s a simple matter to drag it and dock it to the left side of the window if you prefer the GMS1.x way.

Workspaces

Probably the biggest change to the IDE is the introduction of Workspaces. These are tabbed regions where you can dock different forms, so you can organize your project in a way that makes sense to you. For example, if you have a set of objects that are related to each other, you may want to set up a workspace where those objects can be arranged together. You can have as many workspaces as you wish, and you can name them something meaningful. This helps greatly to reduce clutter, and should improve productivity as you can leave workspaces set up and switch between them at will, without having to re-arrange windows and forms all the time.

I love the idea, but after using them for a few weeks, I’m convinced they have some serious issues that need to be addressed.

Workspaces can get very spread out, and this implies scrolling a lot. There is a new shortcut, ctrl+T, which will help you navigate the project more quickly than scrolling:

Another navigational shortcut is to middle-click on a resource name in the code editor. Doing this will take you to the resource’s editor window.

A major problem with Workspaces is that the Workspace region only fills a small section of the GMS2 window. Dockable regions at left, right, and bottom make the Workspaces area relatively small compared to the size of a maximized window.

Inside the Workspace area, you have (potentially) multiple Editors open. Certain Editors use Chain View (see below) which spreads out the sub-editors visually, in a way that takes up quite a bit of space, and will all but certainly require you to scroll, both vertically and horizontally, in order to see the whole thing. Vertical scrolling can be done by mouse wheel, but horizontal scrolling is done by CTRL+Clicking in an empty region of the workspace and dragging, which is slow and awkward.

Another problem is the Dockable areas in the GMS2 window. These do not update contextually according to which Workspace you’re in, or what Editor you’re in. If you open the Room Editor in one workspace, the Room Properties will appear in the Dockable area at the left side of the GMS2 window. Switching to another workspace and opening up a Sprite, the Room Properties are still there in the left Dock, where they are useless for the current context, and serve only to distract and confuse, and take up valuable screen real estate that could have been used to present the Sprite Editor UI and/or provide a larger portion of the screen to display the sprite canvas. Fixing this should be a simple matter of showing/hiding the appropriate panels in the Docks for the current context you’re working in. Whichever editor has focus, its Dockable panels should be the only UI visible (apart from the Menu bar and Resource tree).

Maximizing an Editor should make it fill out the entire visible area of the Workspace. And whenever an editor has focus, its entire form should fit on one screen/workspace area without the need to scroll the workspace. I’m fine with a scroll bar within an Editor, for example if I’m in a really long code file in the Code Editor, or if I’m zoomed way in on an Image in the Image Editor. But I don’t want to have to scroll about the Workspace just so I can see from one end of an Editor to the other. I really don’t want to scroll around looking for different editors that are floating about in the Workspace. I would much prefer a tabbed interface where I can easily switch between tabs. Workspaces could be better implemented as groups of related tabs.

The worst part is when you go to open a code editor. The code editor is used in three situations: 1) when working on a Script resource; 2) when coding Events in the Object Editor, and 3) when editing Room Creation code in the Room editor. In the Object and Room Editor use cases, the Code Editor is chained to its parent editor. The code editor is almost never entirely visible in the visible area of the Workspace pane, meaning that very often the right and bottom of the Code Editor will be out of frame, and necessitate scrolling to see. So you’ll often be unable to see the ends of your longer lines of code, and the helpful code tips that appear at the status bar area in the bottom of the Code Editor will also be out of view. This is awful, and needs to be addressed. Code Editing is a primary activity in GMS2, and when doing it, the Code Editor deserves a maximized view, with minimal distractions surrounding it.

I believe the issues with Workspaces are fixable, but as they are now, they’re a bit of a disaster. I find that they make it easier to get lost, and I spend a lot of time flipping between them and scrolling, hoping to find what I’m looking for. They navigational shortcuts may be helpful, but they don’t come second nature to me, and so far I find that they’re so unfamiliar that I have to shift my mental focus form the programming task I’m working on to “how do I navigate to the bloody resource I need to look at?” which takes me out of “The Zone.” They make a 2048×1152 screen seem small and cramped.

Chain view

Another major new feature is called “chain view”. This is a new view for forms that have several sub-forms. For example, the Object editor has a main form that allows you to set the Object’s properties, and then if you add Events to an Object, these are managed in a sub-form that is chained to the main form. From there, Actions are in a sub-form that chains off of the Events sub-form, with a separate tab for each Event’s actions. This keeps related forms together, making it easier to see relationships between different open windows, and reduces clutter. They do spread out more, since the sub-forms do not overlap each other, and this takes some getting used to.

Menu and Tool bar

One thing that can be a little weird, and takes some getting used to, is the Menu bar. Depending on what form you have focus on, the Menus that appear in the main window’s menu bar will change.

For example, if you’re in the Image Editor, the main window will receive some Image Editor menus, to the right of the Help menu, and not in the Image Editor form.

Open the Image Editor, and some additional menus will appear in the menu bar.

Open the Image Editor, and some additional menus will appear in the menu bar.

This felt weird to me, at first, when the Image Editor is sharing the main window with whatever other forms you have open — I expected all controls specific to the Image Editor to be contained within the Image Editor’s form. However, if you break the Image Editor out of the main window and into its own window, it feels right.

Quick import your Asset files

Importing sound and image files into GMS2 is easier than ever. Just drag a file icon, or even a folder, into the resource tree, and the file will automatically be imported into the project, and a resource created for it.

Nice!

There is a lot more to cover in the IDE, but rather than make this article too long, I will be covering them separately in future articles focusing on the various Editors: Sprite, Image, Object, Room, etc.

Keyboard shortcuts

I won’t list them all (look in the manual, under Quick Start) but these are some of the most important/useful shortcuts, which everyone should know and use.

  • F5 – build and run the project.
  • Ctrl+T – Opens the Goto window to search the workspaces.
  • F2 – In the resource tree, rename the selected resource.
  • Ctrl+K – In the code editor, comments out the selected text. (Ctrl+Shift+K to un-comment.)
  • F2 – In the code editor, opens the code snippets menu.

Leave a Reply

csanyk.com © 2016
%d bloggers like this: