This wiki covers only the browser-based block editor — how to use the interface, and what every block does with a code example. For the JVL language and the desktop app in general, see the main Wiki.
The Online Editor has four areas: the File menu (save all, reload, back to your dashboard), the file tree on the left, the scene / code tabs in the middle, and the console at the bottom, which prints anything logged with System.print or block execution errors while a project runs.
Every project is created with a locked default structure (main/jvl, resources/vj, resources/assets, project.yml) — the same layout the desktop app expects, so a project you start here opens directly in Visual Java too.
L'Online Editor ha quattro aree: il menu File (salva tutto, ricarica, torna alla dashboard), l'albero dei file a sinistra, le tab scena/codice al centro e la console in basso, che stampa quello che logghi con System.print o gli errori di esecuzione mentre un progetto gira.
Ogni progetto viene creato con una struttura di base bloccata (main/jvl, resources/vj, resources/assets, project.yml) — lo stesso schema che si aspetta l'app desktop, cosi' un progetto iniziato qui si apre direttamente anche in Visual Java.
Right-click a folder to create a new class (a .jvl file with its own blocks) or upload a file. Classes appear as 🧩 in the tree; opening one shows its blocks — variables, methods, and the code inside each method.
| Icon | Meaning |
|---|---|
| 📁 / 📂 | Folder (locked folders are part of the required project structure) |
| 🧩 | A class — has its own block workspace |
| ◈ | A .vj file — a sprite/object placed in the 2D scene |
| 🖼 / 🔊 | An image or audio asset |
Clicca col destro su una cartella per creare una nuova classe (un file .jvl con i suoi blocchi) o caricare un file. Le classi appaiono come 🧩 nell'albero; aprendone una vedi i suoi blocchi — variabili, metodi e il codice dentro ogni metodo.
| Icona | Significato |
|---|---|
| 📁 / 📂 | Cartella (le cartelle bloccate fanno parte della struttura obbligatoria del progetto) |
| 🧩 | Una classe — ha il suo spazio di lavoro a blocchi |
| ◈ | Un file .vj — uno sprite/oggetto posizionato nella scena 2D |
| 🖼 / 🔊 | Un asset immagine o audio |
▶ Run executes Main.main(): it fires every block tagged @onStart, then Main, and if any object listens for @onUpdate, @onClick or @onMouseMove it keeps listening for those until you press ⏹ Stop. Files save automatically a moment after you stop editing (see the badge next to the project name); 💾 Save all forces it immediately.
Every project has a maximum size (shown as an error in the save badge if exceeded). Large images are automatically resized/recompressed on upload to help stay under it — see the community page for details on published projects.
▶ Avvia esegue Main.main(): attiva ogni blocco taggato @onStart, poi Main, e se qualche oggetto ascolta @onUpdate, @onClick o @onMouseMove continua ad ascoltarli finche' non premi ⏹ Ferma. I file si salvano automaticamente un istante dopo che smetti di modificare (vedi il badge accanto al nome del progetto); 💾 Salva tutto forza il salvataggio subito.
Ogni progetto ha una dimensione massima (mostrata come errore nel badge di salvataggio se superata). Le immagini grandi vengono ridimensionate/ricompresse automaticamente al caricamento per restare sotto il limite.
Event blocks sit at the top of a method and decide when its code runs. Drop one from the Events palette group onto a method.
I blocchi evento stanno in cima a un metodo e decidono quando il suo codice viene eseguito. Trascinane uno dal gruppo Events della palette su un metodo.
| Block | When it fires |
|---|---|
@onStart | Once, right when Run begins (before Main) |
@onUpdate | Every frame, for as long as the program keeps running |
@onClick | When the object is clicked in the running scene |
@onMouseMove | Whenever the mouse moves over the scene |
@onClone | On a clone, right when it's created |
Visualclass Player {
@onStart
void init() {
System.print("Player ready");
}
@onUpdate
void tick() {
if (isKeyPressed("RIGHT")) {
move(4, 0);
}
}
}
From the Control palette group: if / else, for ( ) times, while ( ), sleep ( ) ms and async (runs its contents without blocking the rest of the method).
Dal gruppo Control della palette: if / else, for ( ) volte, while ( ), sleep ( ) ms e async (esegue il suo contenuto senza bloccare il resto del metodo).
for (3 times) {
System.print("Spawning...");
sleep(500 ms);
}
if (getX() > 400) {
setX(0);
} else {
move(2, 0);
}
A class can hold Variable members (with an initial value), and methods can Get Variable / Set Variable on them. Value blocks int, string, tag and Boolean plug into any input slot that expects that type.
Una classe puo' avere membri Variable (con un valore iniziale), e i metodi possono fare Get Variable / Set Variable su di essi. I blocchi valore int, string, tag e Boolean si incastrano in qualsiasi slot che si aspetti quel tipo.
class Score {
int points = 0;
void addPoint() {
points = points + 1;
System.print("Score: " + points);
}
}
Math operator blocks: + − * : % (: is division). Comparisons: = > < <= >=. Logic: and, or, not — combine them to build any if or while condition.
Blocchi operatore matematico: + − * : % (: è la divisione). Confronti: = > < <= >=. Logica: and, or, not — combinali per costruire qualsiasi condizione if o while.
if (getX() > 100 && not isKeyPressed("SPACE")) {
System.print("Far enough, and space isn't pressed");
}
System.log( ) prints to the console at the bottom of the editor — invaluable while testing. call invokes another method (on the same class or another one); mark it async to fire it without waiting for it to finish.
System.log( ) stampa nella console in basso nell'editor — utilissimo mentre si testa. call invoca un altro metodo (della stessa classe o di un'altra); segnalo come async per lanciarlo senza aspettare che finisca.
System.log("Debug: entering room 2");
call Enemy.spawnWave(); // async
These blocks act on the object the class is attached to (a .vj sprite in the scene): move (dx, dy), set pos (x, y), set x ( ), set y ( ), point towards (x, y), set rotation ( ).
Questi blocchi agiscono sull'oggetto a cui la classe e' collegata (uno sprite .vj nella scena): move (dx, dy), set pos (x, y), set x ( ), set y ( ), point towards (x, y), set rotation ( ).
@onUpdate
void tick() {
if (isKeyPressed("UP")) move(0, -4);
if (isKeyPressed("DOWN")) move(0, 4);
pointTowards(getMouseX(), getMouseY());
}
set texture ( ), set lightness ( ), set darkness ( ) and set transparency ( ) change how the sprite is drawn each frame — handy for hit flashes, fades, or costume swaps.
set texture ( ), set lightness ( ), set darkness ( ) e set transparency ( ) cambiano come lo sprite viene disegnato a ogni frame — utili per flash da colpo, dissolvenze o cambi costume.
void onHit() {
setTransparency(120);
sleep(150 ms);
setTransparency(255);
}
get x / get y / get direction read the sprite's own state; is touching ( ) checks collision against a tag. For input: get pressed key, is key pressed ( ), get mouse x/y, get date.
get x / get y / get direction leggono lo stato dello sprite stesso; is touching ( ) controlla la collisione contro un tag. Per l'input: get pressed key, is key pressed ( ), get mouse x/y, get date.
@onUpdate
void tick() {
if (isTouching("enemy")) {
System.print("Ouch!");
}
}
create clone ( ) spawns a copy of the current object (fires that clone's @onClone); kill clone removes it. add object to tag ( ) / remove object from tag ( ) manage groups used by is touching and other tag-based checks.
create clone ( ) crea una copia dell'oggetto corrente (attiva l'evento @onClone di quel clone); kill clone lo rimuove. add object to tag ( ) / remove object from tag ( ) gestiscono i gruppi usati da is touching e altri controlli basati sui tag.
@onStart
void spawnWave() {
for (5 times) {
createClone();
sleep(300 ms);
}
}
@onClone
void setup() {
addObjectToTag("enemy");
}