Scirra cog

About Us

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


Browse all our blog posts

Latest Blog Entries

We love brains!

Join us! Joiiinnn ussss! Mooooree brains!

Live previews in the Construct 3 editor

by Ashley | 9th, February 2017

We've got a great new feature to share with you today: Live Previews are a new way to quickly preview the effect of various plugins and behaviors directly in the editor, without having to preview the entire project. This makes it far quicker and easier to get the results you want. Let's take a look at what you can do with Live Previews with some videos to show it in action!

Real-time particles preview

Using Live Preview, you can preview a particle effect and edit it in real-time and immediately see the effect of changing the settings! This basically provides a real-time particle editor right inside Construct 3. Here's a quick video showing how it works.

This makes it super quick and easy to get the effect you want. You can just click the new Preview checkbox, and the particle effect starts running. As you edit the properties, the particle effect updates accordingly. We only changed two properties in this demo, but it works with all of the particle effect properties. You can also see in the video the new ability to smoothly drag values up and down — in this case altering the spray cone smoothly. This works particularly well with live previews, since you can move through a range of values with instant feedback.

We didn't stop there though!

Sprite animation preview

You can use the same feature to preview Sprite animations. This runs through the initial animation like you'd see previewing it in the Animation Editor, but animating the object in the Layout View instead. Here's a quick video showing how it works. This time we animate two Sprites at once by using the Layout View's option to start all Live Previews at once. Remember this is in the Construct 3 editor, not at runtime!

Sine behavior previews

Particles and animations are a good start, but we wondered: what else would it be useful to see in real-time in the editor? The Sine behavior is handy for simple cyclic effects, so we added a preview mode for it as well. Here's another video showing what it looks like in the editor.

You can even drag around the objects and make other edits to the project while these Live Previews are running. This makes it straightforward to get everything to line up perfectly.

Shadow casting previews

Another useful case is previewing ShadowLight objects, which cast shadows off objects with the ShadowCaster behavior. This means you can set up your lighting just right from the editor itself. As the video below shows, everything updates in real-time as you move lights around.

Putting it all together

You can run all the Live Previews in a layout simultaneously, often giving a good indication of how things will look at runtime. To demonstrate, we've taken the title screen of The Next Penelope by Aurelien Regard (which we showed previously) and started all the live previews. The results can be quite beautiful.

Other Live Previews

We also added a Live Preview for the Fade behavior, so you can preview the fade timings and opacity changes in the editor. Finally for completeness we added it to the Rotate behavior too, so you can preview the rotate speed and acceleration of an object.

Where it makes sense, we'll also add Live Previews to any new behaviors we add in future. Third-party plugins and behaviors will also be able to access the same features, so other developers can make use of this too.

Don't forget we have more updates on the way — we've planned to keep feature updates like this one coming all the way to the start of the public beta around April. So check back soon!


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



sbucci 4,923 rep

nice feature!

Thursday, February 09, 2017 at 11:59:46 AM
RedStarZOn 451 rep

Great news guys. Can't wait to see more :)

Thursday, February 09, 2017 at 12:00:18 PM
XpMonster 14.8k rep

Please just take all I have and give me this engine in return ;)

Thursday, February 09, 2017 at 12:00:42 PM
martdsam 3,443 rep

Very good! Congratulations!

Thursday, February 09, 2017 at 12:05:04 PM
LolindirLink 4,915 rep

that's looking pretty darn good!
quick question: is/will there be a keyboard shortcut to save even more time? ^^

Thursday, February 09, 2017 at 12:05:21 PM
sizcoz 7,335 rep

Good Time saver !

Thursday, February 09, 2017 at 12:06:32 PM
velcroJoe 4,951 rep

This is a great feature! It's always been a bit of a hassle to edit particle effects. Excellent!

Thursday, February 09, 2017 at 12:10:49 PM
cjbruce 18.8k rep

Looks great! Will third-party plugin developers (LiteTween in particular) be able to implement live previews as well?

Thursday, February 09, 2017 at 12:12:09 PM
federer365 1,859 rep

Still waiting for a $99 USD/year feature...

This seems mostly like a gimmick.

Thursday, February 09, 2017 at 12:12:58 PM
playtingz 825 rep

WYSIWYG (What you see is what you get) taken to the next level. A visual authoring tool, becoming even more visual! Sweet!

Thursday, February 09, 2017 at 12:13:27 PM
Psychokiller1888 4,610 rep

Good job on the preview

Thursday, February 09, 2017 at 12:13:32 PM
Tom 54.8k rep

@federer365 it's not a gimmick, will improve work flow (significantly for some games).

Thursday, February 09, 2017 at 12:14:40 PM
Waltuo 11.8k rep

Oh hell yeah! Great feature and this will make adjustments and fine tuning way faster & easier! Now where do I sign up for the alpha??? :D

Thursday, February 09, 2017 at 12:15:33 PM
Laurent 6,143 rep

Where do I sign ?

Thursday, February 09, 2017 at 12:15:52 PM
uboel 9,996 rep

Nice feature also...go on like this and you'll finally convince me to make games for a living so I can afford the 99USD/year! ;-)

Thursday, February 09, 2017 at 12:20:33 PM

Leave a comment

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