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 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.
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.
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.
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
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.
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.
- Accepted image formats: png, jpg
- Accepted audio formats: wav, mp3
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
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.
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.)