Scirra cog

About Us

We're a London based startup that develops Construct 2, software that lets you make your own computer games!

Archives

Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

UI improvements in Construct 3

by Ashley | 20th, March 2017

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.

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.

Container highlighting in Construct 3

Containers also now have a new selection mode.

Container selection modes in Construct 3

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.

Container selection mode 'All' in Construct 3

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.

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!

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.

You can type calculations like 1708/2 to halve a number, saving you having to reach for a calculator.

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.)

Editing long text properties in Construct 3

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.

Project Bar improvements

Now you can multi-select in the Project Bar! This makes it much quicker to rearrange items.

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.

Audio files in the Project Bar

There's also a new built-in audio player to help you quickly preview your sounds and music...

Audio preview in Construct 3

...a video player...

Video preview in Construct 3

...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.

SVG preview in Construct 3

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.

Floating Layout View window in Construct 3

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.

Popup Layout View window in Construct 3

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.

Multi-monitor display with Construct 3

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:

Promotional footer image for Construct 3
Now follow us and share this

Tags:

Comments

3
garrettmickley 1,084 rep

So excited; I can't even.

Monday, March 20, 2017 at 1:24:18 PM
3
djcrazypants 5,249 rep

Cool, I can't wait to see it. I've been using Phaser lately.

Monday, March 20, 2017 at 1:24:53 PM
3
XMatrix 615 rep

Super! Good job!

Monday, March 20, 2017 at 1:27:51 PM
6
AekiroStudio 1,853 rep

Super nice;
It would also be nice if you can add shortcut buttons (in the top bar for example) for the align actions (currently only accessibly via the contextual menu). This way, we can quickly align with one click instead of having to look for the action in sub-menus which is really annoying. Adobe software do this nicely.

Monday, March 20, 2017 at 1:34:48 PM
3
voulx 400 rep

Looking forward!

Monday, March 20, 2017 at 1:39:09 PM
3
Alemar 3,618 rep

Nice! I can´t wait!

Monday, March 20, 2017 at 1:42:42 PM
5
Windwalker 3,099 rep

I'm so happy about the multiple monitor thingie. Lots of the other stuff were becoming industry standard nowadays, so I'm happy C3 is on par with them on this regard as well. Such a wonderful job for a small team. It was definately worth the wait. The in-house export feature was all that I wanted, and now I've gotten much, much more than that. I'm so eager to test this thing out. Kudos!

Monday, March 20, 2017 at 1:50:20 PM
2
martdsam 2,209 rep

It may be that many people will say that these improvements should have already been applied in construct 2. However this would make construct 3 less interresting than it is, since these small and lovely details would not be new. Another detail is that perhaps construct 2 has not been built with the flexibility for all kinds of changes. Or the creators may have thought it was a waste of time to implement all this in construct 2, since everything was already planned for construct 3. Anyway, I'm looking forward to testing construct 3. Sorry if English is bad, I use the translator. :)

Monday, March 20, 2017 at 1:52:02 PM
4
cjbruce 9,664 rep

I love the object wrapping. In other environment, you can create subviews of superviews, and repositioning the superview brings all of the nested subviews with it. Not being able to do this in Construct 2 has been a pain whenever I do UI design. This new feature goes a long way toward solving this problem in Construct 3.

Nice work!

Monday, March 20, 2017 at 1:55:21 PM
2
TheMercifulGuard 379 rep

I can't wait any longer! This is bequeathing my soul with unequaled degrees of adrenaline!

Monday, March 20, 2017 at 1:55:40 PM
3
AstrologicMedia 911 rep

Cool features, can't wait to test!

Monday, March 20, 2017 at 1:59:14 PM
4
anty21ro 5,656 rep

This improvements are making our life easier, good job :). I am waiting to see what improvements you've made to behaviors and plugins !

Monday, March 20, 2017 at 2:09:36 PM
3
martdsam 2,209 rep
I am waiting to see what improvements you've made to behaviors and plugins !
quoted from anty21ro

Behaviors and plugins ... It really is something that I am very curious to see the news.

Monday, March 20, 2017 at 2:14:35 PM
1
Fireburst 201 rep

I can't wait to test

Monday, March 20, 2017 at 2:23:55 PM
1
KENYONB 2,004 rep

Beta now!!!

Monday, March 20, 2017 at 2:34:02 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.