Sync Tutorial - Adding a Gui (Graphical Users Interface)
Now we are going to add two key elements to the game. Score and lives.
Open the Battlefield Level, and add these images to it.
The Numbers shown above are going to be used for the score, and the lives are individual letters that will disappear as each life is lost.
Now add 6 zero images to the to right of the screen, and make it look like this.
Name the image furthest right One. Name the image next to it Ten. Complete the pattern with Hundred, Thousand, TenThousand. HundredThousand.
Add this code to the function EnemyClassA::Explode(%this) in the Enemy.cs file
playerShip.Score += 50;
UpdateScore();
Add this code to PlayerMovement.cs:
function UpdateScore()
{
%HundredThousand = 0;
%TenThousand = 0;
%Thousand = 0;
%Hundred = 0;
%Ten = 0;
%One = 0;
%Score = PlayerShip.Score;
while(%Score >= 100000)
{
%Score += -100000;
%HundredThousand += 1;
}
HundredThousand.setFrame(%HundredThousand);
while(%Score >= 10000)
{
%Score += -10000;
%TenThousand += 1;
}
TenThousand.setFrame(%TenThousand);
while(%Score >= 1000)
{
%Score += -1000;
%Thousand += 1;
}
Thousand.setFrame(%Thousand);
while(%Score >= 100)
{
%Score += -100;
%Hundred += 1;
}
Hundred.setFrame(%Hundred);
while(%Score >= 10)
{
%Score += -10;
%Ten += 1;
}
Ten.setFrame(%Ten);
while(%Score >= 1)
{
%Score += -1;
%One += 1;
}
One.setFrame(%One);
}
Next we need to add a way to let the players know how many lives they have. I thought of a creative way to do this. Lives will be displayed on the screen and when you explode a letter will be deleted with an animation.
All the Lives graphics are cell graphics.
L has a X Count of 5 and a Y Count of 2
I has a X Count of 5 and a Y Count of 2
V has a X Count of 5 and a Y Count of 2
E has a X Count of 5 and a Y Count of 3
S has a X Count of 5 and a Y Count of 3
We will need to create 2 animations for each letter. One for the letter and the second one for the letter destroying animation.
Create a new Animation with Lives L.
Add the first frame and set the frame rate to 1.
Save as Lives_L.
Create a new animation with Lives L.
Add all the frames and set the frame rate to 8.
Set Cycle Animation off
Save as Lives_LAnimation.
Create a new Animation with Lives I.
Add the first frame and set the frame rate to 1.
Save as Lives_I.
Create a new animation with Lives I.
Add all the frames and set the frame rate to 6.
Set Cycle Animation off
Save as Lives_IAnimation.
Create a new Animation with Lives V.
Add the first frame and set the frame rate to 1.
Save as Lives_V.
Create a new animation with Lives V.
Add all the frames and set the frame rate to 8.
Set Cycle Animation off
Save as Lives_VAnimation.
Create a new Animation with Lives E.
Add the first frame and set the frame rate to 1.
Save as Lives_E.
Create a new animation with Lives E.
Add all the frames and set the frame rate to 11.
Set Cycle Animation off
Save as Lives_EAnimation.
Create a new Animation with Lives S.
Add the first frame and set the frame rate to 1.
Save as Lives_S.
Create a new animation with Lives S.
Add all the frames and set the frame rate to 13.
Set Cycle Animation off
Save as Lives_SAnimation.
Add the Animation Lives L in the top left corner. Change its name to LivesL. A little to the right add Lives I. Change its name to LivesI. Repeat the pattern until you spell LIVES.
Add this code to the end of function PlayerClass::Explode(%this) in the ShipMovement file:
if(%this.Lives == 4)
{
LivesS.playAnimation(Lives_SAnimation);
}
if(%this.Lives == 3)
{
LivesE.playAnimation(Lives_EAnimation);
}
if(%this.Lives == 2)
{
LivesV.playAnimation(Lives_VAnimation);
}
if(%this.Lives == 1)
{
LivesI.playAnimation(Lives_IAnimation);
}
if(%this.Lives == 0)
{
LivesL.playAnimation(Lives_LAnimation);
%this.schedule(1250,"QuitGame");
}
Add this code to the end of the file:
function PlayerClass::QuitGame()
{
endGame();
// you could instead send this to a menu to replay the game.
}
We are almost done. Now all we have to do is add audio and we are finished.