Zap Game: Begin template

References:

• Pre-requisite: it is assumed that you have read through the prior tutorials, and are familiar with the concepts covered in those tutorials.

Goals:

• In this tutorial, we will:
  • Examine an empty Zap Game framework. In subsequent examples, as we learn about repetition structure, we will build a complete (and hopefully more fun) game.

1. Obtain the example code

• Here is the zip file to the source files and compiled executable of this example.
• Here is the keyboard mapping for the XBOX 360 controller.  
• Here is the main tutorial page for working with XNACS1Lib, and here is the complete documentation of the library: html-page or compiled html help file .

When the game starts, you'll see a screen that looks similar to this:

As you look at the screen (and play the game), you can see that there's already a lot going on.   There are a number of blocks scattered randomly across the screen.  The "Enemy" soccer ball on the right is moving up and down the screen.  At the bottom of the screen, you can see the "Enemy not zap"  message.  Every so often, you'll hear a sound as the enemy tries to zap you; the message at the bottom of the screen will briefly change to "Enemy try to send zap path!".  You'll notice that the 'beam' the enemy shoots isn't nearly long enough to reach to your side of the screen.

You control the "Hero" basketball on the left side of the screen, and can move that up and down the screen. Whenever you push the 'A' button, you should hear a sound, and see two circles appear, then disappear, next to your basketball.  If you push the 'B' button, everything on the screen (your basketball, the enemy soccer ball, all the blocks) are randomly placed at new heights on the screen.

The goal of the game is for you to 'zap' the enemy with a laser beam more times than the enemy zaps you with it's laser beam.  You'll notice that right now neither you, nor the enemy, can actually shoot a laser beam.  This is something that you'll fix, as you work your way through the chapter.

Source code to produce all of the above effects are provided for you in this tutorial - you are NOT expected to write all of the above from scratch yourself.  You ARE expected to be able to understand almost everything that's provided to you, since the provided code is very similar to material that you've looked at in prior tutorials.  There is a small amount of genuinely new stuff, which is what we'll look at in this tutorial.

Having said that, it is important to emphasize what you will be expected to do with this project, so that you understand what you'll need to do to extend this game in future tutorials: despite being given a lot of code, in future tutorials your job will be to add (or modify) small amounts of new code.  In other words, once you get an understanding of how the provided .  This is important because while the volume of code may seem overwhelming at first, the reality is that you'll be making very small, manageable changes to this game throughout this chapter.  In order to make it easy to find the very small amount of code that you will need to change, those lines of code have been highlighted in yellow , below.

Also, you may wish to see the 'finished' version of the game that we will build up to in this chapter.  You can find it in 490 tutorial, in this chapter.

2. Overview Of The Program:

Let's start by taking a quick look at the program as a whole.  For right now, we'll focus on the familiar stuff that you already know, and leave anything that's new till later in this tutorial

• Declarations:

  using System; using System.Collections.Generic; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Net; using Microsoft.Xna.Framework.Storage;   using XNACS1Lib;   namespace ZapGameTemplate {     /// <summary>     /// This is the main type for your game     /// </summary>     public class Game1 : XNACS1Base     {         #region Constants for the game           // Width of the world         const float WORLD_MAX_WIDTH = 200.0f;           // hero's inital position          const float HERO_SIZE = 3.0f;         const float HERO_X = WORLD_MAX_WIDTH * 0.15f;           // enemy's inital position         const float ENEMY_SIZE = 5.0f;         const float ENEMY_X = WORLD_MAX_WIDTH * 0.85f;         const float ENEMY_VELOCITY_MIN = 0.2f;         const float ENEMY_VELOCITY_MAX = 0.8f;         const float ENEMY_SHOT_PROBABILITY = 0.05f;                         // Block's X range         const float BLOCK_A_X = WORLD_MAX_WIDTH * 0.3f;         const float BLOCK_B_X = WORLD_MAX_WIDTH * 0.5f;         const float BLOCK_C_X = WORLD_MAX_WIDTH * 0.7f;           const float BLOCK_WIDTH = 6.0f;         const float BLOCK_HEIGHT = 30.0f;           const float HERO_PATH_SIZE = 0.9f;         const float ENEMY_PATH_SIZE = 1.1f;         #endregion

  • As normally is done, the file begins with all the 'using' statements, so that our program has full access to the XNA framework, as well as the XNACS1Lib library that we've built on top of XNA.
  • We then go on to declare a set of constants for the program's use, neatly arranged by category.
• Instance Variables:

  #region instance variables         private int m_HeroScore = 0; // number of times hero zapped enemy         private int m_EnemyScore = 0; // number of times enemy zapped hero           private XNACS1Circle m_Hero;         private XNACS1Circle m_Enemy;                 private XNACS1Rectangle m_BlockA;         private XNACS1Rectangle m_BlockB;         private XNACS1Rectangle m_BlockC;           // For storing the primitives representing the         // path (easy remove at each update)         private XNACS1PrimitiveSet m_HeroPathSet;         private XNACS1PrimitiveSet m_EnemyPathSet;           private float m_RangeMinY;         private float m_RangeMaxY;   // range for defining the initial                             // positions of the enemy, hero, and blocks         #endregion

  • For this game, we need to keep track of the number of times the hero has zapped the enemy (i.e., the player's/hero's score), as well as the number of times the enemy has zapped the zero ( the 'enemy's score'), which we do using two integers
  • We'll also need to track the hero basketball, the enemy soccer ball, and all three blocks.
  • m_RangeMinY  and m_RangeMaxY are used to determine the minimum and maximum height for all the things you see on the screen - the blocks, the hero, the enemy. 
    • We need to use an instance variable, instead of a constant, because these values are assigned based on the height of the window.  Because the height of the window might change (it might be rescaled), it's not a constant, and thus we can't use the window's height to initialize a constant.
  • The last two variables are new, and worth looking at in more detail: the XNACS1PrimitiveSet .  The purpose of a XNACS1PrimitiveSet is to keep track of a set (a collection) of 'primitives' for you - rectangles and circles.  This will allow us to add a bunch of circles to the screen, have them all be drawn, and then remove them all as a group. 
    • The basic operations that the XNACS1PrimitiveSet provide is that we can add a primitive (a cricle/rectangle) to the set, we can remove primitives from the set (we can either remove specific primitives, or we can remove everything that's in the set), and we can tell the set to draw everything that it's keeping track of.
    • We will use this to draw the 'laser beam', by adding a bunch of circles in a line, drawing them all, and then removing them all when the laser beam disappears.
    • For right now, in this tutorial, we only add a
• Initialization, including InitializeWorld():

  protected override void InitializeWorld()         {             World .SetWorldCoordinate( new Vector2 (0.0f, 0.0f), WORLD_MAX_WIDTH);             m_RangeMinY = World .WorldMin.Y * 0.2f;             m_RangeMaxY = World .WorldMax.Y * 0.8f;               m_HeroPathSet = new XNACS1PrimitiveSet ();             m_EnemyPathSet = new XNACS1PrimitiveSet ();               ComputeRandomWorld();         }           /// <summary>         /// Compute random positions for the Hero, Enemy, and the three blocks.         /// Resets the m_EnemyCount back to initial count         /// </summary>         private void ComputeRandomWorld()         {             // Make sure AutoDrawSet is completely clean             World .RemoveAllFromDrawSet();             m_HeroPathSet.RemoveAllFromSet();             m_EnemyPathSet.RemoveAllFromSet();               // Add the Path draw sets to autoRedraw             m_HeroPathSet.AddToAutoDrawSet();             m_EnemyPathSet.AddToAutoDrawSet();               m_EnemyScore = 0;             m_HeroScore = 0;               // Create Hero             Vector2 heroCenter = new Vector2 (HERO_X, RandomFloat(m_RangeMinY, m_RangeMaxY));             m_Hero = new XNACS1Circle (heroCenter, HERO_SIZE);             m_Hero.Label = @"Hero" ;             m_Hero.Texture = @"BasketBall" ;               // Create the enemy             Vector2 enemyCenter = new Vector2 (ENEMY_X, RandomFloat(m_RangeMinY, m_RangeMaxY));             m_Enemy = new XNACS1Circle (enemyCenter, ENEMY_SIZE);             m_Enemy.Velocity = new Vector2 (0, RandomFloat(ENEMY_VELOCITY_MIN, ENEMY_VELOCITY_MAX));             m_Enemy.ShouldTravel = true ;             m_Enemy.Label = @"Enemy" ;             m_Enemy.Texture = @"SoccerBall" ;               // the three blocks             m_BlockA = CreateABlock(BLOCK_A_X, @"BlockA" );             m_BlockB = CreateABlock(BLOCK_B_X, @"BlockB" );             m_BlockC = CreateABlock(BLOCK_C_X, @"BlockC" );         }         /// <summary>         /// Creates a blocking block, located randomly in Y, and at xPos         /// </summary>         /// <param name="xPos"> X position of the blocking block </param>         /// <param name="label"> label to be associated with the created block </param>         /// <returns> A blocking block somewhere in y and at xPos. </returns>         private XNACS1Rectangle CreateABlock( float xPos, String label)         {             Vector2 center = new Vector2 (xPos, RandomFloat(m_RangeMinY, m_RangeMaxY));             XNACS1Rectangle b = new XNACS1Rectangle (center, BLOCK_WIDTH, BLOCK_HEIGHT);             b.Label = label;             World .ClampAtWorldBound(b);             return b;         }

  Note that the above code appears in a different order (and in different locations) in the sample project file.  They've been rearranged above for the purposes of this explanation.
  • The above code is responsible for initializing the game when it starts.  InitializeWorld sets up the world, creates the XNACS1PrimitiveSet objects for the hero's laser beam and the enemy's laser beam, and then goes on to call ComputeRandomWorld .  ComputeRandomWorld will be used not just to set up the game, but also to re-set the game each time the player presses the 'B' button.
  • ComputeRandomWorld starts by removing everything from the 'AutoDraw Set' - the list of things that it will automatically draw for us.  It then goes on put the XNACS1PrimitiveSet objects back into the list of things to be automatically drawn.
  • After that point, everything else should be familiar - the method assigns zero to the scores of the player and the enemy, then creates the soccerball, basketball, and the three blocks (using the CreateABlock method)
• UpdateWorld():

  protected override void UpdateWorld()         {             if (GamePad.ButtonBackClicked())                 this .Exit();               if (GamePad.ButtonBClicked())                 ComputeRandomWorld();               #region Process the Enemy               if ( World .ClampAtWorldBound(m_Enemy) != BoundCollideStatus .InsideBound)                 m_Enemy.VelocityY = -m_Enemy.VelocityY;                         m_Enemy.Texture = @"SoccerBall" ;               #region determine if ENEMY should fire               // clear previous enemy path             m_EnemyPathSet.RemoveAllFromSet();               String msg = "Enemy not zap" ;             if (RandomFloat() < ENEMY_SHOT_PROBABILITY)             {                 // Fire!!                 PlayACue( @"ZapPath" );                 msg = "Enemy try to send zap path!" ;                   Vector2 EnemyBeam = m_Enemy.MinBound;                 CreateEnemyPath(EnemyBeam);                   EnemyBeam.X = EnemyBeam.X - 1f;                 CreateEnemyPath(EnemyBeam);                                 EnemyBeam.X = EnemyBeam.X - 1f;                 CreateEnemyPath(EnemyBeam);               }             EchoToBottomStatus(msg);               #endregion // enemy should fire?             #endregion // enemy procesing               #region process the Hero                 m_Hero.CenterY += GamePad.ThumbSticks.Right.Y;                 World .ClampAtWorldBound(m_Hero);                   m_Hero.Texture = @"BasketBall" ;                   // clear previous hero path                 m_HeroPathSet.RemoveAllFromSet();                   if (GamePad.ButtonAClicked())                 {                     PlayACue( "ZapPath" );                       // Draw two circles, for now                     Vector2 HeroBeam = m_Hero.MaxBound;                     CreateHeroPath( HeroBeam);                       HeroBeam.X = HeroBeam.X + 2;                     CreateHeroPath(HeroBeam);                                     }              #endregion               EchoToTopStatus( "Scores: YoueScore(" + m_HeroScore + ")      EnemyScored(" + m_EnemyScore+ ")" );         }

  • Despite there being a lot of code that has been provided to you, the yellow highlighted lines are (almost) the only ones that you will modify in future tutorials. That's right - there's only a very, very small amount of code that you're expected to change / add to :)
  • This game starts by checking if the user wants to end the game, and then checking if the user wants to restart the game (by pressing the 'B' button)
  • Next, if the enemy has reached the top/bottom of the screen, we make sure that the enemy hasn't left the screen, and that enemy's velocity is reversed.
  • Conceptually, the next part of the program works like this: each call to UpdateWorld, we'll check to see if the enemy randomly decides to shoot a laser beam.  If so, we create that beam using a bunch of small circles, that we put into m_EnemyPathSet .  Once UpdateWorld finishes, the XNACS1Lib library will make sure that the beam is drawn on the screen.  Because we want the beam to appear for only a very short amount of time, we will then remove that beam on the NEXT call to UpdateWorld.  Because we want the beam to be erased on the next call to UpdateWorld, we put that first, so that it will only have an effect if the previous call to UpdateWorld decided to draw the laser beam.
    • The first thing we do here is erase the enemy's laser beam off the screen.  We do this by removing all the circles in the enemy's drawing set, like so:
      

                  // Clear previous path

                  m_EnemyPathSet.RemoveAllFromSet();

      • Note that if there's nothing in the set, then this operation does nothing.  This is a good thing - here we can just tell it to clear itself, and it will worry about whether there's anything that it's keeping track of, that needs to be cleared.
    • Next, we decide whether to have the enemy shoot or not.  If the random number is less than .05, the enemy shoots.  This way, the enemy shoots about 5% of the time.
      

                  if (RandomFloat() < ENEMY_SHOT_PROBABILITY)

                  {

    • Next, we create a 'beam' consisting of exactly three circles. The first step is:
      

                      Vector2 EnemyBeam = m_Enemy.MinBound;

                      CreateEnemyPath(EnemyBeam);

      • CreateEnemyPath creates a single, new circle, gives it the proper color/image for the enemy's laser beam (which is brown/gray), and adds that individual circle to the enemy's path (to the enemy's collection of circles).  It takes a Vector2, which is where to put the center of the new circle. 
      • In order to make sure that the circle we create has been moved over a little bit from the prior circle, we keep track of the middle of the current circle in the EnemyBeam variable.  We'll start by drawing a circle at the bottom-left corner of the enemy soccer ball, just to have an easy place to start.
    •  The important part of this pattern is:
      

                      EnemyBeam.X = EnemyBeam.X - 1f;

                      CreateEnemyPath(EnemyBeam);

• Basically, we move the center point over to the left by a small amount, then add another circle to the enemy's laser beam.
• We then go on to handle the player's (hero's) laser beam in the same way.  Erase any previous laser beams, and then if the player presses the 'A' button, draw a new laser beam on the screen.
  • Note that because we're moving the center point over by 2 units, rather than 1, you can see the space between the circles.  We'll fix this in future tutorials
    

                        HeroBeam.X = HeroBeam.X + 2;

                        CreateHeroPath(HeroBeam);                    

• Utility Functions:

  #region utility functions           /// <summary>         /// Determins if the input "path" circle collides with any of the three blocks         /// </summary>         /// <param name="path"></param>         /// <returns> true: if collide, otherwise false </returns>         private bool CollidedWithBlocks( XNACS1Circle path)         {             return m_BlockA.Collided(path) || m_BlockB.Collided(path) || m_BlockC.Collided(path);         }           /// <summary>         /// Creates a new circle representing the path from enemy towards the hero.         /// The created circle is added to the m_EnemyPathSet for drawing purposes.         /// </summary>         /// <param name="pos"> Current path position (circle to be created) </param>         /// <returns> The newly created circle. </returns>         private XNACS1Circle CreateEnemyPath( Vector2 pos)         {             XNACS1Circle c = new XNACS1Circle (pos, ENEMY_PATH_SIZE);             c.OutsideColor = Color .Gray;             c.CenterColor = Color .Brown;             m_EnemyPathSet.AddToSet(c);             return c;         }           /// <summary>         /// Creates a new circle representing the path from the hero towards the enemy.         /// The created circle is added to the m_HeroPathSet for drawing purposes.         /// </summary>         /// <param name="pos"> Current path position (circle to be created) </param>         /// <returns> The newly created circle. </returns>         private XNACS1Circle CreateHeroPath( Vector2 pos)         {             XNACS1Circle c = new XNACS1Circle (pos, HERO_PATH_SIZE);             c.OutsideColor = Color .LightBlue;             c.CenterColor = Color .LightGray;             m_HeroPathSet.AddToSet(c);             return c;         }

  • There are three interesting utility functions:
    • CollideWithBlocks determines if aCircle collides with any of the three blocking blocks.  If the circle has collided with a block, then the method returns true.  Otherwise it returns false.
    • CreateHeroPath creates a circle representing the next step in the hero's laser beam, and adds it to the hero's 'zap path'. The hero's laser beam has a blue/gray color.
    • CreateEnemyPath creates a circle representing the next step in the enemy's  laser beam, and adds it to the enemy's 'zap path'. The enemy's laser beam has a gray/brown color.

  
  

  ---

  FURTHER EXERCISES::  

  1. Modify the provided code so that instead of having the enemy shoot 3 circles' worth of laser beam, have the enemy shoot 10 circles' worth of laser beam.
     1. In your own words, describe how far that beam goes across the screen.
     2. Given your answer to 'A', above, do you think that it will be a good idea to try and make the beam stretch across the screen by copying and pasting a chunk of code, over and over again?
  2. Currently, the enemy's laser beam is not centered on the enemy (instead, it's a bit low).  Figure out how to adjust the EnemyBeam variable in UpdateWorld so that the enemy's laser beam is centered on the enemy.
  3. Figure out how to adjust the program so that the hero's laser beam is centered on the hero.

  ---

  Project home page : The Game-Themed Introductory Programming Project.

  ---

  Kelvin Sung Computing and Software Systems University of Washington, Bothell ksung@u.washington.edu

  Michael Panitz Business And Information Technology Cascadia Community College mpanitz@cascadia.eduu

  ---

  	This work is supported in part by a grant from Microsoft Research under the Computer Gaming Curriculum in Computer Science RFP, Award Number 15871 and 16531.
  2/8/2010