This tutorial gives a step-by-step explanation on how to create a scoreboard that shows the number of lives, the time, or the points obtained in a video game. You can clone a HTML5 example project in the WiMi5 Dashboard, in www.wimi5.com.

Jose Maria Martinez, Blogger

October 13, 2014

This tutorial gives a step-by-step explanation on how to create a scoreboard that shows the number of lives, the time, or the points obtained in a video game.

To give this tutorial some context, weâ€™re going to use the example project StunPig in which all the applications described in this tutorial can be seen. Â This project can be cloned from the WiMi5Â Dashboard.

We require two graphic elements to visualize the values of the scoreboards, a â€śLivesâ€ť Sprite which represents the number of lives, and as many Font and Letter Sprites as needed to represent the value of the digit to be shown in each case. The â€śLivesâ€ť Sprite is one with four animations or image states that are linked to each one of the four numerical values for the value of the level of lives.

The Font or Letter Sprite, a Sprite with 11 animations or image states which are linked to each of the ten values of the numbers 0-9, as well as an extra one for the colon (:).

# Â

## Example 1. How to createÂ a lives scoreboard

To manage the lives, weâ€™ll need a numeric value for them, which in our example is a number between 0 and 3 inclusive, and its graphic representation in our case is the three orange-colored stars which change to white as lives are lost, until all of them are white when the number of lives is 0.

To do this, in the Scene Editor, we must create the instance of the sprite used for the stars. Â In our case, weâ€™ll call them â€śLivesâ€ť. To manipulate it, weâ€™ll have a Script (â€ślifeLevelControlâ€ť) with two inputs (â€śstartâ€ť and â€średuceâ€ť), and two outputs (â€śaliveâ€ť and â€śdeathâ€ť).

The â€śstartâ€ť input initializes the lives by assigning them a numeric value of 3 and displaying the three orange stars. Â The â€średuceâ€ť input lowers the numeric value of lives by one and displays the corresponding stars. Â As a consequence of triggering this input, one of the two outputs is activated. Â The â€śaliveâ€ť output is activated if, after the reduction, the number of lives is greater than 0. Â The â€śdeathâ€ť output is activated when, after the reduction, the number of lives equals 0.

Inside the Script, we do everything necessary to change the value of lives, displaying the Sprite in relation to the number of lives, triggering the correct output in function of the number of lives, and in our example, also playing a negative fail sound when the number of lives goes down..

In our â€ślifeLevelControlâ€ť Script, we have a â€ścurrentLifeLevelâ€ť parameter which contains the number of lives, and a parameter which contains the â€śLivesâ€ť Sprite, which is the element on the screen which represents the lives. Â This Sprite has four animations of states, â€ś0â€ť, â€ś1â€ť, â€ś2â€ť, and â€ś3â€ť.Â

The â€śstartâ€ť input connector activates the ActionOnParam â€ścopyâ€ť blackbox which assigns the value of 3 to the â€ścurrentLifeLevelâ€ť parameter and, once thatâ€™s done, it activates the â€śsetAnimationâ€ť ActionOnParam blackbox which displays the â€ś3â€ť animation Sprite.

The â€średuceâ€ť input connector activates the â€ś-â€ť ActionOnParam blackbox which subtracts from the â€ścurrentLifeLevelâ€ť parameter the value of 1. Â Once thatâ€™s done, it first activates the â€śsetAnimationâ€ť ActionOnParam blackbox which displays the animation or state corresponding to the value of the â€śCurrentLifeLevelâ€ť parameter and secondly, it activates the â€śgreaterThanâ€ť Compare blackbox, which activates the â€śaliveâ€ť connector if the value of the â€ścurrentLifeLevelâ€ť parameter is greater than 0, or the â€śdeathâ€ť connector should the value be equal to or less than 0. Â  Â

# Â

## Example 2. How to create a time scoreboard or chronometer

In order to manage time, weâ€™ll have as a base a numerical time value that will run in thousandths of a second in the round and a graphic element to display it. Â This graphic element will be 5 instances of a Sprite that will have 10 animations or states, which will be the numbers from 0-9.

In our case, weâ€™ll display the time in seconds and thousandths of a second as you can see in the image, counting down; so the time will go from the total time at the start and decrease until reaching zero, finishing.

To do this in the Scenes editor, we must create the 6 instances of the different sprites used for each segment of the time display, the tenths place, the units place, the tenths of a second place, the hundredths of a second place, and the thousandths of a second place, as well as the colon. Â In our case, weâ€™ll call them â€śsecond.unitâ€ť, â€śsecond.tenâ€ť, â€śmillisec.unitâ€ť, â€śmillisec.tenâ€ť y â€śmillisec.hundredâ€ť.

In order to manage this time, weâ€™ll have a Script (â€śRoundTimeControlâ€ť) which has 2 inputs (â€śstartâ€ť and â€śstopâ€ť) and 1 output (â€śendâ€ť), as well as an exposed parameter called â€śroundMillisecsâ€ť and which contains the value of the starting time.

The â€śstartâ€ť input activates the countdown from the total time and displays the decreasing value in seconds and milliseconds. Â The â€śstopâ€ť input stops the countdown, freezing the current time on the screen. Â When the stipulated time runs out, the â€śendâ€ť output is activated, which determines that the time has run out. Â Inside the Script, we do everything needed to control the time and display the Sprites in relation to the value of time left, activating the â€śendâ€ť output when it has run out.

In order to use it, all we need to do is put the time value in milliseconds in, either by placing it directly in the â€śroundMillisecsâ€ť parameter, or by using a blackbox I assign it, and once thatâ€™s been assigned, we then activate the the â€śstartâ€ť input which will display the countdown until we activate the â€śstopâ€ť input or reach 0, in which case the â€śendâ€ť output will be activated, which we can use, for example, to remove a life or whatever else weâ€™d like to activate.Â

In the â€śRoundTimeControlâ€ť Script, we have a fundamental parameter, â€śroundMillisecsâ€ť, which contains and defines the playing time value in the round. Â Inside this Script, we also have two other Scripts, â€śCurrentMsecs-Secsâ€ť and â€śupdateScreenTimeâ€ť, which group together the actions Iâ€™ll describe below.

The activation of the â€śstartâ€ť connector activates the â€śstartâ€ť input of the Timer blackbox, which starts the countdown. Â As the defined time counts down, this blackbox updates the â€śelapsedTimeâ€ť parameter with the time that has passed since the clock began counting, activating its â€śupdatedâ€ť output. Â This occurs from the very first moment and is repeated until the last time the time is checked, when the â€śfinishedâ€ť output is triggered, announcing that time has run out. Â Given that the time to run does not have to be a multiple of the times between the update and the checkup of the time run, the final value of the elapsedTime parameter will most likely be greater than measured, which is something that will have to be kept in mind when necessary.

The â€śupdatedâ€ť output tells us we have a new value in the â€śelapsedTimeâ€ť parameter and will activate the â€śCurrentTimeMsecs-Secsâ€ť Script which calculates the total time left in total milliseconds and divides it into seconds and milliseconds in order to display it. Â Once this piece of information is available, the â€śavailableâ€ť output will be triggered, which will in turn activate the â€śupdateâ€ť input of the â€śupdateScreenTimeâ€ť Script which places the corresponding animations into the Sprites displaying the time.

In the â€śCurrentMsecs-Secsâ€ť Script, we have two fundamental parameters with to carry out; â€śroundMillisecsâ€ť, which contains and defines the value of playing time in the round, and â€śelapsedTimeâ€ť, which contains the amount of time that has passed since the clock began running. Â In this Script, we calculate the time left and then we break down that time in milliseconds into seconds and milliseconds--the latter is done in the â€śCalculateSecsMillisecsâ€ť Script, which Iâ€™ll be getting to.

The activation of the get connector starts the calculation of time remaining, starting with the activation of the â€ś-â€ť ActionOnParam blackbox that subtracts the value of the time that has passed since the â€śelapsedTimeâ€ť parameter contents started from the total run time value contained in the â€śroundMillisecsâ€ť parameter. Â This value, stored in the â€śCurrentTimeâ€ť parameter, is the time left in milliseconds.

Once that has been calculated, the â€śgreaterThanOrEqualâ€ť Compare blackbox is activated, which compares the value contained in â€śCurrentTimeâ€ť (the time left) to the value 0. Â If it is greater than or equal to 0, it activates the â€śCalculateSecsMillisecsâ€ť Script which breaks down the remaining time into seconds and milliseconds, and when this is done, it triggers the â€śavailableâ€ť output connector. Â If it is less, before activating the â€śCalculateSecsMillisecsâ€ť Script, we activate the ActionOnParam â€ścopyâ€ť blackbox which sets the time remaining value to zero.

In the â€śCalculateSecsMillisecsâ€ť Script, we have the value of the time left in milliseconds contained in the â€ścurrentTimeâ€ť parameter as an input. Â The Script breaks down this input value into its value in seconds and its value in milliseconds remaining, providing them to the â€śCurrentMilliSecsâ€ť and â€śCurrentSecsâ€ť parameters. Â The activation of its â€śgetâ€ť input connector activates the â€ślessThanâ€ť Compare blackbox. Â This performs the comparison of the value contained in the â€ścurrentTimeâ€ť parameter to see if it is less than 1000.

If it is less, the â€śtrueâ€ť output is triggered. Â What this means is that there are no seconds, which means the whole value of â€śCurrentTimeâ€ť is used as a value in the â€śCurrentMilliSecsâ€ť parameter, which is then copied by the â€śCopyâ€ť ActionOnParam blackbox; but it doesnâ€™t copy the seconds, because theyâ€™re 0, and that gives the value of zero to the â€ścurrentSecsâ€ť parameter via the â€ścopyâ€ť ActionOnParam blackbox. Â After this, it has the values the Script provided, so it activates its â€śdoneâ€ť output..

On the other hand, if the check the â€ślessThanâ€ť Compare blackbox runs determines that the â€ścurrentTimeâ€ť is greater than 1000, it activates its â€śfalseâ€ť output. Â This activates the â€ś/â€ť ActionOnParam blackbox, which divides the â€ścurrentTimeâ€ť parameter by 1000â€™, storing it in the â€śtotalSecsâ€ť parameter. Â Once that is done, the â€śfloorâ€ť ActionOnParam is activated, which leaves its total â€śtotalSecsâ€ť value in the â€ścurrentSecsâ€ť parameter.

After this, the â€ś-â€ť ActionOnParam is activated, which subtracts â€ścurrentSecsâ€ť from â€śtotalSecsâ€ť, which gives us the decimal part of â€śtotalSecsâ€ť, and stores it in â€ścurrentMillisecsâ€ť in order to later activate the â€ś*â€ť ActionOnParam blackbox, multiplying by 1000 the â€ścurrentMillisecsâ€ť parameter which contains the decimal value of the seconds left in order to convert it into milliseconds, which is stored in the â€śCurrentMillisecsâ€ť parameter (erasing the previous value). Â After this, it then has the values the Script provides, so it then activates its â€śdoneâ€ť output.

When the â€śCalculateSecsMillisecsâ€ť Script finishes and activates is â€śdoneâ€ť output, and this activates the Scriptâ€™s â€śavailableâ€ť output, the â€ścurrentTimeMsecs-Secsâ€ť Script is activated, which then activates the â€śupdateScreenTimeâ€ť Script via its â€śupdateâ€ť input. Â This Script handles displaying the data obtained in the previous Script and which are available in the â€śCurrentMillisecsâ€ť and â€śCurrentSecsâ€ť parameters.

The â€śupdateScreenTimeâ€ť Script in turn contains two Scripts, â€śsetMilliSecondsâ€ť and â€śsetSecondsâ€ť, which are activated when the â€śupdateâ€ť input is activated, and which set the time value in milliseconds and seconds respectively when their â€śsetâ€ť inputs are activated. Â Both Scripts are practically the same, since they take a time value and place the Sprites related to the units of that value in the corresponding animations. Â The difference between the two is that â€śsetMillisecondsâ€ť controls 3 digits (tenths, hundredths, and thousandths), while â€śsetSecondsâ€ť controls only 2 (units and tens).

The first thing the â€śsetMillisecondsâ€ť Script does when activated is convert the value â€ścurrentMillisecsâ€ť is to represent to text via the â€śtoStringâ€ť ActionOnParam blackbox. Â This text is kept in the â€śnumberAsStringâ€ť parameter. Â Once the text has been obtained, we divide it into characters, grouping it up in a collection of Strings via the â€śsplitâ€ť ActionOnParam. Â It is very important to leave the content of the â€śseparatorâ€ť parameter of this blackbox empty, even though in the image you can see two quotation marks in the field. Â This collection of characters is gathered by the â€śdigitsAsStringsâ€ť parameter. Â Later, based on the value of milliseconds to be presented, it will set one animation or another in the Sprites.

Should the time value to be presented be less than 10, which is checked by the â€ślessThanâ€ť Compare blackbox against the value 10, the â€śtrueâ€ť output is activated which in turn activates the â€śsetWith1Digitâ€ť Script. Â Should the time value be greater than 10, the blackboxâ€™s â€śfalseâ€ť output is activated, and it proceeds to check if the time value is less than 100, which is checked by the â€ślessThanâ€ť Compare blackbox against the value 100. Â If this blackbox activates its â€śtrueâ€ť output, Â this in turn activates the â€śsetWith2Digitsâ€ť Script. Â Finally, if this blackbox activates the â€śfalseâ€ť output, the â€śsetWith3Digitsâ€ť Script is activated.

The â€śsetWith1Digitâ€ť Script takes the first of the collection of characters, and uses it to set the animation of the Sprite that corresponds with the units contained in the â€śmillisec.unitâ€ť parameter. Â The remaining Sprites (â€śmillisec.tenâ€ť and â€śmillisec.hundredâ€ť) are set with the 0 animation.

The â€śsetWith2Digitsâ€ť Script takes the first of the collection of characters, and uses it to set the animation of the Sprite corresponding to the tenths place number contained in the â€śmillisec.tenâ€ť parameter, the second character of the collection to set the Sprite animation corresponding to the units contained in the â€śmillisec.unitâ€ť parameter and the â€śmillisec.hundredâ€ť Sprite is given the animation for 0.

The â€śsetWith3Digitsâ€ť Sprite takes the first of the collection of characters, and uses it to set the animation of the Sprite corresponding to the hundredths contained in the â€śmillisec.hundredâ€ť parameter, the second character of the collection to set the animation of the Sprite corresponding to the tenths place value, contained in the â€śmillisec.tenâ€ť parameter, and the third character of the collection to set the animation of the Sprite corresponding to the units place value contained in the â€śmillisec.unitâ€ť parameter.

The â€śsetSecondsâ€ť Script when first activated converts the value to represent â€ścurrentSecsâ€ť to text via the â€śtoStringâ€ť ActionOnParam blackbox. Â This text is grouped in the â€śnumberAsStringâ€ť parameter. Â Once the text is obtained, we divide it into characters, gathering it in a collection of Strings via the â€śsplitâ€ť ActionOnParam blackbox. Â It is very important to leave the content of the â€śseparatorâ€ť parameter of this Blackbox blank, even though you can see two quotation marks in the field. Â This collection of characters is collected in the â€śdigitsAsStringsâ€ť parameter. Â Later, based on the value of the seconds to be shown, one animation or another will be placed in the Sprites.

If the time value to be presented is less than 10, itâ€™s checked by the â€ślessThanâ€ť Compare blackbox against the value of 10, which activates the â€śtrueâ€ť output; the first character of the collection is taken and used to set the animation of the Sprite corresponding to the units place value contained in the â€śsecond.unitâ€ť parameter. Â The other Sprite, â€śsecond.tenâ€ť, is given the animation for 0.

If the time value to be presented is greater than ten, the â€śfalseâ€ť output of the blackbox is activated, and it proceeds to pick the first character from the collection of characters and we use it to set the animation of the Sprite corresponding to the tens place value contained in the â€śsecond.tenâ€ť parameter, and the second character of the character collection is used to set the animation of the Sprite corresponding to the units place value contained in the â€śsecond.unitâ€ť parameter. Â

## Example 3. How to createÂ a points scoreboard.

In order to manage the number of points, weâ€™ll have as a base the whole number value of these points that weâ€™ll be increasing and a graphic element to display it. Â This graphic element will be 4 instances of a Sprite that will have 10 animations or states, which will be each of the numbers from 0 to 9.

In our case, weâ€™ll display the points up to 4 digits, meaning scores can go up to 9999, as you can see in the image, starting at 0 and then increasing in whole numbers. Â

For this, in the Scene editor, we must create the four instances of the different Sprites used for each one of the numerical units to be used to count points: units, tens, hundreds, and thousands. Â In our case, weâ€™ll call them â€śunit pointâ€ť, â€śten pointâ€ť, â€śhundred pointâ€ť, and â€śthousand pointâ€ť. To manage this time, weâ€™ll have a Script (â€śScorePointsâ€ť), which has 2 inputs (â€śresetâ€ť and â€śincrementâ€ť), as well as an exposed parameter called â€śpointsToWinâ€ť which contains the value of the points to be added in each incrementation.

The â€śresetâ€ť input sets the current score value to zero, and the â€śincrementâ€ť input adds the points won in each incrementation contained in the â€śpointsToWinâ€ť parameter to the current score.

In order to use it, we must only set the value for the points to win in each incrementation by either putting it in the â€śpointsToWinâ€ť parameter or by using a blackbox that I assign it. Â Once I have it, we can activate the â€śincrementâ€ť input, which will increase the score and show it on the screen. Â Whenever we want, we can begin again by resetting the counter to zero by activating the â€śresetâ€ť input.

In the interior of the Script, we do everything necessary to perform these actions and to represent the current score on the screen, displaying the 4 Sprites (units, tens, hundreds, and thousands) in relation to that value. Â When the â€śresetâ€ť input is activated, a â€ścopyâ€ť ActionOnParam blackbox sets the value to 0 in the â€śscorePointsâ€ť parameter, which contains the value of the current score. Â Also, when the â€śincrementâ€ť input is activated, a â€ś+â€ť ActionOnParam blackbox adds the parameter â€śpointsToWinâ€ť, which contains the value of the points won in each incrementation, to the â€śscorePointsâ€ť parameter, which contains the value of the current score. Â After both activations, a â€śStoreOnScreenâ€ť Script is activated via its â€śupdateâ€ť input.

The â€śStoreOnScreenâ€ť Script has a connector to the â€śupdateâ€ť input and shares the â€śscorePointsâ€ť parameter, which contains the value of the current score.

Once the â€śScoreOnScreenâ€ť Script is activated by its â€śupdateâ€ť input, it begins converting the score value contained in the â€śscorePointsâ€ť parameter into text via the â€śtoStringâ€ť ActionOnParam blackbox. This text is gathered in the â€śnumberAsStringâ€ť parameter. Â Once the text has been obtained, we divide it into characters and group them into a collection of Strings via the â€śsplitâ€ť ActionOnParam.

This collection of characters is gathered into the â€śdigitsAsStringsâ€ť parameter. Â Later, based on the value of the score to be presented, one animation or another will be set for the 4 Sprites. Â If the value of the score is less than 10, as checked by the â€ślessThanâ€ť Compare blackbox against the value 10, its â€śtrueâ€ť output is activated, which activates the â€śsetWith1Digitâ€ť Script.

If the value is greater than 10, the blackboxâ€™s â€śfalseâ€ť output is activated, and it checks to see if the value is less than 100. Â When the â€ślessThanâ€ť Compare blackbox checks that the value is less than 100, its â€śtrueâ€ť output is activated, which in turn activates the â€śsetWith2Digitsâ€ť Script.

If the value is greater than 100, the â€śfalseâ€ť output of the blackbox is activated, and it proceeds to see if the value is less than 1000, which is checked by the â€ślessThanâ€ť Compare blackbox against the value of 1000. Â If this blackbox activates its â€śtrueâ€ť output, this will then activate the â€śsetWith3Digitsâ€ť Script. Â If the blackbox activates the â€śfalseâ€ť output, the â€śsetWith4Digitsâ€ť Script is activated.

The â€śsetWith1Digitâ€ť Script takes the first character from the collection of characters and uses it to set the animation of the Sprite that corresponds to the units place contained in the â€śunit.pointâ€ť parameter. Â The remaining Sprites (â€śten.pointâ€ť, â€śhundred.pointâ€ť and â€śthousand.pointâ€ť) are set with the â€ś0â€ť animation.

The â€śsetWith2Digitsâ€ť takes the first of the collection of characters and uses it to set the animation of the Sprite corresponding to the tens place contained in the â€śten.pointâ€ť parameter, and the second character of the collection is set with the animation of the Sprite corresponding to the units place as contained in the â€śunits.pointâ€ť parameter. Â The remaining Sprites (â€śhundred.pointâ€ť) and (â€śthousand.pointâ€ť) are set with the â€ś0â€ť animation.

The â€śsetWith3Digitsâ€ť takes the first of the collection of characters and uses it to set the animation of the Sprite corresponding to the hundreds place contained in the â€śhundred.pointâ€ť) parameter; the second character in the collection is set with the animation for the Sprite corresponding to the tens place as contained in the â€śten.pointâ€ť parameter; and the third character in the collection is set with the animation for the Sprite corresponding to the units place as contained in the â€śunit.pointâ€ť parameter. Â The remaining Sprite, (â€śthousand.pointâ€ť) is set with the â€ś0â€ť animation.

The â€śsetWith4Digitsâ€ť Script takes the first character of the collection of characters and uses it to set the animation of the Sprite corresponding to the thousands place as contained in the â€śthousand.pointâ€ť parameter; the second is set with the animation for the Sprite corresponding to the hundreds place as contained in the â€śhundred.pointâ€ť parameter; the third is set with the animation for the Sprite corresponding to the tens place as contained in the â€śten.pointâ€ť parameter; and the fourth is set with the animation for the Sprite corresponding to the units place as contained in the â€śunit.pointâ€ť parameter. Â