Getting Started

Review Mini-Project #1 worksheet requirements

Before using Lightwell, find the images you want to use in your project and download as PNG (transparent) or JPEG.

Lightwell Canvas size: 2048 x 1536 pixels for retina.

Images should NOT exceed: 1136 x 768 pixels  in size.

Using Lightwell

Under the Welcome screen, click "Create New Project" and select a place to save your LWP project file.

Scene comes to life with individual images as Layers. Layers are animated, and then Animations are triggered by Interactions

Name your first scene 'Scene 1' and then double click to open and edit.

Creating a Layer 

  1. Add ONLY the images needed for Scene 1, each image is added as a separate layer (ie. sky, ground, character, props, etc).
  2. Drag and drop your background image onto the Layers List on the left panel. It can be a JPEG or PNG.
  3. Drag and drop your character image onto the Layers List. If you want your character to have a transparent background, it must be a PNG. 

Notes:

  • Label each Layer very specifically
  • Use Select icon to manually resize image
  • Use Move icon to position image on the canvas
  • Layer at the top will be the foreground of the scene
  • Layers can be grouped by selecting multiple and clicking the Folder icon

Editing Layers

  1. Add Ambient Motion to the character (this setting adds looping movement to a Layer). 

Notes:

  • Under Layer Controls > Ambient Motion > Set Movement value for either X-axis and Y-axis
  • Change the Duration value to change speed of Ambient Motion
  • Ambient Motion helps the user know what to interact with

Creating Animations

  1. Create an Animation for your character to make them move (our example is position).
  2. Click [+] button to add new Animation.
  3. In Animation popup window, name your animation, select 'Position' as animation type, select character layer as 'Affected Layer.'

Animations Types:

  • Opacity (layer transparency)
  • Rotation (layer rotation)
  • Position (layer movement)
  • Scale (layer sizing)

Animation Keyframes

  1. Keyframes are points in time for your animation. 
  2. Keyframe 1 (Blue diamond 🔷) is where it starts.
  3. Keyframe 2 (Purple diamond 💜) is where it ends.
  4. Drag diamonds to change the path. The dotted line represents the path of animation. 

Notes: 

  • Use the Timeline under the Animation Manager to controls how quickly or slowly the animation happens
  • Change Animation Controls: Autoreverses, Resets, Looping, and more fine control of Key Frames

Adding Interactions

  1. Add a Tap Interaction to the character by dragging the Tap button to the Layer.
  2. Under Interaction Controls, setup what Animation plays on Tap. This is the second dropdown after you select 'Animation.'

Note:

  • You can also use Interactions to trigger other things such as: Scene Changes, Music, Sound Effects and Dialogue.
  • Group Interactions together to play them sequentially or simultaneously.

Previewing Your App

Previewing on the Computer

You can Preview right inside Lightwell on your computer by clicking on the 'Preview' (👁️ eye icon) in the toolbar above your canvas.

Previewing on a Mobile Device

Lightwell Preview App: Preview your project via Lightwell Preview app (on your iPhone or iPad)

  1. On your iOS device > Open Lightwell Preview app.
  2. Select your Computer Name > Preview Project over WiFi > Select your project > Select Scene to preview.

Troubleshooting Tips:

  • Both devices need to be on the same WiFi
  • Make sure you don't have other applications syncing while connecting to your mobile device (ie. Dropbox, Google Drive, etc)

Did this answer your question?