Otter 2D Top-Down Adventure Tutorial (Part 9) - Adding a Boss and an EndScene
We're nearing the end of the tutorials! Last time, we implemented the camera, making it follow our Player around in a fashion similar to the traditional 2D Zelda games. It's time to add a vile boss, and an EndScene which will either congratulate the player for winning, or bring the bad news of game over.
There are a lot of new assets to introduce for this tutorial. First, download all of the following graphics, saving each to your 'Assets/Graphics' folder, and add a reference to each once afterwards:
Note, the graphics' file names are as follows: boss.png, bossBullet.png, bossParticle.png, otterEnd.png, and otterGameOver.png.
Fresh graphics aren't the only new assets for this entry. Download the sound for the when the boss shoots here, saving it to the 'Assets/Sound' folder, and the ending music here, saving it to the 'Assets/Music' folder. Add a reference to each in your project.
Let's get the easy stuff out of the way first. Open your 'Assets.cs' class and add the following:
public const string BOSS_SPRITE = "../../Assets/Graphics/boss.png";
public const string BOSS_BULLET = "../../Assets/Graphics/bossBullet.png";
public const string BOSS_PARTICLE = "../../Assets/Graphics/bossParticle.png";
public const string END_IMG = "../../Assets/Graphics/otterEnd.png";
public const string END_GAME_OVER = "../../Assets/Graphics/otterGameover.png";
public const string SND_BOSS_SHOOT = "../../Assets/Sound/bossShoot.ogg";
public const string MUSIC_END = "../../Assets/Music/end.ogg";
Next, open your 'Global.cs' class and add one line, while modifying the line that instantiates your CameraShaker:
public static CameraShaker camShaker;
public static Boss boss;
A new boss object! Did we even implement it yet? Nope, but I had to get you excited somehow, or at least try. Add a new C# class to the 'Entities' folder, named 'Boss.cs'. Our Boss isn't going to be too flashy, and doesn't really introduce any new concepts. It will stand in place, firing bullets in all four cardinal directions, once every 100 frames. The Boss class looks as follows:
namespace OtterTutorial.Entities
{
public class Boss : Entity
{
// Shoot once every 100 frames
public const int SHOOT_DURATION = 100;
// Default health points the boss starts with
public const int DEFAULT_HEALTH = 15;
public int health = 1;
public int shootTimer = 0;
public Spritemap<string> sprite;
public Sound hurt = new Sound(Assets.SND_ENEMY_HURT);
public Boss(float x, float y) : base(x, y)
{
health = DEFAULT_HEALTH;
// Set up the Spritemap in the same manner we did for the player
sprite = new Spritemap<string>(Assets.BOSS_SPRITE, 32, 40);
sprite.Add("standLeft", new int[] { 0, 1 }, new int[] { 10f, 10f });
sprite.Add("standRight", new int[] { 0, 1 }, new float[] { 10f, 10f });
sprite.Add("standDown", new int[] { 3, 4 }, new float[] { 10f, 10f });
sprite.Add("standUp", new int[] { 6, 7 }, new float[] { 10f, 10f });
sprite.Add("walkLeft", new int[] { 0, 1 }, new float[] { 10f, 10f });
sprite.Add("walkRight", new int[] { 0, 1 }, new float[] { 10f, 10f });
sprite.Add("walkDown", new int[] { 3, 4 }, new float[] { 10f, 10f });
sprite.Add("walkUp", new int[] { 6, 7 }, new float[] { 10f, 10f });
sprite.Play("standLeft");
sprite.Scale = 2; // Our sprite is rather small, so scale it up in size
// Since we scaled up 2x we must make the hitbox 2x big as well
SetHitbox(64, 80, (int)Global.Type.ENEMY);
}
public override void Update()
{
base.Update();
shootTimer++;
if (shootTimer >= SHOOT_DURATION)
{
shootTimer = 0;
Scene.Add(new BossBullet(X + 16, Y + 20, Global.DIR_UP));
Scene.Add(new BossBullet(X + 16, Y + 20, Global.DIR_DOWN));
Scene.Add(new BossBullet(X + 16, Y + 20, Global.DIR_LEFT));
Scene.Add(new BossBullet(X + 16, Y + 20, Global.DIR_RIGHT));
}
// Check if a Player fired Bullet hits us
var collb = Collider.Collide(X, Y, (int)Global.Type.BULLET);
if (collb != null)
{
Bullet b = (Bullet)collb.Entity;
b.Destroy();
Global.camShaker.ShakeCamera();
// 9999 value is meaningless, and just for fun
DamageText dt = new DamageText(X, Y, "9999");
Global.TUTORIAL.Scene.Add(dt);
// If dead add a new explosion
if (health <= 0)
{
Global.TUTORIAL.Scene.Add(new Explosion(X, Y, true));
RemoveSelf();
}
}
}
}
}
The Boss class introduces one new object, a BossBullet. We will need to implement this as well. Add another new class to your 'Entities' folder, named 'BossBullet.cs'. This class is very similar to our 'Bullet.cs' class, only containing a few subtle differences, mainly the graphic that is displayed, particles emitted, and sound played. This class looks as follows:
using Otter;
using OtterTutorial;
using OtterTutorial.Effects;
using System;
namespace OtterTutorial.Entities
{
public class BossBullet : Entity
{
public float bulletSpeed = 10.0f;
public int direction = 0;
public float distanceTraveled = 0f;
public float maxDistance = 350f;
public Image image;
public Sound shootSnd = new Sound(Assets.SND_BOSS_SHOOT);
public BossBullet(float x, float y, int dir)
{
X = x;
Y = y;
direction = dir;
image = new Image(Assets.BOSS_BULLET);
Graphic = image;
Global.TUTORIAL.Scene.Add(new BossTrail(X, Y));
SetHitbox(16, 14, (int)Global.Type.BOSS_BULLET);
shootSnd.Play();
}
public override void Update()
{
switch (direction)
{
case Global.DIR_UP:
{
Y -= bulletSpeed;
break;
}
case Global.DIR_DOWN:
{
Y += bulletSpeed;
break;
}
case Global.DIR_LEFT:
{
X -= bulletSpeed;
break;
}
case Global.DIR_RIGHT:
{
X += bulletSpeed;
break;
}
}
if (distanceTraveled % 60 == 0)
{
Global.TUTORIAL.Scene.Add(new BossTrail(X, Y));
}
distanceTraveled += bulletSpeed;
if (distanceTraveled >= maxDistance)
{
RemoveSelf();
}
}
}
}
Now, I know duplicating code is a big no-no, and under normal circumstances I would have created a more generic Bullet class, and have the BossBullet and Player's Bullet extend this parent class. However, for simplicity's sake, I have created this additional class, as opposed to going back and reworking the structure of classes from past tutorials. Feel free to edit the BossBullet.cs class in anyway you see fit, though! Moving on, let's implement the BossTrail class.
Right-click the 'Effect's folder, adding a new C# class named 'BossTrail.cs'. This class is very similar to the BulletTrail class, and is implemented as so:
using Otter;
using OtterTutorial;
using OtterTutorial.Effects;
using System;
namespace OtterTutorial.Effects
{
public class BossTrail : BulletParticle
{
public const int DESTROY_FRAME = 3;
public BossTrail(float x, float y) : base(x, y)
{
destroyFrame = DESTROY_FRAME;
sprite = new Spritemap<string>(Assets.BOSS_PARTICLE, 32, 40);
sprite.Add("Emit", new int[] { 0, 1, 2, 3 }, new float[] { 10f, 10f, 10f, 10f });
sprite.Play("Emit");
Graphic = sprite;
}
}
}
The Explosion class has been modified a bit. It now contains a boolean, determining if the explosion was due to a Boss or not. Such explosions will eventually cause our game's current Scene to change. Add the following variable to the 'Explosion.cs' class, above its constructor:
public bool bossExplode = false;
Modify the Explosion constructor, so that it takes in the following parameters:
public Explosion(float x, float y, bool boss = false, int width = 32, int height = 40, Color expColor = null, int radius = 20)
Next, add a reference to the Scenes namespace at the top of our class:
using OtterTutorial.Scenes;
Additionally, add this line to the Explosion constructor:
Lastly, within the Update method, directly below the call to RemoveSelf, add the following code:
if (bossExplode)
{
Global.gameMusic.Stop();
Global.TUTORIAL.Scene.RemoveAll();
Global.TUTORIAL.SwitchScene(new EndScene());
}
This code changes the current Scene to the EndScene, as the Boss is clearly dead. Before we go ahead and implement the new EndScene class, we should make the Player check for any collisions with bullets fired by the Boss. If such a collision occurs, the Player should now die :(, and we should see a game over screen, which will be added in a few steps below. Open the 'Player.cs' class, adding the following code towards the very bottom of the Update method:
var collb = Collider.Collide(X, Y, (int)Global.Type.BOSS_BULLET);
if (collb != null)
{
BossBullet b = (BossBullet) collb.Entity;
b.RemoveSelf();
dead = true;
Global.TUTORIAL.Scene.Add(new Explosion(X, Y, true));
RemoveSelf();
}
The Player hasn't had its Hitbox set just yet, so let's go ahead and do that in its constructor via the following line:
SetHitbox(WIDTH, HEIGHT, (int)Global.Type.PLAYER);
Before the Player.cs class can compile we must add a boolean variable towards the top of the class, above the constructor, tracking if the player is dead or not:
public bool dead = false;
The Player can now die, the map contains a big Boss that fires bullets, and all that is left to add is a new Scene displaying either a game over message upon the Player's death, or an indication of victory upon defeat of the Boss. To this point, we've referenced our new EndScene class but haven't actually created it. Add a new C# class to the 'Scenes' folder, named 'EndScene.cs'. This class is very similar to our TitleScene.cs class, with a few subtle differences. The class is as follows:
using Otter;
using OtterTutorial;
using OtterTutorial.Entities;
using System;
namespace OtterTutorial.Scenes
{
public class EndScene : Scene
{
public Image endImage = new Image(Assets.END_IMG);
public Text endText = new Text("You win! You rock! \\:D/", Assets.FONT_PANIC, 64);
public Text enterText = new Text("Press Enter to go back to title screen!", Assets.FONT_PANIC, 24);
public const float TIMER_BLINK = 25f;
public float blinkTimer = 0;
public Music endMusic = new Music(Assets.MUSIC_END, true);
public EndScene()
{
// If the Player is dead then display Game Over
// Otherwise, display that they won
if (Global.player.dead)
{
endImage = new Image(Assets.END_GAME_OVER);
endText = new Text("Oh no! You died! :(", Assets.FONT_PANIC, 60);
endText.OutlineColor = new Otter.Color("FF0000");
}
else
{
// Our victory image is a bit big, so scale it down
endImage.Scale = 0.75f;
endText.OutlineColor = new Otter.Color("7FA8D2");
}
endImage.CenterOrigin();
endImage.X = Global.TUTORIAL.HalfWidth;
endImage.Y = 1000;
this.AddGraphic(endImage);
Glide.GlideManagerImpl.Tweener.Tween(endImage, new { Y = 245 }, 30f, 0f).Ease(Ease.BackOut);
endText.OutlineThickness = 3;
endText.CenterOrigin();
endText.X = Global.TUTORIAL.HalfWidth;
endText.Y = 55;
this.AddGraphic(endText);
enterText.OutlineColor = new Otter.Color("7FA8D2");
enterText.OutlineThickness = 2;
enterText.CenterOrigin();
enterText.X = Global.TUTORIAL.HalfWidth;
enterText.Y = 450;
this.AddGraphic(enterText);
endMusic.Play();
// Clean up some Global variable
Global.player = null;
Global.boss = new Boss(900, 600);
Global.camShaker = null;
Global.gameMusic = null;
}
public override void Update()
{
base.Update();
blinkTimer++;
if (blinkTimer >= TIMER_BLINK)
{
enterText.Visible = !enterText.Visible;
blinkTimer = 0;
}
if (Global.PlayerSession.Controller.Start.Pressed)
{
endMusic.Stop();
// Go back to the TitleScene if the player hits Enter
Global.TUTORIAL.RemoveScene();
Global.TUTORIAL.AddScene(new TitleScene());
}
}
}
}
To wrap things up, open the GameScene.cs class and add the following line at the end of the Begin method:
Now add the following towards the top of the class:
using OtterTutorial.Util;
Finally, add the following lines to the GameScene constructor, and we should be done:
if (Global.boss == null)
{
Global.boss = new Boss(900, 600);
}
if (Global.camShaker == null)
{
Global.camShaker = new CameraShaker();
}
There's one last step to go in order to get everything to compile. Modify the Type enum in our Global.cs class by adding two new values of 'BOSS_BULLET' and 'PLAYER'.
Hopefully everything went smoothly, and when you play your game you have something similar to this:
Our game might not be much to play, nor is it very fun, but we have a game on our hands with a beginning, middle, and end! Yes, it is very small, but a foundation is in place to expand upon. There's just one entry to go in this series. This entry should cover adding a bit more polish and examine expanding the game on your own time. I'll also discuss more game dev related tools and resources, as well as cool sites and articles to check out. Until next time, pat yourself on the back for making it this far, and then throw yourself a well deserved pizza party :D
Take me to Part 10 of the tutorial!
Download the source code to this tutorial!
theartofmadeline
ellievsbear
pixelskylines
amandla
areudirty
snowghoul