As a game developer, you probably have in mind how the game will look like, how it will play, and how to win.
In this example, we are going to build a 2-Player Racing Game with Lightwell.
Players will need to tap on a button that will power their racer across the finish line.
What we will do:
- Create logic to determine the winner
- Change and customize text values
- Add layer property values for position
What we need:
- Assets (Buttons, Racers, Finish Line)
- Driver's License (Just Kidding!) 👨✈️👩✈️
First, let's create our scene:
- Select what screen you're building the game for - Phone vs Tablet
- Add two "Go" buttons - Label each button as "1st Player Go" and "2nd Player Go"
- Add two Racers - Label each racer as "1st Player Racer" and "2nd Player Racer"
- Add a Finish Line - Create a rectangle shape and label "Finish Line"
- Add a text layer "Winner Selection" with opacity at 0% (zero)
Why are we adding a "Winner Selection" text at 0% opacity?
When creating a game, we need to determine how the winner will be selected and how to display the winner. In this example, we are changing the property of "Winner Select" text value to display only once the winner is determined. Therefore, we will need to set the opacity to 0% and then set up an event later to display at 100% when a player wins.
Now that we've set up our assets, toggle over to Interactions. The Interactions will allow you to build the game logic with events.
Let's Create Interactions
Since this is a two-player game, let's focus on creating Interactions for the First Player and we will repeat the same logic for Second Player.
Create a Tap interaction for 1st Player Go.
Now, let's Set the 1st Player Racer Position X Equal to 1st Player Racer Position X + 100.
Why? We need to determine how far 1st Player Racer will travel whenever "Go" button is tapped. We are setting the property value to increase 100 pixels.
Set [Layer Property Value] Equal to [Layer Property Value] + [#]
Check The Conditional
In this step, we are going to determine how the winner wins.
Add another card by clicking on the Ellipsis icon, choose if. This will now give you an If/Else conditional that you can fill in to determine how to win.
For the if statement, we are checking to see when the 1st Player Racer passes the finish line.
Therefore, select 1st Player Position X is Greater Than Finish Line Position X
Creating Customize Text
Remember the Winner Label text layer we created? Well, we are going to use it to display who is the winner after it checks the conditions.
After setting up the conditional, Set the Winner Selection Opacity Equal to 100. This will make the text label appear on the scene when Player 1 wins.
Rather than the text saying Winner Selection, let's change it to say Player 1 Wins!
Create another + card and Set the Winner Selection Text Equal to Player 1 Wins! This will change the text from Winner Selection to the new custom text.
Debugging and Previewing
Once you've created your assets and the logic to power the game, go to Preview ▶ to play the game you've just created. See if everything is running smoothly and if not, go back to Interactions to see if you can fix the problem.
Create Player 2's interactions! They should be exactly the same but change the Winner Selection text to Player 2 Wins!
Tip: Highlight both interactions from the interactions list to see both flows at the same time for easy building!
*Mac Users Only: Download Lightwell Previewer to you iOS device and test your game with your friends!