VIDEO GAME PROGRAMMING Video Game Programming Snowball Wars INSTRUCTOR TEACHER’S ASSISTANT

VIDEO GAME PROGRAMMING

Video Game Programmin

g

Snowball Wars

INSTRUCTOR

<instructor name>

TEACHER’S ASSISTANT

<TA name>


PART 1 – Snowball Wars BASICS

Objective:– Create the Title Screen and have it

display until the user hits <enter> to start the game.

• Step 1 – Create Title Screen Art• Step 2 – Rename ‘Level_1’ to ‘Title’• Step 3 – Add Map to ‘Title’ level• Step 4 – Build and Run


CONCEPT – File Formats

• A file format is the way data is encoded for different types of files.

• Some common file formats are .bmp, .gif, .txt, .doc, .mp3 and .wav

• Images in FUN are .bmp (Bitmaps) and sounds are .wav (WAVE form audio format).


STEP 1: Create Title Screen Art• Open Microsoft Paint.• Go to the Image menu and select Attributes.• Set Width to 640 and Height to 480.• Draw something pretty! Put “Snowball Wars”

somewhere on the image.• Add text that says “Hit Enter to Start”• When you’re done, go to the File menu and select

Save As…• In the File Name text box, enter “Title”, then save to

the Maps folder in Art Assets.• Click OK.


Title Screen Art


STEP 2: Rename ‘Level_1’ to ‘Title’

• Go back to your Snowball Wars project in FUN.

• In the Project Resources under Game, right-click on ‘Level_1’.

• Select Rename.• Where it asks you to

enter the new name, enter “Title”.

• Hit OK.


STEP 3: Add the Map to Title Level

• Under the Title level, right click on Maps.

• Select Add from the pop-up menu.


STEP 3: Add the Map to Title Level

• Enter ‘Title’ for Map Name.• Where it says Filename, click

the button with ‘…’ on it.


STEP 3: Add the Map to Title Level continued…

• Navigate to the folder containing your game. Find the Maps folder in Art Assets and select the title.bmp that you created earlier.

• Click Open to load the bitmap.• Click OK in the Map Properties.


STEP 4: Build and Run

• Click the Build and Run button to check out your game!


PART 2 – Adding the Main Level

Objective:– Create the main level, using the same method

we did for the Title Screen.

• Step 1 – Create Map Background Art• Step 2 – Add a new level to the game.• Step 3 – Add Map to ‘Level1’.• Step 4 – Build and run.


STEP 1: Create Background Art

• Open MS Paint.• Set the Image Width to 640 and

the Image Height to 480.• Draw a basic map with NO

OBSTACLES! We add those later.• Save as bg.bmp in the Maps folder

in Art Assets.


Sample Background Art


STEP 2: Add a new level

• Right click Game in the Project Resources and select Add Level.

• Rename ‘Level_2’ to ‘Level1’.


STEP 3: Add Map to Level1

• Add a new map to Level1.• Name the map BG and use your

bg.bmp art you created earlier.• Make sure you add the new map to

Level1 and NOT Title!



• Click the Build and Run button to check out what you have so far.

• Try hitting <enter> to move on to the next screen like we want it to.

• What happened? Why?


CONCEPT – Level Behavior

• Why did your game not move to the next level when you hit <enter>?

• Because we didn’t tell the game to do it!

• If we want anything to happen in our game, we have to tell the game what to do and when to do it.

• Here we can use the idea of Level Behavior.


Concept – Level Behavior continued…

• We can use Level Behavior to tell our game to do certain things in any particular level.

• The level can perform actions based on key presses, timers, or other game events.


PART 3 – Adding Level Behavior

Objective:– Add the behavior to the Title level that allows

us to start the game when we hit <enter>. We’re also going to look at some C++ code!

• Step 1 – Examine the Level Behavior code.• Step 2 – Add proper behavior to the Title

level.• Step 3 – Build and run.


STEP 1: Examine Level Behavior Code

• Under Game Assets, under Behavior, expand the Object Functions tree.

• Find the function called KeyboardLevelAdvanceFN and double-click on it.


KeyboardLevelAdvanceFN// If any key is pressed on the keyboard the game // will advance to the next levelif (KeyTriggered(DIK_RETURN)){

NextLevel();}


C++ Concepts: ‘if’ Statements

• The KeyboardLevelAdvanceFN is a perfect example of an if statement.

• You can look at if statements exactly like you would if it were a sentence.

• ie. “If you hit enter, advance to the next level.”


C++ Concepts: ‘if’ Statements continued…

An if statement consists of 3 parts.1. The if keyword.2. A “Conditional” statement.3. The code to execute if the

Conditional is true.


C++ Concepts: ‘if’ Statements continued…

Example:if( something Is True){

do Something;}


C++ Concepts: Comments

• A Comment in C++ is something in your code that the computer does not compile into machine code.

• You use comments to make notes in your code like why you did something, when it happens, or what it does.


C++ Concepts: Machine Code

• So what is machine code exactly?• Machine Code is the language of a

computer. We use C++ to write code that is easy for humans to understand, and then we use a compiler to translate the C++ code into machine code.

• Machine code might look something like…• 100011011011000111001101010110011


C++ Concepts: Comments continued…

• A Comment consists of 2 parts:1. Two slashes like so: //2. TextExample: // This is a comment. You can also// extend a comment onto multiple // lines like this.


C++ Concepts: Comments continued…

// This is a comment…This is not.• If you forget the ‘//’, you’ll break

your game and it will not build!


STEP 2: Add Level Behavior to Title

• Right Click the Title level under the Game tree.

• Select Properties.• In the Level Properties menu, in

the Behavior tab, click the button with ‘…’ on it.


STEP 2: Add Level Behavior to Title continued…

• Under Functions, find the KeyboardLevelAdvanceFN function and hit the plus button.


STEP 2: Add Level Behavior to Title continued…

• Hit OK.• Hit OK one more time at the Level

Properties menu.



• Build and Run your game.• At the Title screen, try hitting

<enter>.• Now that you’re in the main game

level, try hitting <escape>.• What happened?• Why?


PART 4 – Adding the Player and Enemy Actors

Objective:– Now we’re going to add the player to the

game! Here we’ll focus on adding an animation for the player. We’re going to do almost the exact same thing to add an enemy.

• Step 1 – Create Player and Enemy art.• Step 2 – Add the Player and Enemy actors• Step 3 – Add animations to both actors.• Step 4 – Build and run.


CONCEPT – Animation

• An animation is a sequence of one or many frames that visually represent an action such as walking, shooting, etc…

• In Fun Actors are made up of Animation Sets.


STEP 1: Create Player and Enemy Art

• Open MS Paint.• Set the Image Width to 64 and Image

Height to 100.• Fill the image with Bright Green.• Draw your player character (not in Bright

Green).• Make sure he/she is facing right!• Save as player1.bmp in the Actors folder

in your Art Assets.


Example Player Art


STEP 1: Create Player and Enemy Art continued…

• In MS Paint go to the File menu and select New.

• Make sure the image width is 64 and the image height is 100.

• Create art for the enemy.• Make sure the enemy is also facing right!• Make sure the background is bright green!• Save in your Actors folder as

enemy1.bmp.


Example Enemy Art


CONCEPT – Actors

• Actors are the visual representations of the characters in FUN games .

• Think of an Actor as a cookie cutter.• You can make lots of different

characters out of one actor.


STEP 2: Add Player and Enemy Actors

• In FUN, under Game Assets right click on Actors.

• Select Add.• Enter the name PLAYER and hit OK.• Do the same thing again only this

time name the new actor ENEMY.


STEP 3: Add Animations for Player and Enemy Actors

• Under Actors now right click on PLAYER and select Add Animation Set.

• Where it says Name enter Walk.• Now we’re going to add a new frame

to the animation by clicking on the Add button.


STEP 3: Add Animations for Player and Enemy Actors continued…

• Navigate to your Actors folder in Art Assets.

• Select player1.bmp and hit Open.• You should see your player art on the

film strip now.


It Should Look Something Like This:

• Finally, check the box next to Horizontal Flip and hit OK.


STEP 3: Add Animations for Player and Enemy Actors continued…

• Now do the same thing for the ENEMY actor.

1. Add the WALK animation set.2. Add the single enemy1.bmp

frame.3. Check the Horizontal Flip box.



• Build and run your game.• Hit <enter> to enter your main

game level.• What happened?• Why?


CONCEPT – Sprites

• Sprites are considered to be living creatures that live, move and die during the game.

• Actors only define the shape that Sprites take to be represented in the game.


CONCEPT – Sprites continued…

• Think of it like this…• Let’s look at Super Mario Bro’s.• How many Goombas are there in the

game? Hundreds? Thousands? Each one of those Goombas is a Sprite, and all of those Goombas share a single Goomba Actor that defines the animation(s) for every Goomba.


CONCEPT – Sprites continued…

• The reason you didn’t see your Player and Enemy in your game is because you haven’t added them as Sprites!

• Guess what’s next…


PART 5 – Adding the Player Sprite

Objective:– Now we’re ACTUALLY going to add the player

to the game. Pay attention because we’re going to use a similar technique to add the enemy.

• Step 1 – Add the Player Sprite to Level1.• Step 2 – Set the Player Sprite Properties.• Step 3 – Build and run.


STEP 1: Add Player Sprite to Level1

• In the Game tree, under Level1, right-click on Sprites and select Add.


STEP 2: Set Player Sprite Properties

• Select the General tab.• For the name, enter player.• Select BG where it says Map.


STEP 2: Set Player Sprite Properties continued…

• Now select the Animation tab.• Where it says Actor, select PLAYER.



• Select the Position tab and click the button with ‘…’ on it.

• This will allow you to choose where the player actually is when we start the game.



• Now, select the Displacement tab.• Set the Speed to 5.



• Now Build and Run to see what happens.

• Hit <enter> to go into Level1 and see your sprite in action!

• Try moving the sprite around with W, A, S, and D keys.

• What happened? Why?


CONCEPT – Sprite Behavior

• The sprite didn’t move because we never TOLD it to move!

• Remember level behavior? Well here we’re going to give a Sprite behavior.


CONCEPT – Sprite Behavior continued…

• We can use Sprite Behavior for things like Player Input and AI.

• The difference between Sprite Behavior and Level Behavior is that you can have many different sprites on the same level, each having unique behavior.


PART 6 – Adding the Player Sprite Behavior

Objective:– Here is where we add the movement behavior

for the player sprite using the W, A, S, and D keys.

• Step 1 – Examine the Sprite Behavior Code.

• Step 2 – Add the Behavior to the Sprite.• Step 3 – Build and run.


STEP 1: Examine the Sprite Behavior Code

• In the Game Assets tree, under Behavior, again under Object Functions, double-click on the KeyboardWASDMovementFN.


KeyboardWASDMovementFN // x and y directional componentsint xDir = 0, yDir = 0;

// handle left and right movementif (KeyPressed(DIK_D)){

xDir = 1;}if (KeyPressed(DIK_A)){

xDir = -1;}


KeyboardWASDMovementFN continued…

// handle up and down movementif (KeyPressed(DIK_W)){

yDir = -1; // remember: to go up on screen //the y gets smaller

}

if (KeyPressed(DIK_S)){

yDir = 1; // remember: to go down on //screen the y gets bigger

}


KeyboardWASDMovementFN continued…

// assign the new movement direction to the spriteThis->VectorDirection(xDir, yDir);

if (xDir == 0 && yDir == 0){

This->Frame(0);}


CONCEPT – Direction Vectors

• In FUN, a Direction Vector describes which direction a Sprite is going to move.

• We use Vector Direction and Speed to describe exactly how a Sprite moves.


CONCEPT – Direction Vectors continued…

THINGS TO REMEMBER:• In FUN, down is up! A Y direction of

1 will move the sprite DOWN, while a Y direction of –1 will move a sprite UP.

• Moving by (0, 10) is the same thing as moving by (0, 1), the Direction Vector is ONLY a direction,


CONCEPT – Direction Vectors continued…


CONCEPT – User Input

• User Input is how the Player communicates with the game.

• This could be a Keyboard, Mouse, Controller, Joystick, etc. These are called Input Devices.

• What are some other Input Devices?


STEP 2: Add the Behavior to the Sprite

• In the Game tree, under Sprites, right-click on the player sprite.

• Select Properties.• Click on the Behavior tab.• Where it says Functions, find the

KeyboardWASDMovementFN and click the ‘+’ button.

• Click OK.



• Now Build and Run your game.• Go into Level1 and try moving your

sprite around with W, A, S, and D.• Try walking off the edge of the level.• What happened?• Why?


CONCEPT – Collision Detection

• Whenever we want to know when two things in our game are touching each other, we use the idea of Collision Detection.

• We use some rather advanced math to determine when two objects in our game hit each other… we won’t get into the math, don’t worry!



• FUN uses THREE types of Collision Detection:

1. Bounding Box – Draws a box around an object that is used for fairly fast, but inaccurate, collision detection.

2. Circular – Defines a circle around an object used for very fast, but inaccurate collision detection.

3. Segment – We draw a bunch of lines around and through our object that we check collision with. This method is accurate, but VERY slow.




PART 7 – Adding Collision Data

Objective:– Now we’re going to add collision data to the

map and player and enemy sprites. This will make it so we won’t walk off the edge of the screen.

• Step 1 – Add Rectangular Collision to Player actor.

• Step 2 – Add Rectangular Collision to Enemy actor.

• Step 3 – Build and run.


STEP 1: Add Rectangular Collision to Player Actor

• In the Game Assets tree, under Actors, double-click on the Player Actor’s Walk animation set.

• Click on the Collision Data button.


STEP 1: Add Rectangular Collision to Player Actor continued…

• Click on the box shaped like a Rectangle.

• Start from somewhere near the Top-Right corner of your Player Actor and drag to the Bottom-Left corner.

• Hit the Zoom In button three or four times if you need to.



• If all is done correctly, it should look something like this…

• Those little lines sticking out the edges of your Bounding Box are called Normals.

• Make sure your Normals are pointing outward, as shown.



• Now click the Save button and close the Collision Data window.

• Hit OK on the Animation Set window.


STEP 2: Add Rectangular Collision to Enemy Actor

• Open the Walk Animation Set for the Enemy Actor.

• Open the Collision Data window.• Click the Rectangle button and draw a

box around the enemy. • Hit save and close the Collision Data

window.• Hit OK at the Animation Set window.



• Build and Run your game.• Now try moving to the edge of the

screen.• What happened?• Why?


PART 7.1 – Adding Map Collision Data

Objective:– The reason your character went off the

edge of the screen is because, while the character has collision data, the map doesn’t. That’s what we’re doing here.

• Step 1 – Add Collision Data to the Level1 Map.



STEP 1: Add Map Collision Data

• In the Game tree, under Maps, double-click on the bg map.

• In the General tab, click on the Collision Data button.

• Click the Rectangle shaped button.• Start from the top-left corner and drag to

the lower-right corner.• Save and close the window.• If done correctly, it’ll look a little like…


STEP 1: Add Map Collision Data continued…



• Build and Run your game.• Now try moving to the edge of the

level.• What happened?• Why?


PART 7.2 – Enabling Sprite Collision

Objective:– Now, to get collision to work correctly,

we have to tell the Sprites how to do the collision checking.

• Step 1 – Setup Sprite collision properties.



STEP 1: Setup Sprite Collision Properties

• In the Game tree, under Level1, again under Sprites, double-click on the player sprite.

• Click the Collision tab.


STEP 1: Setup Sprite Collision Properties continued…

• Click the Precise Collision bubble.• Now check the Activate Sprite

Collision, Check With Sprites, and Check Collision With Map boxes.

• Hit OK.



• Build and Run your game.• Now try running into the edge of the

map.• If all is well, you should be colliding

with the map!• If not, let us know!


PART 8 – Adding Enemy Sprite

Objective:– Now that we have the player sprite in

the game, let’s add the enemy sprite.

• Step 1 – Add the Enemy Sprite.• Step 2 – Setup the Enemy Sprite

Properties.• Step 3 – Build and run.


STEP 1: Add the Enemy Sprite

• Add a new sprite to Level1.• Name it “enemy”.


STEP 2: Setup Enemy Sprite Properties

• Set the actor to ENEMY.• Choose a starting position. Activate

collision by setting Precise Collision.

• Activate Sprite Collision and check Collision With Map.

• Set Speed to 5.


STEP 2: Setup Enemy Sprite Properties continued…

• This time, we’re going to do something a little different…

• In the Sprite Properties window, click the General tab.

• Now, where it says Display List, enter 1.



• Now Build and Run your game.• Try running into your enemy.• What happened?• Why?


PART 9 – Adding Enemy Sprite Behavior

Objective:– Now that we have the enemy in the game, let’s

get him moving around.

• Step 1 – Examine the SpriteMovementRandomFN function.

• Step 2 – Add the SpriteMovementRandomFN function to the Enemy sprite.


VIDEO GAME PROGRAMMING STEP 1: Examine the

SpriteMovementRandomFN function

This->VectorAngle(RandInt(360));


CONCEPT – Random Numbers

• Random Numbers speak for themselves… they’re numbers… and they’re random!

• The RandInt() function you saw is how FUN generates a random number, you just specify the maximum number you want.

• Let’s say you use RandInt(20). This will give you a number between 0 and 19.


CONCEPT – Timer Functions

• When you only want something to happen every so often in your game, instead of happening constantly, you use a Timer Function.

• Timer Functions only run when the time that you specify runs out.

• For instance, if you click on the clock icon in Function Properties, you will see that our random move function only runs once every 60 game loops.

VIDEO GAME PROGRAMMING STEP 2: Add the

SpriteMovementRandomFN function to the Enemy Sprite

• Open the Sprite Properties for the Enemy sprite.

• Click the Behavior tab.• Add the

SpriteMovementRandomFN using the ‘+’ button.

• Hit OK.



• Build and Run your game.• If all is well, your enemy should be

moving around, changing directions about once every second. You should also be able to run into your enemy and stop them temporarily.

• If something is wrong, let us know.


PART 10 – Adding the Snowball Actor

Objective:– Here we’re going to add the Snowball

Actor.

• Step 1 – Create the Snowball art.• Step 2 – Add the Snowball actor.• Step 3 – Build and run.


STEP 1: Create the Snowball Art

• Open MS Paint.• Create a new 32 x 32 image.• Fill it with the green color.• Draw a snowball.• Save in your Actors folder as

snowball.bmp.


STEP 2: Add the Snowball Actor

• Create a new Actor.• Name the new actor SNOWBALL.• Give that actor a new Animation Set

named DEFAULT.• Add your snowball.bmp to the DEFAULT

animation set.• Give the snowball some collision data.



• Build and Run your game.• Try left-clicking to throw a snowball.• What happened?• Why?


PART 11 – Adding the enemyShot Sprite

Objective:– Now that we have some art for our snowball,

let’s add some Sprites.

• Step 1 – Create the enemyShot sprite.• Step 2 – Set the enemyShot properties.• Step 3 – Build and run.


STEP 1: Create the enemyShot Sprite

• Create a new sprite for Level1.• Name it enemyShot.


STEP 2: Set the enemyShot Properties

• Set Map to bg.• Change Display List to 1.• Where it says Local Data, select

ShotData.• Now click the Animation tab.


STEP 2: Set the enemyShot Properties continued…

• Set Actor to Snowball.• Make sure the Initial Animation is

DEFAULT and the Initial Frame is your snowball.

• Now click the Collision tab.


STEP 2: Set the enemyShot Properties continued…

• Set Precise Collision.• Next, activate Sprite Collision.• Make sure and set Check With

Sprites.• Now, click the Displacement tab

and set the Speed to 7.



• Build and Run your game.• Is your enemy throwing snowballs?• Why?


PART 12 – Adding Enemy and enemyShot Sprite Behavior

Objective:– OK, now we’re going to make it so the enemy

can nail you with snowballs!

• Step 1 – Add Proper Behavior to Enemy Sprite.

• Step 2 – Add Proper Behavior to enemyShot Sprite.



STEP 1: Add Proper Behavior to Enemy Sprite

• Add the EnemyShootAtPlayerFN to the Enemy sprite.


CONCEPT – Hot Spots

• Hot Spots are used to define special or interesting spots on sprites.

• For instance, if we had a sprite with a rocket-launcher, we would use a Hot Spot to define where the rocket will appear when the sprite shoots.


CONCEPT – Hot Spots continued…

• If we put a Hot Spot somewhere near the Sprite’s hand, then when you throw a snowball we can make it appear near that spot.


STEP 2: Add Proper Behavior to enemyShot Sprite

• Add both the ShotDeleteOnSpriteCollisionFN and SpriteDeleteOutOfViewportFN to the enemyShot sprite.

• One last thing… In the enemyShot sprite properties in the General tab, set Unused to true.



• Build and Run your game.• Is the enemy throwing snowballs at

you?• If not, let us know!


PART 13 – Adding Enemy and enemyShot Sprite Behavior

Objective:– Now that the enemy can throw snowballs at

you, let’s make it so you can shoot back!

• Step 1 – Add playerShot Sprite.• Step 2 – Add Proper Behavior to

playerShot Sprite.• Step 3 – Build and run.


STEP 1: Add playerShot Sprite

• OK, so I lied, we’re not really going to add a new sprite, set up the properties, and do all that stuff.

• Instead, we’re going to make a copy of the enemyShot sprite!

• Right-click on the enemyShot sprite and select Insert Copy.


STEP 1: Add playerShot Sprite continued…

• Enter playerShot for the name.• Hit OK.• Now, go into the Sprite Properties

for playerShot and change Display List to 0.



• Build and Run your game.• Try left-clicking to throw snowballs.• What happened?• Why?


PART 14 – Adding a Cursor

Objective:– The reason you couldn’t throw snowballs is

that the game doesn’t know where to throw snowballs. Now we’re going to add a Cursor so the game knows where to throw the snowballs.

• Step 1 – Create Cursor Art.• Step 2 – Add Cursor Actor.• Step 3 – Add Cursor Sprite.• Step 4 – Build and run.


STEP 1: Create Cursor Art

• Open MS Paint.• Draw a 32x32 cursor.• Save it as cursor.bmp in your

Actors folder.


STEP 2: Add Cursor Actor

• Create a new Actor named CURSOR.

• Add a new Animation Set named DEFAULT to CURSOR.

• Add your cursor.bmp art to the DEFAULT animation set.


STEP 3: Add Cursor Sprite

• Add a new sprite to Level1.• Name it cursor.• Set Map to bg.• Change Display List to 4. • Set the Animation properties to use the

CURSOR actor.• Set the Position to the center of the

screen.



• Build and Run your game.• Try moving the mouse and shooting

some snowballs.• What happened?• Why?


PART 15 – Adding Movement Behavior to Cursor

Objective:– OK, now we’re actually going to make

the cursor move. We do this by adding behavior to the Cursor sprite.

• Step 1 – Add Behavior to Cursor Sprite.



STEP 1: Add Behavior to Cursor Sprite

• Add the MouseCursorMoveFN function to the Cursor sprite.



• Build and Run your game.• Now try moving the cursor around

and left-clicking to shoot snowballs.• What happened?• Why?


PART 16 – Adding Shooting Behavior to Player Sprite

Objective:– OK, so we have our cursor now, let’s FINALLY

make it so you can shoot snowballs!

• Step 1 – Examine the PlayerShootMouseFN Function.

• Step 2 – Add Shooting Behavior to Player Sprite.



STEP 1: Examine the PlayerShootMouseFN Function

• Open the PlayerShootMouseFN function.

VIDEO GAME PROGRAMMING STEP 1: Examine the

PlayerShootMouseFN Function continued…

static int shootingDelay = 0;

if (++shootingDelay < PlayerThrowDelay)return;

• This is the only part of the code we’re really worried about.


CONCEPT – Variables

• A Variable is something that holds a value that we’re interested in.

• For instance, look at the part in the code that says:

if (++shootingDelay < PlayerThrowDelay)


CONCEPT – Variables continued…

• The PlayerThrowDelay is a Global Variable in our game. This means that we can use this data in any part of our game.

• If you open PlayerThrowDelay and examine it, you’ll see that Initial Value is set to 30.

• This means that the game waits 30 Frames before the player can shoot.


STEP 2: Add Shooting Behavior to Player Sprite

• Add the PlayerShootMouseFN function to the Player sprite.



• Build and Run your game.• Now try left-clicking to shoot at your

enemy.• If it didn’t work, let us know!• Also, try shooting one of the enemies

snowballs.• What happened? Why?


CONCEPT – Ghost Collision

• To fix the little problem of snowballs colliding, go into both enemyShot and playerShot and, under the Collision tab, check the box next to Ghost Collision.

• Ghost Collision basically makes it so that if two objects collide, they don’t stop or reflect, but the collision is still recognized.


PART 17 – Adding Player and Enemy Scores

Objective:– Now that we can hit our enemy with

snowballs, and they can hit us, let’s keep track of all this by adding a score.

• Step 1 – Add New Text Objects.• Step 2 – Set Text Properties.• Step 3 – Build and run.


CONCEPT – Text Objects

• Text Objects in FUN are how you display text in your game.

• There are 2 types of Text Objects1. Text2. Numbers


CONCEPT – Text Objects continued…

• Text is where you write things like “Player Score:” or “Enemy Score:”.

• Numbers are where you actually display the score, ie. “10” or “5.4”.

• Text Objects belong to levels just like sprites, so if we want the same text in every level, we have to add it to each level.


STEP 1: Add New Text Objects

• Under Level1, right-click on Text Objects and select Add.

• In the General tab, set the Name to PlayerScoreNumber.

• Set Type to Number.


STEP 2: Set Text Object Properties

• Under the Format tab, change the Font Color to Red.

• Set the Font Size to 24.• Set Initial Value to 0.


STEP 2: Set Text Object Properties continued…

• Now select the Position tab.• Set the following properties:Left: 100Top: 0Right: 150Bottom: 50



• Now Build and Run your game.• Try hitting the enemy with a couple

snowballs.• What happens?• Why?


SIDE NOTE – Increasing Score

• To get your score to actually increase, you need to add the SpriteIncreaseScoreOnCollisionFN function to the playerShot sprite.


PART 17.1 – Adding Player and Enemy Scores

Objective:– We’re continuing our quest for player

and enemy scores.




• Under Level1, right-click on Text Objects and select Add.

• In the General tab, set the Name to PlayerScoreText.

• Set Type to Text.



• Under the Format tab, change the Font Color to Red.

• Set the Font Size to 24.• Set Initial Value to “Score”.






• Now Build and Run your game.• Again, try hitting the enemy with a

couple snowballs.• What happens?• Why?



Objective:– Now that the player has a working

score, let’s add an enemy score.




• Under Level1, right-click on the PlayerScoreNumber text object and select Insert Copy.

• Set the Name to EnemyScoreNumber and hit OK.

• Open the properties for the new text object and, in the General Tab, set Type to Number.



• Under the Format tab, change the Font Color to Blue.

• Set the Font Size to 24.• Set Initial Value to 0.






• Now Build and Run your game.• This time, let your enemy hit you

with a few snowballs.• What happens?• Why?


SIDE NOTE – Increasing Score

• To get the enemies score to actually increase, you need to add the SpriteIncreaseScoreOnCollisionFN function to the enemyShot sprite.



Objective:– Now let’s finish up the enemy score.




• Under Level1, right-click on the PlayerScoreText text object and select Insert Copy.

• Set the Name to EnemyScoreText and hit OK.

• Open the properties for the new text object and, in the General Tab, set Type to Text.



• Under the Format tab, change the Font Color to Blue.

• Set the Font Size to 24.• Set Initial Value to “Score”.






• Now Build and Run your game.• Again, let your enemy hit you with a

few snowballs.• What happens?• Why?


PART 18 – Adding an Ending Screen

Objective:– Now we’re going to add a You Win and You

Lose screen and display them when the player either wins or loses.

• Step 1 – Create Screens Art.• Step 2 – Add Ending Level.• Step 3 – Set Level Properties.• Step 4 – Build and run.


STEP 1: Create Screen Art

• Open MS Paint and create 2 different images, both 640x480.

• Save the Win Screen in your Maps folder as win.bmp and the Lose Screen in your maps folder as lose.bmp.


STEP 2: Add Ending Level

• Add a new level to the game.• Rename the new level (level_3) to

“ending”.


STEP 3: Set Level Properties

• Add a new map to ending level.• Name the new map “win”.• Set Filename to use your win.bmp.• Uncheck the box next to Visible.• NOTE: Doing this means the map will not

initially be visible when the game starts. We make it visible with a special function.


STEP 3: Set Level Properties continued…

• Add a new map to ending level.• Name the new map “lose”.• Set Filename to use your lose.bmp.• Uncheck the box next to Visible.



• Now Build and Run your game.• Try hitting your enemy until he dies.• Also, try letting your enemy hit you

until you die.• What happens?• Why?


PART 19 – Adding an Ending Screen Behavior

Objective:– Now that we have our Ending Screen,

lets tell the game to get there!

• Step 1 – Add Level Behavior.• Step 2 – Tweak Win/Lose Condition.• Step 3 – Build and run.


STEP 1: Add Level Behavior

• Add the LevelEndingScreenFN and KeyboardFirstLevelFN functions to the ending level.

• Add the LevelWinningScoreFN function to the level1 level.


STEP 2: Tweak Win/Lose Condition

• In the Game Assets tree, under Global Data, double-click on EndScore.

• This is what determines how many hits you need to win the game.

• Change the Initial Value to whatever you feel it should be.

• Be reasonable, setting this to 0 might break your game, setting it to 100000 might make it too hard to win!



• Now Build and Run your game.• You should have a real, working game right

now!• Try getting the winning score.• Did it display the winning screen?• Try letting your enemy get the winning

score.• Did it display the losing screen?• If not, raise your hand and ask for help.


PART 20 – Adding Walk Animation to Actors

Objective:– Now that we have a working game, let’s add

some more animations to our player and enemy actors.

• Step 1 – Create New Artwork.• Step 2 – Add New Frames to WALK

Animation Set.• Step 3 – Build and run.


STEP 1: Create New Artwork

• Open MS Paint.• Create 3 new frames of walk

animation for your player sprite (64x100).

• Save them as player2.bmp, player3.bmp, and player4.bmp in your Actors folder.


STEP 1: Create New Artwork continued…

• Create 3 new frames of walk animation for your enemy sprite (64x100).

• Save them as enemy2.bmp, enemy3.bmp, and enemy4.bmp in your Actors folder.


STEP 2: Add New Frames to Walk Animation Set

• Open the WALK animation set for your PLAYER actor.

• Add the 3 new animation frames you created (in the order player2.bmp, player 3.bmp, player4.bmp)


STEP 2: Add New Frames to Walk Animation Set continued…

• Now click on the first frame.• Change Frame Delay to 10.• Click the Apply to All button to

apply all attributes from the first frame to the new frames .

• Hit OK.


STEP 2: Add New Frames to Walk Animation Set

• Open the WALK animation set for your ENEMY actor.

• Add the 3 new animation frames you created (in the order enemy2.bmp, enemy3.bmp, enemy4.bmp)


STEP 2: Add New Frames to Walk Animation Set continued…

• Now click on the first frame.• Change Frame Delay to 10.• Click the Apply to All button.• Hit OK.



• Now Build and Run your game.• Do you see the new animations?


PART 21 – Adding Snowball Splat Animation

Objective:– Now that we have our characters animated,

let’s add some animation to our snowballs.

• Step 1 – Create New Artwork.• Step 2 – Add New Animation Set.• Step 3 – Change

ShotDeleteOnSpriteCollisionFN Function.• Step 4 – Build and run.


STEP 1: Create New Artwork

• Open MS Paint.• Create 3 new frames of splat

animation for your snowball actor (64x100).

• Save them as splat1.bmp, splat2.bmp, and splat3.bmp in your Actors folder.


STEP 2: Add New Animation Set

• Add a new Animation Set to the SNOWBALL Actor.

• Name it SPLAT.


STEP 2: Add New Animation Set continued…

• Open the SPLAT animation set.• Add the 3 frames of animation you

created (in order splat1.bmp, splat2.bmp, splat3.bmp).

• Click on the first frame and set Frame Delay to 5.

• Click Apply to All.

VIDEO GAME PROGRAMMING STEP 3: Change

ShotDeleteOnSpriteCollisionFN Function

• Open the ShotDeleteOnSpriteCollisionFN function.

• Find the code that says:This->Animation(0);• Change it to:This->Animation(SNOWBALL_SPLAT);



• Build and Run your game.• Throw some snowballs.• Do you see your splat animation?


CONCEPT – Level Design

• Now we’ve come to the point where we want to add some obstacles into the game to spice up the level design a bit.

• What makes a good/bad level design?


CONCEPT – Level Design continued…

• One way to make a bad level design is to have WAY too many obstacles. If you put in too many obstacles you may not be able to even hit your enemy, or they may not be able to hit you.

• On the other hand, too few obstacles may make it too easy to be hit or too easy to hit your enemy.



• So what makes a good level design?• Trial and error!• Try something, if it doesn’t feel or

work right, change it and try again.



• Another thing to consider…• If you have multiple levels (we might

add more later if we have time) you want to make them progressively more difficult.

• You don’t want Level1 to be twice as hard as Level2, that just doesn’t make sense!



• Just a suggestion…• You might want to make Level1 have an

equal number of obstacles on your side and on the enemies side. Then, for Level2, have fewer obstacles on your side. Finally, for Level3, you might not want to have any obstacles on your side.

• Remember, trial and error!


PART 22 – Adding Obstacles

Objective:– We basically have a complete game here, so

let’s make some interesting level designs.

• Step 1 – Create New Artwork for Obstacles.• Step 2 – Add a New Actor and Animation

Set(s).• Step 3 – Add Obstacle Sprite.• Step 4 – Build and run.


STEP 1: Create New Artwork for Obstacles

• Open MS Paint.• Create some new artwork of any height

and any width (height and width should be less than 100).

• Save obstacle art as obstacle1.bmp in your Actors folder.

• If you create more than one obstacle, save them as obstacle2.bmp, obstacle3.bmp, and so on…


STEP 2: Add a new Actor and Animation Set(s)

• Add a new Actor to Level1 named OBSTACLE.

• Add a new Animation Set named ONE.• For this animation set, add the

obstacle1.bmp art and give it some collision data.

• Add a new Animation Set for each obstacle. Name the new animation sets TWO, THREE, FOUR and so on. Make sure and give them all collision data!


STEP 3: Add Obstacle Sprite

• Add a new Sprite to Level1.• In the General Tab, set the Name

to obstacle.• Set Map to bg.• Set Display List to 3.


STEP 3: Add Obstacle Sprite continued…

• In the Animation tab, choose the OBSTACLE actor.

• Choose any one of the Animation Sets that you created for this actor (basically choosing which type of obstacle it is).



• In the Collision Tab, set Precise collision.

• Make sure the Activate Sprite Collision and Check With Sprites boxes are checked.



• In the Position Tab, place the sprite anywhere on the map and VOILA! You now have an obstacle in your game!



• Now Build and Run your game.• Is your obstacle in Level1?• Do you collide with it?• Do your snowballs collide with it?• Do your enemies snowballs collide

with it?


SIDE NOTE – Adding More Obstacles

• To add more obstacles to your level, right-click on the obstacle sprite and select Insert Copy.

• Name the new obstacle obstacle2.• Go into the Sprite Properties for

obstacle2, in the Position Tab and change the position of the obstacle.


SIDE NOTE – Adding More Obstacles continued…

• You can add as many obstacles as you want but remember, you have to RENAME the new obstacles and CHANGE THEIR STARTING POSITION.


SIDE NOTE – Adding More Obstacles continued…

• You can reposition any sprites’ starting position by using the Level Preview feature.

• To do this, right-click on Level1 and select Preview.

• Click and drag the sprites around until you get something you like.

• Remember: Trial and Error. Keep playing the level until you’re satisfied.


CONGRADULATIONS!

• You’ve just completed Snowball Wars.


Tweaking the Game

• If you want to change the game around a bit, here are some suggestions…


Suggestions…

1: Change the following Global Data:

PlayerThrowDelayPlayerThrowDelay2EndScoreHitDamage1HitDamage2


Suggestions…

2: Add a second frame of animation to some obstacles.

You can create some neat effects by adding multiple animation frames to your obstacles and give each frame different collision data. Make the Frame Delay something more than 60.

Be careful as this may be kind of buggy…


Suggestions…

3: Add a secondary shot for the player.

You can add a secondary power shot the player can use by right-clicking.


Adding Power Shot

• Create the 32x32 art in MS Paint.• Save it as snowball2.bmp in your

Actors folder.• Add a new Animation Set to the

SNOWBALL actor called SECONDARY. Remember to give it Collision Data.


Adding Power Shot continued…

• Add a new sprite to each level by making a copy of playerShot. Name it playerShot2.

• Change the Display List to 0.• Change the sprite’s Animation Set

to SECONDARY.


Adding Power Shot continued…

• Add the PlayerShootMouse2FN function to the Player sprite.

• Add the SpriteIncreaseScoreOnCollisionFN function to the playerShot2.

Documents

VIDEO GAME PROGRAMMING Video Game Programming Snowball Wars INSTRUCTOR TEACHER’S ASSISTANT