About
I was asked if I can make a tutorial about how to build a Tournament System, so I did :)
Source Code
The source code will be available soon in the scirra store (if you don't want to go through the steps of the tutorial).
Note: This tutorial requires some knowledge about Arrays and LocalStorage.
Get Started
First create a new project. Basically it's up to you, but I chose "SD Landscape 16:9". Rename the layout and the event sheet.
Layout: start
Event Sheet: es_start
Now create following objects (Object (Name of the Object in the Project):
- Button (cmdStart)
- List (lstPlayers)
- Text (lblPlayers)
- Functions
- LocalStorage
- Browser
Adjust Objects
cmdStart
Set text as shown on the picture above.
lstPlayers
Add following items to the list object:
4; 8; 16; 32; 64
These are the available amounts of players for the tournament.
lblPlayers
Set text to ".. Players".
es_start
Now change to the event sheet for the 'start' layout (es_start).
Create a global variable called 'players' (amount of players for the tournament).
When the list object was created or the selection was changed
the function 'UpdatePlayers' will be called (you can also set the condition as an 'or', this will save you a line of code).
This will update the global variable 'players' and the label 'lblPlayers'.
Now add the 'On Checked' condition for the cmdStart button. Moreover you need to create a new Layout named 'tournament' with the event sheet 'es_tournament'.
Afterwards add 'Go to layout tournament' to the 'On Checked' condition (see image above).
Also create the function 'SaveToLocalStorage', even when it isn't included yet.
es_global
Now create a single event sheet called 'es_global'. Here we will add all conditions and actions we need to be available for all other event sheets.
Additionally: Create the constant variable 'UNIQUEKEYY'. This will be used for the LocalStorage Key, due the fact that if you preview your game and another game used the same LocalStorage Key 'DataStorage' it will cause conflicts. So I added a unique key to each LocalStorage key to avoid conflicts.
LocalStorage
Create two arrays:
- DataStorage (to save global variables like the amount of the player)
- Tournament (for the tournament system later)
Adjust the array tournament:
- Set width to 64 (max amount of players)
- Set height to 2
Now create the function 'LoadLocalStorage'. You can call this function whenever you want to load the saved variables from the LocalStorage. Do the same with the 'SaveToLocalStorage' and 'SaveTournamentResult' (see picture above for the conditions).
On Function SaveTournamentResult --> Tournament Set Value at XY
On Function SaveToLocalStorage --> DataStorage Set Value at XY
We will later pass the value, X & Y coordinates when we call the function.
cmdBackMenu
Open the 'tournament' layout and create following layers.
- UIGlobal (Set global to 'yes')
- Battle
- BackgroundGame (Set global to 'yes')
Then create a new button called cmdBackMenu and place it in the layer 'UIGlobal'.
Afterwards go back to the es_global event sheet and add the 'On Checked' action for the cmdBackMenu button (see picture above).
Include Event Sheet es_global
Now open the event sheets 'es_start' & 'es_tournament' and include the event sheet 'es_global'.
The Tournament System
The next step will be to create the tournament system. In order to do this, please open the 'tournament' layout and create following objects:
- cmdStartFight (Layer: UIGlobal, next to the 'Back to Menu' button)
- cmdSelectWinner (Layer: Battle, copy the button and set to both the text 'Player..' )
- lblVS (Layer: Battle, Object Type: Text, Text: 'vs.')
- lblFight (Layer: UIGlobal, Object Type: Text, Text: '')
- lblRound (Layer: Battle, Object Type: Text, Text: '')
- lblWinner (Layer: Battle, Object Type: Text, Text: '')
ToogleWinnerButtons
Add following function to the 'es_tournament' event sheet.
cmdStartFight
This button will be used to start the tournament.
cmdSelectWinner
This button will be used to select the winner for the current fight.
Add following instance variables to the cmdSelectWinner button:
- Order(Left button = A; Right button = B)
- CurrentPlayer (0, will be loaded later in the function)
- IsWinner (Boolean, Default = False to both!)
es_tournament
Change to the event sheet 'es_tournament' and create following variables.
The function of each variable will be explained later.
OnStartTournament
This group contain the conditions and actions called on the start of the layout.
Restore Defaults
On the start the default values will be set (see picture above)
On Function "ClearTournamentArray"
This function will clear the tournament array and sets all values to 0 (to avoid conflicts).
On Function "FillTournamentArray"
This function fills the array depending on how much players were set.
For example the global variable has the value 4 (4 players). So the array will be filled with 4 ID's at the height 0.
X |0 1 2 3 (X axis, 0 based index)
0 |1 2 3 4 (player ID's, 1 based index)
1 |0 0 0 0 (result, will be explained later)
Y
TournamentSystem
Add following code to your 'es_tournament' event sheet.
StartFight
On Function "StartFight"
This will call the current 2 players from the tournament array based on the current fight.
Example (fight = 0, first fight)
CurrentPlayerA will be loaded from the array Tournament from the X Coordinate Tournament.At(0+fight).
CurrentPlayerB will be loaded from the array Tournament from the X Coordinate Tournament.At(1+fight).
Due the fact that the fight variable equals 0, the first two players will be loaded from the X coords 0 and 1 (= Player ID 1 & Player ID 2). When the fight is over the fight varible will be increased by 2, so the next two players loaded from the array will be Player ID 3 (located at X = 2) and Player ID 4 (located at X = 3).
On Function "UpdatePlayerButtons"
This function will update the instance variables of the two cmdSelectWinner buttons.
SetWinner
This is a simple function to set the winner of the current fight. This must be replaced later if you want to use this tutorial in a game. Add following code to the 'es_tournament' event sheet.
On Function "SetWinner"
For each cmdSelectWinner button (2) the function will check if the boolean IsWinner is true (1) or false (0). Depending on that information the Function 'SaveTournamentResult' will be called.
If isWinner = true -> the value 1 will be saved at the current player ID at the height 1.
If isWinner = false -> the value 0 will be saved at the current player ID at the height 1.
If fights < players means that it wasn't the last fight, so the fight variable will be increased by 2 (like mentioned above) and the next fight will be called.
EndOfRound
Now we must add a function checking when the last fight of the first round has been made. Add following code to the 'es_tournament' event sheet.
If fights = players the game will be set to 'finish'.
But the function also have to check if this was also the last round (the fight of the last two players who have won all other matches).
If it was the last figt, the winner screen will be opened. Otherwise the function 'CallNextRound' will be called.
CallNextRound
Add following code to the current event sheet.
On Function "CallNextRound"
First the variable 'TournamentRound' will be increased by 1. This indicates the next round.
The loop "FindWinners" in the function will overwrite all Player ID's who have lost the game with 0.
In the next step all Player ID's equal to 0 will be removed from the tournament array, so only the winners are left.
Due the fact that always the half amount of players loses the game, the player variable will be divided by 2. Then the default values will be restored and the function "StartFight" will be called to start the next round. This loops till only 2 players are left.
Winner
Now you can add the winner layout and add a custom notification for the winner.
Support & Suggestion
If you find any bugs or other issues, please report it in our support forum (because I don't get notifed about comments here).
Forum