Getting to Know the Interface

The Lightwell Editor comprises four main sections to help you create, edit, plan, and prototype your app. These four main sections are: Canvas, Tools Panel, Tools Control, and Manager Panel.

Here's a 3-minute video that walks you through the Lightwell interface:

The Editor


The Canvas is the main workspace in Lightwell for each individual scene. It is sized for phone and tablet and contains all of your layers and groups. The Phone Canvas is sized for retina devices, and is 1136 x 640. The Tablet Canvas is sized for non-retina devices, and is 1024 x 768. By default, assets are rendered at 1x pixel resolutions to enable pixel-precise editing for specific device screens.

Tools Panel

The Tools Panel is on the left side of the Editor and is a hierarchical list of all of the layers, actions, interactions and audio in your scene. You can switch between the Layers Panel, Actions Panel, Interactions Panel and Audio Panel to add and edit each respectively.

Tools Control

The Tools Control are below the Tools Panel of the Editor and consists of details and properties that you can add, remove, and modify to define a layer, action, interaction or line of dialogue. The Tools Control will adapt to show you the Tools you're currently using, and hide everything else.

Manager Panel

The Manager Panel is visible at the bottom part of the Editor, below the Canvas. Depending on which Tool is selected, you will see a corresponding Manager with additional controls to create and edit layers, actions, interactions and dialogue.

  • Layers will show a Sprite Manager for image sequence animations and phoneme mappings
  • Animations Manager will show a timeline for animation keyframes
  • Interactions Manager will show all the different triggers to create interactions
  • Audio Manager will show a timeline with phonemes

App Overview

Scene Map

The Scene Map displays all of your scenes in your project. When the Scene Map panel is selected, you can organize the scenes in order by dragging them around, duplicating scenes, and editing names of each scene.

Asset Library

The Asset Library automatically organizes all the different assets used in your Lightwell project by visual and audio assets. You can upload new assets, preview existing assets or remove old assets.

File Formats

  • Accepted image formats: png, jpg
  • Accepted audio formats: wav, mp3

Visual Assets

Images - The most common visual assets are images. There are 3 different devices your app can export to: Retina Phone, Non-Retina Tablet and Retina Tablet.

Retina is a term to describe device screens with a higher pixel density. For example, a Retina Tablet and a Non-Retina Tablet have screens that are the same width and height. However, the Retina Tablet is twice as many pixels wide and twice as many pixels tall.

When uploading an image for a Non-Retina Tablet, the optimal image is twice as large for a Retina Tablet. A Retina Phone uses an image that is the exact same size as a Non-Retina Tablet. If you are using the Lightwell Photoshop Script, it will automatically generate the following image sizes.

  • Retina Phone - 2x / Non-Retina Tablet - 1x
  • Retina Tablet - 2x

Audio Assets

Music - Music files are audio assets meant to be played on loop in scenes. Only one music file can be playing at a time.

Sound Effects - Sound effects are audio assets that can be triggered from interactions. Multiple sound effects can be played at the same time.

Dialogue - Dialogue are audio assets used specifically in the dialogue section of a scene. 

UI Assets

App Icon - App icons are required UI assets in order to publish your project to the app store. Simply import a 1024x1024 non-transparent image and Lightwell will convert it to the required app icon sizes. All app icons should be uploaded as squares with the corners. (The App Store will automatically round the corners when you upload your asset.)

Did this answer your question?