Code
The code editor of the editor 0.4.0, with the Code layout, the Structure and Project panels, the block that Rules write, API autocompletion and errors with their Take me there button.
DescribesEditor 0.4.0 For those who write code
On this page
Every game has a script, scripts/principal.ts. In a game made with Rules the editor writes it; in one made with code you write it. In both cases it opens in the principal.ts tab, next to the scene. How a script is written is in Scripts; this page is about the tool.
The script tab#
At the top of the center there is one tab per document: the scene, the script and the Game card. Click principal.ts to open the code. It has highlighting, API autocompletion and errors marked on the line, and follows the editor's light or dark theme.
Above the code there is a row of labels: the file path, main script if it is the one that starts the game, "the shaded block is written by Rules" and the reminder "Ctrl+Space: API suggestions".
The Code layout#
In Full mode, the Code layout (Ctrl+Alt+2) arranges the window for programming: it opens the script in the center, the Project panel on the left, the Assistant on the right and Problems at the bottom. To go back to the scene, Ctrl+Alt+1. The layouts are in Simple mode and Full mode.
Structure#
The Structure panel (Alt+3) is the outline of the open script: the Rules block, what the file imports, each game event it subscribes to (such as juego.alIniciar or mundo.alTocar "#moneda") and each function, with its line number. A click takes the cursor to that line.
With the scene open instead of the code, Structure shows the game's rules and a summary of the scene.
Project#
The Project panel (Alt+2) shows the game's files: juego.json and the folders escenas, scripts, recursos, pruebas and editor.
| Click on | Opens |
|---|---|
juego.json | The Game card. |
| A scene | That scene, in the viewport. |
| A script | The code editor. |
pruebas/bot.json | The Test bot section of the Rules panel. |
At the top of the panel there are two buttons: New script and Show in folder.
Your code and the rules block#
In a game made with Rules, the script has a block that the editor writes. It goes between two marks and is shown shaded.
The file starts like this:
// Juego hecho con Green Games Studio.
// La logica de las reglas esta en el bloque de abajo. Para programar a mano, escribe despues del bloque:
// la API completa aparece al escribir "mundo.", "jugadores.", "interfaz."...
// <reglas>
// Este bloque lo escribe Green Games Studio a partir del panel de Reglas. Si lo cambias a mano, el editor
// lo vuelve a escribir la proxima vez que toques una regla. Tu propio codigo va fuera de las marcas.
import { interfaz, juego, jugadores, mundo, sonido, type Cronometro, type Jugador } from '@greengames/sdk';Three things worth knowing:
- The block is rewritten. Every time you touch a rule in the panel, the editor writes again everything between
// <reglas>and// </reglas>. A change made by hand in there does not survive. - Your code goes after
// </reglas>. The editor does not touch that. - Both live together. The block already imports the services your rules use, and your code can use them.
In a game made with code the opposite happens: there is no block until you create the first rule. From then on the editor adds its own to the same file, without deleting what is there. It does not touch the score tables your code uses either: it keeps them and adds its own at the end. See No-code rules.
Autocompletion#
Type the name of a service and a dot, or press Ctrl+Space, and the editor lists what that service offers, with its signature.
On typing mundo. you get alChocar, alDejarDeTocar, alEntrar, alSalir, alTocar, ambiente, aparicion, apariciones, crear, crearLuz, crearZona, eliminar and the rest of the service.
Editor 0.4.0 has the full contract, version 1.2: the eleven services of the API (juego, mundo, jugadores, interfaz, sonido, progreso, puntajes, azar, reloj, actores and camara) plus the cube terrain, the pointer and the quick bar, which open world games use, and models, textures and recorded sounds. The full reference is in API reference.
Errors#
The editor checks the game while you type. An error appears in four places at once:
- Underlined on its line, in the code.
- On the script tab, with a number.
- In the status bar, which goes from No problems to the count of errors and warnings.
- In the Problems panel (Alt+9), explained.
Each problem has a title in plain language, the explanation, its code and the place: file, line and column.
The ones in the screenshot came from writing two bad lines on purpose after the block: one that names a piece that is not in the scene and another that calls fetch.
| Code | Title | What happened |
|---|---|---|
| GB330 | Error in the code | TS2304: Cannot find name 'fetch'. The type checker does not know that name. |
| GB310 | The code uses something that does not exist in the game | The script uses fetch. Games have no network and no page: they run isolated and only have the API services. |
The line with the piece that does not exist gives a warning, "The code names something that is not in the scene". A warning does not prevent exporting; an error does.
One slip can give two problems, like fetch here: one from the type checker and one from the game validator. They are fixed together.
Problems come out in the editor's language: with the editor in Spanish, they are in Spanish.
Take me there#
The Take me there button on each problem opens the exact place: if the problem is in the code, the line of the file; if it is in a rule, that rule; if it is in a piece, the piece selected in the scene.
The details of each code are in The validator and its codes. Why a game cannot use fetch or read files is explained in Isolation.
With errors there is no export#
Export stops at the first step while there are errors.
Close the dialog, open Problems and press Take me there on each error. If you do not know how to fix one you wrote yourself, Ctrl+Z undoes until it disappears.
New script#
When principal.ts grows, it is worth splitting the code into more files.
File > New script, the + button of the Project panel or the Script button of the Content browser create scripts/modulo.ts and open it. The new file comes with a minimal example:
// scripts/modulo.ts
// Funciones para usar desde scripts/principal.ts con: import { saludar } from './modulo.ts';
import { juego } from '@greengames/sdk';
export function saludar(): void {
juego.registro('Hola desde scripts/modulo.ts');
}What juego.registro writes appears in the Console when you play: see Playing inside the editor. On export, the editor joins all the scripts into one.
Creating a script can be undone with Ctrl+Z, like everything else.
The template with code#
If you prefer to write the whole script yourself, create the game with the Coins against the clock (with code) template, or with the example of any of the other kinds of game. They are complete games to read and modify: see New game, projects and templates and the tutorial Your second game.
Next#
- Scripts: how a game's code is organized.
- API reference: the reference of all the services.
- Playing inside the editor: the Console shows what you write with
juego.registro.