Monday Snaps: Cheese Physics

Last week we got the cheese moving around the screen using the cursor keys. It wasn't very good. The cheese just moved as long as you held the key down. This kind of movement is fine for some kinds of game where the action is fast and frantic, for example the paddle in a breakout game. So, feel free to steal that movement code for any of your game object that need immediate movement.

However, for Cheese Lander the skill is actually in controlling the speed of the cheese. And one way to do this is to add a bit of physics. To understand what we are going to do, we have to understand a bit about speed and acceleration.

Speed is the rate of change of my position. Each time round the game loop I could add a speed of 1 pixel to my cheese. After sixty times round the game loop my cheese would have moved sixty pixels. 

Acceleration is the rate of change of the speed. Each time round my game loop I could add an acceleration of 0.1 to my speed value. So after ten ticks the cheese would be moving at the rate of 1 pixel per game loop. After ten more ticks the cheese would be moving at a rate of two pixels per game loop, and so on. 

The game needs to store the acceleration and velocity values as real numbers this time, because the acceleration value will be quite small.

double cheeseXSpeed = 0;
double cheeseYSpeed = 0;

double cheeseXAccel = 0.01;
double cheeseYAccel = 0.01;

The initial value of the speed will be zero because the cheese is not moving. The acceleration value that you see above works quite well with a game updating 60 times a second.  

void updateCheese()
{
    cheese.Left += cheeseXSpeed;
    cheese.Top += cheeseYSpeed;

    if (SnapsEngine.GetRightGamepad())
        cheeseXSpeed += cheeseXAccel;

    if (SnapsEngine.GetLeftGamepad())
        cheeseXSpeed -= cheeseXAccel;

    if (SnapsEngine.GetDownGamepad())
        cheeseYSpeed += cheeseYAccel;

    if (SnapsEngine.GetUpGamepad())
        cheeseYSpeed -= cheeseYAccel;
}

This is the part of the updateCheese method that implements our physics. The first thing it does is update the position of the cheese by adding the speed of the cheese to its position. Then it reads the gamepad to determine if the speed needs to be changed in any particular direction. This code is very similar to the code in the previous version of the game, but instead the speed values are updated, not the position of the cheese.  Pressing a key in a particular direction causes it to accelerate in that direction. 

The final refinement is to make the cheese "bounce" when it hits the edge of the screen. In the previous version of the game we "clamped" the cheese so that it could not move off the edges. In this version we are going to reverse the speed of the cheese when it hits an edge, giving a great "bounce" effect.

if (cheese.Left < 0)
{
    cheese.Left = 0;
    cheeseXSpeed *= -1;
}

if (cheese.Right > (SnapsEngine.GameViewportWidth))
{
    cheese.Right = SnapsEngine.GameViewportWidth;
    cheeseXSpeed *= -1;
}

if (cheese.Top < 0)
{
    cheese.Top = 0;
    cheeseYSpeed *= -1;
}

if (cheese.Bottom > SnapsEngine.GameViewportHeight)
{
    cheese.Bottom = SnapsEngine.GameViewportHeight;
    cheeseYSpeed *= -1;
}

This is the same code that we saw last week, with the one change that the speed value is reversed after the cheese has been put back on the screen.

This code is great for user controlled physics based objects. It's also great for chasing aliens who can be made to accelerate in the direction of the player. 

Next week we'll take a look at the game win condition, where we have to touch the cheese down on the bread really, really, gently.

Begin to Code with C#

By Rob Miles

Remember that the Monday Snaps are brought to you by my book.....

Monday Snaps: Steering the Cheese

Welcome to this week's Monday Snap. We're re-creating the game Cheese Lander using the Snaps game framework. You can find earlier episodes here. Last week we put the bread and the cheese at their start positions. This week we're going to get the cheese moving. 

Games work by repeatedly updating the game engine and then re-drawing the display. In a Snaps game we use a C# loop to do this:

void gameLoop()
{
    while (true)
    {
        SnapsEngine.DrawGamePage();
    }
}

At the moment the gameLoop method just repeatedly draws the game page. The DrawGamePage method also pauses the loop so that it runs at the selected frame rate, which for our game is 60Hz. I'm going to add a call of a method to update the cheese position.

void gameLoop()
{
    while (true)
    {
        updateCheese();
        SnapsEngine.DrawGamePage();
    }
}

The cheese is controlled by the player. The idea is to land it on the bread. This is my first version of the updateCheese method.

int cheeseXSpeed = 2;
int cheeseYSpeed = 2;
void updateCheese()
{
    if (SnapsEngine.GetRightGamepad())
        cheese.Left += cheeseXSpeed;
    if (SnapsEngine.GetLeftGamepad())
        cheese.Left -= cheeseXSpeed;

    if (SnapsEngine.GetDownGamepad())
        cheese.Top += cheeseYSpeed;
    if (SnapsEngine.GetUpGamepad())
        cheese.Top -= cheeseYSpeed;
}

The SnapsEngine exposes methods that  program can use to test the state of the gamepad.  You can use the cursor keys on the keypad, a connected Xbox 360/Xbox 1 controller. Alternatively you can use the on-screen touchpad with a mouse, lightpen or finger. If any of the methods return true a speed value is used to update the position of the cheese in that axis. Remember that the Y axis goes down the page. Increasing the Y value of the cheese position will move it down the screen. 

This method lets the player move the cheese right off the screen, so perhaps we should fix that. 

if (cheese.Left < 0)
    cheese.Left = 0;
if (cheese.Right > (SnapsEngine.GameViewportWidth))
    cheese.Right = SnapsEngine.GameViewportWidth;

if (cheese.Top < 0)
    cheese.Top = 0;
if (cheese.Bottom > SnapsEngine.GameViewportHeight)
    cheese.Bottom = SnapsEngine.GameViewportHeight;

These statements "clamp" the cheese movement so that it can't move off the screen. Add them to the updateCheese method after you have updated the cheese position.

You can now steer the cheese around the screen and land it on the bread. Unfortunately this is far too easy. So next week we'll put on our scientists white coats and add some Physics. 

Begin to Code with C#

By Rob Miles

And remember, the Monday Snaps are brought to you by Begin to Code With C#, available from all good booksellers. 

Monday Snaps: Cheese Lander Game Reset

Welcome back to our weekly Snaps session, which has the ultimate aim of creating the awesome gaming experience that is Cheese Lander . Last week we got the bread, cheese and background screen drawing nicely, this week we are going to place the bread and cheese at their starting positions. So, if someone asks you "Who moved the cheese?" you can say it was you.

We're going to start with a bit of gentle re-factoring. Re-factoring is a posh word for "putting things in the place that they should have been from the start". Computer programmers are lucky in this respect. Doing "refactoring" in other professions means moving physical things around. Refactoring a brick wall is hard. But with code it's easy. What I want to do is create some methods that will deal with my game objects. To do this I'm going to have to move the game objects into the enclosing class, so that they are visible to all the methods in that class. 

public class MyProgram
{
    ImageSprite cheese, bread, background;

    void setupSprites()
    {
        SnapsEngine.StartGameEngine(fullScreen: false, framesPerSecond: 60);
        background = new ImageSprite(imageURL: "ms-appx:///Images/Background.png");
        background.Height = SnapsEngine.GameViewportHeight;
        background.Width = SnapsEngine.GameViewportWidth;

        cheese= new ImageSprite(imageURL: "ms-appx:///Images/cheese.png");
        cheese.ScaleSpriteWidth(SnapsEngine.GameViewportWidth / 20);

        bread = new ImageSprite(imageURL: "ms-appx:///Images/bread.png");
        bread.ScaleSpriteWidth(SnapsEngine.GameViewportWidth / 8);

        SnapsEngine.AddSpriteToGame(background);
        SnapsEngine.AddSpriteToGame(bread);
        SnapsEngine.AddSpriteToGame(cheese);
    }

    void gameLoop()
    {
        while (true)
        {
            SnapsEngine.DrawGamePage();
        }
    }

    public void StartProgram()
    {
        setupSprites();

        gameLoop();

    }
}

This is my re-factored game class. It now has two methods. One is called setupSprites, and it sets the sprites up. The other is called gameLoop. This runs the game loop (remember that a game is all about repeatedly drawing and updating. I've also renamed the ball object to cheese. It seemed the right thing to do.

Now things are all tidy I can start building up my methods that will make the game work. When the game resets (i.e. at the start of a new game) I want the bread to be placed somewhere on the bottom of the screen. The aim of the game is then to steer the cheese onto the bread. A method called resetBread would seem to make sense. If you're asking why I'm not calling it setupBread, then I hear you. The answer is that I'm being careful with my names here. setup is something that you do once in the lifetime of the program. Reset is something you do at the start of each game. This is just my standard, yours is allowed to be different, as long as you have a standard.

Moving the bread to the bottom of the screen is easy. We just set the bottom of the bread to the height of the screen:

 bread.Bottom = SnapsEngine.GameViewportHeight;

Moving the bread to a random position across the screen is a bit harder. For a start we'll need a random number. We can get random numbers from the Random class in the System namespace. I can create an instance of this in the class for the game to use:

System.Random breadRandom = new System.Random();

I'm going to use a different random number generator for each object that needs random behaviour. This is because that way I can convert any of them to produce the same sequence (simply by adding a seed):

System.Random breadRandom = new System.Random(1);

Now my bread would be placed at the same sequence of positions when the game is played. This is a good idea because it helps the player learn how the game plays, and encourages them to come back and have another go. In the case of the bread, I'll probably make it completely random.

Anyhoo, once I've got my random number generator I can place the bread somewhere random across the width of the screen:

 bread.Left = breadRandom.Next((int)(SnapsEngine.GameViewportWidth - bread.Width));

This code is a bit of a mess to be honest. The Next method of the Random class can generate an integer in a range from 0 to an upper limit. The upper limit I want is the width of the screen minus the width of the bread. I can calculate this, but Snaps graphics work with double precision numbers. So I have to convert the result of this calculation into an integer. 

void resetBread()
{
    bread.Bottom = SnapsEngine.GameViewportHeight;
    bread.Left = breadRandom.Next((int)(SnapsEngine.GameViewportWidth - bread.Width));
}

This is my resetBread method. It places the bread nicely at the bottom of the screen. I can now steal this technology (ooooh, that sounds so cool) to position the cheese at a random position on the top of the screen:

void resetCheese()
{
    cheese.Top = 0;
    cheese.Left = cheeseRandom.Next((int)(SnapsEngine.GameViewportWidth - cheese.Width));
}

After these reset behaviours I have a game screen that looks like this:

The entire program is here:

 using SnapsLibrary;

public class MyProgram
{
    ImageSprite cheese, bread, background;

    void setupSprites()
    {
        SnapsEngine.StartGameEngine(fullScreen: false, framesPerSecond: 60);
        background = new ImageSprite(imageURL: "ms-appx:///Images/Background.png");
        background.Height = SnapsEngine.GameViewportHeight;
        background.Width = SnapsEngine.GameViewportWidth;

        cheese = new ImageSprite(imageURL: "ms-appx:///Images/cheese.png");
        cheese.ScaleSpriteWidth(SnapsEngine.GameViewportWidth / 20);

        bread = new ImageSprite(imageURL: "ms-appx:///Images/bread.png");
        bread.ScaleSpriteWidth(SnapsEngine.GameViewportWidth / 8);

        SnapsEngine.AddSpriteToGame(background);
        SnapsEngine.AddSpriteToGame(bread);
        SnapsEngine.AddSpriteToGame(cheese);
    }

    System.Random breadRandom = new System.Random();

    void resetBread()
    {
        bread.Bottom = SnapsEngine.GameViewportHeight;
        bread.Left = breadRandom.Next((int)(SnapsEngine.GameViewportWidth - bread.Width));

    }
    System.Random cheeseRandom = new System.Random();

    void resetCheese()
    {
        cheese.Top = 0;
        cheese.Left = cheeseRandom.Next((int)(SnapsEngine.GameViewportWidth - cheese.Width));
    }

    void gameLoop()
    {
        while (true)
        {
            SnapsEngine.DrawGamePage();
        }
    }

    public void StartProgram()
    {
        setupSprites();

        resetBread();

        resetCheese();

        gameLoop();

    }
}

Begin to Code with C#

By Rob Miles

Come back next week for more. And remember that you can get the full details of gaming with Snaps from my book:

Monday Games Snap

You might have heard of my Snaps framework. Then again you might not. I created it for my Begin to Code with C# book. 

The idea behind Snaps is that learning to create Windows 10 Universal Applications is hard because it takes a while to get to the point where you understand enough to have a bit of fun writing C#. 

So I created a bunch of helper functions that grew into an entire library for app and game development. 

As a celebration of being awarded another year as an MVP (thanks Microsoft) I thought I'd put the whole Snaps framework up on GitHub and then people can download and play with it, and maybe even take it further. 

Every week I'll take a Snaps function and explain how to use it, along with a bit of detail about how it works. Monday is now officially "Snaps Day". I'm going to start with the games creation framework and go on from there. 

This week I'm going to tell you how to get started and make your first sprite. You need Visual Studio 2015 or Visual Studio 2017 (it works with either). You'll also need to be running Windows 10 64 bit edition.

You can download the entire framework from GitHub. It's a single Visual Studio Solution that you just have to open. You might get warnings about the dangers of loading projects downloaded from the internet. Ignore those in this case. 

If you run the solution you'll get the Snaps main menu:

On the left you can select the book chapter. On the right you can pick an exercise from the book to run. Pick the one you can see above (Ch15_04_CompleteGame from Chapter 15). It's a complete game with moving sprites and all sorts. Click "Run and App" and the game will start. 

The graphics aren't the best to be honest. But you can control the game by the cursor keys, or mouse/touch on the cursor pad on the lower right hand edge. One sprite will chase you while the others look on. Everything is running under WPF and I'm very impressed with the performance. 

If you want to get ahead of the game you can grab the book and see exactly how the code works. For now though, use Visual Studio to stop the game (go back to VS and press the red Stop button), and take a look at the Solution Explorer on the top right. If you open up the Chapters folder you can find a folder for each chapter:

Open up a chapter and you can find all the sample code. The names of the samples are keyed to the ones you can find when you run the program. Take a look in Chapter 15:

Open up the one indicated (Ch12_02_BallSprite) It creates a single ball sprite and displays it.:

    public void StartProgram()
    {
        SnapsEngine.StartGameEngine(fullScreen: false, framesPerSecond: 60);

        ImageSprite ball = new ImageSprite(imageURL: "ms-appx:///Images/ball.png");

        SnapsEngine.AddSpriteToGame(ball);

        while (true)
        {
            SnapsEngine.DrawGamePage();
        }
    }

All the action takes place in the StartProgram method. It starts the game engine, creates a sprite and adds it to the game. Then, once we've made the sprites, we start a game loop which continuously draws the game page. It does this 60 times a second, because that is the frame rate requested at the start. The image for the ball is an asset which is in the Images folder in the project:

You can use your own images if you like. Drag them to the images folder and make sure that their build action is set to Content (as below). Then use the appropriate name to draw them.

If you run the framework and select this example (Ch12_02_BallSprite) you can see the ball on the screen. If you change the above code and use the handy "Run That Again" button you can see your changes. Don't worry about breaking the examples. You can always download a fresh set from GitHub if it all goes horribly wrong.

You might like to add more sprites, or fiddle with the properties of the existing sprite, in which case Intellisense is your friend:

See what adding :

ball.CenterX++;

.. to the while loop does. You should have:

while (true)
 {
        ball.CenterX++;
        SnapsEngine.DrawGamePage();
 }

If you make anything especially impressive take a video of it, send me the link and I'll start a hall of fame on this page. Because this is a Universal Application it can run on any Windows 10 device, including Xbox One and Raspberry Pi (although it is not as fast on the Pi)

Begin to Code with C#

By Rob Miles

Of course the best way to find out all these things (and learn to program as well) is to buy my book. 

But if you don't want to do that, then I'll have another Monday Snap for you next week.