Live previews in the Construct 3 editor

2
Official Construct Post
Ashley's avatar
Ashley
  • 9 Feb, 2017
  • 657 words
  • ~3-4 mins
  • 4,517 visits
  • 0 favourites

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.

https://www.scirra.com/images/c3/particles.mp4

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!

https://www.scirra.com/images/c3/spriteanimations.mp4

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.

https://www.scirra.com/images/c3/sinbehavior.mp4

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.

https://www.scirra.com/images/c3/shadowcasting.mp4

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.

https://www.scirra.com/images/c3/penelope.mp4

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!

Catch-up

Missed our earlier announcements? Here's a list of all the news about Construct 3 so far:

Subscribe

Get emailed when there are new posts!