Tips and Tricks from students: Windows Phone Game “Tile Tank”



    3 students from Carleton share what they learned building their first Windows Phone Game

    Check out more tips from fellow students here

    TileTank-TeamPhoto-CroppedCould you briefly describe your application/game?
    Tile Tank is a puzzle game, and it’s all about finding a viable path across a variety of obstacle courses. Your job is to drive around the maze collecting all the gears, then make your way to the goal flag. The mechanics are simple but it’s the puzzles themselves that will amuse, challenge, and maybe even stump you.
    Plus, when you’re done with the campaign, you can create your own levels and share them, or download levels that other players have shared! 

    Did you use XNA, Silverlight or both?
    When we heard about the way we could use both, we knew it suited our needs. The game is entirely displayed on Silverlight pages, including the menus, the game view, and the GUI. The 3D graphics in the game view are drawn by XNA. Silverlight was great for putting together 2D interfaces with buttons and forms, while XNA covered our needs for a 3D world.
    It was interesting to learn how both these modes are run within the same kind of XNA application page. It seems like a really flexible way of going about it and we’ll probably do it again in future projects.

    What was your banging your head against a wall moment?
    Because it was a learning project, we had a few minor technical issues. One of them was an issue where our Silverlight buttons would turn to a white rectangle (no image) for a moment when touched. We didn’t know how to mask this for a while.

    Did you ever solve that issue?
    Yep, we found a solution/workaround using custom styles for Silverlight. Just took a bit of digging. And we’re still not sure if you can get a button “down” state - though not many other apps use this anyway.

    If you had to build this same app again from scratch, what would you do differently?
    This was our first real endeavor in XNA so it was mostly about all the little learning experiences, so it’s tough to pick something that stands out to be corrected. If we did start over I think we’d go in with a better feel for how to manage ourselves and our project files. By the end, the build was pretty cluttered.

    Any nice suprises?
    Something that was very welcome was how easy it was to get started with development. Getting the SDK and the environment set up was no real hassle, and there are basically no major hurdles before you can start building and testing. Then, after looking at a few beginner examples, we had the building blocks of a good portion of our app. The included emulator for Windows Phone makes testing very convenient.

    Did you leverage the mobile platform?
    We knew from the start that mobile was where we wanted to be, and we tailored our concept and design to that the whole time. We made sure to look at a lot of existing apps to see what we liked and didn’t like about how they do things. Available screen size and the kind of interactions a phone user expects has to be constantly on your mind when thinking about layout and the level of attention to detail throughout your app.
    We think Tile Tank definitely plays best on the phone because the control is simple and it’s something you can tinker with easily for a couple minutes at a time while you’re on the go.

    Did you leverage the touch screen?
    Most of our touch controls could be translated to mouse but it’s definitely most intuitive and the most fun with the basic touch gestures of tap, swipe and pinch. The way that touch gestures are processed by the app also made it pretty simple to get the controls to be smooth.

    Did you have a favourite feature?
    It’s a subtle feature, but we leverage the ability to make HTTP requests directly from the app. Combined with some PHP, this gives us the ability to look at a database to upload and download levels. Also, your progress is actually tracked and scored while you play, and you can show up on a scoreboard on the game’s website. In play tests we’ve already had some players get pretty determined to make it to the top of the board. As a developer, that kind of enthusiasm is extremely rewarding, even in small tests.

    What is one thing you think you did really well in this application?
    At the outset, we put a lot of thought into the scope and feature set of this game, and we gave everything a priority value. We did drop a couple of things, but because we planned in this way, they were pretty non-essential and we did get all the important features we wanted. We were really pleased about that in the end, especially considering the uncertainty of factoring in research and learning time.

    Are you publishing your application/game?
    Yes, Tile Tank is available right here on on the Windows Phone Marketplace. It is free!

    Where can I learn more about your app/game?  
    tiletank.com and our Facebook page “Tile Tank” are the places to watch for videos, high scores and other new stuff.

    Who developed this application?
    Our team is Kevin Paquette, Chris Atallah and Chris Burt. We’re classmates at Carleton University’s School of Information Technology, studying Interactive Multimedia and Design. It’s a mouthful, but it boils down to getting a working understanding of a ton of different technologies and design methods. Tile Tank was among our latest efforts in course work for game development, as well as project management.

    Making the game definitely brought us together and gave us inspiration to really look at where our skills could take us in indie marketplaces like Windows Phone. It was a school project, but it never really felt like it, although we certainly appreciate the support and enthusiasm of our professors. Everything we did for this game was mainly to accomplish something for ourselves and we learned a lot about something we really wanted to know more about.

  • Go DevMENTAL

    Visual Studio Tips: Using TFS for requirements


    VisualStudioLogoVisual Studio with TFS is more than just for coding, you can use it for the whole lifecycle of a project. In this post we’ll explore how you add requirements.

    If you haven’t got TFS yet, you’ll want to check out this post on getting started with TFS so you can set up your project, then you can start adding requirements

    Regardless of whether you are doing Agile or Waterfall methodologies for your application development, you need to capture the requirements for the app you will be building. Let’s take a look at how to add requirements in TFS. Those requirements become tasks we assign to the programmers on our team.

    In this blog we will see

    • A little background on Requirements and User Stories
    • How do I add a User Story to TFS


    A little background on Requirements and User stories

    If you are already comfortable with this topic scroll down to ‘How do I add a User Story in TFS’

    In Agile methodologies we capture requirements with User Stories. A User story basically describes something a user wants to do. For example:

    Customers can check in for a flight

    Customers can book a flight

    Customers can select seats for a flight

    Now remember in the real world, these user stories come from the stakeholders/users/customers not the developers! When you are doing a class project you might act as the stakeholders, but in the real world or maybe even in some class projects you might have someone such as a business analyst interviewing users and collecting the user stories.

    Please, please remember, the number one rule of gathering requirements

    User stories capture WHAT the system can do. User stories DO NOT capture HOW the system will do it!

    As developers we have a bad habit of jumping straight to the how and thinking of a requirement as ‘there will be a web service used to allow seat reservations’ THAT IS NOT A REQUIREMENT! Did I say that loud enough, should I increase the font size? I used to teach requirements courses and this concept however simple is something that many developers struggle with. A user story simply states what the users will be able to do when they use the completed system. There is nothing in a user story about using SQL Server, or clicking on a menu item, those all describe ‘HOW’ something will be done. User stories are all about what can a user do. The idea is that the users tell you what they need the system to do by providing you with these user stories. Nobody knows what they need the system to do better than the users who do the work every day. After you have collected the use stories, that’s when you, the programmer, figure out the best way to do it (the how).You have the technical knowledge to figure out the best way to implement their requirements (web services, classes, databases, etc…)

    Chances are your user stories will evolve as you get further into the project. One user story might get broken down into multiple smaller or more specific user stories, priorities for different user stories change, and new user stories are identified. I can pretty much guarantee your first list of user stories is wrong. That’s not because you didn’t do a good job collecting them, it’s just the nature of colleting requirements. I have NEVER been on a project where the requirements did not change. So don’t expect to get all the user stories exactly right on your first attempt, it can’t be done! Someone will neglect to mention something, or there will be a user you didn’t talk to who knows about some weird requirement no-one else deals with, or a brand new requirement will come up part-way through the project. Your goal is to get the requirements good enough to get started and to make sure your project is agile enough to handle the new requirements and changes when they happen.

    How do I add a User Story to TFS

    Okay so you have your user stories, either from meetings with your users, or if you are doing a class project, maybe you got the user stories from a little brainstorming with your classmates. Now it’s time to enter the stories in TFS.

    You can enter the requirements using the browser, that’s important because remember in the real world, you often have business analysts collecting the user stories. A Business analyst probably doesn’t know anything about Visual Studio. This way, anyone with a browser who is added to your TFS project can add new user stories, Visual Studio is not required to add a User Story.

    Go to your project page in the browser and select Add a User Story. For more information on TFS and User Stories read up on MSDN

    Add user Story


    On the User Story Details page fill out the fields. The most important fields to fill out are title, priority/rank and Story Points.

    Title – is the short description of the User Story

    Description and History can be used to provide more details about the user story

    Assigned To – is the name of the person assigned to own the user story (that doesn’t necessarily mean the person who will code it, it means the person who best understands and can answer questions about that user story, or who can talk to the user about that user story)

    Rank – is just a number you assign could be 1-10, 1-5 that gives it a rank vs other user stories

    Story Points – is a number you assign, could be 1-100, could be 100-1000, that gives an indication of how much work you think it will be. This is relative to other user stories. So it doesn’t matter if you assign 20 points or 50 points to the first user story. What matters is if you have another story that is twice as difficult you assign it double the points. If you have a much easier user story the story points should be proportionally lower.

    Priority – should indicate level of importance to the user from 1 –4 (1 is the highest priority)

    Area and Iteration – leave at their default values for now, when you are ready to plan what will be built when, that’s when you will assign values to these fields

    User Story Details


    After you add the User stories, they will appear to the assigned user in Visual Studio in the Team Explorer window, if they expand “My Work”

    My Work in Team Explorer

    These user stories are also added to your project backlog, which you can view on your TFS project page by select “View Backlog” from the Activities menu.

    View BacklogThe backlog allows you to see all the work that is waiting to be completde on your project. There are different ways to view your backlog on this page. For example, you can see the backlog per iteration or per assigned user.

    Product Backlog TFS

    So I can now enter all my user stories in TFS. Next up we’ll look at how you create tasks for the user stories so you can assign the actual work associated with coding a user story to members of your programming team.

    Don’t forget students can get Visual Studio Professional for free at DreamSpark and anyone can get Team Foundation Service for up to 5 users for free. Professional tools at no charge? What are you waiting for?

  • Go DevMENTAL

    Building a great Windows 8 app Step 3: Installing the SDK & Tools


    VisualStudio How do you get the Windows 8 SDK and Visual Studio? What if you have Visual Studio already?

    This blog is part of a series, you can find the entire series here.

    In Step 2 we learned where to find and different options for installing Windows 8 which is required before you download and install the SDK. Now you need the Windows 8 SDK and a version of Visual Studio 2012. In this blog we’ll look at what you need to install so you can start building a Windows 8 app. This blog post covers the following:

    • Getting a copy of Visual Studio
    • Downloading and installing the SDK
    • How do I know it installed correctly and I can start coding?

    Getting a copy of Visual Studio and Expression Blend

    • Visual Studio is the development environment used to build Windows 8 apps, so you will need to install it before you can start building your app.
    • Expression Blend is a component of Microsoft Expression Studio that allows you to design the look and feel of your application. It is not required to build a Windows 8 app, but you will probably prefer it to Visual Studio when you edit the look and feel of your app.

    Are you a student in a technical program?

    If you are in a technical program like Computer Science you may have access to DreamSpark Premium which is usually accessed through your school IT department or through a special portal maintained by your school like this one from Carleton where you can download Visual Studio and Expression Studio.

    Are you a high school, college or university student?

    If you are a student in a non technical program such as business administration or you are in a technical program that does not have a DreamSpark Premium subscription, you can still get a copy of Visual Studio through DreamSpark Standard. DreamSpark Standard subscriptions are given to universities, colleges, and even school boards so that high school students can access Microsoft developer software. They are usually tied to a school email address. For example a student with an email address that ends in @Ryerson.ca is recognized as a student from Ryerson who can access the Ryerson University subscription. If your school does not have a subscription, you can request a verification code by contacting your local Microsoft representative. (In Canada that’s us!). Now you can

    Note: when you download Visual Studio and Expression Studio, you will get an .iso file. You will need to either burn a copy of the .iso onto a DVD or use a tool such as Virtual Clone Drive to read the .iso and allow you to install it.

    Do you have MSDN?

    If you are a Microsoft Student Partner, or work at a company with an MSDN subscription you can download a copy of Visual Studio from the Microsoft Download Center.

    What if I am not a student and I don’t have MSDN!

    That’s okay you don’t need a full version of Visual Studio to develop an app, when you install the Windows 8 SDK it will install a copy of Visual Studio 2012 Express with Blend you can use to develop your app.

    Downloading and Installing the 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 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 it worked 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! If you are a Canadian don’t forget to register for Developer Movement to make sure you get rewards for your app

    Visual Studio new Windows 8 project

  • Go DevMENTAL

    How does a Flash developer get going with HTML5?


    EaselJS spritesheetEaselJS is a JavaScript library that provides an API that will be familiar to Flash developers to make it easier to work with canvas.

    HTML5 is supported in Internet Explorer 9 and higher, and other modern web browsers. You can build native apps for Windows 8 with HTML5. The great thing about this broad uptake of HTML5 is more and more resources to help game developers make the move to HTML5 and JavaScript.

    EaselJS is a JavaScript library that contains a number of classes for working with Canvas. These APIs will be familiar to Flash developers.

    Best of all you can download it, find documentation, and examples all right here

    Other developers are already exploring EaselJS and have created posts and videos to help you get started.

    The resources are there and waiting! Check it out! Then build a game, find out how to publish your game to Windows 8 and tell me when you do so I can try it out! You might even want to enter your game in Imagine Cup.

    Here are a few examples you can explore to see what the APIs will do for you so you can start drooling, I mean coding!

  • Go DevMENTAL

    Taking your HTML controls into Windows 8 Metro


    Windows 8 Start ScreenHow do you take the HTML you know and love and give it a Metro look and feel for Windows 8 apps?

    The Windows 8 team put up an interesting blog post this week about how you take existing HTML controls and style them to look metro. You can read the full blog post here, but I’ll highlight a few of the key points to get you started.

    Don’t forget if you are working on an app, or thinking of starting an app we have hackathons across Canada in August:

    • Vancouver | Friday August 3rd, 2012 | 8:30 AM – 5:00 PM | Simon Fraser University, Segal Graduate Building
    • Ottawa | Friday August 10th, 2012 | 8:30 AM – 5:00 PM | Algonquin College
    • Toronto | Friday August 10th, 2012 | 8:30 AM – 5:00 PM | Ryerson University, Ted Rogers School of Management
    • Montreal | Friday August 17, 2012 | 8:30 AM – 5:00 PM | Concordia University


    HTML in Windows 8

    Now let’s look at some HTML! Let’s take a look at the perennial favourite HTML control: <button>

    a simple button control will actually look different in a Windows 8 native app than it will in a browser like IE10.

    Let’s say you define a button control using HTML and render that same code in IE10 and Windows 8

    <button>Windows 8 Rocks!</button>

    Button by default in Internet Explorer 10
    Button in IE10

    Button in Windows 8 Metro style apps
    Button in Windows 8 Metro app

    Why is it different? Windows 8 has default metro style visuals for all the HTML controls via two out of the box default style sheets that are part of the Windows Library for JavaScript (WinJS) and are included in the Visual Studio templates.

    New HTML Control infrastructure

    There’s more to it than just a default CSS file.

    They’ve reworked the ways controls are built so you have more flexibility when styling the controls. Most browsers render controls using previously generated images and when you apply a style to the control, the browser discards the hardcoded image, re-renders the control in a baseline look and then applies the style you requested on top of that baseline. You can’t style directly onto new styles.

    Windows 8 does not provide the original look of HTML controls using a hardcoded image, instead the HTML controls are rendered using vector based primitives, CSS, so you can directly style on top of the control. You can learn more about styling your controls in this Quickstart: styling controls (Metro style apps using JavaScript and HTML) 

    It’s pretty cool what you can do! Here’s a couple of examples of styling a checkbox control.



    The Windows 8 team blog post goes into a lot more detail, explaining best practices for making sure your buttons scale well across different screen sizes, handling touch, accessibility features, and more! Could that last website you built work as a Windows 8 app?

    Imagine It! Build It! Live it!

Page 5 of 80 (400 items) «34567»