Studio tour — IngevoraMirage

Studio tourThe studio is where you make face lenses and screen effects. It opens with an item and fills the browser window.Layout

Header — the item's name and badges, the Rules chip when rules apply, the save state, Lens settings or Effect settings, Test on phone (face lenses), Validate, Publish, and the More actions (⋯) menu with Archive. Its page tabs are Editor and Versions.

Toolbar — playback and editing controls, described below.

Left column — Layers and Triggers. Layers are drawn in list order, with the first at the back.

Centre — the viewer: a face for a face lens, a phone screen for a screen effect.

Right column — three tabs: Properties (the form of what you selected, or the settings when nothing is selected), Assets (your images) and Issues, with a count.

Timeline — below everything, with a row per layer and per keyframe clip.

Status bar — the layer and trigger counts, and the bytes your images use against the package limit. It turns orange above 90 %.

Selecting anything, whether in a list, on the viewer, on the timeline or from an issue, opens Properties.Panels and themeDrag the dividers between panels to resize them. Double-click a divider to collapse the panel beside it, and again to bring it back. The studio remembers the sizes in this browser. In a window narrower than 992 pixels, the panels stack and the page scrolls.The studio opens dark. The sun and moon button in the toolbar switches it to light, and the choice is remembered.ToolbarFrom left to right: undo and redo; restart, play or pause, and the clock; Fire event and a Host event box with Send; zoom, Fit or 100%; the keyboard shortcuts; the theme. A screen effect's clock shows its time against its length. A face lens has no length, so its clock just counts up.Keyboard shortcuts

Keys

Does

Space

Play or pause

Delete, Backspace

Delete the selected layer, trigger, clip or keyframe

Ctrl+D (⌘D)

Duplicate the selection

Arrow keys (Shift: ×10)

Nudge the selected image or sprite by one point, or a face sticker or face sprite by 0.01 face widths

Ctrl+Z (⌘Z)

Undo

Ctrl+Shift+Z or Ctrl+Y (⌘⇧Z)

Redo

Esc

Clear the selection

Add a keyframe at the playhead to the selected clip

Show all shortcuts

Shortcuts wait while you type in a field or while a dialog is open.Undo and redoYou can undo every change to the draft: forms, adding, deleting, reordering, duplicating, showing and hiding, and edits on the viewer. Quick typing in one field counts as one step, and so does one drag on the viewer. The studio keeps up to 100 steps, and the history starts afresh when you leave the page.AutosaveYour edits save about a second after your last change. The header shows the state:

State

Meaning

Saved

Everything is on the server.

Unsaved changes

A save is on its way.

Saving…

A save is under way.

Failed – Retry

The save failed. Click it to try again.

Leaving the studio saves one last time, and the browser asks before you close a tab with unsaved changes. If two people edit the same item, the last save wins.The viewerThe viewer draws your draft live, a moment after each edit, by the same published drawing rules the SDKs will follow.

Face lenses — use Choose a photo or Use my camera. On a photo with a face, click a sticker or a face sprite to select it. Drag it to move it, drag a corner to resize it, or drag the round handle to rotate it. The scroll wheel resizes it too, and Shift with the wheel rotates it. Stickers also get an Opacity slider. Show face signals sits under the viewer, and Show keep-out zones appears when your rules have keep-out zones.

Screen effects — a generic phone screen. You edit images and sprites on it in the same way.

The viewer leaves out layers that have issues, and says how many it skipped. It needs a browser with WebGL 2.Photos and camera pictures never leave your browser: tracking and drawing run on your own computer.Assets, Issues and ValidateThe Assets tab takes PNG images up to 1024 × 1024 pixels. Each is named after its file plus a short fingerprint, such as crown_3f2a91bc.png. You can't delete an image while a layer uses it. Its Create menu holds the sprite sheet maker; see Sprite sheets.The studio checks every change as you make it: the Issues tab lists what to fix, the matching field is marked, and clicking an issue selects its layer, trigger or clip. Validate asks the server for the final word, including checks the browser can't run, such as whether a sprite sheet image holds all its frames. Publish runs the same check first.View onlyArchived items open read-only. For a Developer, every item opens read-only, with the banner "View only: your role is Developer".