Creating Your First Level

This guide walks you through creating a simple textured room and viewing it in 3D using the Runtime Editor. Entities are covered separately and are not required for this tutorial.

1. Create a New Level

Open Project Settings using the button in the bottom-right corner of the Map Editor.

Select Create Level, enter a name such as FirstLevel, and press Create. The new empty level will become the current level.

Alternatively: Right click inside the Asset Browser, select "New Level" give it a name. Double click on it to open it.

2. Organise Your Assets

Before importing files, it is helpful to create folders for the different kinds of assets your project will use.

In the Asset Browser, right-click an empty area and select Create Folder. A simple project structure could include:

• Textures/ for wall, floor, ceiling, and background textures
• Sprites/ for sprite images
• Sounds/ for sound effects and music
• Scripts/ for Lua scripts

You can also create folders inside Textures/, such as:

• Textures/Walls/
• Textures/Floors/
• Textures/Ceilings/

This structure is optional. Tilky Engine allows assets to be placed in any folder inside the project’s Assets directory.

3. Import Your Textures

Open the folder where you want to store a texture in the Asset Browser. For example, open Textures/Walls/ before importing a wall texture.

Drag your .png files from your computer’s file manager and drop them inside the Asset Browser. The files will be copied into the folder currently open in the browser. If you wish to change the location of a asset you imported, you can drag it around directly in the asset browser

For this tutorial, import at least three textures:

• A wall texture
• A floor texture
• A ceiling texture

If the new files do not appear, press Refresh.

4. Select Sector Mode

To view the editor controls. Scroll to the bottom of this page.

Select Sector Mode from the top of the Editor panel. This mode contains the tools used to create rooms and other enclosed areas.

Before drawing, configure the grid:

• Set a suitable Grid Size. (Default is 12)
• Enable Snap to Grid to keep corners aligned.
• Enable Snap to Points if you want new geometry to connect to existing vertices.

Using snapping makes it easier to create clean geometry without small gaps between walls.

5. Configure the New Sector

Find the New Sector Properties section. These settings will be applied to the next sector you create.

Assign the textures you imported earlier:

1. Drag the wall texture from the Asset Browser onto the Wall Texture field.
2. Drag the floor texture onto the Floor Texture field.
3. Drag the ceiling texture onto the Ceiling Texture field.

Alternatively, double-click a texture in the Asset Browser and then click its corresponding texture field.

Set the sector’s heights. For a basic room, you could use:

• Floor Height: 0
• Ceiling Height: 40

The ceiling height must always be greater than the floor height. (The editor won't let you make the floor higher then the ceiling, so you don't have to worry about it)

You can also configure the wall, floor, and ceiling colours. White allows the original texture colours to appear normally. The sector’s light colour controls the colour of the lighting applied inside it. (This only affects the ceiling / floor and the entities inside. It does not affect walls)

6. Draw the First Room

Select the Rectangle drawing tool. Left click anywhere in the canvas this will start placing a rectangle. As you move your mouse, you can see the preview of the sector you are about to create. When you left click again, the sector will be created.

Once the rectangle is completed, Tilky Engine creates:

• A sector representing the room
• A floor and ceiling
• Walls around the sector’s boundary

You can also use the other drawing tools:

• Freehand creates a sector from individually placed corners.
• Polygon creates a regular shape with a chosen number of sides.
• Circle creates a rounded sector from multiple wall segments.
• Curve creates curved sections using smaller wall segments.

The Rectangle tool is recommended for your first room because it produces simple and predictable geometry.

7. Preview the Textures

Enable Texture View Mode to display the assigned textures directly on the Map Editor canvas.

If a texture does not appear, check that:

• The file was imported into the project’s Assets folder.
• The texture uses the .png format.
• It was assigned to the correct wall, floor, or ceiling field.
• The Asset Browser was refreshed after the file was added.

8. Edit the Sector

Right click on the sector on the canvas or choose it from the Sectors section of the Hierarchy.

Its Inspector will appear in the Editor panel. Use it to change the sector’s textures, colours, lighting, floor height, or ceiling height after it has been created.

Changes made under New Sector Properties only affect sectors created afterwards. To modify an existing sector, select it and use its Inspector.

9. Edit the Walls

Switch to Geometry Mode and select one of the room’s walls.

You can:

• Drag the wall to move it.
• Drag one of its square endpoint handles to move that corner.
• Edit its coordinates and other properties through the Inspector.
• Select multiple walls using Ctrl or Shift.
• Delete selected walls using Delete.

When walls share the same corner, moving that corner also moves the connected walls so the room remains joined.

Be careful when deleting or moving walls. A sector must remain a valid closed shape.

10. Configure the World

The World Settings panel contains settings that affect the whole level.

For a first level, you may want to:

• Set the level’s gravity.
• Assign a background texture.
• Choose a texture rendering preset.
• Adjust the global audio settings if required.

These settings are optional for a basic room.

11. Save the Level

Press Save in the Editor panel.

An asterisk next to the Editor panel’s title indicates that the level has unsaved changes. The asterisk disappears after the level is saved successfully.

Save regularly while working, especially before making large geometry changes. If you made a huge mistake and want to go back to the last time you saved, you can click the red "Shutdown" button or close the window itself. Doing this will force the engine to close without any safety checks or saving anything. 

12. View the Level in the Runtime Editor

Finish any sector currently being drawn, then press Runtime Editor in the Actions section.

Tilky Engine saves the current level before switching to the Runtime Editor. The Runtime Editor displays the level in 3D, allowing you to move around and modify sectors, walls and entities. The exact same menu appears for editing these things in the level editor and the runtime editor. The exact same asset browser also appears in the runtime editor.

Use the Runtime Editor’s camera controls to look around the room. If something looks incorrect, you can directly change it in the runtime editor. (Below are the runtime editor controls.) After you make your changes, you can close the window to go back to the level editor. Don't forget to press "Save" to save your changes.

The Runtime Editor is intended for editing a level while viewing it in 3D. Save and Play is used later when you want to run the level as part of the game.

Runtime Editor Controls

• WASD to fly around
• Hold Q and E to change your speed (Q +speed, E -speed)
• Left shift to go back to the default speed (50 units)
• Hold middle mouse to look around
• Right click to edit a thing (To edit a sector, right click on the floor/ceiling)
• You can drag and drop textures onto walls & and sectors
• When the mouse is on a wall, hold left click and drag the mouse around to move the wall's texture offset. Scroll middle mouse to change UV scale.
• When the mouse is on a sector, hold left click and drag the mouse around to move the floor/ceiling's texture offset. Scroll middle mouse to change its height

Editor Controls

General

• Hold the middle mouse button and drag to move the camera.
• Scroll the mouse wheel to zoom in or out.
• Press + or - to zoom in or out.
• Zooming is centred around the mouse cursor.
• Press Q to cycle between Geometry, Sector, and Entity modes.
• Press F to centre the camera on the selected item.
• Press Ctrl+Z to undo the most recent supported action.
• Press Delete to delete the selected sectors, walls, or entities.

Canvas controls are disabled while the mouse is interacting with an editor panel.

Geometry Mode

Geometry Mode replaces the old Dot Mode. It is used to select and modify walls and their endpoints.

• Left-click a wall to select it.
• Left-click and drag a wall to move it.
• Drag one of the square endpoint handles to move that corner.
• Moving a shared endpoint also moves the other walls connected to it.
• Hold Ctrl and left-click walls to add or remove them from the current selection.
• Hold Shift and left-click another wall to select a range.
• Drag a wall that is already part of a multi-selection to move all selected walls together.
• Left-click empty space to clear the wall selection.
• Press Delete to delete all selected walls.
• Press F to centre the camera on the primary selected wall.

Wall and endpoint movement follows the current Snap to Grid and Snap to Points settings.

Sector Mode

Sector Mode is used to create sectors and edit their properties.

• Left-click on the canvas to use the currently selected drawing tool.
• Right-click a sector when no drawing is in progress to select it and open its Inspector.
• Right-click while drawing to undo the last vertex placed.
• Press Escape to cancel the current shape.
• Press Enter to confirm the current shape when the selected tool supports manual confirmation.
• Press Backspace to remove the last point placed during the current drawing.
• Press F to centre the camera on the selected sector.
• Press Delete to delete the selected sectors.

The number keys select drawing tools:

• Press 1 for Freehand.
• Press 2 for Rectangle.
• Press 3 for Polygon.
• Press 4 for Circle.
• Press 5 for Curve.

When using the Polygon tool:

• Press [ to reduce the number of sides.
• Press ] to increase the number of sides.

Freehand Tool

• Left-click to place each corner.
• Press Backspace to remove the last corner.
• Press Enter to complete the sector once enough corners have been placed.
• Right-click or press Escape to cancel it.

Rectangle Tool

• Left-click once to place the first corner.
• Move the mouse to preview the rectangle.
• Left-click again to create it.
• Right-click or press Escape to cancel it.

The Polygon, Circle, and Curve tools also use left-clicks to place their required points. Follow the preview and instructions displayed in the Editor panel.

Entity Mode

Entity Mode is used to place and move entities. Entity creation and configuration are explained in a separate guide.

• Left-click an existing entity to select and move it.
• Hold the left mouse button while moving the cursor to drag it.
• Left-click empty space to create a new entity.
• Right-click an entity to open its Inspector.
• Press Ctrl+C to copy the active entity.
• Press Ctrl+V to create a copy of it.
• Press Delete to delete the selected entities.
• Press F to centre the camera on the active entity.

Hierarchy Controls

The Hierarchy can also be used to select level objects.

• Left-click an item to select it.
• Hold Ctrl while clicking to add or remove individual items from the selection.
• Hold Shift while clicking to select a range.
• Right-click a sector, wall, or entity to open its context menu.
• Press the X beside the search field to clear the current filter.

Selecting an item from the Hierarchy automatically switches the editor to the appropriate mode.