Lightwell created a visual experience to create Event Listeners, Conditionals, and Variables. When you're building in Lightwell, this is how you can get the same function without writing the code.

Interface

The Interaction section helps visualize what effects will happen and in what order. 

From left to right, you can see the entire Event Listener—starting with the event and then an effect and/or a conditional. Now, you can see which effects will be executed and in what order. 

Event Listeners

Like other user facing application, projects built in Lightwell are event driven applications. 

What is an event? Events are when certain things happen or occur. Some events are user input based like tapping the screen or shaking the device. The other events are for things that have happened inside your app, i.e. when an animation ends, a sound effect finished playing or navigate to a new screen. 

Building interactive functionality is all about responding to these different types of events.

When the button is tapped -> Play a sound effect

When the device is shaken -> Play the fall animation

Event Listeners are what allow you to respond to these different type of events. An event listener will wait and listen for a specific event like a tapping a certain button or when a specific animation ends. Then, the event listener will signal that it happened and play the assigned action.

Each of the trigger types—tap down/up, press, swipe, drag, tilt, shake, animation/audio started/ended, scene change—are events that the project can listen for. (If you’ve been building projects in Lightwell, then you’re probably already thinking in terms of event driven development from the Interaction section.)

Each event listener has a list of effects that define the behavior. When the event occurs, each effect will trigger in order. So we can set up a listener for when the user shakes their device play the animation to have my character flail, then play the dialogue crying for help, and finally play the animation for the dust to fall onto the screen.

Control Flow

For simple behavior with a strict order this system works great!

When I tap the Light Switch -> Turn on the light

So no matter what, tapping the light switch will always turn on the light. Well that’s not a very useful or energy efficient light switch. At some point you’ll want to turn that light off. If we want one light switch that can turn a light both on and off, we’ll need conditionals.

Conditionals

Enter the conditional. A Conditional (If/Else) asks a yes or no question which will branch the flow of effects based on the answer. 

The conditional card here will determine which path will be taken. If what is inside the conditional is true, then the top path will be followed (i.e. If Score is greater than 10, play Winner Song). 

Otherwise the effects connected to the lower path will be run (i.e. If Score is less than 10, play Loser Song). 

Variables

Variables are used to have your app store a piece of information. Let’s say you have a game and the current score is 100. You’ll want the app to remember this score for later. If you tell the computer to save that 100 for later where will it put it? And how do you ask for it again in the future? That is where variables come in. You give a variable a name which tells the computer where to put the information and how to get it again in the future.

Think of it like a box:

The box above is labeled just like how you give a variable a name. The name can be anything you want although like a box, it’s helpful to give a name that tells you what’s inside it. Then you have what’s actually stored inside it. Our example variable currently stores 100 but that can be changed. For example, the value can increase the value the variable stores as the game progresses or reset the variable back to 0 when a new game begins.

You can do math with a variable just like you can with numbers.

100 + 20 = 120

Score + 20 = 120

What can be stored?

A variable can store a few different types of data:

  • Number - 12345.6
  • String of letters - “Hello World!”
  • Layer - Blue Button
  • Animation - Jump Animation

A variable can only store one type of data. You cannot have a variable that stores both a number and an animation. You would need to store them in two different variables. Also once a variable stores one type of data, it cannot switch to store a different type of data.

Related Articles:

Did this answer your question?