Welcome! Let's take a look at what makes up a Lightwell project.
The core of what makes up any Lightwell project are both visual and audio assets.
Did you know: ".lwp" is a file extension that stands for “Lightwell Project.”
Visual Assets will typically be comprised of raster or vector assets (from the web or other tools like Sketch, Figma, or Photoshop).
Before beginning the walkthrough, ensure that you have a few images downloaded onto your desktop so you have something to work with.
PNG vs. JPG
PNG images allow you to utilize transparencies which makes it easier to layer them in other programs. If you’re cutting out a singular character, your best bet is to save each part out as a png.
JPG images are great for things like photos or background images and things with a lot of visual data.
If you use our direct imports form Sketch and Figma or Photoshop Extension to cut your layers into assets, you don’t have to worry about this!
Take a look at the below image. They are both the same, except for their file type. PNG’s are able to support different levels of transparency while JPG’s do not.
If you’re bringing visual assets over from Sketch, Figma or Photoshop, it’s best to come a little prepared by properly naming all your layers. Here are a few best practices so files aren’t overwritten:
Split Layers up as much as possible
Let’s say you’re trying to import a character. If you’d like to animate that character’s arms, legs or ears in Lightwell, make sure they are on their own separate layers!
Group and Label Layers
Keep organized by grouping layers and labeling everything appropriately. Check out the screenshot below or one of our templates to see how we do it!
Create a New Project
Open Lightwell and after logging in, click on “Create a New Project”. It will ask you for a place to save it. Name your project file and then Save. You’ll then be brought to the App Overview Screen.
Screens are a foundational element to building your app. Each screen represents a unique collection of content you can navigate to. You can have as many or as few as you like!
You can add a new screen by clicking the “Add New Screen” button.
Navigating Screens 🚦
The best way to help users go between your app screens in Lightwell is with Interactions.
In your Interaction Manager, you can add "Go To" and select the Screen that you want to navigate to.