We've covered a number of new user interface (UI) features already, such as new editors and the new Image & Animation Editor. However there's a raft of smaller improvements in Construct 3 aimed at making the editor easier and more fun to use. Putting together many of these smaller changes can add up to a big overall improvement to the experience. Some of these also include future plans on how they can be extended even further. So here are some of the UI improvements we've made.
Layout View improvements
The Layout View now zooms in to the mouse rather than centered. It can now also zoom out to 1% which is useful for very large layouts. Scrolling with the mouse wheel, or by dragging to the edge, is now smoother than in Construct 2 as well.
Rotating objects has been changed. Construct 2 used a small rotate handle that could be fiddly to use. In Construct 3 you can rotate an object by dragging the mouse just outside any of the eight resize points.
https://www.scirra.com/images/c3/layout-rotate-tool.mp4
Container improvements
We want to make containers a more useful way to build composite objects. That means combining lots of small objects to make a larger object, which you can then use as if it were still a single object. Here are some of the steps we've made towards this.
When you select an instance in a container, the other instances in the container highlight in yellow.
Containers also now have a new selection mode.
Normal mode acts like it does in Construct 2: you can continue to select instances individually as if they are still separate objects. (The highlight is applied, but doesn't change how it works.)
All mode means all the instances in the container are selected together. This makes the container act more like a single object in the layout view, making it quick to drag around related objects. Below shows what happens when either object in the container is selected, with both instances in the container becoming selected.
Wrap is like All but it also wraps the selection. This means the objects are truly manipulated as if they are the same object: they move, rotate and scale as one.
https://www.scirra.com/images/c3/container-wrap.mp4
With this extra integration of containers in to the Layout View, it's much easier to use composite objects. We have lots more ideas on going even further in this direction, so extra features in this area should be coming in future.
Properties Bar improvements
We've made a number of improvements to the Properties Bar to make it easier to interact with. First of all you can now smoothly drag values up and down to change them. This works with any kind of numeric property!
https://www.scirra.com/images/c3/dragging-prop-values.mp4
This also works great with Live Previews, allowing instant feedback.
You can also see in the clip above that object sizes can be edited as a percentage. This is useful for getting exactly the right number of tiles with the Tiled Background object.
We've also made a number of improvements to the kinds of properties you can use. There are now easier-to-use one-click drop-down lists and checkbox properties and new spinner controls. These all come together nicely with Sprite's animation properties, which now includes a drop-down list of animations and an animation frame spinner.
https://www.scirra.com/images/c3/properties-animations.mp4
You can type calculations like 1708/2 to halve a number, saving you having to reach for a calculator.
https://www.scirra.com/images/c3/properties-calculations.mp4
Potentially long text properties like the project description now have a button to edit in a dialog. This is particularly useful with the Text object's initial text. (You can also double-click Text objects to bring up the initial text editing dialog as well.)
Finally, properties are now disabled when inapplicable to make it clearer what you can edit. For example the layer background color is disabled if you make the layer transparent, which helps identify that the background color is not used when it's transparent. Applying this throughout the editor makes it less confusing and more accessible to beginners.
https://www.scirra.com/images/c3/properties-disabling.mp4
Project Bar improvements
Now you can multi-select in the Project Bar! This makes it much quicker to rearrange items.
https://www.scirra.com/images/c3/projectbar-multiselect.mp4
Audio files often come in multiple formats to ensure cross-browser compatibility. To make this easier to manage in the Project Bar, files are represented by a single item, with their different format variants as sub-items. This makes the list a lot shorter to scroll through, while still allowing access to every type of file.
There's also a new built-in audio player to help you quickly preview your sounds and music...
...a video player...
...and an SVG image preview. SVG can't currently be used in the game itself, but we hope to expand on this in future, and it serves as a way to view any SVG content you may be bundling for other purposes like documentation or web content.
We also covered previously the web font preview and data and text editors, both of which can be used to view and edit content in the Project Bar.
As one final bonus, you can now also search through the Project Bar by typing. For example if you focus the Project Bar and start typing "Player", it will find the matching item in the Project Bar and select it. This provides a quick and intuitive way to find any kind of item in a large project. We also added this to the Layers Bar just in case you have a lot of layers!
Windowing and multi-monitor improvements
Construct 2 had a fairly limited split-screen capability for Layout View and Event Sheet View tabs. In Construct 3 these editors are as flexible as any of the other bars in the editor. You can use them in split-screen views like you could in Construct 2. However you can also undock a Layout View or Event Sheet View and have it as a floating window.
You can even open editors as popup windows and use them outside the browser window — even on other monitors! This was not possible in Construct 2. Here's what the Layout View looks like in its on popup window.
Then you can drag that to another monitor for multi-monitor project editing — right from the browser! Here's my office setup with dual 2K displays showing the Layout View on its own display on the right, with split-screen Event Sheet Views on the left.
So there you have it — better multi-monitor support than Construct 2, from a web browser.
Conclusion
Some of these changes may sound like trivial details or small tweaks. However we recognise that with day-to-day usage of Construct 3, many smaller improvements adds up. It reduces friction and makes it quicker and more rewarding to get things done. We've worked to add in many changes and improvements like these all the way through the editor to improve the overall experience of using Construct 3. This also includes many improvements in event sheets as we covered earlier. Some features also benefit more specific user groups, like the improved multi-monitor support working better for power users, or helping beginners by only enabling the relevant properties. Put together, these changes make Construct 3 feel better to use overall, with a clearer and more intuitive interface.
We'll also soon be starting the public beta so you can try out everything for yourself. Not long to go now!
Catch-up
Missed our earlier announcements? Here's a list of all the news about Construct 3 so far: