Go DevMENTAL

Step-by-Step – Making Windows 8 Pong for a complete beginner

Susan Ibach — Wed, 22 May 2013 07:00:00 GMT

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!

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.

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.

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.

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.

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.

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.

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

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

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.

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!

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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!

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 .

Step-by-Step creating an app to find the nearest…

Susan Ibach — Thu, 16 May 2013 07:00:00 GMT

Can you really just take a template, change the data source and have a useful app? If you find the right data source, then the answer is yes.

OpenData is an amazing concept. Organizations (especially municipal, provincial, and federal government) give the public access to their data so it can be used for websites and apps.

That’s how we get apps that tell us stuff like how did this restaurant do on the health inspection, or find the hockey arena. I was very excited when I saw the Finder App Template developed by Mark Arteaga because it claims to be a template that allows you to use Open Data to create a useful Windows 8 app.

The promise: A template developed to allow developers to quickly and easily create a location based type application for the Windows 8 store. It allows a developer to easily pull existing point of interest data into the app to visually display on a map.

The reality: It works, but there is little extra homework for the app developer. You have to get a Bing Maps Key so your app can use Bing Maps (details in the section “Creating a Bing Maps developer account”.) It will take you a little while to find a suitable Open Data set (details in the section “finding a data source”), and you’ll have to edit the code to add a privacy policy (details in the section “Adding a privacy policy”) but once you overcome those hurdles, you have an app with very good functionality!

Map displaying the points of interest
Ability to show detailed information for a particular point
Ability to search the data using the search charm
Ability to share a particular point of interest on the map with the Share Charm
Ability to get directions from current location to a selected point of interest on the map

What will you need before you start?

The Windows 8 SDK installed on your PC (which includes Visual Studio 2012 Express)
The Bing Maps SDK installed on your PC (since this app template uses Bing Maps)
An Open Data Source, in JSON format, that contains latitude and longitude information (more information on that and how to find it in the explanations below
A name for your application

Downloading the template

The template is available on github it’s called Win8_FinderApp_Client

You download it by selecting the Zip button from the toolbar

Then you just unzip the file and you will have an Project that shows you a map representing flu data.

Running the project the first time

If you are like me you will want to run the project as is to make sure it works before you start making any changes.

To open the project in Visual Studio, go the folder where you extracted the zip file. Go to the subfolder Win8_Finder_App_Client-master | FinderApp and you will find a file called FinderApp.sln. Double click on the FinderApp.sln file to open it in Visual Studio.

As always happens when you try to open an open-source project in Visual Studio, you are warned that Visual Studio has no way of knowing if you can trust this source code, you will have to select OK to continue and open the solution.

Debu

After the project is open in Visual Studio, launch it by selecting the Debug button on the top menu.

If you have not already installed the Bing Maps SDK the app will not run and you will get the following error message.

You can download the Bing Maps SDK here

The app will launch and ask permission to access your location (that enable the app to provide directions to the locations on the map). But when the app launches you get an error message on the screen

“The specified credentials are invalid. You can sign up for a free developer account at http://www.bingmapsportal.com”

You see this app template uses Bing Maps, and in order to use the Bing Maps API in an app you have to sign up for a Bing Maps developer account. Creating an account is free, so don’t let this stop you from continuing.

Creating a Bing Maps Developer Account

Okay so let’s create a Bing Maps Developer Account and then maybe we’ll be able to get rid of that error message, besides which we’ll need it for our app!

Go to www.bingmapsportal.com and select Create a Bing Maps Account

You will be prompted to log in with a Microsoft account (e.g. live.com account, outlook.com account). If you don’t have one you can create one now by selecting Sign Up Now from the bottom right corner of the log in screen. You will need a Microsoft account to publish your app to the store anyway.

Then you will be asked if you want to use this Microsoft account as your Bing Maps Account.
Select Continue to continue and access your Bing Maps Account.

Now you specify the account details for your Bing Maps Account

Okay you have an account, now what!

Getting a Bing Maps Key

Bing maps offers some great services, and if you start using their services a lot, at some point you end up paying for them, but don’t worry, you won’t reach that point building one Windows 8 app!

For each app that you build that will access the Bing Maps APIs you have to have key. So the next step is to Create a key. Select Create or view keys from the left hand menu.

If you read the notes under the heading My keys, it says you can create two keys (Trial or Basic) for most application types and one additional Windows Store app Trial key under this account. Trial keys expire after 90 days. If you are just exploring you can create a trial key, but I want to publish my app so I am going to create a Basic Key that will not expire.

So I specify the name of the application I am creating, key type Basic, and Application Type Windows Store App, then I enter the captcha (that’s what they call those combinations of characters used for security), and select submit.

NOTE: If you aren’t sure what app name you want to use, don’t worry. You can come back and change the app name later.

After you hit submit you should see a message Key created successfully and at the bottom of the screen you will see your Key, along with the associated app name and expiry date. If you selected a Basic Key type Expiration Date should be None.

Updating the Finder App to use your Bing Maps account

Now you have a Bing Maps account and a key, we can return to Visual Studio to update the code with our key and get rid of that error message!

In Visual Studio go to the Solution Explorer window, expand the js folder and double click the config.js file to open it in the code editor window.

Now Search through your config.js file <CTRL><F> can be used for search, or you can just scroll down and find bingMapsKey

Change the string “SET-YOUR-KEY-HERE” to the key you just created in your Bing Maps account

bingMapsKey: "SET-YOUR-KEY-HERE"

becomes something like the following

bingMapsKey: "CjPXec5-PjxGZYbhyroKJlNr-eGxSNnB1MG5j-QtvhRYhvxlj7Go67zqnUiMoKiI"

NOTE: Yes you can cut and paste the key from the screen in your browser!

Now run the program again, you should no longer see the error message and you can now try out the app, click on one of the pushpins, choose directions or details, try bringing up the Charms ( <Windows><C> ) and try Search or Share.

Congratulations you now have a valid Bing Maps account, so now all we need to do is change the data displayed in the app!

Finding a data source to display in your app

If you scroll through the config.js file you will find the following code, this is the code that defines what data will be displayed on the map.

/**

Sample Flu Data from server

**/

appName: "Sample Server Flu Data",

staticUrl: "http://finder-server-sample.azurewebsites.net/api/data/flu_data",

pathToArray: "",

latitudeField: "latitude",

longidudeField: "longitude",

nameField: "location",

secondaryField: "address",

detailField: "location",

If you read Mark Arteaga’s Finder App quick start guide, when he describes the point of interest data, he mentions that you have to have JSON data.

NOTE: If you are a coder and comfortable with data, you can of course update the code to read other data formats. But if you are not a coder, I would suggest you find a data source that provides the JSON format to keep it simple for now.

So where do I find Open Data in JSON format that would be good for a Windows 8 app?

There are LOTS of Open Data Catalogues out there, so now it’s time to have some fun doing some pouring through web sites and see what you can find.

Try search terms such as “your city name” “Open data” you may discover your hometown has an open data catalogue ready to use. You can also search for open data for a particular country or region.

I grew up in Fredericton, New Brunswick, so let’s see what I can find for Freddy Beach…

Instantly you see an Open Data Home page for the City of Fredericton, further down there is another promising link called Open Data Sites which appears to provide a catalogue of open data for the government.

Once you select a link, try to look for a list of all the different open data available, it’s often referred to as a Data Catalogue.

Once you find that list, keep an eye out for the Format! You are looking for data that is in JSON format.

Some data catalogues will even let you search by format, which is helpful since we are looking for a specific format.

Unfortunately Fredericton has lots of great data, but none of it is JSON, so let’s try somewhere else!

The City of Vancouver has some JSON, this is interesting, how about data about local playing fields and their status. I might well use an app that I could quickly use to see if my soccer or softball field was open the day after a big rain storm or early in the spring when the snow is still melting.

If I click on the Lync to see the JSON Data, I see the following data for each park:

{

"json_featuretype":"WeekendPlayfieldStatus"

,"weekend_status":"User discretion"

,"park_name":"Adanac Park"

,"closure_notes":"Summer field"

,"site_area":"NW"

,"park_id":65

,"last_updated":"May 3 2013"

}

If you look back at the flu data currently being displayed in the app, you will notice it has a latitude and a longitude field. If I want to display pushpins on a map for each location, I need latitude and longitude data. So Although this data about parks in Vancouver is in the correct format, it doesn’t have the fields I need to use it in this template.

So I’ll keep looking…If I visit the City of Toronto, their Green P Parking data is JSON

Let’s check out the data, at the link

http://www1.toronto.ca/City_Of_Toronto/Information_&_Technology/Open_Data/Data_Sets/Assets/Files/greenPParking.json

{"carparks":[{"id":"1","address":"20 Charles Street","lat":"43.668997","lng":"-79.385093","rate":"$2.00 \/ Half Hour"

BINGO! We have a winner, the lat & lng fields look like co-ordinates to me!

So you can see part of the challenge when using this template is finding suitable data. It’s out there, you just have to do a little digging to find useful data in the right format.

I do think an app to help someone find a parking lot in Toronto would be useful!

Updating the app to point to your chosen Open Data source

Now I go back to Visual Studio and edit the config.js file. You can find additional instructions in Mark Arteaga’s Quick Start guide in the customization section for these steps as well.

Remember that code we saw for specifying the flu data?

appName: "Sample Server Flu Data",

staticUrl: "http://finder-server-sample.azurewebsites.net/api/data/flu_data",

pathToArray: "",

latitudeField: "latitude",

longidudeField: "longitude",

nameField: "location",

secondaryField: "address",

detailField: "location",

We need to change that to point to our data!

Let’s update the values

appName should be our app name, in this case “Toronto Parking”
staticURL should be the URL that points to the JSON data we found in the open data catalogue.
pathToArray is going to depend on what your JSON data looks like. You see at the start of my data before the open bracket where it starts listing the data for each individual parking lot? Where you see the string “carparks” that is the pathToArray. Here’s another examples, so you can see the pattern. Go to splash parks in Milton JSON, you will see a pathToArray of “items”.
LatitudeField – should be the label for the field that contains the latitude, for my data that is lat
longitudeField – should be the label for the field that contains the longitude, for my data that is lng
nameField – is the field that appears in the table on the left hand side of the screen under the column heading Name. the parking lots don’t have a name field, so I think in my case the address would be useful to display in the table
secondaryField – is the additional field that appears in the table on the left hand side of the screen. I don’t really have a name field, but I think it might be helpful to indicate if parking is a surface lot or a garage (in winter a garage means you don’t have to brush the snow off your car), so I will choose the carpark_type field to display in the table.
detailField – this is the extra information displayed when someone selects details for a particular lot. I think the most useful information to display from my data set would be the rate for the parking lot.

So when I update the code to point to my new fields (and update the comments to indicate that this is parking lot data not flu data, my code looks like this.

/**

Toronto Parking Lots

**/

appName: "Toronto Parking",

staticUrl: "http://www1.toronto.ca/City_Of_Toronto/Information_&_Technology/Open_Data/Data_Sets/Assets/Files/greenPParking.json",

pathToArray: "carparks",

latitudeField: "lat",

longidudeField: "lng",

nameField: "address",

secondaryField: "carpark_type",

detailField: "rate",

When I am done and I run my app it looks like this

If I select a pin on the map and choose details you can see the detail pane with the parking rate

So now I have a working app that displays the location and information about parking lots in Toronto. Now I just have a little tidying up.

I don’t like the title Location for my garage type, so I want to change that header.

I did a quick search of all the files in the project for the word “Location” using <CTRL><SHIFT><F> or you can go to Edit | Find and Replace | Find in Files. I found a declaration of the table header in the file home.html.

<thead>

<tr>

<th class="hidden"></th>

<th><span id="distanceHead" class="header">Distance</span></th>

<th><span id="nameHead" class="header">Name</span> <span id="nameFilter" class="filter win-answerButtonGuide win-replayWriting"></span></th>

<th><span id="addressHead" class="header">Location</span> <span id="addressFilter" class="filter win-answerButtonGuide win-replayWriting"></span></th>

</tr>

You can change the string “location” to “type” to change the column heading.

Updating the messages and text in the app

Okay now back to Mark’s starter guide to see what other messages I should customize so the app better represents the data I selected. Scroll down to the Config.JS section where he mentions Helper Text. These are messages that would be displayed to the user, so I should make sure they are suitable for my data.

/***************************************************

* Various helper text

***************************************************/

waitText: "Finding parks near you ...",

poiDataAvailable: "Found {0} parks!",

noPoiData: "Unable to find parks :(",

noPoiDataMessage: "We could not locate any parks near your location.",

noPoiDataMessageTitle: "Parks Unavailble",

includeUserLocationOnPoiSelected: false,

includeUserLocationOnPoiDisplayed: false,

Here’s a description of the above data

waitText – the text to display while a search is in progress
poiDataAvailable – text to display when data is found
noPoiData – text to display when no data is found
noPoiDataMessage – text to display in message box when no data is found
noPoiDataMessageTitle – the title of the message box for noPoiDataMessage
includeUserLocationOnPoiSelected – determines if the users current location should be included in the map bounds when a POI item is selected
includeUserLocationOnPoiDisplayed – determines if the users location should be included in the map bounds when all the POI data is displayed on the map

Let’s update the values for our data

/***************************************************

* Various helper text

***************************************************/

waitText: "Finding parking lots near you ...",

poiDataAvailable: "Found {0} parking lots!",

noPoiData: "Unable to find parking lots :(",

noPoiDataMessage: "We could not locate any parking lots near your location.",

noPoiDataMessageTitle: "Parking lots Unavailble",

includeUserLocationOnPoiSelected: false,

includeUserLocationOnPoiDisplayed: false,

Mark also mentions that the config.js file allows you to configure the information that is shared from your app if a user selects the share charm for a particular location. You can configure the data that will be shared.

/**************************************************

* SHARING CONFIGURATION

*

* available tokens:

* nameField: this is the nameField element of the given point.

***************************************************/

shareTitle: "Finder App",

shareText: "I'm at {{nameField}}",

shareDescription: "Finder Share Description",

Since the nameField contains the address of my parking lot, and I think that’s useful information to share, I only need to update the wording.

shareTitle: "Find a Toronto Parking Lot",

shareText: "I'm parking at {{nameField}}",

shareDescription: "Sharing selected parking lot",

Below you can see how the shared data appears if you choose to share it by email.

Next I should update the text that appears if someone brings up the About page under the Settings Charm

/***************************************************

* About Flyout text

***************************************************/

aboutText: "This application is built on top of the <b>Finder App Template</b>",

copyright: "RedBit Development © {0}".format(new Date().getFullYear()),

version: RedBit.Utilities.appVersion(),

versionFriendly: RedBit.Utilities.appVersionFriendly(false),

contactUsText: 'If you have any comments or suggestions for {0}, email us at <a href="mailto:support@redbitdev.com">support@redbitdev.com</a>'.format('Finder.Config.appName'),

So if I update the fields

aboutText: "This application is built on top of the <b>Finder App Template</b>",

copyright: "HockeyGeekGirl © {0}".format(new Date().getFullYear()),

version: RedBit.Utilities.appVersion(),

versionFriendly: RedBit.Utilities.appVersionFriendly(false),

contactUsText: 'If you have any comments or suggestions for {0}, email me at <a href="mailto:xyz@microsoft.com">HockeyGeekGirl</a>'.format('Toronto Parking Lots'),

Now my About page looks like the screenshot below.

Customizing logos and the splash screen

Setting logos

If you expand the images subfolder you will see the files used for the logos and splash screen. If you replace these files with new images with the sizes specified below, you can display your logo for the tiles and splash screen.

Logo.png - 150x150 pixels - displays on the tile on the start screen
Smalllogo.png – 30x30 pixels – displays on the tile on the start screen if you zoom out
Splashscreen.png – 620x300 pixels – displays on the screen when you start up your app
Storelogo.png – 50x50 pixels – displays in the windows store when someone is looking for your app
Pin.png is the image used for the pushpin, you can change this if you want, or leave it as is.

You can use a tool like Paint or Paint.NET to resize your logo. Paint .NET will keep transparency.

Setting names and colors

If you open the file package.appxmanifest in Solution explorer.

Navigate to the tab called Application UI and specify your own values for fields that affect the appearance and name of the application.

Display Name – the name you want displayed in the store for your app

Description – the description of your app

Scroll down to the Tile fields and specify a Short name for your app to display on the Start Screen tile.

You can also specify a background color for the tile and whether you want the text on the tile to be dark or light.

Scroll down to the splash screen fields, you can change the background color here so it better matches the image you selected for your splash screen.

Navigate to the Packaging Tab

Set the Package Display name to the name you have given your app

Set the Publisher Display name to the name of your Windows 8 store account

Adding a privacy policy to the app

Because your app accesses used location and connects to the internet you require a privacy policy. The privacy policy explains to the user what data your app collects and how the data is used.

The easiest way to support privacy policy is to create a web page with your privacy policy and then navigate to the folder js and open the file default.js

Find the code that defines the settings page for the application

app.onsettings = function (e) {

e.detail.applicationcommands = {

"settingsDiv": { href: "/pages/settings/settings.html", title: "Options" },

"about": { href: "/pages/about/aboutflyout.html", title: "About" },

"privacyDiv": { href: "/pages/privacy/privacy.html", title: "Privacy Policy" },

};

Now comes the fun part, because you need to create a page in your app for the privacy policy. You can do a little cut and paste and create a page based on the files used for the About page (AboutFlyout.html) and so on. Then update the HTML to contain text that describes your privacy policy. You will also need to make sure the <div> tag in your HTML page matches the <div> tag after the <body> statement of your HTML file. There is a blog that explains where this code is located here.

Here is the code after I added the privacy policy flyout to my app.

app.onsettings = function (e) {

e.detail.applicationcommands = {

"settingsDiv": { href: "/pages/settings/settings.html", title: "Options" },

"about": { href: "/pages/about/aboutflyout.html", title: "About" },

"priv": { href: "/pages/privacy/privacyflyout.html", title: "Privacy Policy" },

};

Here is the relevant code from inside my HTML page showing the div tag that matches the label I specified in the javascript code.

<body>



<div id="priv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Privacy settings flyout">

I wasn’t exactly sure what to put in my privacy policy, so I looked at a few similar apps in the store and used their privacy policies as a starting point.

NOTE: When you publish your app to the store, in the Decription section you will be asked for a URL to your privacy policy. So you will need to set up a web page with the same privacy policy you included in your app and provide the URL that points to that page when you submit your app to the store. I had a wordpress blog so I just added an extra page to my blog with the privacy policy. You can also create a free website using Azure if you don’t have a site set up already. Tim Heuer wrote a blog post about how to do it http://timheuer.com/blog/archive/2012/09/26/use-azure-free-web-site-for-windows-store-app-content.aspx

Now I can publish my app to the store!

So in summary, the template works, and creates an app with very good functionality, you don’t have to be an experienced programmer, but you do have to be comfortable opening up and editing the code in the files. An experienced programmer could do a lot more in terms of customizing the data displayed and the types of data sources supported.

NOTE: The WACK test told me my launch time was too slow for some devices. So in order to pass I was unable to support ARM devices. I selected x86 and x64 packages instead. Disappointing because I think this sort of app would be popular on the smaller tablets. I will pass this along to the team who built the template in case it can be fixed. It is also possible that this performance issue varies depending on the data source you select for your app.

How Blend made creating a Windows 8 app in 24 hours easy.

Mickey MacDonald — Tue, 14 May 2013 04:00:00 GMT

Having never used Blend before I was amazed how fast and easy it was to create my simple app.

The source code for this Windows 8 app and many others can be found on my GitHub (http://bit.ly/17NwuAw)

After joking with a friend of mine, we came up with a fun little app that would tell you your fortune, we called it “Cookie fortune”. This oracle disguised as a chocolate chip cookie was something I thought would be easy to implement and would be a fun app to make.

Why I built my app with Blend (instead of Visual Studio)

Adding the artwork

Adding the Fortune cookie logic

Adding Share

Adding Snap view

Why I built my app with Blend (instead of Visual Studio)

After deciding on a language, C#, my next step was research. I was looking for the fastest way to create the XAML layout I wanted for my app. This is where I bumped into Blend. I remembered briefly looking at Blend a few years ago but never really sat down and used it. Reading through the documentation I quickly discovered that it had some awesome features that should really speed up the design process. One of the biggest ones that jumped out at me was the fact that it’s a visual editor, what you see is what the user will see. I loved this because it means less compiling and running just to see simple changes. Another feature that also helps in this regard is Interactive mode. Interactive mode lets you design your apps in states that would normally only be available at runtime. No more guessing how snap view would make my app look. Add in the ability to drag and drop Windows app controls onto the design surface and I was falling in love. I was even more delighted when I realized Blend for 2012 was already installed (It’s comes with Visual Studio 2012 including Express for Windows 8 and free trial versions). To get a better feel for the tool I decided to follow along with the example “Design your first Windows Store app in Blend” (http://bit.ly/FirstWindowsApp) on the Windows Dev Center website. Within 30 minutes I had completed it. This made my confidence soar. I was ready to create my Cookie Fortune app with Blend.

Below are some highlights from the development of my app, but in no way is it meant to be a step by step guide. Feel free to download the code for a more complete picture.

I started by creating a new project and selected the blank app, because of the simple nature of my app it seemed like the best fit.

Adding the artwork

My next step was to change the background image to one that I had created. I imported it as an existing item Project>Add Existing Item or Ctrl+i. Then I placed the newly imported asset in the design view, the image below shows the result.

I then added three more images, one of the cookie whole and the two pieces of the cookie when it was broke.

My plan was to hide the two broken pieces when the cookie was being shown then to hide the cookie image and show the broken cookie pieces when the user clicked or tapped. This gives the illusion that the cookie breaks in two on the user’s input. The image below shows the cookie in its whole state.

Adding the Fortune cookie logic

I completed the cookie’s breaking ability by writing some basic lines of code. One big thing to note here is I never had to leave Blend to write the code, I actually wrote it right inside of Blend’s code editor.

Below is the code I used to make this happen.

 private void Grid_Tapped(object sender, RoutedEventArgs e)
        {
            if (isFirstTap)
            {
                if (ApplicationView.Value != ApplicationViewState.Snapped)
                {
                    //Hide the whole cookie
                    CookieWhole.Visibility = Visibility.Collapsed;
                    //Display the broken pieces of the cookie
                    CookieBrokenLeft.Visibility = Visibility.Visible;
                    CookieBrokenRight.Visibility = Visibility.Visible;
                    isFirstTap = false;
                }
            }            
            else
            {
                //Display the whole cookie
                CookieWhole.Visibility = Visibility.Visible;
                //Hide the broken pieces of the cookie
                CookieBrokenLeft.Visibility = Visibility.Collapsed;
                CookieBrokenRight.Visibility = Visibility.Collapsed;
                isFirstTap = true;
            }
        }

At this point I was on a roll I had dragged a dropped a few images wrote a few lines of code and in extremely little time I had a pretty cool breakable cookie. Next it was time to make the cookie dispense some wisdom. I quickly gathered together some fortunes from lists I had found on the web. I picked XML as my method of storing these fortunes and found a great example and information on how to parse the XML file using the XmlReader Class on the MSDN library website (http://bit.ly/KE9Ges). Below is a sample of the code I wrote to parse the fortune XML and add it to a the “fortune” list.

            string fortuneString = null;

            // Create an XmlReader
            using (XmlReader reader = XmlReader.Create("Assets//Fortunes.xml"))
            {
                while (reader.Read())
                {
                    switch (reader.NodeType)
                    {
                     
                        case XmlNodeType.Text:
                            fortuneString = reader.Value;
                            fortunes.Add(fortuneString);
                            break;
                       
                    }
                }   
            }

Adding Share

After writing a few more lines of code to make the fortune text appear when the cookie was in its broken state and disappear when the cookie was whole, I now had a fully functioning fortune telling cookie. I could hardly believe how quick I managed to get to this point. Since it was moving along so quickly I decided to add a feature. I thought wouldn’t it be great if you could share your fortune with others. With Windows 8’s share feature this was a snap. While still in Blend I added the following code to easily add the share function to my app.

        private void RegisterForShare()
        {
            DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
            dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager,
                DataRequestedEventArgs>(this.ShareTextHandler);
        }

        private void ShareTextHandler(DataTransferManager sender, DataRequestedEventArgs e)
        {
            DataRequest request = e.Request;
            request.Data.Properties.Title = "Cookie Fortune";
            request.Data.Properties.Description = "Share your fortune with your friends.";
            request.Data.SetText(FortuneDisplay.Text);
        }

Adding Snap view

My app was almost ready for the store it only needed one more feature to be complete and to pass the Windows Application Certification Test, snap view. Again to my delight Blend made this unbelievably easy. Like I said in the beginning, Blend has a very useful feature called Interactive mode. With interactive mode you are able to design your application in various states like snap, filled and full screen. Check out this link if your would like to know more about how to use Interactive mode (http://bit.ly/11xje4d). The image below is a screen shot of Blend while in the app is in the “snap” state.

As you can see creating a simple app is very fast using this powerful tool. In under 24 hours I was able to create my application, add custom layouts for the various states and even add the share contract feature. Blend can truly speed up your development time, I know I will be using it for designing my future applications.

Check out this great documentation for more information on getting started with Blend(http://bit.ly/18ESHSH) and as an extra challenge why not try using this as a starting point for creating a “Magic 8-ball” style application.

Happy Coding!

How to update your app in the Windows 8 store

Susan Ibach — Fri, 10 May 2013 07:00:00 GMT

How do you submit a new version of an app to the Windows store after you have made updates to the code?

You’ve submitted your app, and now you’ve made some improvements based on comments or feedback from users, or maybe just because you had some time to improve it. Let’s see how you submit an update for your app!

I recently submitted an app to the store and I had to remove a feature because it wasn’t working. Later I had time to go back and finish up that feature, so now I want to update my app in the store. Here’s how you do it.

Select Details for the app you want to update

When you get to the Details page, select Create New Release

You will need to upload a new package to the store containing your new code.

Go to Visual Studio, open the .appxmanifest file, go to the Packaging tab and increase the Version number, so it indicates this is a new version of your app.

You decide how you want to increment the version numbers, but here is some general guidance:

Increment the Major number if you are adding significant functionality
Increment the Minor number when minor features or significant fixes are added
Increment the Revision number when minor bugs are fixed.

Now go to the menu and choose Project | Store | Create App Package and follow the prompts to build your new app package. It’s always a good idea to launch the Windows Application Certification Kit on your updated app to make sure it still passes the tests with your updates.

After you have built your new package, return to your app submission screen, select Packages, and upload the new package from your Visual Studio project AppPackages folder (REMINDER: the package is the file with the extension .appxupload).

When you submit a new version of an app, you must indicate the contents of your update in the Description section.

Enter a description of the update in the Description of Update field.

Although it is not required, if you are adding new functionality to your app, consider updating other fields that describe your functionality to users. You want to ensure potential users are aware of the full functionality of your application when browsing the store. Attributes you might want to updated include the Description, the App features list, or the Screenshots.

If you wish you may change other attributes of your app such as price, age ratings, but that is not required to submit the update.

After you have uploaded your new package, completed the description of update and made any additional changes you wish to make, select Submit for Certification to submit your updated app to the store.

Congratulations you have just submitted an updated version of your app to the store!

Take pride in your work, talk to your users, find out what they would like to see improved. Learn more about the capabilities of Windows 8 apps, could you create a live tile that shows current information on the start screen. Are you leveraging Search? Share? Could you improve the snap view? Check out Azure Mobile Services. Now that you have a handle on creating and updating apps the sky is the limit!

Video of the week: Favourite Windows 8 promotions

Susan Ibach — Thu, 09 May 2013 17:10:07 GMT

There have been a few really creative videos out there for Windows 8, when you want a smile and distractions, check out my favorite Windows 8 videos

I have no idea who created these or which ones are official, I just know each of them made me smile :)

If you know of any others let me know, I love creativity like this!

A Small Demonstration

The Live Tile Experiment

The Windows 8 Training Camp series

And to their credit, the first time I saw the Surface commercials I got a kick out of those as well

Surface Pro

I first saw this on a business strip in my hotel room, and when I got in the elevator to go out for dinner, and on the next floor a group of girls in school uniforms got in, I kept expecting them to start dancing around with a Surface.

Imagine Cup Canada 2013 – We have a winner!

Susan Ibach — Thu, 09 May 2013 07:00:00 GMT

The Imagine Cup is about giving students with great ideas a chance to shine! Meet the winner of the 2013 Canadian Imagine Cup who will represent us at world finals in St Petersburg Russia!

The Imagine Cup challenges students to use technology to do amazing things! This year there were three categories in the Canadian Imagine Cup Finals:

Games – always interesting in Canada given our thriving community of game developers
Innovation – somewhere out there is a student with a brilliant idea that could change an industry
World Citizenship – using the technology we have available today to help others

The judges had a difficult task, review the best entry in each category and select one team to represent Canada at the world Imagine Cup finals in Russia this July. This task was made even more difficult by the caliber of the entries. Each team had already won a great Windows 8 phone from our sponsors HTC (check out the sleek HTC 8X) by taking first place in their respective categories.

The Contenders

The top games entry was a fun Windows Phone Game called Grumpy Tree. Mother Nature is tired of doing all the work to save the environment and has given up. You have to help the animals complete different tasks to help save the earth. The game has attractive graphics, lots of levels with different challenges, and great gameplay! Developed by team Greensource made up of students from Carleton University and University of Ottawa. I hope they put it in the store soon so you can download and play it yourself!

The top Innovation entry was a new twist on the app to help you plan your shopping trip called YouSave. You chose the priority: environment, time, price? You enter your shopping list, the app compares prices, routes, and locations of stores and makes suggestions on where you should shop. This app was developed by a team from the University of Calgary

The top World Citizenship entry helps you stay healthy with Sano. Sano is a Kinect system that can either be used by physiotherapists to assign and track completion of exercises remotely, or can be used to give all of us who spend long days sitting in front of a computer simple exercises to complete to improve our health.

and the winner is…

Team Sano!

Omar Zaarour, Omar Addam, Tamer Jarada, Fatemeh Keshavarz from the University of Calgary along with their mentor Reda Alhajj, a professor at the University of Calgary, will all be flying to St Petersburg in July for the world Imagine Cup Finals.

What impressed the judges about Team Sano’s entry was not just what it can do right now, but also it’s future potential. Team Sano not only built an application using Kinect that can be used to review and track exercises, they also built a second application which can be used by physiotherapists or other health or fitness professionals to create and assign exercises. Admit it, when you have physio exercises you are diligent for the first few days, but then you start to forget. Imagine if your physiotherapist knew exactly how often you had completed your exercises and whether you had done them correctly! Imagine your mom being able to assign the kids 20 jumping jacks if they want to keep their video game privileges.

See the entries and the keynotes online

Instead of describing the application, why don’t you see the applications in action, presented by the teams from the finals! You can view all the presentations from the Imagine Cup online here! (You will need to specify an email address and create a password to access the content). You can see the team presentations and more!

Microsoft Canada president Max Long talks about the importance of Imagine Cup!
Bryan Griffiths of Phantom Compass gives us a sneak peek into the mind and lair of a professional game developer and some insights on where game designers can find inspiration.
Careerify CEO Harpaul Sambhi describes Homer Simpson as the ultimate entrepreneur
Michael Furdyk, co-founder of Taking IT Global, a worldwide non profit with over 400,000 members talk about how his path from starting a business in high school, to the Oprah Winfrey show, to helping youth succeed around the world with Taking IT Global.
Meet our amazing panel of judges in the Imagine Cup Kick-off: Bill Buxton advocate for innovation and design and principal researcher at Microsoft Research, Bruce Firestone entrepreneur and founder of the Ottawa Senators, Bryan Griffiths professional game developer at Phantom Compass, and Etienne Tremblay former worldwide Imagine Cup Finals judge and associate director and leader of excellence in charge of the Microsoft technologies center at Fujitsu Canada.
And of course you can watch the presentations by each of our amazing teams!

Good luck in St Petersburg, Team Sano!

Congratulations team Greensource and team YouSave for winning the Gaming and Innovation categories!

Congratulations to all the competitors who entered Imagine Cup 2013 you did amazing work! Canada truly is a center of talent and innovation! You have great ideas, bring them to life! Remember, at Imagine Cup All dreams are welcome!

Tips and gotchas for Windows 8 apps: Day of the Living Dead

Susan Ibach — Wed, 08 May 2013 13:46:07 GMT

A team of students from Vancouver talks about the experience of bringing a Unity game to Windows 8.

This series features interviews with student Windows 8 app developers who share the lessons they learned building windows 8 applications.

This week’s interview features Team Hungry ECE Programmers, a student team from UBC Computer Engineering who built a game called Day of the Living Dead

Could you briefly describe your application/game?

In a world where zombies want to become humans, a saviour uses a heartbeat to lure zombies to the church to convert them back into human form. Keep humans alive as long as possible. Tap the mouse cursor to generate a heartbeat that lures nearby zombies and direct the zombies towards the church. Keep yourself from dying from a heart attack (full red health bar).

Further instructions are available at: http://members.shaw.ca/blau120039/Game/Instructions.pdf

Did you use .NET and XAML, HTML and Java, or DirectX and C++

We used the Unity Game Engine to develop our game. We chose Unity because it is easy to use for developing games. We scripted the gameplay in Unity using C# and JavaScript. The game was exported using the Alpha release of the Unity 4.1 Windows 8 plugin to a Visual Studio project.

What was your banging your head against a wall moment?

To publish the game for the Windows store, we exported our game from Unity to a Visual Studio project using the pre-release Alpha of the Unity plugin for Windows 8. Because this plugin is pre-release, there were unsupported features as well as bugs.

The exported project failed WACK because of two unsupported third-party dll files, NGUI.dll and boo.lang.dll. Trying to figure out how to get the app to pass WACK without using those two dll files in the visual studio project was the most frustrating part of the submission process.

Did you ever solve that issue?

The NGUI.dll file was a relatively simple fix. When we developed the initial version of the game during the Global Game Jam, we made many of our scenes using the NGUI framework but displayed unsightly watermarks in our game. After the Global Game Jam, we decided to spend time redesigning our scenes to remove the NGUI framework. When we were ready to export the Unity project, most of the NGUI framework was removed from our game already. The solution was a simple matter of deleting the unused NGUI framework from our project.

The more problematic dll file was the boo.lang.dll. It took me a long time to discover that the dll file was required for all the JavaScript game scripts we originally wrote in Unity. I could not just simply delete files to solve the failure as I did for the NGUI.dll. Upon looking at the website for the alpha program of the Windows 8 plugin, I found out that JavaScript was yet supported in the alpha release. This meant that there was no simple solution to resolve this error. The only solution was to rewrite half of our game scripts in C#, which is supported by the plugin. After exporting the project again, I just needed to delete the useless boo.lang.dll files and the app passed WACK.

If you had to build this same app again from scratch, what would you do differently?

During the development of our game, we never considered screen size and resolution. We should have considered positioning the objects so that it would be dynamically adjustable when people play the game on different resolutions. When making the user interface in the Unity Game Engine, we developed and optimized the game in a small window instead of full screen. When playing the game in full screen, the user interface does not fill the whole screen. When using different resolutions, game objects appear in slightly different locations.

We could have put more emphasis on playing the game on a touchscreen. Our gameplay was designed for a mouse click. We thought that tapping a touchscreen and using a mouse click would be no different. We found out that when playing our game on a touchscreen, there were some minor inconvenient issues. After tapping the touchscreen, the location of the cursor would not stay at the position tapped, but instead would move back to the location of the mouse cursor before the screen was touched. This made it difficult for players to see the radius of the heartbeat cursor.

Any nice surprises?

Upon exporting the Unity project to Visual Studio, I was able to compile and run the game in Visual Studio without needing to make any modifications. I was expecting to fix compilation errors before being able to run the game in Visual Studio. The game looked the same as it did when testing it in the Unity Game engine, which was unexpected as I was prepared to make changes to the user interface to optimize it on Windows 8.

Did you leverage the mobile platform?

No. During the 48 hour Global Game Jam, we exclusively developed and tested on laptop and desktop computers. After winning the Microsoft Surface Tablet, I exported the game to ARM and installed it on the Surface tablet, which we used to demo our game at the UBC IEEE project fair.

Did you leverage touch?

We use the mouse cursor to control the zombies in our game. The game is playable by tapping the screen, although using a mouse is preferred

Did you have a favourite Windows 8 feature?

Exporting our Unity Game into a Visual Studio project and being able to publish it the Windows Store with few modifications.

What is one thing you think you did really well in this application?

In the 48 hour Global Game Jam, our group was able to develop a game. Only minor modifications were made to enhance the game after the Global Game Jam before submitting to the Windows Store. Modifications were made to make the game easier, since the feedback received during the demonstration period of the Global Game Jam was that our game is too difficult. We also decided to remove the NGUI framework due to the unsightly watermarks that it displayed on the user interface.

Are you publishing your application/game?

The game is already published on the Microsoft Store.

http://apps.microsoft.com/windows/en-US/app/day-of-the-living-dead/7d3bba33-f79c-4461-bf5e-a77fa22c3a9a

Did you fail certification? If so what caused you to fail, and how did you fix it?

The game failed the WACK tool but we made changes to ensure the WACK tool passed before submitting the app for certification in the Microsoft Store.

Where can I learn more about your app/game?

http://members.shaw.ca/blau120039/Game/GameWeb.html

Who developed this application?

Our group is composed of six 4^th year computer engineering students (Crystal Ng, Joanne Chow, Peter Yeung, Brian Lau, Timothy Tang, and Steven Chow). We are all graduating in May 2013.

Join the Developer Movement Twitter Grand Finale Party #DevMov

Susan Ibach — Mon, 06 May 2013 14:48:13 GMT

Join us for the #DevMov Twitter party – an hour of tweeting, Q&A, prize giveaways, and more.

Lots of students have already received rewards for their apps from Developer Movement. The Developer Movement program winds down at the end of June, but it’s not over yet! To celebrate the Grand Finale and the Developer Movement Final Challenge, join us for the #DevMov Twitter party – an hour of tweeting, Q&A, prize giveaways, and your opportunity to be the first to know the Final Developer Movement challenge!

WHEN: Sunday, May 12 at 8:00pm – 9:00pm Eastern (for the martimers that’s 9 – 10 PM, for Newfoundland 9:30-10:30 PM, Central time 7:00pm – 8:00pm, Mountain time 6:00pm – 7:00pm, Pacific time 5:00pm – 6:00pm )
HOST: @cdndevs
HOW TO PARTICIPATE – Follow the hashtag #DevMov and use it in your tweets
RSVP: Head over to the #DevMov Plancast page and leave your Twitter handle as a comment! That’s it!

What can I win?

	Beats Headset
	External Drives
	Games

and of course Developer Movement T-shirts!

Spread the Word

Help us spread the word to fellow developers and app builders across Canada! The more the merrier! Tweet about the #DevMov party. Here are some sample tweets you can use or, of course, you can create your own (just make sure that you include #DevMov):

Just RSVPd for #DevMov Twitter party http://aka.ms/DevMovParty 5/12 Final Challenge news, Q&A, prizes #DeveloperMovement

#DeveloperMovement's having a party http://aka.ms/DevMovParty 5/12 ... prizes, Q&A, final challenge news. Be there. #DevMov

Stay connected after the party

Since this party is all about social, this would be a great time to also invite you to:

‘LIKE’ Microsoft Canada Students on Facebook
Follow @godevmental on Twitter

Rules and Regulations

Of course, with every contest, there are rules and regulations. Check them out here.

What is Developer Movement?

Come out to the party! It’ll be a good opportunity for you to learn more about the Developer Movement.

Developer Movement is Canada’s app building rewards program. As you build Windows Store and/or Windows Phone apps, you earn points that you can use towards rewards. You can also earn additional points by participating in Developer Movement challenges. If you’re not already a member of the Developer Movement join today! (You get 1000 points just for signing up.)

ZipApp – Can a non-coder use it to create an app with great content?

Susan Ibach — Fri, 03 May 2013 07:00:00 GMT

ZipApp is a tool that claims to allow non-programmers to build Windows 8 apps quickly. Their claim seems to be accurate!

As Windows 8 matures, more tools and templates are appearing to help developers and non-developers create Windows 8 apps. Two weeks ago, I tested IdeaPress. Today, I will test ZipApp by creating an app for my sister’s running group.

The promise: “Quick, simple and faster than hell”, “You don’t need to be a programmer”

The reality: Yes, a non-programmer can build a useful app in an afternoon.

What will the app be able to do?

ZipApp supports creating apps with the following types of content

Static content (hardcoded images, formatted text, and hyperlinks)
Twitter
Facebook
YouTube
RSS

What do you need before you start?

Not much, you should have an idea for a suitable app and the content you want to include in the app.

Will I need anything else to publish the app?

When you finish creating your app, the ZipApp tool will send you a .zip file containing the code for your application. You cannot just take that code and publish it to the store. You will need Visual Studio 2012 and the Windows 8 Software Development Kit (SDK) to build the package that you submit to the store. Installing the Windows 8 SDK requires Windows 8. So all that to say, if you plan to publish the app you need

Windows 8 installed (find out how to get and install Windows 8)
Windows 8 SDK installed, this will install Visual Studio Express – find out how to install the Windows 8 SDK

Now let’s dive into the tool and see how it works!

Create an account

Visit ZipApp and create yourself an account by selecting Register

You can use a Twitter, Facebook, Microsoft, or Google account to log in, or you can just create a local account with a username and password of your choice.

Create your first application

Once you log in you are brought to your application screen. The developer of this tool must have a sense of humour, when you first log in you get a message “Yikes! You don’t have any applications…Click the ‘Create New’ link below to create one.”

As per the instructions, select Create New to create your first application

Enter Application Details

Next you are asked to enter some basic information about your app: a name and a description.

Select one of the predefined templates, they give you a snapshot so you get a sense of how the application will look with each theme.

Select a pre-defined icon. The icon you select will appear as a logo for your app on tiles, and if you have a blog feed with posts that do not have associated pictures, the icon will appear as a default image.

NOTE: I couldn’t find a way to upload my own icon, which was a little frustrating because I had a logo I wanted to use. If this really bugs you, it is possible to open up the application code after you get the package from the tool and replace the logo. Of course that means if I use the tool to update my app later I’ll have to re-do the work of replacing the icon. Maybe down the road they will add a browse to upload your own icon.

When you have entered your information select Create to continue.

NOTE: You can come back later and change any of these settings and values later if you change your mind.

Adding content to your application

Now you are back at the application dashboard and you can see your Application in the list. To add content to the application you need to create groups and articles.

Select View Groups to start adding content.

Since you have no content you see an empty list and a suggestion to create a new group.

What is a group?

There are 5 types of groups you can create

Static Content – this type of group contains hard coded content that you include. For example you could include a club charter, or a team schedule. One static content group can contain multiple articles. So you could have a Hockey drills group that contains 10 articles each describing a practice drill you can do to become a better hockey player
Twitter – Twitter groups display the twitter feed for a particular twitter handle or hashtag, you just provide the tag or handle
Facebook – Facebook groups display the content from a Facebook page. Just specify the URL of the Facebook page to start grabbing the content
YouTube – YouTube groups add a YouTube playlist. Just specify the YouTube username of the user whose playlists you want included
RSS – If you have a blog or other content from an RSS feed you want to include in the app, you can specify the RSS feed URL to display that content as a group.

NOTE: You can re-order the groups after you create them by clicking on the arrows icon

Creating a Static Content group

I want to include a calendar of different races. Sadly, there is no RSS feed for that, but I do have a list of them I can provide as static content

A Static group by itself doesn’t display any content, so now I have to define articles to display in the group. For each article I can include formatted text, images, and hyperlinks.

Select View Articles to start adding content to the group.

Now I can add my first article to the group by selecting Create New on the Articles page.

Now I can specify a name, subtitle, and description for the article. I can also specify an image to display above the article.

If you decide to upload an image. You must browse to the image you want uploaded, then select the image and choose Insert to add it to your article.

NOTE: The image is optional, if you don’t specify one, the app will display the icon you selected when you created the app as an image. Including images for each article makes for a more attractive application.

NOTE: I found uploading images a bit buggy. It always showed the spinning icon as if it was still uploading, but when I selected Cancel and came back to the image screen, the image was in fact uploaded and I was able to select it and add it to my article.

Continue adding all the articles you want in the group. When you are ready to add a new group just click on Groups in the left hand menu.

Creating a Facebook group

This is really easy, just create a new group. Select the Facebook tab and then enter the page for the Facebook page whose posts you want fed into the application.

NOTE: You don't enter the entire URL just the page name, so for example if the page is at www.facebook.com/MyGreatPage you would just specify MyGreatPage in the Page field. I made the mistake of putting the entire URL and couldn't figure out why my Facebook group wasn't appearing. I didn't get an error message, I just didn't see the Facebook group in the finished app.

Creating a Twitter Group

Creating a Twitter group is easy. Create a new group, select Twitter and specify either a twitter handle or a hashtag you want to use as search criteria for tweets to display in your app.

NOTE: Make sure you read the small print here, if you enter a hashtag AND a twitter handle, you will only see tweets from the specified user which use the specified hashtag!

Creating a YouTube Group

Creating a YouTube group is easy. Create a new group, select YouTube and specify either a Username whose YouTube Playlists you would like listed, or the RSS feed for a YouTube feed.

Creating an RSS Feed Group

Creating a RSS Feed group is easy. Create a new group, select RSS and specify the URL for the RSS feed (e.g. a blog feed) whose content you would like listed.

Generating the app

After you have defined all the groups and articles for the content you want to provide in your app, it’s time to download the app. Select Download from the top bar.

At the bottom of your screen (at least in Internet Explorer, that’s where it appears) You will see a pop-up showing a .zip app you can save to your computer.

Save the file to your computer.

Congratulations you have just built an app!

Yeah, I know, seeing a .zip file, or a list of files inside a .zip file isn’t that exciting, so let’s look at how you test and publish the app.

How do you test your app?

You will need to install Windows 8 and the Windows 8 SDK to test your application and see it running.

Once you have the Windows 8 SDK installed, launch Visual Studio 2012.

If you unzip the .zip file you downloaded, you will see the files that make up your Windows 8 app. The file with the extension .jsproj is the file you want to open from Visual Studio.

In Visual Studio on the top menu select File | Open | Project/Solution and then browse to and select the file ZipApp.jsproj

You may be prompted whether you will allow Visual Studio to open projects from untrusted sources. You cannot open the file in Visual Studio unless you select OK.

The project will now be loaded into Visual Studio. You can see the files listed in the Solution Explorer pane on the right hand side.

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 your app, 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 it!

NOTE: For some reason when I ran my app the first time I got a message telling me “my file content does not conform to specified schema” because my description attribute was invalid. When I double clicked on the error message it opened up the AppxManifest.xml file and when I scrolled over on the line that said started with <VisualElements I noticed some weird characters in the middle of my description string “#A13;D45” stuff like that. When I deleted those extra characters, the error went away.

Once your app is up and running try it out! select different groups and articles to see how it works.

NOTE: Unfortunately Search and Share do not seem to be supported. I suppose that might be difficult to do with all the different content, but it’s a shame, because Search and Share are great features to support in a Windows 8 app. As a programmer I can always add those features after the fact.

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

Now that you have seen the app in action, you may wish to go back to the ZipApp website and change the theme, the icon, add additional content, or change titles and subtitles and regenerate a new copy of the app. Do this as often as you want until you are happy with the results.

How do I publish the app?

This How to Publish an app post provides detailed step by step instructions on how to publish your app.

NOTE: If an app connects to the internet that means it gets the IP address from the user’s computer. Since it is accessing information from the user that means you have to provide a privacy policy that declares how you use that information.

The privacy policy has to go in 2 places

In the About settings of the app
When you Submit the app to the store under the Description section you have to provide your privacy policy

What’s great about ZipApp is it generates a web page with a privacy policy for you and puts it in the About settings. YOU have to get the URL for that privacy policy and put that in the privacy policy field when you submit your app to the store.

To get the URL for your app’s privacy policy:

Launch your app
Bring up charms <Windows>+<C>
Choose Settings
Choose Privacy
It will launch a browser showing the page with your privacy policy.
Copy the URL from that page and specify that as the privacy policy for your app when you submit it to the store.

In Summary

ZipApp does allow someone with no programming experience to create an nice app with good content. It does not support key Windows 8 features such as Search and Share. You do require Windows 8 and the Windows 8 SDK to publish your application. There appear to be a few minor bugs, but all in all, a very nice tool for those who want to build an app but do not have the coding experience.

OIGC Gaming Conference Student Challenge

Susan Ibach — Thu, 02 May 2013 15:12:08 GMT

The Ottawa Gaming conference has a gaming challenge for students, and you could win a Surface RT.

What happens when SteamPunk and OuterSpace meet Zombies?

That’s what we want to find out!

We’ve got three packs of game art you can use to build something fun! Why not chill out and get a little creative as you get geared up for the Ottawa International Gaming Conference.

Microsoft is sponsoring a 30 day challenge for students attending the OIGC. They have provided three packs of art assets you can download from their WootStudio site. Your challenge? Use those assets to build a Windows 8 game.

Zombie pong with the ball and paddles slowly decaying as the game progresses? Steampunk space invaders? OuterSpace tower defense with cheesy sound effects?

All the entries will be presented live at the conference. The winning entry will receive a Windows 8 Surface RT! But, anyone who builds and publishes a game has other ways to come out a winner.

You can publish their game by June 15, 2013 and submit it to Developer Movement. With Developer Movement just one published Windows 8 app can get you a Kinect!
You can use your game to enter the OIGC T+30 draw. Anyone who attends OIGC and publishes a Windows 8 app within 30 days of the conference is entered into a draw to win a Microsoft Surface PRO! Each app you publish is one entry. Details on how to enter the T+30 draw will be revealed shortly.

Entries will be judged based on the following criteria:

Criteria	Description	Max Score
Fun	Is the game exciting? Is the concept clear? Is there good player feedback? Is the game appropriately challenging? Does the player want to keep coming back for more?	40
Execution	Does it look good for its chosen art style? Are the sound effects and music well done? Does it play smoothly and reliably? Is the in-game UI clear and useful? Are there good usability features such as player help, tutorials, and game pause?	30
Innovation	Does it notably improve upon an existing genre? Does it create a new genre or deliver a unique play experience? Does it deliver innovation in storytelling, art direction, or other aesthetic areas?	20
Business Viability	Is there a clear audience for this game? Does the team clearly identify "back of the box" highlights for why someone should buy this game? What does the development and publishing roadmap look like after the competition	10

So what are you waiting for? Break into those assets and see where your brain takes you “Brains…” yup the Zombie pack and the rest of the art assets await your brains…E-mail carla@oigconf.com to be entered in the Jam!

If you aren’t sure how to get started building a Windows 8 game, here are a few resources to help you out:

Don’t forget the gaming clinic at the OIGC as well, and for those of you outside Ottawa, maybe you can catch the clinics in Edmonton or Vancouver!