Building Logic with Lightwell
Introducing visual programming, flows, variables, and a whole new way to build backend logic without code 🔁
Gone are the days where the process of adding complex interactions is manual and time consuming. We’ve streamlined the ability to program in your app so you can focus on building with less time and effort.
In our latest update, you will have the power of logic at your fingertips with a flow-based visual interface.
Visual Programming Re-engineered
If you’re familiar with Lightwell, you’ll remember the simple drag-and-drop interface to create interactions. Previously, you would select a trigger type, drag it to the target layer, and then assign an effect e.g. “When Button is Tapped, Play Animation Button Goes Down.”
While this was an intuitive way to create touch triggers (such as tap, swipe and drag) for visual thinkers, it wasn’t as useful for the variety of other triggers like device motion and event-based triggers. When we asked creators how they used interactions, we received requests for even more powerful and custom interactions, conditional states, and logic. Based on this feedback, we redesigned and re-engineered Interactions in Lightwell and said “Let there be logic!”
Let’s take a look at how this works in the new interface.
Based on this feedback, we redesigned and re-engineered Interactions in Lightwell and said “Let there be logic!” 💡
A Flow-Based Approach
With Lightwell, you don’t need to know how to write code to add logic. It’s simple and language agnostic. We’re introducing a flow-based visual interface where you can build interactions, “Logic Flows,” with action cards. 💭📲
For those familiar with the basics of programming, each Logic Flow is an event listener. Each flow consists of Action Cards, which are event handlers. Action Cards are effects (like “play,” “go to,” and “set”) or conditionals (if/else).
Like an event listener, the Flow shows how it reacts to a signal or input from the user to trigger an effect or condition. Each card is connected with a line, and you can add more cards with the ellipsis icon.
Now in Interactions, if you follow the line and cards from left to right, you will see which cards will be executed, and in what order.
Play Your Cards Right 🃏
Interactions are flexible. You can create a simple behavior with a strict order or create a complex flow with different actions tied to different decisions. This is all dependent on how you play your cards.
There are two different cards: an effect and a conditional.
Effects
There are three types of effects: Play, Go To, and Set. In each effect card, you can play an action (animation, audio, sprite, etc.), go to a scene or URL, or set a variable and reuse it later.
We’ve made the process of setting, storing, and reusing variables easy for anyone to create. Variables are unique containers that store information. An example of a variable would be “score.” Whenever a player gets a point, you need to a variable to store that piece of information.
Variables are unique containers that store information.
There are four types of data that you can “Set”:
- Numbers
- Text (String of Letters)
- Layers and Layer Properties (e.g. Layer’s Opacity %)
- Animations and Animation Properties (e.g. Rotation Animation’s Duration)
Conditionals
Enter the conditional: If/Else. 📢
If/Else is basically a Yes or No question that will branch the flow of effects based on the answer. For example, you can create a condition where it checks “If the player wins, play winner song / Else play loser song.”
The House Always Wins 🎰
Your opportunity to create many different types of interactive media apps without writing code is endless. Update to the latest version of Lightwell and start building your own interactive story game app.
Here are some apps you can create with Lightwell: memory games, crossword puzzles, multi-player racing games, tic-tac-toe, dress-up apps and a calculator! 🎮👾🎈
Dive into this resource article to start using logic and variables in your Lightwell project.
What Now?
This brand new Interaction section opens up a whole new category of apps that can now be built in Lightwell. We think it’s a big step towards making app development accessible for everyone, and we hope you agree!
Conditionals enable branching logic which allows for more advanced behavior in your Lightwell apps. Variables allow you to store dynamic pieces of information. New effects let you to easily perform mathematical operations on your stored data. Functionality that was previously only available through coding is now available to you in a fun and easy-to-use interface.
We’re very excited about what this new functionality will allow you to create and we can’t wait to see what you build!
You’ll also notice some small updates to the navigation bar to make it easier for you to find things. The Scene Overview and Asset Library are on the left with the Previewer in the middle and the Export on the right!
Tip: We have a new onboarding tutorial that walks you through the new interface. From the menu bar, go to “Help” > “Reset Tips and Hints.”
Have a question or idea? Visit us at Lightwell.Pro or email us at support@lightwell.pro.
