Simple mode and Full mode

What each mode of the editor 0.4.0 shows, how to switch between them, the light and dark themes, the three ready-made layouts and how to dock, hide and resize the panels.

DescribesEditor 0.4.0 For creating without programming

On this page

Simple mode
Full mode
Switching modes
Light and dark theme
The three layouts
Docking and hiding panels
Changing the sizes
Resetting
What is saved and where
Next

The editor has two modes. Simple shows the essentials for making a game. Full shows every tool. The project is the same in both: what you do in one is there in the other.

Simple mode#

It is the mode the editor opens in the first time.

Where	What is there
Top left	The arrow back to your games, the project name, undo and redo.
Top right	Play with its dropdown, Test with bot, Export, the Simple / Full switch, the theme, the help and Settings.
Left	Place pieces.
Center	The tabs for the scene (principal), the script (principal.ts) and the Game card, and the viewport with a short toolbar.
Right	The Rules, Assistant and Details tabs. In a blocks project, the first one is called Blocks: see Blocks mode.
Bottom	Problems, Console and Test bot. They appear only when needed: when you test with the bot, when you play or when there is an error.

In Simple mode the viewport toolbar has fewer controls: the four tools, snap to grid, duplicate, group, delete, Editing | Game and the view type. Over the viewport you keep the camera view, the helpers and framing.

The panels in Simple mode are fixed: they cannot be hidden or moved.

Full mode#

It adds the main menu, the search box, the main toolbar with the layouts, the tool strips with the eleven panels, the breadcrumb and all the viewport controls. It is toured area by area in A tour of the editor.

Switching modes#

Way	Where
The Simple / Full switch	Top right, always in view.
`Ctrl`+`Shift`+`M`	At any time.
The mode cell	In the status bar, bottom right.
Editor interface	In Settings.
View > Full mode	In the main menu of Full mode.

The editor remembers the mode: next time it opens in the one you left it in, for any project.

Light and dark theme#

The editor opens with the dark theme. To switch to the light one press the sun button, top right, or Ctrl+Shift+L. It is also in Settings, in the status bar and, on the home screen, in the sidebar. The code editor changes along with the rest.

The editor in Full mode with the light theme: the same project, with Place pieces on the left, the viewport with the yard in the center, Outline and Details on the right and the Content browser at the bottom, all on a light background; the theme button now shows a moon — The light theme. The status bar says Light.

The theme is remembered too.

The three layouts#

A layout is an arrangement of the panels designed for one task. In Full mode there are three, on the main toolbar.

Layout	Shortcut	What it leaves in view
Scene	`Ctrl`+`Alt`+`1`	The viewport in the center. Place pieces on the left, Outline and Details on the right and the Content browser at the bottom.
Code	`Ctrl`+`Alt`+`2`	The script in the center. Project on the left, Assistant on the right and Problems at the bottom.
Test	`Ctrl`+`Alt`+`3`	The viewport in the center, Rules on the right and Test bot at the bottom. The left side stays closed to leave more room.

The Code layout: the Project panel on the left with juego.json and the folders escenas, scripts, recursos, pruebas and editor; the principal.ts script in the center; the Assistant on the right; and at the bottom the Problems panel, which says No problems: the game meets the Green Games format — The Code layout.

The Test layout: the viewport with the game's yard in the center; on the right the Rules with the Match and five rules; at the bottom the Test bot panel with Test passed 6/6 and one row per match — The Test layout, after a test with the bot.

The other panels do not disappear: they are still on the strips and in the tabs of each zone, one click away.

Docking and hiding panels#

There are four dock zones: Left; Right, top; Right, bottom; and Bottom.

To send a panel to another zone:

Right-click the panel's icon on the strip, or its tab. The three-dot button of the zone works too.
Under Dock to, pick the zone. The one it has now carries a check mark.

The Dock to menu open over the Details panel, with the options Left, Right top, Right bottom, which has the check mark, and Bottom, and below them Hide panel and Reset layout — A panel's menu: which zone to dock it to.

To show or hide a panel:

Click its icon on the strip, or use its shortcut (Alt+1 to Alt+0).
The dash button, to the right of a zone's tabs, hides the panel in view.
Hide panel, in the same dock menu.

If a zone has several panels, each one is a tab: click the tab to see it.

Changing the sizes#

Between the zones there are dividers. Drag one to give a zone more width or height. If the divider has keyboard focus, the arrow keys move it. A double click returns it to its original size.

Resetting#

Reset layout (Ctrl+Alt+0, the circular arrow button on the main toolbar, or any panel's menu) undoes your changes and goes back to the layout you started from: Scene, Code or Test.

What is saved and where#

What	Where it is remembered
The mode and the theme	In the editor's settings. They apply to every project.
The layout: which panel goes in which zone, which one is in view and how big each zone is	In each project. One game can open in Code and another in Scene.

Next#

A tour of the editor: each area of Full mode.
Your first game: the tutorial, in Simple mode.
Shortcuts: all the keys.