Technically, our game is ready, but in reality, we cannot launch it on Android. This is due to our controls read from Keyboard. Today, we are going to fix that by adding the arrow sprites for Android version.
Here’s 4 buttons that I’ve drawn:
We’re going to place 2 (up-down) buttons on the left side of the screen and remaining two on the right side. Now, let’s declare and load button images:
public TextureRegionDrawable leftArrowBtn;
public TextureRegionDrawable rightArrowBtn;
public TextureRegionDrawable upArrowBtn;
public TextureRegionDrawable downArrowBtn;
Then, at the end of Resources constructor, initialize them:
leftArrowBtn = new TextureRegionDrawable(gameSprites.findRegion("larrow"));
rightArrowBtn = new TextureRegionDrawable(gameSprites.findRegion("rarrow"));
upArrowBtn = new TextureRegionDrawable(gameSprites.findRegion("uarrow"));
downArrowBtn = new TextureRegionDrawable(gameSprites.findRegion("darrow"));
So far so good. Go to our GameScreen, declare new Group:
public Group controlGroup;
We will use it to place the button there (and also disable all of them when the game ends!). At the bottom of our GameScreen constructor, add:
controlGroup = new Group();
gameStage.addActor(controlGroup);
// comment out the next line to test buttons on desktop
if (Gdx.app.getType() == Application.ApplicationType.Android)
{
prepareDirectionButtons();
}
We create our group as we would create any other actor. After that, we check which device launched our application. If it happened on Android – prepare button! (but if you are testing – comment out the “if” check, because you want to see the buttons on the screen during tests, but players will have no use for them).
Now, we need to define the prepareDirectionButtons function. In advance, I think all of the button functions are going to be somewhat equal (only movement direction, image and button coordinates differ). Therefore, we can make a separate function to create a direction button.
private void prepareDirectionButton(final int dx, final int dy, TextureRegionDrawable img, float x, float y)
{
ImageButton btn = new ImageButton(img);
btn.setPosition(x, y);
btn.addListener(new ClickListener() {
@Override
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
AttemptMove(dx, dy);
super.touchUp(event, x, y, pointer, button);
}
});
controlGroup.addActor(btn);
}
As simple as that: create a new button, create a click controller that is similar to our arrow keys (calls AttemtpMove) and then add it to our group. Now all that is left to do is to add 4 direction calls to our prepareDirectionButton:
After that, let’s remove the buttons once the stage is complete. At the beginning of our OnGameEnd call in GameScreen, add the following line:
public void OnGameEnd(final boolean playerWon) {
controlGroup.remove();
Good! Now we have to make sure that the game launches in landscape mode on Android. Go to our AndroidManifest.xml file and adjust it accordingly (if you have not already):
android:screenOrientation="landscape"
That’s it! The game is going to have the direction buttons now. Try running it on your phone to see if everything’s working as intended.
So in the previous lesson, we implemented the game sounds. But there’s no background music and no way to control it (turn it off / make it quieter).
Playing Music is actually pretty simple. Here’s what I added to SoundManager class:
public static Music bMusic = null;
public static void StopBattleMusic()
{
if (bMusic != null)
{
bMusic.stop();
bMusic = null;
}
}
public static void PlayBattleMusic()
{
bMusic = Gdx.audio.newMusic(Gdx.files.internal("music/music" + MathUtils.random(5) + ".mp3"));
bMusic.setLooping(true);
bMusic.play();
}
Music does not really work like sounds. We preload sounds, but music is different: since music files can be quite big, they are simply being read in realtime. We’ll simply pick the random tune from music0…music6, set it to looping and then play it. Now, just add a call to start music at the initialization of GameScreen and Stop the music at the disposal.
…
public GameScreen(DodgingHero _game) {
super(_game);
batch = new SpriteBatch();
bg = new Background();
SoundManager.PlayBattleMusic();
…
@Override
public void dispose()
{
SoundManager.StopBattleMusic();
super.dispose();
…
Alright. This part is done. Now let’s make sure we have a button to control the sound. I have four textures with sound button, to indicate different sound/music volume. 0%, 33%, 66%, 100%, called sound0, sound1, sound2 and sound3 respectively.
Adjust our Resources class by adding TextureRegionDrawable array called soundBtn;
public TextureRegionDrawable soundBtn[];
Then, load them:
soundBtn = new TextureRegionDrawable[4];
for (int i = 0; i < soundBtn.length; i++)
{
soundBtn[i] = new TextureRegionDrawable(gameSprites.findRegion("sound" + i));
}
Now, let’s make a setting for the sound. We could make a Settings file similar to GameProgress file, but since we only have one setting (sound), let’s implement it in GameProgress. If you plan on adding more – I strongly suggest separating into your own settings file.
In our GameProgress file, add a constant to indicate MAX_SOUND_VALUE (that would be 3, 0..3), then add a new static variable called soundVolume; Also, add a save key for it.
public static final int MAX_SOUND_VOLUME = 3;
public static int soundVolume = MAX_SOUND_VOLUME;
private static final String SAVE_KEY_SOUND_VOLUME = "soundvolume";
public static void ToggleVolume() {
soundVolume += 1;
if (soundVolume > MAX_SOUND_VOLUME)
{
soundVolume = 0;
}
}
Adjust the volume, if it goes over maximum value, just start anew (by disabling it, setting it to 0). Finally, let’s integrate the change to our SoundManager. When we play music/sound, we need to take the value of the soundVolume into account. First, the volume:
Casting to float is important! Otherwise the division happens between two integer values and you end up dividing 1 with 3 and get zero as a result. So you have to be careful with things like these. Taking the current music volume is great. But what if we change the volume during the game? We’ll need to modify the current music volume. Create a new static function, called AdjustVolume. It will call GameProgress.ToggleVolume and then change the volume of the currently playing music to a new value.
public static void AdjustVolume()
{
GameProgress.ToggleVolume();
if (bMusic != null)
{
bMusic.setVolume((float)GameProgress.soundVolume / GameProgress.MAX_SOUND_VOLUME);
}
}
That part is done! Now let’s make the sound button. In our GameScreen, add a new variable called
ImageButton sndBtn;
Then initialize it in our GameScreen constructor:
sndBtn = new ImageButton(game.res.soundBtn[GameProgress.soundVolume]);
sndBtn.setPosition(gameStage.getWidth() - sndBtn.getWidth() - 10, 10);
sndBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
SoundManager.AdjustVolume();
sndBtn.getStyle().imageUp = game.res.soundBtn[GameProgress.soundVolume];
super.touchUp(event, x, y, pointer, button);
}
});
gameStage.addActor(sndBtn);
The idea is simple: change the image after the button has been pressed, indicating the current state of the volume.
Now, if you run the game, you’ll notice that the button is there but it is not clickable. The reason is that we set up our input to GameScreen and not gameStage. We catch events in our gamescreen, but we should be doing it in our stage. Thus, we have to move our keydown function into gamestage. First, remove the InputProcessor implementation from the GameScreen and move keyDown function to stage. Make sure to change the parameters from int keyCode to InputEvent event, int keyCode.
Gdx.input.setInputProcessor(gameStage);
gameStage.addListener(new InputListener(){
@Override
public boolean keyDown(InputEvent event, int keyCode) {
switch (keyCode)
{
case Input.Keys.RIGHT:
AttemptMove(1, 0);
break;
case Input.Keys.LEFT:
AttemptMove(-1, 0);
break;
case Input.Keys.UP:
AttemptMove(0, 1);
break;
case Input.Keys.DOWN:
AttemptMove(0, -1);
break;
default:
break;
}
return false;
}
});
Now, try running the game and pressing the button. You’ll see that both sound/music are adjusted! Awesome! We have a sound button and we can adjust the game volume now!
Disclaimer: I’ve also tampered with game ending functions (not describing them here) to change transitions in GameScreen for html version because it was bugged otherwise. I don’t think that’s relevant to the lesson, but you can check the git commit with full code here (look for endgame boolean):
This concludes our second part of lessons, where we polished the game. Next, I’m going to focus on the Android-specific stuff implementation: ads, in-app purchases.
If you want to expand the game idea – think how you can make a special abilities for every character or add more bonuses or stats (gold per bonus picked?). The effects can also be adjusted, floating numbers on damage or when player gains gold. Never stop thinking about the things that can be improved!
The gameplay is mostly done. One major flaw that remains is the lack of „restart”/”character selection” buttons after the game is over.
Add
eventListener.OnGameEnd(false);
function call in our GameLogic class, exactly once player’s hp reaches zero, right before GameProgress.Reset(true); call. Then modify our GameEventListener and make playerWon Boolean final.
public interface GameEventListener
{
void OnGameEnd(final boolean playerWon);
}
Modify GameScreen’s OnGameEnd listener function to actually make use of playerWon variable. On our last action (where we get rid of the current screen. Here’s how it looks now:
new Action() {
@Override
public boolean act(float delta) {
dispose();
if (playerWon)
{
game.setScreen(new GameScreen(game));
}
else
{
game.setScreen(new CharacterSelectionScreen(game));
}
return true;
}
}
After player gets defeated, he gets brought to CharacterSelectionScreen. That’s it. We no longer need to relaunch the game file after loss.
Few bugs:
Let’s Tweak our “Start” button and call GameProgress.Reset(false) before the game starts: this will ensure that player gets his max hp (in case we made an upgrade and it raised the hp).
After the player wins the stage – make sure to record his hp to currentLives. In our Player.markVictorious function, save the current player’s hp to GameProgress.playerLives:
I’ve converted the following files from attack sounds:
swing.wav -> swing0.ogg
swing2.wav -> swing1.ogg
swing3.wav -> swing2.ogg
coin.wav -> coin.ogg
bite-small.wav -> heal.ogg
fantozzi-sandl1 -> walk0.ogg
fantozzi-sandl2 -> walk1.ogg
Fantozzi-SandR1 -> walk2.ogg
Music is left-as is, in mp3, but renamed to music0..music5.ogg. In the directory android/assets/, create music folder and put sounds/music there. Finally, let’s get to coding! In our com.coldwild.dodginghero package, create a new class and call it SoundManager. It’s going to have static functions that controls menu music. Let’s introduce functions that load and unload sounds.
public class SoundManager {
public static AssetManager assets = new AssetManager();
public static void LoadSounds() {
for (int i = 0; i < 3; i++)
{
assets.load(Gdx.files.internal("music/swing" + i + ".ogg").path(), Sound.class);
assets.load(Gdx.files.internal("music/walk" + i + ".ogg").path(), Sound.class);
}
assets.load("music/coin.ogg", Sound.class);
assets.load("music/heal.ogg", Sound.class);
assets.finishLoading();
}
public static void ReleaseSounds()
{
assets.dispose();
}
}
In our DodgingHero class, in our create function, after GameProgress.Load() call, add the call to LoadSounds function:
SoundManager.LoadSounds();
And
SoundManager.ReleaseSounds();
At the end of dispose() function. This will ensure the sounds are loaded at the start of the game and disposed at the end. The easiest ones to implement would be walk / attack sounds. Add those things to our SoundManager:
Pretty straightforward: pick the necessary (random!) sound, then play it at a reasonably random volume to make it even more randomized. Put the calls to the following functions:
Try running the game! Whenever you move or your player gets hit – you’ll hear it. As you remember, we try to split game logic from representation. We won’t be calling soundmanager from our gamelogic, we’ll pass the bonus pickup / attack even to our gamescreen and it will handle it properly. First, add the functions for coin / health pickup:
So far in our game, we can upgrade the character and unlock new ones. But the upgrades do nothing. Let’s actually make them affect the game.
Player’s hp, hp regen, damage from attack and bonus spawn time is going to depend on character level. Go to our CharacterRecord class. Introduce four functions to get each value. We are going to pass the level of the character, the function is going to return the value.
For HP, damage and regen – let’s make linear functions. First, get rid of maxPlayerLives and playerDamage in GameProgress. While you’re there, also get rid of playerLives = 3 in our „Reset” function. Then, go back to CharacterRecord and implement the three functions.
public int getMaxHp(int level)
{
return 3 + level / levelsForHpUpgrade;
}
public int getDmg(int level)
{
return 1 + level / levelsForAttackUpgrade;
}
public int getHpRestored(int level)
{
return 1 + level / levelsForHpRegenUpgrade;
}
Pretty straightforward. Take the base value, add level divided by the levels necessary for upgrade, get result. Looks good. What about bonus spawning? We don’t want the bonus time to go down drastically, so it makes sense to introduce diminishing returns.
public float getBonusSpawnReduction(int level)
{
int bonusSpawnLvl = level / levelsForBonusSpawnUpgrade;
return bonusSpawnLvl / (30 + bonusSpawnLvl); // 30 enables diminishing returns, x / ( x + 30)
}
30 is just a magical number. You can make it any value you want. All we have to do is put it into necessary places now.
In our GameProgress class, define the following function:
public static int getPlayerMaxHp() {
CharacterRecord currentChar = CharacterRecord.CHARACTERS[currentCharacter];
return currentChar.getMaxHp(levels[currentCharacter]);
}
We just lookup the current character record, then try to get max hp depending on the level (we’ve also made the sprite setting line a bit more readable. Now, let’s modify GameLogic for our new character stats.
First, go to our AssignPlayerPosition function. There are two places that we should change. First,
else if (currentBonus.getBonusType() == Bonus.BONUS_TYPE_ATTACK)
{
enemy.takeDamage(GameProgress.playerDamage);
Let’s replace GameProgress.playerDamage with static function of the similar name.
else if (currentBonus.getBonusType() == Bonus.BONUS_TYPE_ATTACK)
{
enemy.takeDamage(GameProgress.getPlayerDamage());
In our GameProgress, create a function getPlayerDamage():
public static int getPlayerDamage() {
CharacterRecord currentChar = CharacterRecord.CHARACTERS[currentCharacter];
return currentChar.getDmg(levels[currentCharacter]);
}
While you’re still there, do the same for hp restored per bonus:
public static int getPlayerHealthRestored() {
CharacterRecord currentChar = CharacterRecord.CHARACTERS[currentCharacter];
return currentChar.getHpRestored(levels[currentCharacter]);
}
Go back to logic. In BONUS_TYPE_HEALTH check, replace player.addLives(1) with
Now, the only thing left to modify is our BONUS_SPAWN_INTERVAL. We’re going to set it’s value during GameLogic construction (since player cannot levelup during the battles).
Remove the default value of 2.0f from BONUS_SPAWN_INTERVAL and remove keyword static.
private final float BONUS_SPAWN_INTERVAL;
Instead, initialize BONUS_SPAWN_INTERVAL in GameLogic constructor.
That’s it. The changes should affect the game now. But we cannot really see them in character selection scree. Let’s fix that! First, move the hero sprite to the left by adjusting its X position:
Then, let’s actually work on adding the labels with stats. Since we have 4 stats which will involve repetitive label creation, make a function to do that:
It will return the newly created label, so that it can be used to properly figure out the coordinates of the next one below it. I add the stats after I add heroSprite to uiStage:
uiStage.addActor(heroSprite);
Label stat = prepareStatLabel("DMG:" + GameProgress.getPlayerDamage(),
uiStage.getWidth() / 2,
heroSprite.getY() + heroSprite.getHeight(),
textStyle);
stat = prepareStatLabel("HP:" + GameProgress.getPlayerMaxHp(),
uiStage.getWidth() / 2,
stat.getY() - 10,
textStyle);
stat = prepareStatLabel("HEAL:" + GameProgress.getPlayerHealthRestored(),
uiStage.getWidth() / 2,
stat.getY() - 10,
textStyle);
prepareStatLabel("BNS:" + GameProgress.getBonusReductionValue(),
uiStage.getWidth() / 2,
stat.getY() - 10,
textStyle);
;
//Bonus function for reference in GameProgress:
public static int getBonusReductionValue() {
CharacterRecord currentChar = CharacterRecord.CHARACTERS[currentCharacter];
return levels[currentCharacter] / currentChar.levelsForBonusSpawnUpgrade;
}
This should do it! Not only stats are working, but they are also displayed properly. Here’s what I have now:
Lesson 22: Ways to Spend Gold: Unlocking / Upgrading characters
So in the previous lesson we’ve implemented a way to collect gold, an in-game resource. But the trouble is: there’s no way to spend it yet. Let’s fix it today!
I am planning to do two things today: make characters unlockable and enable „upgrade” button for unlocked characters. All characters (except for human) are going to be locked by default. As soon as player collects 1000 gold – he can unlock a character. The amount of gold is up to you. I think 500 is a good amount, because we’ll be able to introduce In-App-Purchases later which would grant enough gold, but also player can gather enough once he played some time (without paying a dime).
Alright, so let’s modify our progress file first. We’re going to adjust it gradually, according to the changes what we are making. First thing that we are going to do, let’s make a separate array of levels of each character. 0 will mean that the character is locked, any value above that will simply mean character level (1+). Introduce the following constants / variables:
public static final int CHARACTER_PRICE = 1000; // price to unlock a character
public static int levels[]; // level of each character, 0 = locked
private static final String SAVE_KEY_PLAYER_LEVEL = "playerlevel";
We’re going to init the array in our Load function. Since we are saving/loading multiple values, we’re simply going to add an index to the key.
public static void Load()
{
levels = new int[CharacterRecord.CHARACTERS.length];
Preferences prefs = Gdx.app.getPreferences(PROGRESS_SAVE_NAME);
for (int i = 0; i < CharacterRecord.CHARACTERS.length; i++)
{
levels[i] = prefs.getInteger(SAVE_KEY_PLAYER_LEVEL + i, i == 0 ? 1 : 0);
}
Something similar goes to saving. In our Save() function, add the following code:
for (int i = 0; i < CharacterRecord.CHARACTERS.length; i++)
{
prefs.putInteger(SAVE_KEY_PLAYER_LEVEL + i, levels[i]);
}
This should do it for saving/loading. Now that the backend is (somewhat) handled – let’s adjust the menu to allow the magic to happen!
So, first, let’s modify our “Start” button to be replaced with “Unlock” button if character is locked. The code is pretty simple:
if (GameProgress.levels[GameProgress.currentCharacter] == 0)
{
TextButton startBtn = new TextButton("Unlock(1000 Gold)", buttonStyle);
startBtn.setPosition((uiStage.getWidth() - startBtn.getWidth()) / 2, uiStage.getHeight() / 6);
startBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
if (GameProgress.currentGold >= GameProgress.CHARACTER_PRICE)
{
GameProgress.currentGold -= GameProgress.CHARACTER_PRICE;
GameProgress.levels[GameProgress.currentCharacter] = 1;
prepareUi();
}
}
});
uiStage.addActor(startBtn);
}
else
{
// start / upgrade button code goes here
TextButton startBtn = new TextButton("START", buttonStyle);
startBtn.setPosition((uiStage.getWidth() - startBtn.getWidth()) / 2, uiStage.getHeight() / 6);
startBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
dispose();
game.setScreen(new GameScreen(game));
}
});
uiStage.addActor(startBtn);
}
We just add a different button in case the character is locked.
You might have noticed that we have to call uiStage.clear() before every prepareUi call. So, this is redundant. Let’s simply move uiStage.clear() to the beginning of prepareUi() and remove all other uiStage.clear() calls on this screen.
Run the game and try switching characters. If you set the CHARACTER_PRICE to lower value for debugging purposes and try unlocking a character – you’ll see that it becomes available.
After that, let’s get to upgrade button. But first, I think it makes sense if we add a label with character level or just a warning (“char locked!”). First, move textStyle declaration/initialization on top of our prepareUi function, right above the buttonStyle declaration.
Now, let’s make a new label, after our heroSprite definition. (Because we’re going to use that as an orientation / position settings).
Now we can finally get to upgrade button. You might have noticed, that the interface is getting a bit overcrowded. Let’s move the start button to the top and levelup button to the bottom (where there’s Unlock button for locked chars).
Here’s how the code looks like:
else
{
// start / upgrade button code goes here
TextButton startBtn = new TextButton("START", buttonStyle);
startBtn.setPosition((uiStage.getWidth() - startBtn.getWidth()) / 2, uiStage.getHeight() * 5 / 6);
startBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
dispose();
game.setScreen(new GameScreen(game));
}
});
uiStage.addActor(startBtn);
TextButton upgradeBtn = new TextButton(
"LvlUp(" + GameProgress.getNextUpgradeCost(GameProgress.currentCharacter) + ")",
buttonStyle);
upgradeBtn.setPosition((uiStage.getWidth() - upgradeBtn.getWidth()) / 2, uiStage.getHeight() / 6);
upgradeBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
if (GameProgress.currentGold >= GameProgress.getNextUpgradeCost(GameProgress.currentCharacter))
{
GameProgress.currentGold -= GameProgress.getNextUpgradeCost(GameProgress.currentCharacter);
GameProgress.levels[GameProgress.currentCharacter] += 1;
prepareUi();
}
}
});
uiStage.addActor(upgradeBtn);
}
The start button code pretty much remains unchanged, except for Y position, which has moved to top of the screen.
UpgradeBtn is similar to start button, but it invokes getNextUpgradeCost function (will get to it later). The position is the same as the old “start” button position. The click function acts in a similar way, checks the next level upgrade cost and if it’s fine – takes the money and increases the character level. Looks good? Let’s go to GameProgress and define the function to get next level cost. As an experiment, I think it’s fine if we multiply the current level value by 2.
public static int getNextUpgradeCost(int currentCharacter) {
return levels[currentCharacter] * 2;
}
I’ve also noticed a bug, CharacterSelectionScreen does not have resize handling, so resizing gets ugly. Let’s fix that!
@Override
public void resize(int width, int height)
{
super.resize(width, height);
uiStage.getViewport().update(width, height, true);
}
Run the game! If you have some gold already – upgrade your character. For now, the upgrade is only visual, but don’t get upset – we’re going to fix this in the next lesson! See you then.
Last lesson, we’ve added multiple characters and made it possible to pick them. We’ve also introduced the levelling stats. Unfortunately, since there are no levels, there’s no point of stats.
First thing’s first, how are we going to level up our characters? Well, this is quite easy! They’ll have to push the “Upgrade” button! What’s that? We cannot simply allow player to mash the upgrade button? Fine, we’ll introduce in-game currency to solve the issue of infinite upgrading.
First thing: we’ll add a coin that can be picked on the battlefield. Yes, similar to health / attack. Here’s how it looks (drawn by https://twitter.com/ElenaNazaire):
First, go to our Bonus.java file. Add a new static byte to mark our coin bonus.
public static byte BONUS_TYPE_COIN = 2;
In our “setup” function, add a case for bType == BONUS_TYPE_COIN:
else if (bType == BONUS_TYPE_HEALTH)
{
set(res.healthBonus);
}
else if (bType == BONUS_TYPE_COIN)
{
set(res.coinBonus);
}
You’ll notice that coinBonus is not defined yet. That’s allright. Go to Resources class and right under our healthBonus sprite, define a new sprite:
public Sprite healthBonus;
public Sprite coinBonus;
Then, down below, load it the same way you would load healthBonus.
Now, make sure we create the bonus in-game. In GameLogic, let’s adjust oru SpawnBonus function. Now if you’ve played the game as much as I did, you can already notice that hearts spawn a bit too much. Let’s reduce their rate and increase the attack spawn rate a bit. Say, 5 out of 8 times we want attacks, 2 out of 8 times we want coins and 1 time we want health bonus.
byte activeBonus = Bonus.BONUS_TYPE_ATTACK; // use it by default
int rnd = MathUtils.random(7); // 0 .. 7
if (rnd > 6)
{
activeBonus = Bonus.BONUS_TYPE_HEALTH;
}
else if (rnd > 4)
{
activeBonus = Bonus.BONUS_TYPE_COIN;
}
bonuses.add(Bonus.Create(fx,
fy,
activeBonus,
game.res));
Use attack bonus by default, then in a few special cases switch it to health and coins. Let’s run the game! You now see that the coins are spawning, but picking them does nothing. Let’s fix that!
Handling the logic behind coins
Great, so what do we do now? How do we make coins work? We need to introduce a separate variable that would store the coins. Let’s handle it in GameProgress.
public static int currentGold = 0;
Add saving/loading at once.
private static final String SAVE_KEY_PLAYER_GOLD = "playergold";
In our Load() function, let’s handle the loading of our gold:
Good, the gold is saved, but it is not gathered properly. Time to implement that. Remember, in our GameLogic class, we have the AssignPlayerPosition function? In it, we process the bonus pickups. Let’s alter it to actually handle the coin pickups. Here’s how my full check looks now:
if (currentBonus.getBonusType() == Bonus.BONUS_TYPE_HEALTH)
{
player.addLives(1);
}
else if (currentBonus.getBonusType() == Bonus.BONUS_TYPE_ATTACK)
{
enemy.takeDamage(GameProgress.playerDamage);
if (enemy.getLives() <= 0)
{
GameProgress.currentLevel++;
player.markVictorious();
eventListener.OnGameEnd(true);
}
}
else if (currentBonus.getBonusType() == Bonus.BONUS_TYPE_COIN)
{
GameProgress.currentGold += 1;
}
That should do it.
Displaying the coin amount to the player
Now let’s ensure we display our coins both in GameScreen and CharacterSelectionScreen.
Start with CharacterSelectionScreen. We want to display coins on the bottom left side of the screen. To do this, we’ll show the coin image and write amount of coins we have beside it. Open our CharacterSelectionScreen class. Go to prepareUi() function, and add the following lines to the end of it:
// coin image
Image coinImage = new Image(game.res.coinBonus);
coinImage.setPosition(1, 1);
uiStage.addActor(coinImage);
// amount of coins
Label.LabelStyle textStyle = new Label.LabelStyle(game.res.gamefont, Color.WHITE);
Label coinAmntLbl = new Label("" + GameProgress.currentGold, textStyle);
// set X position to the right of our coin and Y to be exactly in the middle of it
coinAmntLbl.setPosition(coinImage.getX() + coinImage.getWidth() + 3,
coinImage.getY() + (coinImage.getHeight() - coinAmntLbl.getHeight())/ 2);
uiStage.addActor(coinAmntLbl);
Now let’s add it in our GameScreen now. Since we don’t use Stage in gamescreen for ui elements, let’s just draw it “roughly”. Go to our DrawUi function and add the following code:
Pretty self-explanatory, first we draw a coin, then: the amount of gold we actually have. Run the game! You’re going to see the coins on our main screen and in the game, as well as notice how the amount increases after you pick them.
This took a bit more time and changes that I’ve expected, so I’ll try to cover levelling in our next tutorial.
Lesson 20: Introducing Character Variety and Upgrade system
So as you’ve seen in our previous lesson, we had added the character select screen. Unfortunately, there were no characters to select 🙂 Let’s fix that!
What do we need? We’ll need a data structure to describe each character’s stats. We can do the following: introduce multiple characters and make them upgradable for game currency. The trick is: each character has its own strongpoints. I.e. one character will be getting +1 health after every upgrade, the other: after every two, another one: after every three. Same goes for attack strength from picking relevant bonus and for hp regeneration (how much hp you restore from picking hearts). That way we can create a character that restores lots of hp, but has small healthpool. Or the character that does lots of damage, but has trouble with hp regeneration.
In our logic/objects package, create a new class and name it “CharacterRecord.” I suggest we make four different stats:
Upgrade levels needed for hp upgrade (player buys one upgrade level, the character’s hp upgrades after every N levels). Similar to that:
Upgrade levels needed for hp regen upgrade (how much hp player regenerates per heart picked?)
Upgrade levels needed for attack upgrade (how much damage player deals per attack?)
Upgrade levels needed for bonus time upgrade (let’s make bonus spawn time dependant on player’s character!)
Obviously, each character will also need a name (at least for display purposes on the menu). CharacterRecord will store the base stats, but not the level by itself. So, it should be simple, really. We can create a simple constructor and pre-define the characters this way:
public class CharacterRecord {
public final int levelsForHpUpgrade;
public final int levelsForHpRegenUpgrade;
public final int levelsForAttackUpgrade;
public final int levelsForBonusSpawnUpgrade;
public final String name;
public CharacterRecord(int lvlHp, int lvlRegen, int lvlAttack, int lvlBonus, String _name)
{
levelsForHpUpgrade = lvlHp;
levelsForHpRegenUpgrade = lvlRegen;
levelsForAttackUpgrade = lvlAttack;
levelsForBonusSpawnUpgrade = lvlBonus;
name = _name;
}
public static String CHAR_NAME_HUMAN = "Human";
public static String CHAR_NAME_SPIDER = "Spider";
public static String CHAR_NAME_SKELETON = "Mr.Skeletal";
public static String CHAR_NAME_GHOST = "Ghost";
public static String CHAR_NAME_SLIME = "Slimey";
public static CharacterRecord CHARACTERS[] =
{
new CharacterRecord(2, 2, 4, 4, CHAR_NAME_HUMAN),
new CharacterRecord(3, 6, 3, 3, CHAR_NAME_SPIDER),
new CharacterRecord(6, 12, 1, 3, CHAR_NAME_SKELETON),
new CharacterRecord(4, 4, 2, 4, CHAR_NAME_GHOST),
new CharacterRecord(3, 3, 4, 1, CHAR_NAME_SLIME),
};
}
My general character idea is:
Human has good health, but not so good attack / bonus spawn rate.
Spider gets good health, but bad regen. Better attack than human, but bonus spawn times are getting upgraded slower.
Skeleton is terrible at health/healing, but does good damage at good intervals.
Ghost is mostly average. Good stats, but nothing exceptional.
Slime has amazingly fast bonus spawns and a bit wors stats otherwise.
Adjusting the character selection screen
Before we actually make stats relevant, we’ll have to create different character selection at first. So we have some stats pre-defined, but what do we do now? Let’s actually start by allowing to select different characters. Before we even talk about swapping active character index, let’s discuss how we get the relevant character sprite and name to be displayed in our CharacterSelectionScreen. I suggest we start working on resources class. Similar to the way we return enemySprites, we should make a hashmap that stores player sprites. This time, I’m making it with <String,Sprite> pair (as I am going to use it sparcely), but I must let you know that using strings as lookup won’t do if you do some real-time rendering and not single sporadic lookups. It just takes a big hit on performance (alright, it probably depends on the implementation of hashmap, but I won’t go that deep in this tutorial).
Open up our Resources.java class. Right beside our enemySprites declaration, declare another Hashmap:
public HashMap<String, Sprite> playerSprites;
This will store various player sprites. Initialize it at the same place where you initialize the enemySprites. Then fill it with relevant content.
OK, we got player sprite list. What do we do? Go to CharacterSelectionScreen. We’ll need to adjust a few things. First, move currentCharacter variable into GameProgress class:
public class GameProgress {
public static int currentCharacter = 0;
This is necessary, because we’re going to save the selected character (a bit later). Go back to our CharacterSelectionScreen. See our hero image creation in prepareUi()? Let’s make heroSprite be initialized with the current selected character’s sprite.
Image heroSprite = new Image(
game.res.playerSprites.get(CharacterRecord.CHARACTERS[GameProgress.currentCharacter].name)
);
Also, remove the line
currentCharacter = 0;
From constructor. Try running the game. You should see the good old human sprite. The difference is that we’re looking it up from our hashmap instead of directly providing it to our heroSprite Image. With that, the preparations are mostly done. Let’s finally get to switching the active character sprite! All we need to do is to add listeners to nextBtn and prevBtn (which are somewhat similar).
TextButton nextBtn = new TextButton(">>>", buttonStyle);
nextBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
GameProgress.currentCharacter += 1;
if (GameProgress.currentCharacter == CharacterRecord.CHARACTERS.length)
{
GameProgress.currentCharacter = 0;
}
uiStage.clear();
prepareUi();
}
});
nextBtn.setPosition(uiStage.getWidth() * 5 / 6 - nextBtn.getWidth() / 2, uiStage.getHeight() / 2);
uiStage.addActor(nextBtn);
TextButton prevBtn = new TextButton("<<<", buttonStyle);
prevBtn.addListener(new ClickListener() {
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
GameProgress.currentCharacter -= 1;
if (GameProgress.currentCharacter < 0)
{
GameProgress.currentCharacter = CharacterRecord.CHARACTERS.length - 1;
}
uiStage.clear();
prepareUi();
}
});
prevBtn.setPosition(uiStage.getWidth() / 6 - prevBtn.getWidth() / 2, uiStage.getHeight() / 2);
uiStage.addActor(prevBtn);
Just to explain a bit: we assign click listeners to next/prev buttons. What we do is increase/decrease current character index. If it is out of bounds – go to the beginning/end of the list (to allow player scrolling through the characters without limitation). After that, we clear all Ui elements from the stage and reinitialize them. This might seem like an overkill (we just have to switch the heroSprite, right? But in truth this won’t be the only thing later on (when we’ll be writing stats on the main screen). So we clear all the ui elements from the screen and then repopulate it again.
Now as the final thing for this tutorial part, let’s just make out GameScreen to show the new selected sprite (but not be affected by the stats in any way).
Run the game and try picking any character! You should see that our player character sprite has successfully changed. That concludes lesson 20! Next time, we’ll actually try to make those stats affect the game and introduce the upgrade/unlock system.
Our game starts to take shape – let’s adjust the gameplay by adding multiple enemies with different attacks!
Loading the sprites
After developing the persistence and basic progression, it’s time to diversify the gameplay: our enemy quickly becomes boring. I think it makes sense to adjust the attack patterns.
My idea is to make different attack patterns for different enemies. We have vertical lines for spider. Let’s make horizontal lines for ghost, diagonal lines for bat, random attack pattern for slime and all four possibilities for skeleton.
Before we load the resources in game, let’s adjust the Resources and Enemy class constructor: it is going to accept the type of enemy now. In our Resources class, make a public static final int constants, that would enumerate the enemy types.
public static final int ENEMY_VERTICAL = 0;
public static final int ENEMY_HORIZONTAL = 1;
public static final int ENEMY_DIAGONAL = 2;
public static final int ENEMY_RANDOM = 3;
public static final int ENEMY_UNIVERSAL = 4;
We are using the int’s instead of Enum because there’s no easy way in java to convert int to enum (and we are going to generate a random int to determine enemy type). Now, add the type variable to our Enemy class and adjust the Enemy constructor.
public final int type;
public Enemy(Resources res, EnemyAttackListener listener, int _type)
{
super(GameProgress.getEnemyLives());
type = _type;
Depending on type, we’re going to load the appropriate enemy sprite. Now, to load them, we could declare 5 different sprites, but let’s think of a more optimal approach (so it would be easy to lookup later). In our Resources class, Let’s remove our enemy sprite declaration. Instead, let’s make a HashMap of <Integer, Sprite> pair, which would link our enemy type integers to actual enemy sprite.
public HashMap<Integer, Sprite> enemySprites;
Remove our enemy sprite loading line of code in Resources constructor. Instead of this, let’s initialize the enemySprites HashMap and fill it with values:
A bit repetitive, but I’m sure it will pay off 🙂 Now, let’s actually go to Enemy class and replace the
set(res.enemy);
command with something more advanced:
set(res.enemySprites.get(type));
We grab the sprite according to the type. Careful! In bigger projects, it’s better to create a getter function, which would check if enemySprites has the value of (type) first, in order to avoid nasty errors of all sorts when you add a new enemy.
Let’s make an in-between test run. However, the game won’t compile now. That’s because we’ve changed the Enemy constructor. In our GameLogic, when we create a new Enemy object, let’s add an extra parameter:
enemy = new Enemy(game.res, this, MathUtils.random(Resources.ENEMY_UNIVERSAL));
The enemy is going to be chosen randomly. Run the game. Repeat it a few times. The enemy sprite should be randomly chosen on launch now. Also, if you defeat an enemy (and progress to the next round), the enemy is chosen randomly too. Pretty cool, huh?
Adjusting the attack time
Meanwhile, let’s reduce the time between enemy attacks to make the game more dynamic. First, let’s save the player from being attack as the round starts. Add the constant:
private static final float WARM_UP_TIME = 2.0f;
Adjust the enemy update function a bit, the moment when we determine to attack:
if (timeAlive > WARM_UP_TIME && timeSinceAttack > nextAttackTime)
{
You can see that I’ve added the first condition: we don’t want an enemy to attack for the first two seconds, let’s call it a warm-up time for player to understand that the game started / level changed.
Then, change
private static final float BASE_ATTACK_TIME = 3.0f;
To
private static final float BASE_ATTACK_TIME = 1.0f;
It’s going to be OK, because we add 0..2 seconds between attacks in resetAttackTimer function. This should make the game much more dynamic.
Adjusting the attack patterns
If you check our Enemy class, update function, you’ll see where we determine the attack coordinates. You can imagine, if we add 4 different attack types, the function will get quite bloated. Let’s delegate it to a separate functions.
Move the code inside the
if (timeAlive > WARM_UP_TIME && timeSinceAttack > nextAttackTime)
{
// FROM HERE
int col1 = MathUtils.random(GameLogic.MAX_BASE_X);
int col2 = 0;
do {
col2 = MathUtils.random(GameLogic.MAX_BASE_X);
} while (col2 == col1);
// not very effective, but guaranteed to get different results
for (int x = 0; x <= GameLogic.MAX_BASE_X; x++)
{
for (int y = 0; y <= GameLogic.MAX_BASE_Y; y++)
{
targetTiles[x][y] = (col1 == x || col2 == x);
}
}
// UP UNTIL HERE
attackListener.OnAttack(targetTiles);
resetAttackTimer();
}
Except for the two last lines! Into separate function, let’s name it performVerticalLineAttack();
Now, let’s make a similar function, which we’ll call performHorizontalLineAttack (it’s going to be pretty similar, so let’s copy performVerticalLineAttack and adjust it accordingly). In similar way, horizontal attack will choose 2 horizontal lines and mark them. Here’s how it looks:
private void performHorizontalLineAttack()
{
int row1 = MathUtils.random(GameLogic.MAX_BASE_Y);
int row2 = 0;
do {
row1 = MathUtils.random(GameLogic.MAX_BASE_Y);
} while (row2 == row1);
for (int x = 0; x <= GameLogic.MAX_BASE_X; x++)
{
for (int y = 0; y <= GameLogic.MAX_BASE_Y; y++)
{
targetTiles[x][y] = (row1 == y || row2 == y);
}
}
}
Now, let’s get to diagonal function. Let’s make a separate function which would fill a row (based on selected direction).
private void fillDiagonal(int xstart, int dx)
{
for (int i = 0; i <= GameLogic.MAX_BASE_Y; i++) { int nx = xstart + dx * i; if (nx > GameLogic.MAX_BASE_X)
{
nx = nx - GameLogic.MAX_BASE_X - 1;
}
if (nx < 0)
{
nx = nx + GameLogic.MAX_BASE_X + 1;
}
targetTiles[nx][i] = true;
}
}
We pass the initial x and the direction (dx). Then we go through full height of the field and pick one tile that is positioned diagonally to the previous one. All that is left is to make the function that actually picks two x coordinates and directions.
private void performDiagonalAttack()
{
int dx1 = -1 + MathUtils.random(1) * 2; // either -1 or 1
int dx2 = -1 + MathUtils.random(1) * 2; // either -1 or 1
int col1 = 0;
int col2 = 0;
do {
col1 = MathUtils.random(GameLogic.MAX_BASE_Y);
} while (col2 == col1);
// reset all the tiles to false
for (int x = 0; x <= GameLogic.MAX_BASE_X; x++)
{
for (int y = 0; y <= GameLogic.MAX_BASE_Y; y++)
{
targetTiles[x][y] = false;
}
}
// mark the necessary ones
fillDiagonal(col1, dx1);
fillDiagonal(col2, dx2);
}
3 done, 2 more to go! The random one is quite simple: let’s not care about filling the repeated tiles. It’s part of life. Instead, just pick 10 random tiles on the field and mark them as used for attack. Here’s the final function:
private void performRandomAttack()
{
for (int x = 0; x <= GameLogic.MAX_BASE_X; x++)
{
for (int y = 0; y <= GameLogic.MAX_BASE_Y; y++)
{
targetTiles[x][y] = false;
}
}
for (int i = 0; i < 10; i++)
{
int nx = MathUtils.random(GameLogic.MAX_BASE_X);
int ny = MathUtils.random(GameLogic.MAX_BASE_Y);
targetTiles[nx][ny] = true;
}
}
The easiest one so far: reset the tiles, then generate random coordinates for 10 times and mark the tiles as “under attack” accordingly.
The final one will be a mix of all 4:
private void performUltimateAttack()
{
int rnd = MathUtils.random(4);
switch (rnd)
{
case 0:
performVerticalLineAttack();
break;
case 1:
performHorizontalLineAttack();
break;
case 2:
performDiagonalAttack();
break;
default:
performRandomAttack();
};
}
The only thing left is to add a check on enemy type (and performing an attack based on that type). Do it in Enemy update function, after our attack timing check:
if (timeAlive > WARM_UP_TIME && timeSinceAttack > nextAttackTime)
{
switch (type)
{
case Resources.ENEMY_VERTICAL:
performVerticalLineAttack();
break;
case Resources.ENEMY_HORIZONTAL:
performHorizontalLineAttack();
break;
case Resources.ENEMY_DIAGONAL:
performDiagonalAttack();
break;
case Resources.ENEMY_RANDOM:
performRandomAttack();
break;
default:
performUltimateAttack();
break;
}
We’re done! Now, I’ve noticed that we’re drawing effects below the player. In this case, it won’t be a good idea because we need to explicitly show the red warning signs (and they are poorly visible otherwise). Move the
player.draw(batch, sizeEvaluator);
enemy.draw(batch, sizeEvaluator);
batch.end();
// place it here!
Great. Now the warning signs are going to be shown above player (timely telling him to get out of the blast zone!). The other thing: the delay of 0.5 seconds is not enough to react appropriately. Go to WarningEffect.java and change WARNING_TIME constant to be equal to 0.75f (up from 0.5f).
We should notify our victory listener at the same time when we mark our player as victorious.
In our AssignPlayerPosition, where we check bonus pickups and mark player victorious on killing enemy, add a new line:
if (enemy.getLives() <= 0)
{
player.markVictorious();
eventListener.OnGameEnd(true); // added this line!
}
It will notify the player about the end of the game. Now, make GameScreen implement the said listener.
public class GameScreen extends DefaultScreen implements InputProcessor, GameLogic.GameEventListener {
As usual, press Alt+Enter to implement the missing method.
Now, what do we want to do on GameEnd? We need a smooth fadeout, and then a progression to next level. Well, a restart for now. It is going to be a progression in the next lesson though. Since we are using sprites (and not gamestag eactors), we won’t be able to use libgdx in-built fadeout action. No worries, it’s not hard to implement ourselves. In advance, make two static constants at the beginning of the GameScreen class:
public static final float GAME_END_FADEOUT = 0.5f;
public static final float GAME_START_FADEIN = 0.25f;
Then, get to working on GameEnd function call.
@Override
public void OnGameEnd(boolean playerWon) {
gameStage.addAction(Actions.sequence(
new Action() {
float t = 0;
@Override
public boolean act(float delta) {
t += delta;
float tempt = t / GAME_END_FADEOUT;
tempt *= tempt;
batch.setColor(1, 1, 1, 1 - tempt);
return t >= GAME_END_FADEOUT;
}
},
new Action() {
@Override
public boolean act(float delta) {
dispose();
game.setScreen(new GameScreen(game));
return true;
}
}
));
}
We’ll ignore playerWon Boolean for now (we’ll implement another transaction on loss). Now, what do we want to do on GameEnd? We create a sequence of actions. First is essentially a fade-out timer, we fade the screen out for GAME_END_FADEOUT seconds (0.5 in this case), then we return true, which indicates that that time has been spent. And then actually we create a new GameScreen that restarts the game.
Now, to get further with our implementation, in our logic initialization, add the line:
logic = new GameLogic(game, this);
Now, that we’ve added a smooth fadeout, we should actually add a smooth fadein. In our GameScreen initialization, add a new action to our freshly initialized stage (at the end of GameScreen constructor).
gameStage.addAction(new Action() {
float t = 0;
@Override
public boolean act(float delta) {
t += delta;
float tempT = t / GAME_START_FADEIN;
tempT *= tempT;
if (tempT > 1.0f)
{
tempT = 1.0f;
}
batch.setColor(1, 1, 1, tempT);
return t >= GAME_START_FADEIN;
}
});
It’s the same quadratic fadein as you’ve seen before: take the time, add the delta, divide by expected time for fadein (0.25) in our case, thus normalizing the value to 0..1. After that, square it. Great! We got a new transparency.
Finally, if the time has passed the necessary fadein time, return true (thus ending the action). Run the game. As you see when screens actually fadeIn, you have a quick flicker (if you look closer: it’s a scaled-down version of your screen). To prevent this, we need to update a gameStage camera before drawing frame one. At the end of GameStage constructor, add:
Final thing. By now you’ve probably noticed that enemy attacks are very easy to evade. Decrease WARNING_TIME from 0.75 to 0.5f. Try the game out. FadeIns/Fadeouts should be smooth now.
Now that we’ve implemented a smooth approach- let’s work on smooth leave. Whenever player wins a battle – let’s make him move to the right side of the screen (to make an illussion of leaving and progressing further).
Now, we need to add an extra condition to our draw:
if (timeAlive < APPROACH_TIME)
{
float t = timeAlive / APPROACH_TIME; // 0..1
t = t * t;
setPosition(
t * sizeEvaluator.getBaseScreenX(fieldX),
sizeEvaluator.getBaseScreenY(fieldY));
}
else if (winning)
{
float t = 1;
if (timeAlive - winTime < APPROACH_TIME)
{
t = (timeAlive - winTime) / APPROACH_TIME; // 0..1
t = t * t;
}
float fx = sizeEvaluator.getBaseScreenX(fieldX);
setPosition(
fx + t * (sizeEvaluator.getRightSideX() - fx),
sizeEvaluator.getBaseScreenY(fieldY));
}
else
{
setPosition(sizeEvaluator.getBaseScreenX(fieldX),
sizeEvaluator.getBaseScreenY(fieldY));
}
As you see, we need to know the right side of the screen. In our SizeEvaluator, let’s add methods setRightSideX and getRightSideX. Since the width of our window (and therefore screen) can change, we need to keep it updated. SizeEvaluator constructor should also accept right side x.
private float rightSideX;
public SizeEvaluator(Stage _stage, Resources _res, int maxBaseX, int maxBaseY, float _rightSideX)
{
measuredStage = _stage;
resources = _res;
maxTileBaseX = maxBaseX;
maxTileBaseY = maxBaseY;
rightSideX = _rightSideX;
}
public void setRightSideX(float value)
{
rightSideX = value;
}
public float getRightSideX() {
return rightSideX;
}
Now adjust GameScreen constructor to pass gameStage.getWidth() as the last parameter into SizeEvaluator constructor.
sizeEvaluator = new SizeEvaluator(gameStage,
game.res,
GameLogic.MAX_BASE_X,
GameLogic.MAX_BASE_Y,
gameStage.getWidth());
Then, we have to take care that sizeEvaluator adjusts properly on screen resize. In our GameScreen’s resize method, add the call to sizeEvaluator’s setRightSideX function.
@Override
public void resize(int width, int height)
{
super.resize(width, height);
gameStage.getViewport().update(width, height, true);
sizeEvaluator.setRightSideX(gameStage.getWidth());
}
One more thing: we need to tell our player class that the game is won. There’s also a problem now: the player’s time is updated inside our logic calls. But we’re not updating the logic if the game has ended (enemy or player died). Time for some refactoring! Change GameScreen’s update function from:
public void update(float delta)
{
gameStage.act(delta);
if (player.getLives() > 0 && logic.getEnemy().getLives() > 0)
{
logic.update(delta);
}
}
To:
public void update(float delta)
{
gameStage.act(delta);
logic.update(delta);
}
Player is always updated, but all the other stuff gets updated only if both player and enemy are alive. Now the only thing is left is to tell our player object that we won! In our Player class, add new function:
Then, in our gamelogic, when we damage the enemy, we have to check enemy health. If it equals zero – tell the player that we won! Adjust the part of code with attack bonus pickup:
else if (currentBonus.getBonusType() == Bonus.BONUS_TYPE_ATTACK)
{
enemy.takeDamage(1);
if (enemy.getLives() <= 0)
{
player.markVictorious();
}
}
Great! Now our player leaves after the game ends, marking the continuation of the journey. Looks much better!
