Skip to main content

Using the room editor

January 22, 2022

Using the room editor

Rooms are the spaces where your actual game happens. A room can represent a level, a menu, a UI widget, and is a place where you place your copies (instances of your templates), backgrounds, and tiles. Knowing how to use it to the fullest will ease the level design process.

As of version 3.0, room editor has five tools located in the left panel:

Room editor's toolbar

Moving around:

Tips

If you get lost, you can press H key to return to the center of your level and reset zoom. You can also find this command in the zoom dropdown:

Reset view command in the zoom menu

Adding copies and tiles

Tools for adding new copies and tiles have pretty similar functionality.

Working with tiles

To work with tiles, you need a texture that is setup properly — make sure that you've set a proper frame size and the count of columns and rows in your tilesets. In any way, any ct.js texture can work as a tile, even if it has just one frame. You can use it to place static decorations inside your rooms.

Here is an example of a properly set tileset:

An example of a properly set tileset

To start working with tiles, press the "Add tiles" tool in the left toolbar of the room editor and press the "Find a Tileset" button. Make sure you have a tile layer — they are listed right under the selected texture. If you don't have one, click the "Add tile layer" button and input its depth.

Then select a tile on the texture you've imported and place it inside the room with a click. You can also select multiple tiles by pressing and dragging your pointer across several frames. After that, draw with tiles with your mouse.

Tips

Remember that each tile is placed on a tile layer of a particular depth — placing every tile on an arbitrary depth level is not possible.

Creating a ton of layers is also not recommended, because 1) it is dumb, and 2) each tile layer caches its contexts to boost rendering performance, and if you do use tons of layers, it nullifies the performance boost and worsens the situation with RAM.

Selection tool

Selection tool is probably the most powerful creative instrument in the room editor — it works sililarly to image editors, as you can reposition, rotate, scale, and even recolor multiple entities at once.

When the select tool is active, drag your mouse around copies or tiles to draw a rectangle and select them. You can also select individual objects by clicking on them.

Tips

You can change which entities are selected, and which are ignored, by toggling them next to the "Select:" heading.

When you have something selected, a rectangle with several colored handles will appear:

While working with the scale handles, you can use these modifier keys:

While rotating objects, hold the Shift key to rotate by a muliple of 15 degrees.

You can also change values in the properties panel on the left, but note that contrary to the selection frame which transforms everything as a group, the properties panel changes values for each object individually.

Adding backgrounds

Backgrounds are added in the fourth tool of the room editor. Inside it, there is a button "Add a Background" that opens a texture selector. There are several things to consider while using backgrounds:

You can change background's texture by clicking on the current texture. Other properties are hidden in a panel that you can open by clicking the ⚙ cog icon.

Open the background settings by clicking the cog icon

UI tools

This panel tweaks the look and position of copies, and is mainly used to configure elements of graphical user interface. UI tools have different contents depending on which copy is selected.

These tools can:

Auto-align tool

The tool is enabled with a checkbox, and only works for UI rooms. (You can change the type of the room in its properties panel.)

Screenshot of the auto-align tool

The tool has three editable charts, that describe the position and padding of the frame you reference to, and how you align the copy relative to this frame.

The charts are:

Tip

Once you've changed your room to be a UI layer, you can test the auto-alignment settings by changing the room's viewport dimensions.

If you want to align a copy relative to the viewport's edges, you can skip the first two charts. But with them, for example, you can align a copy relative to a column that occupies 50% of the screen.

Consider this horrible tasteless example:

A UI interface with questionable design choices and a split UI layout, with a panel occupying a left side of the screen with buttons inside it

The panel that is underneath the buttons occupies exactly 50% of the screen. Its alignment frame has default settings, as it is positioned relative to the viewport, and its constraints lock top and bottom sides, so there is no gap, and horizontal constraints are disabled, so the panel stretches with the viewport and continues to cover exactly 50% of the screen.

The buttons will have to be positioned relative to the panel, so their frame position is set to 0;0 – 50;100. This makes the outer frame match the panel. (Note the frame with a # symbol.)

The panel also has padding, so we add that padding to buttons' frame padding. The outline inside the panel will show the resulting reference frame for the buttons.

All the buttons have horizontal constraints so they stretch horizontally nicely. Top buttons have top-side constraints, and the bottom one has bottom-side constraint. This makes them stick to top and bottom sides of the panel respectively.

Bindings

Bindings are used to automatically change properties of copies once the value in the binding expression changes. This can be used to make dynamic text labels without having to create a separate template, or to, say, change button's color when certain conditions are met.

Bindings must be written in JavaScript. For example:

Room properties

The "Properties" tab of the room editor has options for render and camera tweaks.

Additional tools

There are several additional tools at the top bar of the room editor.

Top toolbar of the room editor

Hotkeys