• Go DevMENTAL

    Your last chance to get awesome prizes for your app!

    • 10 Comments

    There are tons of prizes to be won! $2500 grand prize.Would you like a chance to win $500? $2500? a new Nokia 820 phone? Time is running out to publish an app and get great stuff through the developer movement.

    The final challenge is underway, Publish as many qualifying Windows 8 apps as you can from May 13 until June 15th, 2013 and for each app you publish you’ll automatically be entered into a draw for a chance to win

    What could you win?

    • A grand prize of $2500
    • 1 of five $500 cash prizes
    • 1 of ten new Windows Nokia 820 phones

    That’s just the challenge! Remember everyone who submits a qualifying Windows Phone, Windows 8, or Azure app gets rewards!

    • Publish a Windows Phone or Windows 8 app get 5000 points
    • Get a 5000 point bonus for publishing your first app
    • Get 1000 points just for registering for Developer Movement

    If you are a few points short of that reward you are after, look up all the ways you can earn points

    Aside from the challenge which gives you a chance to win the prizes listed above, everyone gets to cash in their points for rewards!

    • 11,000 points gets you an Xbox 360 Kinect
    • 13,000 points gets you a Seagate hard drive

    Check out all your amazing choices of rewards

    So dust off that half finished app you started three months ago and finish it up! Or build that app that you’ve been thinking about for the last 6 months but just haven’t gotten around to sitting down and coding. Below are some resources to help you create and publish your app!

    Never published an app before?

    Never built an app before?

    Just looking for a few things to help you build an app faster?

  • Go DevMENTAL

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

    • 2 Comments

    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.

    OpenDattoronto parking screenshota 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

    Github

    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. FinderApp Solution File

    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.

    security warningDebu

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

    debug

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

    bing error

    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

    create bing map 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.

    access Bing maps account

    Now you specify the account details for your Bing Maps Account

    bing account details

    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.

    Create key

    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.

    create key

    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.

    Config.js file

    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…

    search results

    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.

    Fredericton open data

    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.

    Open Data format

    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

    parking lots main screen

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

    parking lot detail screen

    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.

    share parking lot

    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.

    About Page

    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.

    logos

    • 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.

    images 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.

    app manifest

    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

    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>

    <!-- BEGINPRIVACYFLYOUT -->

    <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.

  • Go DevMENTAL

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

    • 0 Comments

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

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

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

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

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

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

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

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

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

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

    Getting everything installed to edit the game

    Download and install Windows 8 SDK

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

    Do you already have a copy of Visual Studio 2012?

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

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

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

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

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

    File New Project

    Download and install Pong

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

    Unzip the package to a folder on your computer.

    How do I know Pong is installed correctly?

    Launch Visual Studio 2012

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

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

    file list

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

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

    clip_image005

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

    clip_image007

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

    There are two ways to test the game.

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

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

    clip_image008[4]

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

    clip_image010

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

    clip_image011

    Create the art assets for your pong game

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

    What images do you have to create?

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

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

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

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

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

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

    I would suggest downloading the free tool Paint .NET

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

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

    clip_image002

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

    clip_image003

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

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

    clip_image004

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

    clip_image005

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

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

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

    clip_image006

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

    clip_image007

    How do you make transparent backgrounds?

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

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

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

    clip_image008

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

    clip_image009

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

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

    clip_image011

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

    clip_image013

    clip_image015

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

    clip_image017

    clip_image019

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

    Replace the default Pong images with your own images

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

    Change the Asset images

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

    clip_image002[4]

    This is the folder where the images are location

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

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

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

    Replace the existing files with your image files.

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

    Is your background getting cropped?

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

    To adjust the scale:

    1. Go to Solution Explorer

    2. Expand the js folder

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

    clip_image004

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

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

    clip_image005[4]

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

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

    clip_image006[4]

    Change the tiles and icons for your game

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

    Go to Solution Explorer and expand the images folder.

    clip_image007[4]

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

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

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

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

    Replace the existing files with your image files.

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

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

    Changing the background color of your splash screen or tile

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

    1. Go to Solution Explorer

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

    clip_image009

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

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

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

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

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

    1. Open your splash screen logo in Paint .Net

    2. Select the color picker from the Tools Window

    clip_image011[4]

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

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

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

    clip_image012

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

    clip_image013

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

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

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

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

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

    Populate the Description with text that describes your game.

    clip_image015[4]

    Now go to the Packaging tab

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

    clip_image016

    Save your changes by selecting Save All from the toolbar.

    clip_image017

    Create a production version of your app for the store.

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

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

    clip_image018

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

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

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

    clip_image019

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

    Take your game to the next level

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

    Less than 10 lines of code

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

    10-100 lines of code

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

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

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

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

  • Go DevMENTAL

    OIGC Gaming Conference Student Challenge

    • 0 Comments

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

    clip_image001What 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!

  • Go DevMENTAL

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

    • 0 Comments

    ZipappZipApp 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

    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

    clip_image001

    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

    Create 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.

    Application Details

    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.

    Create Group

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

    Create Group

    What is a group?

    There are 5 types of groups you can create

    Group types

    • 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

    Re-order Groups

     

    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

    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.

    View Articles

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

    Create Article

    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.

    Add image

    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.

    Facebook group

    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.

    Twitter Group

    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.

    Youtube group

    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.

    RSS Feed

    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.

    Download Source Code

    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.

    Download file

    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.File list

    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.

    Untrusted Source

    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.

    Solution Explorer

    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.

    Debug Application

    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.

    Error message

    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.

    Stop Debugging

    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:

    1. Launch your app
    2. Bring up charms <Windows>+<C>
    3. Choose Settings
    4. Choose Privacy
    5. It will launch a browser showing the page with your privacy policy.
    6. 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.

Page 1 of 3 (11 items) 123