Complete guide
to the Circle editor
The Circle editor lets you create your own levels and turn ideas into complete playable challenges. You do not need to know programming — the main elements can be added, moved, and configured directly in the editor.
In this guide we will go through the editor from the beginning: the interface, adding objects, changing their properties, setting up interactions, and saving finished levels.
Main editor elements:
- Workspace — where the level is created and edited.
- Objects — the elements that make up the level.
- Tool panel — tools for creating and changing objects.
- Object settings — parameters of the selected element.
- Preview — lets you check how the level works in the game.
Do not be afraid to experiment. Most changes can be checked directly in the game, so the best way to learn the editor is to start with a simple level and gradually add new elements.
1. Getting started
To open the editor and start creating your own level or game, first open the Online section by tapping the globe icon.
Open My Levels
Level name
A new level is initially named Unnamed. Tap the name to change it.
Set a preview
Tap the pencil icon to change the level preview.
A Paste URL field will appear. Paste a link to the image that should be used as the preview. This is the image other players will see before opening your level.
You can use an image from Google Drive, social networks, your own website, or another source that provides an image link.
Open the editor
When the name and preview are ready, tap the hammer icon located on the left-center of the screen.
The editor will open and you can begin creating your level.
2. Workspace and main elements
After tapping the hammer icon, the creation field opens. It is displayed as a grid.
While the field is empty, only the editor UI is visible.
Adding objects
Tap any location on the game field and an object appears at that point.
Object menu
To change the object, tap the blue icon in the upper-right corner. The object menu opens.
Bottom tool panel
The bottom tool panel is also available. Swipe through the tools to access additional functions.
3. Choosing objects
Open the object menu by tapping the blue icon in the upper-right corner.
Square
The default object is a square. It can be edited like the other objects.
Circle
You can choose a circle and place it on the game field. It can also be edited with the editor tools.
Triangle
A triangle is available and can also be placed and edited.
Text
You can add text for titles, hints, instructions, and other level elements.
Image
You can add an image. When inserting it into the field, provide its URL.
If the image does not appear, try another format. Images can be edited like other objects: resize, move, rotate, recolor, and more.
Empty
You can choose Empty. Pressing Empty lets you rotate the scene, for example to place an object outside the screen frame.
4. Editor tools and scene control
The tool panel is at the bottom. Tap a tool to select it.
Del — delete objects
Del removes objects when you tap them.
Col — change color
Col changes an object's color using the palette.
Edit — edit an object
Select Edit, then tap an object. It will be highlighted green.
After swiping the tool panel you will find:
- Scale — object size;
- Pos (Position) — object position;
- Rot (Rotation) — rotation;
- ID — object identifier.
Position and Z
Z in Position controls the object's display priority. You can place one object in front of another or behind it.
Code
Code adds game logic. It is covered in a separate chapter.
Screen frame
The white border shows the approximate device screen.
If an object should be visible on another player's phone, place it inside the frame. Otherwise place it outside the frame.
Scene zoom
The two magnifying glasses, plus and minus, control scene zoom.
Use zoom to work comfortably with different parts of the level.
5. Pause and game modes
The editor has a pause button with additional settings.
Resume
Returns to editing.
Music
Lets you set the initial music or sound.
Save
Saves your changes.
If you do not want the latest changes to be saved, for example because you deleted something unnecessarily or changed the level by mistake, you can exit without saving.
Exit
Leaves editing mode.
If you need to keep your changes, press Save before exiting.
Classic
Classic is used when creating a level or game based on the classic Circle gameplay.
VHS
VHS enables VHS graphics, similar to classic Circle game levels.
6. Game logic with Code
To open Code, select an object on the scene and tap Code. A script type menu opens.
| Script type | Description |
|---|---|
Infinite | Runs continuously. |
Temporary | Runs once. Useful for scripted sequences. |
Clicked | Runs when the player taps the object. |
Script editor
After choosing a type, the script editor opens. It starts empty, then displays your commands. Commands are numbered.
Tap + to create a command.
Available commands include:
- Move — move;
- Col (Color) — color;
- Mode — mode;
- Siz (Size, Scale) — size;
- Wait — wait;
- Rot (Rotation) — rotation;
- Val (Values) — variables;
- Cr (Create object) — create object;
- Des (Destroy) — destroy;
- Mus (Music) — music;
- If — condition;
- Text — text.
7. Commands
Commands that change object properties usually show ID, a time field, and other fields specific to the property.
General rule
For property-changing commands, you enter the final result. For example, Move specifies the final coordinates.
ID
ID identifies the object the command should affect. Multiple objects can share the same ID, in which case the command affects all of them.
Time
Time is the duration in seconds. There is no limit on the time value.
Move
Move moves an object to the specified final position.
Move uses X and Y.
Y = 50
Time = 2
The object will move to X 100, Y 50 over 2 seconds.
Rot — Rotation
Rot changes the object's rotation. The main parameter is the angle.
Col — Color
Col changes an object's color. RGBA values use the 0–255 range.
Siz — Size / Scale
Siz changes the object size.
Wait — wait
Wait waits for a specified number of seconds and only then moves to the next command.
Cr — Create
Cr creates a new object.
It uses Type and ID. Type is the ID of the object used as the template, while ID sets the ID assigned to the new object.
The new object is a copy of the source object's settings. Its initial position is also copied.
Des — Destroy
Des only requires the ID of the object to delete.
Mus — Music
Use the URL field to provide the URL of the music or sound.
Text
Text uses ID and Text.
8. Val — variables
Val (Values) creates and changes variables.
Name
Enter the variable name in Name. If it does not exist, it is created. If it already exists, the command works with it.
Oper — Operation
Choose one operation:
=— assign;+— add;-— subtract;*— multiply;/— divide.
Val
Enter a number or the name of another variable.
For example, if score is 10, using + with Val 5 changes it to 15.
9. Special Val values
Besides numbers and variable names, Val supports special constructions.
| Construction | Purpose |
|---|---|
{pos(x,1)} | Gets the X position of the object with ID 1. (You can also request, Y and Z-position) |
{rot(1)} | Gets an object's rotation value. (In this example, the object with ID 1) |
{col(r,1)} | Gets the red color channel of the object with the specified ID. |
{siz(x,1)} | Gets the object's size value. |
{inc(x,1)} | Reads device tilt. Mainly intended for Classic Mode. The ID is not used, but the second parameter is required because Circle is still in beta. |
{ran(10,20)} | Generates a random number in the specified range. |
10. If — conditions
If lets you define a condition that controls the commands inside it.
If fields
Opening If shows Val 1, Cond, and Val 2.
Val 1 and Val 2 contain the two variables being compared.
Cond supports:
>— greater than;<— less than;=— equal to.
Opening a condition block
After pressing OK, an opening arrow appears in the script editor. All commands added after it are placed inside the condition.
Closing a condition
To close the condition, select If again. A closing arrow appears, and commands after it work normally.
11. Important editor details
Page
The script editor has a Page field. When there are many commands, they are split across pages. Use Page to switch between them.
ID 0 — camera
Be careful with zero: ID 0 is reserved for the camera.
For example, changing the size of ID 0 with Siz changes camera zoom: 1 — closer, 5 — farther.
{player}
When you enter {player}, you control the classic player circle that appears when Classic is enabled. The values follow Circle's classic gameplay.
| Value | Mode |
|---|---|
white | Classic control |
small | Small and faster circle |
green | No diagonal movement |
duoW | Double classic |
duoWsmall | Double small |
duoGr | Double green |
vpurp | Vertical jumper mode |
hpurp | Horizontal jumper mode |
vpurpsmall | Small vertical jumper |
hpurpsmall | Small horizontal jumper |
greenSmall | Small green |
In this case, the player's color changes automatically to match the selected mode.
12. Saving and publishing a level
After creating and saving a level, you can publish it if you want.
Publishing
To publish the level, tap the right-center circular button. The level will then be published.
Before publishing, the level ID is NA. After publishing, it receives a numeric ID.
You can share this number with another player so they can find the specific level or game.
Before publishing, check the level and make sure all required objects and game mechanics work correctly.