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?”
“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?”
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
Go ahead and try out the game. You have now successfully installed the Windows 8 SDK and the Pong game on your computer
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.
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.
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.
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
If you have no artistic talent, here are some royalty free art assets to help you out
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.
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.
The toolbar on the left lets you choose how you draw your object.
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.
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.
Have fun drawing and experimenting until you have the image you like, then save it as a .png file
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.
Tap the DELETE key and you will see a checkerboard background, the area with the checkerboard background is now transparent.
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.
Option 2 Use the lasso select to select an area and delete it.
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!
There you have it, you are ready to build some cool art assets for some fun versions of Pong!
Now that you have the game loaded in Visual Studio you can start changing the art assets.
In Visual Studio, in the Solution Explorer window, expand the Assets folder.
This is the folder where the images are location
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)
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
Scroll down until you locate the variable declaration for SCALE_X and SCALE_Y
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.
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.
The images folder contains the files for the logos that are displayed on the splashscreen and tiles.
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.
The background color of your splash screen and tile is set in a file called the app manifest.
2. Double click on the file package.appxmanifest to open the app manifest editor in the editor window.
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
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.
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.
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.
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)
Save your changes by selecting Save All from the toolbar.
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.
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.
Congratulations you have an app that is ready to submit to the store!
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
10-100 lines of code
More than 100 lines of code, but still something you can do!
If you want to publish your game, follow the links to find instructions on how to create your account and publish your app .