Computer Science Teacher
Computer Science Teacher - Thoughts and Information from Alfred Thompson

March, 2011

  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Whack Something Game for Windows Phone 7

    • 0 Comments

    The last several yeas the University of New Hampshire has put on a “Hi Tech” day for area high school students. Between 150 and 200 high school students come to campus to see demonstrations of and to try their hand at some interesting and powerful software. They see tools like Windows Robotics Studio, Flash, Greenfoot, networking hardware, and more. The last two years I have run a hands on lab using XNA to create a game. This year I volunteered to show students how easy it is to create a game for the Windows Phone 7. Sounds easy enough. Well I did only have 40 minutes to help the students create a working game. I needed a very simple game that would demonstrate the essential parts of a game program. I decided to create a version of a Whack a Mole style game.

    The game is pretty simple – boxes displaying an object appear on the screen for the user to “hit” and make disappear. This can be done with a minimum amount of code but we still cover the most important methods of a game program:

    • Variable Declaration
    • Variable Initialization
    • Content Loading (bringing pictures into the code)
    • Update (the instructions that do the main work of the game)
    • Draw (Displaying images on the screen)

    The program I came up with is not the best program in the world and in fact has lots of room for improvement. It is, however, simple to understand and easy to implement. What follows here is the step by step code for creating this simple demo program.  (You can get a Word version of this document, a copy of code snippets for all the code used, and the images I used in this example at http://bit.ly/i4Nz1C (zip file) )

    Open Visual Studio and select New Project from the File menu. You should get a window that looks something like this:

    clip_image002

    Select Windows Phone Game (4.0) and give you project a name such as FireDrill and press the OK button.

    On the Solution Explorer right click on the Content option and either select Add -> Existing Item or press Shift-Alt-a to open the file window. Browse to where the image files are and select x.png and flame.png.

    clip_image004

    clip_image006

    Now that we have the images we need it is time to start writing some code. We need several variables:

    • Textures to identify the images
    • Rectangles to hold the images and help with detection of touches.
    • Flags to determine what images are being displayed
    • Some counters to help control how often “fires” pop up.
    • A random number variable to make things more random

    Our code might look something like this:

    Texture2D aFire, bFire, xButton;
    Rectangle aRec, bRec, xRec;
    Boolean aShow, bShow;
    Random r;
    int cycleCount, howOften;

    These lines go in the top of the class right below the lines:

    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

    We’ll see how these are used in a minute. But we also have to initialize there variables. We’ll set the Booleans for aShow and bShow to false so that they are not displayed right away when the program loads. We’ll use howOften to determine how many frames to show before deciding to show or not show one of the fires. The default FPS (frames per second) for a Windows Phone is about 33 frames per second so if we wait every 30th frame that will be just about a second. We’ll change that randomly as the program runs to make things less predictable.

    We’ll also set the initial locations of our two flames, the X (for eXit) button and initialize our counters and random number variable. Our code will be in the Initialize method and look something like this:

    aRec = new Rectangle(100, 100, 47, 50);
    bRec = new Rectangle(700, 300, 47, 50);
    aShow = false;
    bShow = false;
    xRec = new Rectangle(0, 400, 64, 64);
    r = new Random();
    cycleCount = 0;
    howOften = 30;

    We draw these textures in the Draw method – you saw that coming didn’t you? Each frame we will redraw the objects on the screen of our phone using the spriteBatch object. We will first check our Boolean flags (remember aShow and bShow) and if they are set to true they will be drawn. The X button will always be drawn of course.

    graphics.GraphicsDevice.Clear(Color.AliceBlue);
    spriteBatch.Begin();
    if (aShow)
        spriteBatch.Draw(aFire, aRec, Color.AliceBlue);
     
    if (bShow)
        spriteBatch.Draw(bFire, bRec, Color.AliceBlue);
    spriteBatch.Draw(xButton, xRec, Color.AliceBlue);
     
    spriteBatch.End();

    Note that we are using the same color for the background of the screen and of the objects we are drawing on it (AliceBlue in this case) to make things look nice. For “interesting” try different colors.

    Now for the real work. What we want to happen is for “flames” to appear in random places on the screen. When we touch them with our finger that will “put them out.” This means that we have to:

    • Exit the game if the player touches the X button
    • Make a flame disappear (by setting the show flag to false)
    • Determine if it is time to show one or more flames
    • Set the location of one or both flames and display them by setting the show flag to true

    We check for touching the X button or flames by checking touch points against the rectangles that define the locations of the objects. The status of the TouchPanel tells us where it was touched.

    Our code may look something like this:

    TouchCollection touches = TouchPanel.GetState();
    foreach (TouchLocation t in touches)
    {
        Rectangle touchRec = new Rectangle((int)t.Position.X, (int)t.Position.Y, 1, 1);
     
        if (touchRec.Intersects(xRec))
            this.Exit();
        if (touchRec.Intersects(aRec) && aShow)
            aShow = false;
        if (touchRec.Intersects(bRec) && bShow)
            bShow = false;
    }

    We’ll count the cycles and if enough have passed (according to HowOften) we will select one or both of the flames to appear using a set of if statements. If it is “time” we will use the random number variable to select a location for the flame(s) to appear, set the show flag to true, reset our cycle counter and pick a new random number of cycles before checking again. Our code might look like the following:

    int shouldShow = r.Next(1, 100);
    cycleCount++;
    if (cycleCount > howOften)
    {
        if (shouldShow < 60)
        {
            aShow = true;
            aRec.X = r.Next(100, 700);
            aRec.Y = r.Next(10, 400);
        }
        if (shouldShow > 50)
        {
            bShow = true;
            bRec.X = r.Next(100, 700);
            bRec.Y = r.Next(10, 400);
        }
        howOften = r.Next(33, 100);
        cycleCount = 0;
    }

    If you don’t have a Windows Phone yet make sure the deployment is set for the emulator.

    clip_image007

    If everything works you should see something like this:

    clip_image009

    The emulator uses mouse clicks to emulate touches.

    What next?

    Well some things are obvious:

    • More flames
    • Score keeping
    • Losing or winning
    • Code clean up – shouldn’t there be classes here?
    • You get the idea. What can you do from this basic outline?

    clip_image010

    Visit the App Hub at http://create.msdn.com/en-US for more Windows Phone development resources.

    Be sure you have the software you need to develop XNA Programs for Widows Phone 4.



  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Kodu Cup 2011

    • 0 Comments

    KoduCupLogo

    Create a new game with Kodu and you could win $5,000
    for yourself and your school and lots of great technology!

    Welcome to the Microsoft Kodu Cup:
    A game design competition for students 9 – 17 years old.

    Time to step up your game! Kodu Cup is here!
    It's the competition you've been waiting for. And it's your big chance to demonstrate your imagination, creativity and game design skills to win fabulous cash and prizes.

    To enter: Download Kodu at no cost here. Create your new game and once it's ready, submit it in our contest for the chance to win awesome prizes. Check them all out!

    To learn more: Just click the tabs below to get all you need to get started. You could even win a Microsoft Office Professional 2010 just for registering – even if you decide not to enter the contest!

    For Parents: For information, resources, and expert tips to help you make educated decisions about your children's gaming and entertainment experiences, visit GetGameSmart.com.

    Kodu Cup Competition Details

    Here are some details about this year’s Kodu Cup competition:

    • Submissions will be accepted through May 10, with winners announced in late May.
    • The competition will be broken into two age groups — 9 to 12 years old and 13 to 17 years old — with a grand prize winner and first and second runners-up from each group.
    • The grand prize winners receive $5,000 for themselves and their respective schools, as well as a trip to the Imagine Cup 2011 Worldwide Finals in New York.
    • Kids are encouraged to participate, register and learn more about the competition at http://koducup.us.
    • All entrants under the age of 13 must have a parent or guardian’s consent to participate in the competition.
    • Quick tips on gaming are available at http://GetGameSmart.com.

    slKodu



  • Computer Science Teacher - Thoughts and Information from Alfred Thompson

    Rebirth of DIY Software Development

    • 0 Comments

    In the heady, exciting, almost wild West atmosphere of the early days of PCs it seemed like almost everyone I knew was writing software in hopes of making a little extra money. Shareware was big. That was the idea that you would give away the program and if people really liked it they would pay for it. And since there was so little software out there other people were packaging their software in a nice format and selling copies though local computer stores. Computer stores back then were desperate for software to sell to help sell computers. The cost of entry was low – you needed a PC and the development software that came with it. If you were really ambitious you’d buy Turbo PASCAL or some other more professional development environment. The other thing that was big was more or less ordinary people developing small software projects for work. Not necessarily great software but good solid (ok maybe not solid) but cheap and accessible software. Over time though the “real professionals” took over as standards became higher.

    We, many of us in the industry, expected programming to become easier to the point where everyone would be programming. That, alas, has not yet happened. What has happened though is that there is a new market for software. Portable devices like Windows Phone 7 have online marketplaces now. So does the set top box video game market! And there are tools that are free or cheap and even easy to use. Students can get development tools for Windows Phone 7 and Xbox 360 from Dreamspark. There are learning resources, some at DreamSpark, and some from other places (App Hub for one) that are also free.

    This is sparking a rebirth of the small, even one person, development organization. Students are creating and selling programs on Xbox marketplace and Windows Phone 7 marketplace and making real money. Some though sales and some though advertising supported software which is something that didn’t exist even a few years ago. Another difference with this new environment is that this time companies and businesses realize that they need, or at least want, to have applications for these new devices. There are not really enough people ready and trained to create them (see More Computer Scientists Needed To Create Mobile Apps). What does this mean to students today? I think Mark Guzdial said it well in his post titled The advantage of computing goes to those who create, not those who use.

    Sure it is important to know how to use computers and to use various applications but the real advantage goes to those who create. Are we creating enough creators?

    imageDreamspark

    Today’s post inspired by these somewhat related articles.



Page 4 of 10 (28 items) «23456»