Feature Focus: the Layout View

We're starting a series of blog posts and videos where we occasionally highlight some of the best features of Construct. In this feature focus, we'll cover the Layout View. It's got everything from sophisticated level design tools to a live particle editor! Not all tools provide everything Construct has here, so it's worth a look if you haven't used Construct much before.

Level design

The Layout View is where you'll design levels, title screens, menus and more. You can double-click a space to add a new object, or drag-and-drop an image file in to instantly create a Sprite.

Objects can be selected by clicking them, or dragging a selection box to select lots of objects. Then they can be moved, resized and rotated using the handles around selected sprites. You can copy and paste things, Control+drag to clone, and pan and zoom with the mouse. If you can make a presentation, you can design a game!

A selected sprite in the Layout View

Every object can be adjusted to have its own unique position, size and angle. In fact all its properties can be unique. Plugin properties like the initial animation and frame, instance variables like the starting health, behavior parameters like bullet speed, and effect parameters like a hue rotate can all be set for individual instances, allowing full control over the initial state of the level. And those effect parameters are previewed so you can see exactly how will look!

Three sprites in the Layout View with unique parameters for an 'Adjust HSL' effect

While every instance can have its own properties, you can still select lots of things and set all their properties in one go as well.

Layers

You can add multiple layers to a layout to more easily manage content. For example you could have separate background, gameplay, foreground and UI layers, and lock or hide them individually so you can easily work with one at a time. Construct also has the Z Order bar to make sure the order of everything within layers can be precisely controlled, too.

There's no need for a special UI layer in Construct. Usually it's just a layer on top with a parallax of 0,0 so it doesn't scroll. That keeps everything simple and consistent, as there's just one kind of layer and everything works the same.

Layers are great for convenience, but they are also very powerful. You can add effects to individual layers. You can use sub-layers to organise layers like folders, as well as allowing more advanced and more efficient effects. See the Shadows: blending multiple lights example to see what's possible. You can also use global layers to repeat content across layouts, such as to repeat the same HUD across levels without having to keep copying and pasting it.

Templates

A newer feature that just came out is support for Templates. This lets you set up one instance as a template, and then create lots of replicas of it across your project. If you change the template, then all the replicas update too, making cross-project updates quick and easy. Learn more in the Templates section of the manual.

Much more

There's loads more features to help make your basic layout editing convenient and flexible! We're going to skip over things like wrapped selections, quick aligment and positioning, and all the keyboard shortcuts, and highlight some of the bigger things.

Tilemaps

There's also a full tilemap editor built in to the Layout View, perfect for designing your tile-based games. Use the Tilemap Bar to access editing tools for the Tilemap object. There's also full auto-tiling support with a Tilemap brush editor, supporting both 16-tile and 47-tile brushes, which can even be used for auto-tiling at runtime too - making tilemap updates a breeze! Try it out now in the Tilemaps example.

3D shapes

You can drop in a few 3D Shape objects and have an instant 3D appearance for your level design, opening up a whole new range of artistic styles for your game. And as you scroll around the Layout View, you'll see the 3D appearance too.

Using 3D shapes in the Layout View in the 3D Platforms example

Take a look at the 3D platforms example to see how it works. You can also go further and move the camera around in 3D at runtime - see our blog Explore new 3D features with Construct's 3D Camera to learn more.

Meshes

Objects like Sprites can be broken up in to a mesh and distorted by moving the mesh points. This even affects their collisions! This lets you do cool distorting effects, or use more fluid level designs.

Editing a mesh for a sprite in the Layout View

You can use this for all sorts of things including dynamic effects like cloth rippling in the wind, advanced particle effects, radial progress bars, advanced level design, and more. You can even adjust meshes in 3D as well! See our previous blog post Have you heard about Meshes? to find out more, or see the Mesh platforms example for an example of what you can do with it.

Live previews

Some objects like Particles have a Preview option. Check the box and it starts running directly in the Layout View! Then you can tweak your particle properties to get them just right without having to repeatedly preview the project. The ability to smoothly change values by dragging them vertically in the Properties Bar is also helpful. There's no need for a separate tool for it either, it just works directly in the Layout View, showing the effect in the context of your level design.

Other objects that support live previews include Sprite animations, Shadow Light for dynamic shadow casting, the Sine behavior for oscillating movements, and the Fade behavior.

Video summary

We've also got a video that shows many of these features in action! Check it out below.

Conclusion

The Layout View is deceptively simple. Starting with PowerPoint-style drag-and-drop simplicity, it's easy to jump in to level design. However it also has powerful features that help you add more advanced features to your games, including sub-layers, meshes, 3D shapes, and live previews which can act as a built-in particle editor.

This summarises our approach to making Construct: easy for beginners, simple to use, and yet packed with powerful features allowing for full creative expression. Like the sound of that? Get started with Construct today!