#Editor

Open the editor from a project. The left panel lists scenes and the selected scene's objects; the stage is in the middle; the right panel shows properties or actions.

Scene | Audio in the top bar switches between editing the stage (Scene mode, described on this page) and the game's sounds (Audio mode).

#Scenes

The Scenes list shows every scene in order. Choose one to show it on the stage. The star marks the start scene, where the game begins.

  • + Scene adds an empty scene.
  • Each row's ⋯ menu has Rename…, Duplicate, Set as start scene, Move up, Move down and Delete…. Renaming a scene also updates the Go to scene actions that lead to it.
  • Drag a row to change the order.
  • The start scene and the last scene can't be deleted. Deleting asks first, and Undo brings the scene back. If buttons or user actions go to the scene, the prompt lists them, and deleting removes those Go to scene actions too.

#Scene settings

With no object selected, the right panel shows the scene's settings:

  • Preload or On demand: whether the scene's assets download before the game starts, or the first time the game shows the scene. On-demand scenes make the game start sooner; the panel shows the game's initial download next to its total.
  • Active: inactive scenes stay in the project, but the game never shows them.
  • Make this the start scene. The start scene always preloads and is active, so for an on-demand scene the editor asks to make it Preload first.
  • Background: a colour drawn behind the scene's objects, or none to show the stage colour.

#Loading screen

Below the scene settings, Loading screen (whole game) sets what players see while the game starts and while an on-demand scene loads:

  • Show a loading screen turns it on.
  • Logo: an image from your asset library, shown in the middle. It downloads before anything else.
  • Bar colour of the progress bar.
  • Background colour; Stage colour goes back to the game's stage colour.
  • Minimum time (ms) keeps the screen up at least that long, so it doesn't flash.

A small preview shows how it looks. The editor stage doesn't show the loading screen; ▶ Play, previews and published games do.

Every change saves automatically and can be undone. If a change isn't allowed (for example, making the start scene On demand), the editor says why.

#Objects

  • Add objects with + Add: Sprite, Spine, Video, Animated sprite, Button, Toggle button, Checkbox, Radio button, Slider, Progress bar, Text, Bitmap text, Group and Component. Types that use art open a picker of your asset library with thumbnails and any warnings. A new object goes into the selected group or Spine slot, otherwise the scene on screen, in the middle of the stage, and is selected.
  • The Assets panel under the stage lists your assets, with search and a kind filter. Drag an asset onto the stage to place it where you drop it: an image becomes a sprite, a Spine export a Spine object, a video a video, a spritesheet an animated sprite, a bitmap font a bitmap text, and a component a copy of it. Each card's + adds it to the middle of the scene. The panel can be collapsed.
  • Picking an asset adds it to the game's assets the first time; publishing then includes it.
  • Select an object by clicking it on the stage or in the tree; click an empty part of the stage to clear the selection. To move, rotate or resize it, see Moving, rotating and resizing.
  • Reorder objects by dragging them in the tree: lower items draw on top. Drop onto a group to move an object into it.
  • Objects can be attached to a Spine slot or bone so they follow the animation.
  • Delete, Duplicate, Copy and Paste are in the selected row's ⋯ menu and on the keyboard (see Shortcuts). Duplicate puts the copy 16 px down and to the right and selects it. A Delete is refused while a button or user action still points at the object.
  • Paste puts the copy into the selected group or Spine slot, otherwise the scene on screen, also in another scene or another project. Ids that are already taken get a number (logo → logo_2, as Duplicate does), and buttons inside the copy follow. Assets and components the target game doesn't have yet are added to it. Button actions whose object, scene or user action isn't there are left out, and the editor says how many. Pasting into the same project moves the copy 16 px so it doesn't hide the original.
  • Lock and Hide are the two buttons on a tree row (shown on hover, and always while on). A locked object can't be selected or dragged on the stage; choose it in the tree instead. A hidden object isn't drawn in the editor. Both are for you only: they're kept in this browser for the project and never change the game, which still shows hidden objects (and so does Play).

#Adding assets

You don't need to leave the editor to add art, video or fonts:

  • Upload… in the Assets panel, or drop files from your computer onto the panel, adds them to your library and to this game's assets.
  • Drop files onto the stage to upload them and place the matching object where you dropped them: an image becomes a sprite, a Spine export a Spine object, a video a video, a spritesheet an animated sprite.
  • In an asset picker (for example + Add › Spine), Upload new … makes the new object from the asset once it's uploaded.

The upload works like Upload asset: drop the files for one asset (e.g. a Spine .json with its .atlas and pages), and the kind is detected and checked in your browser. Name and alias prefix are filled in, and you can check the files against a requirement. Tick the upload-rights box (once per browser session), choose Upload, then keep editing: progress shows in the Assets panel. If an upload fails, its row says why and has Retry. If another asset already uses the alias, the editor picks the next free one (logo2).

Components are uploaded from the asset library's Upload component screen.

#Moving, rotating and resizing

The selected object has a frame that turns with it, with handles:

  • Move: drag the object itself. It snaps to a 16 px grid and to other objects' edges (hold Alt to skip snapping). Arrow keys nudge it by 1 px, Shift for 10 px.
  • Rotate: drag the round handle above the frame. The object turns around its anchor (or pivot). Hold Shift to snap to 15° steps.
  • Resize: drag a corner to scale both ways, or an edge to scale one way. While Lock ratio is on, corners keep the proportions; hold Shift to free them for that drag (or to keep them when Lock ratio is off). Hold Alt to scale from the centre instead of the opposite corner or edge.
  • Resizing changes the object's scale, so it works the same for sprites, text, Spine objects and groups. In a rotated or scaled group, the handles follow the object's own sides.
  • 9-sliced objects, sliders and progress bars are the exception: they have a real size, and the handles change it instead of the scale, so corners and borders keep their look however big the object gets. They never flip, and stop at 1 px.
  • In the properties, size px shows the width and height on screen (the object's own size times its scale). Type a width or height to set the scale to match. For 9-sliced objects, sliders and progress bars, the field is size and sets their real width and height. The chain-link button next to them is Lock ratio, for the fields and the corner handles.
  • Each drag is one step for Undo. In portrait, rotating and resizing change the portrait layout only, like moving does.

#Stage view

  • Zoom with Cmd/Ctrl + scroll (or a trackpad pinch), the + and − buttons or keys, and Fit to see the whole stage again. The corner of the stage shows the zoom level.
  • Pan by scrolling, by holding Space and dragging, or by dragging with the middle mouse button.
  • Clicking, dragging, snapping and dropping assets work the same at any zoom.

#Properties

The right panel edits the selected object: its id (the permanent key code and actions use), name, visibility, alpha, position, scale, rotation, anchor, and its kind's own fields, such as the text, a sprite's texture, a Spine object's animation, loop, skin and speed, a video's asset, loop and muted, or an animated sprite's spritesheet, frame names ({X} stands for the frame number), frame count, speed and loop. Double-click a text on the stage to edit it in place.

Spritesheet frames: a texture can be a single image or one frame of a spritesheet, so a whole UI kit can be one asset. When the texture you pick for a sprite, a button state, or a slider or progress bar part is a spritesheet, a Frame list appears; it starts on the sheet's first frame.

9-slice: tick 9-slice on a sprite, a button state, or a slider or progress bar part, and set the L, T, R and B borders in texture pixels. The corners keep their size, the edges stretch one way and the middle both, so a panel or button can be any size without distortion. Set the size under Transform or drag the handles (see Moving, rotating and resizing). A 9-sliced button draws every state at its size.

Sliders have a track, an optional fill (from the start up to the value) and an optional handle, with Min, Max, Step (empty for any value), Value, Orientation and Disabled. Players drag or tap the track; the value snaps to the step. Under Events, the slider's change event runs its actions each time the value changes.

Progress bars have a background and a fill, a Value from 0 to 1 and Ease (ms), how long the fill takes to move to a new value. Game code and component scripts set the value while the game runs.

A new slider or progress bar uses the image you pick for every part; choose the others in its properties.

Align lines the selected object's left edge, centre, right edge, top, middle or bottom up with the stage. For an object in a group or on a Spine slot, choose Parent to align it within that parent's bounds instead.

#Text and fonts

Select a text to style it under Font and style:

  • Font: the game's fonts, then your library's (picking one adds it to the game), or Default for the fallback system fonts. Upload font… uploads a TTF, OTF, WOFF or WOFF2 file and applies it to the text once it's in.
  • Size, Colour, Alignment and Wrap width (in pixels; 0 doesn't wrap).
  • Stroke (colour and width; width 0 removes it) and Shadow (colour, distance and blur).

A bitmap text has a Bitmap font picker instead, with the game's bitmap fonts and your library's. Bitmap fonts draw only the characters they have; scale the object to resize it.

With nothing selected, Fonts (whole game) under the scene settings lists the game's fonts and how many texts use each, and adds fonts from your library. Fonts load before the first scene shows, so they count in the initial download; bitmap fonts load with the scenes that use them. Play and published games use the same fonts.

#Buttons and actions

Buttons, toggle buttons, checkboxes and radio buttons have states (Idle, Hover, Pressed, Disabled, and Selected for all but buttons), each with its own texture, tint and scale; choose a state to preview it on the stage. Toggle buttons, checkboxes and radio buttons can start selected.

Radio buttons belong to a group: in a scene, one button per group is selected, and selecting one deselects the others. Each has a value, unique within its group. New radio buttons join the options group with the next free number as their value. Ticking Starts selected on one clears it on the others in its group; with none ticked, the first in the group (in tree order) starts selected.

Under Events, pick what each pointer event does, in order (radio buttons also have change, which fires when one becomes selected): go to a scene, play an animation, set a text, show or hide an object, toggle sound, run a template's game action, or run a user action.

Go to scene hides the scene on screen and shows the one you pick from the list. An on-demand scene downloads first, behind the loading screen if the game has one. Renaming a scene updates these actions, and deleting a scene removes them.

User actions are named lists of those same steps, built in the Actions panel (the switch above the properties). Create, rename, reorder and delete them; actions can run other actions. An action that something uses can't be deleted.

#Portrait and landscape

Games that support both orientations show Landscape | Portrait in the top bar. Landscape is the base layout. In portrait, changes to position, rotation, scale, visibility and alpha apply to portrait only:

  • Fields that follow landscape show linked.
  • Overridden fields show Portrait ↺; click it to follow landscape again. Reset to landscape re-links the whole transform.

#Play mode

▶ Play runs the game from the start scene with fresh state, as it was when you pressed Play; editing pauses. Edit returns to where you were and discards whatever happened while playing.

The game plays in a separate, isolated frame on the play address (play.oxinator.com), the same place your published games run. Component scripts (see Components) run there, never in the dashboard, so they can't reach your account. Under the game, Console shows what the game logs and any errors; a problem that stops the game from starting is shown over it. Landscape | Portrait switches the frame's shape while playing. Picking objects with Alt-click isn't available in the frame; go back to Edit to select.

#Undo and autosave

Every change saves automatically a moment after you make it; the top bar shows Saving…, Saved or a problem. Undo and Redo (Cmd/Ctrl+Z, Shift+Cmd/Ctrl+Z) step through this session's changes. If the project changed in another tab, the editor says so instead of overwriting it.

#Preview and publish

Preview builds the game and opens the build in a window at its size, on the play address, exactly as players will get it. Publish ▾ puts it on stage or prod; see Publishing.

#Shortcuts

Shortcuts work when you're not typing in a field. On Windows and Linux, use Ctrl where Mac uses Cmd.

Keys What it does
Delete or Backspace Delete the selected object
Cmd/Ctrl+D Duplicate the selected object
Cmd/Ctrl+C, Cmd/Ctrl+V Copy the selected object, paste it
Cmd/Ctrl+Z, Shift+Cmd/Ctrl+Z Undo, redo
Arrow keys (Shift for 10 px) Nudge the selected object
Shift while rotating Snap to 15°
Shift on a corner handle Free (or keep) the proportions
Alt on a resize handle Scale from the centre
Escape Clear the selection
+ and − Zoom in and out
Cmd/Ctrl+0 or Shift+1 Fit the stage
Cmd/Ctrl + scroll Zoom around the pointer
Space + drag, middle-button drag, scroll Pan
Alt while dragging Don't snap