Instead of building Hello World to get started learning Windows 8 development, consider customizing your own version of Pong.

“I want to build a Windows 8 app/game, but I don’t know how to get started.”

“I want to do a workshop with some kids but I am not sure what to do.”

“I want to do a workshop with a group who has little or no coding experience, what can I do?”

“I know how to code but I’ve never built a game, how do I get started?”

In my role as technical evangelist, I get asked questions like that a lot! A couple of months ago, one of my team members built a version of Pong with HTML5/JavaScript. It’s not a complicated game, in fact he originally wrote it as a tool to help XNA developers get started with HTML5/JavaScript. But, because he took the time to structure and comment the code, we discovered this template also makes a fun workshop/hands on lab for beginners.

When I’m learning I work best with a goal in mind, and it helps if I am having fun. That’s the spirit of this how to guide.

I sat down with my 10 year old son, who is comfortable playing with computers but doesn’t really know how to code, and I gave him these instructions and with it he was able to create PokePong (which we also published, he was VERY excited to download it from the store).

But enough talking. If you or someone you know is interested in getting started with Windows 8 development, but is not an experienced coder here are step by step instructions to get started with Windows 8 apps by making your own version of pong. Here’s what you’ll find in this Step by Step guide.

  • Getting everything installed to edit the game. (Download and install Windows 8 SDK, Do you already have a copy of Visual Studio 2012? If you don’t already have a copy of Visual Studio 2012. How do I know the SDK is installed correctly and I can start coding?)
  • Download and install Pong. (How do I know Pong is installed correctly?)
  • Create the art assets for your pong game (What images do you have to create? How do you create a new image and specify the size? How do you make transparent backgrounds?)
  • Replace the default Pong images with your own images. (Change the Asset images, Is your background getting cropped? Change the tiles and icons for your game, Changing the background color of your splashscreen or tile.)
  • Updating the information about your app so its ready to publish!
  • Create a production version of your app for the store.
  • Take your game to the next level (now that you are comfortable with Visual Studio and the environment, explore and change the code!)

Getting everything installed to edit the game

Download and install Windows 8 SDK

Install the Windows 8 SDK. Installing the Windows 8 SDK gives you a copy of Visual Studio Express you use to edit the project. NOTE: You must be running Windows 8 to install the Windows 8 SDK.

Do you already have a copy of Visual Studio 2012?

If you do have access to a full version of Visual Studio 2012 and Expression Blend, install it before you install the Windows 8 SDK. When you install the Windows 8 SDK it will detect your copy of Visual Studio 2012 and install the Windows 8 templates into your existing copy of Visual Studio. Visit the windows dev center (dev.windows.com) to download the tools and SDK.

If you don’t already have a copy of Visual Studio 2012

If you do not have a copy of Visual Studio 2012 already, then all you need to do is download the tools and SDK and it will install a copy of Visual Studio 2012 Express and Blend for Visual Studio on your system so you can start developing.

How do I know the SDK is installed correctly and I can start coding?

If you can launch Visual Studio 2012 or Visual Studio 2012 and choose File | New Project then choose either Visual C#, Visual Basic, Visual C++, or JavaScript and you can see a set of templates called Windows Store similar to the screen shot below. You are ready to start coding!

File New Project

Download and install Pong

Download the Pong Game from SkyDrive to your computer. You will get a .zip file containing all the files required for Pong.

Unzip the package to a folder on your computer.

How do I know Pong is installed correctly?

Launch Visual Studio 2012

From the menu choose File | Open | Project/Solution and then navigate to the folder where you unzipped the package.

Go to the subfolder HTML5 Template Complete and select the file HTML5_Template.sln and select Open.

file list

The .sln file is called the solution file, when you open a solution file Visual Studio will open the solution and all the files that make up that solution. In this case, Visual Studio will open up all the files that make up the Pong Game.

You may be prompted to only open projects from a trustworthy source, you will have to select OK to continue and open the project.

clip_image005

After the solution is open, your Visual Studio should look something like the screenshot below. The name of the project you opened is in the top left corner and you should see a list of files in the Solution Explorer Windows on the right hand side.

clip_image007

Next you need to run the pong game to make sure all the code is working on your computer.

There are two ways to test the game.

  • You can launch it inside a simulator, this pops up a separate windows on your desktop with the game running inside the window. It takes up more memory and will be a bit slower to launch if you run it this way.
  • You can launch it on your local machine. If you do this, your PC will actually run the game as if you had clicked on the tile to launch the game from your Start Screen. When you want to exit the game and go back to Visual Studio just use <CTRL>+<D> on your keyboard to return to the desktop.

To test the game go to the menu and find the drop down arrow beside the play button where it says Local Machine, use that drop down to select either Local Machine or Simulator.
After you select your preferred testing option, select the play button or use <F5> to start the game.

clip_image008[4]

Go ahead and try out the game. You have now successfully installed the Windows 8 SDK and the Pong game on your computer

clip_image010

When you want to leave the game, return to Visual Studio (<CTRL><D> takes you back to the desktop) and select the Stop button to Stop running the code.

clip_image011

Create the art assets for your pong game

In this workshop we are going to have some fun personalizing your own version of Pong. You can create your own paddles, ball, background, sounds, and tiles.

What images do you have to create?

Here are the assets you should create and their dimensions. Don’t worry I’ll explain what tools you can use to draw your assets and how to set the size of the images.

  • Game Background 480 X 320 pixels
  • Paddle 22X75 pixels (you can create one or two paddles, it depends if you want the player to have the same paddle as their opponent)
  • Ball 30X30 pixels
  • You Win pop up screen 200X90 pixels
  • You Lose pop up screen 200X90 pixels

Because you are creating a Windows 8 app you will also need to create images to display on the various size tiles and the splash screen that is first displayed when you launch the app

  • Splashscreen Image 620X300 pixels
  • Logo 150X150 pixels
  • StoreLogo 50X50 pixels
  • SmallLogo 30X30 pixels

If you have no artistic talent, here are some royalty free art assets to help you out

How do you create a new image and specify the size?

I would suggest downloading the free tool Paint .NET

Let me walk you through creating a paddle image. These should be 22X75 pixels.

Start Paint .NET choose File | New from the top menu. When the popup windows is displayed enter the width and height in pixels of the image you want to draw then select OK.

clip_image002

Now you can start drawing! For the smaller images, you will want to zoom in using the zoom buttons so you can see what you are doing.

clip_image003

The toolbar on the left lets you choose how you draw your object.

  • Use the paintbrush to draw thicker lines
  • Use the pencil to draw thinner lines
  • Use the paint bucket to fill an entire area with a single color
  • Use the shape buttons to draw specific shapes such as squares
  • Use the Text button to add text
  • Use the Eraser to erase the background and make it transparent

clip_image004

As you start to draw you will see a history Window appear, this is very useful because you can use the back arrow to undo one or more steps if you make a mistake.

clip_image005

To change the color, you will need the Colors Windows. So go to the top menu and choose Windows | Colors

TIP: If you accidentally close any of the other windows like history, or the toolbox, you can open them again by selecting them in the Windows menu.

Choose Primary from the dropdown list and pick the color you want to use when you draw from either the color wheel or the color palette.

clip_image006

Have fun drawing and experimenting until you have the image you like, then save it as a .png file

clip_image007

How do you make transparent backgrounds?

Have you ever put an image on a PowerPoint Slide and there was a white rectangle around the image? To avoid that effect with your paddle and ball you will want to create a transparent background.

The easiest way to do that in Paint.NET is to select an area that you want to be transparent and then use the DELETE key to erase that area.

There is a magic wand selection tool in the toolbox. If you click that wand and then click on an area it will select everything of the same color.

clip_image008

Tap the DELETE key and you will see a checkerboard background, the area with the checkerboard background is now transparent.

clip_image009

If the area you are trying to make transparent isn’t all one color, you have two other ways to erase the background

Option 1 – Use the eraser on the toolbar to erase the background. Set the brush width to control the size of your eraser and zoom in and out for up close work.

clip_image011

Option 2 Use the lasso select to select an area and delete it.

clip_image013

clip_image015

TIP: You can also use Lasso select to select the part you do NOT want to make transparent and then use <CTRL>+<I> or Edit|Invert Selection from the menu to invert the selection and erase everything else!

clip_image017

clip_image019

There you have it, you are ready to build some cool art assets for some fun versions of Pong!

Replace the default Pong images with your own images

Now that you have the game loaded in Visual Studio you can start changing the art assets.

Change the Asset images

In Visual Studio, in the Solution Explorer window, expand the Assets folder.

clip_image002[4]

This is the folder where the images are location

  • ball.png – the ball
  • bg.png – the game background
  • paddle.png – the paddle
  • win.png – the You Win screen
  • lose.png – the You Lose screen

Now you can go to Windows Explorer and overwrite these files with the art assets you created.

Go to Windows Explorer and navigate to the folder where you unzipped the project files. Then navigate to the subfolder HTML5 Template Complete | Assets.

Replace the existing files with your image files.

Now test the game and see how it looks (Select the play button or use the <F5> key)

Is your background getting cropped?

Depending on the type of background you drew, you may find that the image is being chopped off at the edges. There are two variables in the code called SCALE_X and SCALE_Y that determine the size of your background image in the game. You can adjust this number up and down until you like the way it looks. For my background image, setting these variables to 2.9 worked nicely.

To adjust the scale:

1. Go to Solution Explorer

2. Expand the js folder

3. Double click on the file default.js to open it in the file editor

clip_image004

You will now see the code for the default.js javascript file appear in the code editor.

Scroll down until you locate the variable declaration for SCALE_X and SCALE_Y

clip_image005[4]

Change the values and test the game again, keep trying different numbers until you are happy with the appearance of your background on the game screen.

Now save your changes by choosing Save All in the menu. Wondering why there are two different save buttons? That’s because the solution is made up of multiple files. Clicking on the single diskette only saves the active file, clicking on the multiple diskettes saves all the files that make up the project.

clip_image006[4]

Change the tiles and icons for your game

When you launch the game you may have noticed you get a box with an x through it. That’s the default splash screen image. If you look at your start screen you will also notice you have a default tile for your game as well. Our next step is to change the images that appear on the tiles and splash screen of your game.

Go to Solution Explorer and expand the images folder.

clip_image007[4]

The images folder contains the files for the logos that are displayed on the splashscreen and tiles.

  • Logo.png – appears on the tlie
  • Smalllogo.png – appears on the tile when you zoom out on the start screen
  • Splashscreen.png – appears when the app is starting up
  • Storelogo.png – appears when someone is looking at your app in the store.

Now you can go to Windows Explorer and overwrite these files with the art assets you created.

Go to Windows Explorer and navigate to the folder where you unzipped the project files. Then navigate to the subfolder HTML5 Template Complete | Assets.

Replace the existing files with your image files.

Now test the game and see how it looks (Select the play button or use the <F5> key)

Chances are your new splash screen image looks great but now you are thinking, ugh how do I change the background color so it looks nicer.

Changing the background color of your splash screen or tile

The background color of your splash screen and tile is set in a file called the app manifest.

1. Go to Solution Explorer

2. Double click on the file package.appxmanifest to open the app manifest editor in the editor window.

clip_image009

3. Scroll down the tab marked Application UI, you will find a field where you can specify the background color of the tile and a field where you can specify the background color of the splash screen.

The field expects you to enter the hexadecimal or hex code for the color. A hex code is a code used to specify colors on web pages it represents the amount of Red, Green and Yellow required to create the color. Since you probably have no idea what the code is for different colors here are two ways to find the hex code for the color you want.

If you just want to look at different colors and pick one you like

· go to this Web Color Picker (www.colorpicker.com) and click on the color you want, and find out the corresponding code.

If you are a perfectionist, and want the color to match the color you put on your splash screen logo perfectly.

1. Open your splash screen logo in Paint .Net

2. Select the color picker from the Tools Window

clip_image011[4]

3. Now click on the area that has the color you would like for your splashscreen

4. Now display the Colors Windows, by using the <F8> key or choosing Windows Colors from the menu.

5. The primary color is the color you just selected. Select More and you can get the hex code for that color.

clip_image012

One you have the code for the color you want, enter it as the background color. Don’t forget to put the # in front of the code! If you forget you will get an error message telling you it’s an invalid color.

clip_image013

Now test the game and see how it looks (Select the play button or use the <F5> key)

Updating the information about your app so its ready to publish!

Okay you now have a working Pong game and it looks good! Your next step is just to specify a few values in the app manifest file to get it ready to publish.

Go to the Application UI tab of your app manifest (the same file you edited to set the background color)

Set the Display name to the name you want to give your app

Populate the Description with text that describes your game.

clip_image015[4]

Now go to the Packaging tab

Specify a Package Display Name and a Publisher Display Name (your publisher display name should be the name of your Windows Store account)

clip_image016

Save your changes by selecting Save All from the toolbar.

clip_image017

Create a production version of your app for the store.

Your next step is to create a build of your app that is production ready!

Change the Build type in the menu from Debug to Release.

clip_image018

From the menu select Build | Build Solution this will create a compiled version of your application ready to package and submit to the store! You will know the build worked if you see the message

Build: 1 succeeded, 0 failed appear in the Output Window.

If you see a few warnings appear in the Output Window don’t panic your app can still be published and still works. If you see Errors, those will need to be fixed before you can publish your app.

clip_image019

Congratulations you have an app that is ready to submit to the store!

Take your game to the next level

Of course you can do more than just change art assets, you can start exploring the code to make the game more interesting or challenging! Here are some suggestions of code changes you can try

Less than 10 lines of code

  • Make the ball faster
  • Make the paddle or ball smaller

10-100 lines of code

  • Make the ball go faster every ‘x’ hits
  • Change the appearance of the ball every ‘x’ hits

More than 100 lines of code, but still something you can do!

  • Make a target of some sort appear on the screen and if you hit it get extra points, or change something in the game (ball speed, paddle size)
  • Allow the player to move the paddle left and right as well as up and down
  • Use your imagination!

If you want to publish your game, follow the links to find instructions on how to create your account and publish your app .