Blake O'Hare .com

Gamelight Tutorial: Part 1 - The Basic Game Loop

Gamelight is a free game programming library for Silverlight I created some time back. Recently in Silverlight 5, XNA features were integrated into Silverlight which opened a whole new branch of advanced game-making for Silverlight. However, for lightweight casual 2D games (which is how most games you'll find on the internet can be described), XNA is a bit of overkill. Gamelight has the advantage of being extremely simple to get started with for 2D/sprite-based games.

Setting up a Gamelight project

Simply create a Silverlight 4 project the way you normally would. Then download the latest version of Gamelight from the download page. Once you extract this zip file, drop the contained DLL into your project. Because windows is paranoid you'll download viruses whenever you extract executable code from a zip you downloaded from the internet, it's treated as an untrusted executable and is blocked. You can unblock it by right clicking on the file and going to the file properties and pressing the "Unblock" button.
gamelight_01.png
Once you've done that, add a reference to the Gamelight DLL to your references for the project. The Add Reference menu can be found by right clicking the References icon in the solution explorer. Once you open that menu, click the Browse tab and find Gamelight.dll. If you can build right now without any errors, you did everything correctly so far.
gamelight_02.png

The Structure of a Gamelight App

Gamelight works with "Scenes". A scene is an object that extends the abstract class Gamelight.Scene.GameSceneBase which has 4 methods in it. Initialize, ProcessInput, Update, and Render. When a scene object is active, each of the latter 3 methods will be called on it, with each frame tick.

From the MainPage, there will be a control in your UI called Gamelight.Scene.GameControl. This control has properties for things like the pixel Width and Height of the game, the desired framerate, and the starting scene. It also has a method called .StartGame(). When this method is called, the scene that was set to the StartingScene property of the game control will be started and its methods will be called with each frame tick.

Creating a Scene

Go ahead and create a new class called DemoScene and extend the abstract class Gamelight.Scene.GameSceneBase. Right click on the GameSceneBase and choose Implement abstract class...
gamelight_03.png
You will see the 4 methods appear:
  • Initialize()
  • ProcessInput(InputEvent[] events)
  • Update(int gameCounter)
  • Render(Image gameScreen)

Delete the NotImplementedExceptions and fill in the following implementation. It's a blue box moving around on a pink background. Simple enough...
namespace DemoGame
{
    public class DemoScene
        : Gamelight.Scene.GameSceneBase
    {
        private int x = 0;
        private int y = 0;

        protected override void Initialize()
        {
        }

        protected override void ProcessInput(Gamelight.Input.InputEvent[] events)
        {
        }

        protected override void Render(Gamelight.Graphics.Image gameScreen)
        {
            gameScreen.Fill(Gamelight.Graphics.Colors.Pink);

            int screenWidth = gameScreen.Width;
            int screenHeight = gameScreen.Height;

            Gamelight.Graphics.Draw.Rectangle(
                gameScreen,
                Gamelight.Graphics.Colors.Blue,
                this.x % screenWidth, this.y % screenHeight, 30, 30);
        }

        protected override void Update(int gameCounter)
        {
            this.x += 1;
            this.y += 2;
        }
    }
}


Creating the Host GameControl

Now go to MainPage.xaml.cs and make the constructor look like this:
public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        Gamelight.Scene.GameControl gameControl =
            new Gamelight.Scene.GameControl()
            {
                GameWidth = 400,
                GameHeight = 300,
                TargetFramesPerSecond = 30,
                FullScreenShortcutKey = Gamelight.Input.Key.F,
                StartingScene = new DemoScene()
            };
        this.LayoutRoot.Children.Add(gameControl);
        gameControl.StartGame();
    }
}


And that's all you need as far as set up goes. Hit F5 and if you did everything correctly, you'll see this:
gamelight_04.png

But drifting boxes aren't that interesting since you can't control them. Without interactivity there is no game.

Reading input from the user.

There are two ways to check for keyboard input. One is to loop through the events that are passed in to the ProcessInput method in your scene. This list contains all the events that occurred since the previous frame. The other way is to just check to see if a particular key is being held down. If you want the box to move while the user is pressing an arrow key, then this is the way to go.

In the DemoScene class, delete the contents of Update where the x and y coordinates are being incremented each frame. Then in your ProcessInput function, add the following code:
protected override void ProcessInput(Gamelight.Input.InputEvent[] events)
{
    int velocity = 3;
    if (Gamelight.Input.InputManager.IsKeyPressed(Gamelight.Input.Key.Left))
    {
        this.x -= velocity;
    }
    else if (Gamelight.Input.InputManager.IsKeyPressed(Gamelight.Input.Key.Right))
    {
        this.x += velocity;
    }

    if (Gamelight.Input.InputManager.IsKeyPressed(Gamelight.Input.Key.Up))
    {
        this.y -= velocity;
    }
    else if (Gamelight.Input.InputManager.IsKeyPressed(Gamelight.Input.Key.Down))
    {
        this.y += velocity;
    }
}


Now when you hit F5, you should get something that looks exactly like the picture above. However this time, the box will move around with the arrow keys.

Note: you may need to click in the window in order to give it keyboard focus, first

In the next installment, I'll explore the other ways of gathering input from the user and how to load images.