So you know ASP.NET like the back of your hand, or so you think, until you hear grunt this, and bower that, and you realize that nothing has changed but EVERYTHING, and all you can do is just sit there and nod like Joey in friends.

If you don’t have time to grow a beard, or go through the Intro to ASP.NET 5 course, but still want to hang out with the cool guys, here is the cliff notes version. Just enough to be conversational.

5 quick facts about ASP.NET 5

In short, what has happened with ASP.NET 5 is that it is a new incarnation of ASP.NET based on a couple of big things that have happened with the web lately. ASP.NET 4.5 still lives on side-by-side with 5.

1. It is open source – You can read, branch and contribute to both asp.net and the underlying framework DNX Core, along with a lot of other parts of .net like the ROSLYN compiler. You can also contribute to the docs, and/or participate in the bi-weekly community standup.

2. It is cross platform – earlier ASP.NET was tightly coupled with IIS, but now all you need is a web server that implementsOWIN like the cross-platform development webserver Kestrel, or you can self-host with WebListener. DNX Core is the cross platform .net runtime that lets you run .net apps on Linux or Mac, in the cloud or on prem and you can write the app with your choice of editor/IDE whether it is Visual Studio, Visual Studio Code, Notepad, Sublime or something else.

3. It is modular – when you create an asp.net web forms app or ASP.NET MVC app you no longer have to include all of ASP.NET, you just pick and choose the parts you like. If you don’t need authentication, then don’t include it. The modularity means that the footprint is smaller and with less things in the pipeline everything is faster.

4. It’s fast – The ASP.NET team takes the performance thing very seriously, benchmarking this and that. But it is not only fast performance wise, the dev cycle is also faster. It has now been shortened from save-build-browse to save-browse, huge improvement YAY!

5. It is built for the cloud – with features like environment based configuration, and hiding client secrets so they don’t accidentally end up on GitHub. Because it is modular you can also do things like replace the normal asp.net cache with Redis.

But there is another big thing that has happened to the web, and that is the move from the server to the client. In the last 15 years we have gone from ASP spitting out HTML to SPA Applications with full MVVM JavaScript frameworks like AngularJS that do everything on the client, and just use the server to fetch data. We have nice skinnable css/js component libraries like Bootstrap. And even ways to write easier to read JavaScript with TypeScript or CoffeeScript and CSS with less or sass.

PRO TIP:  You can pick up a lot of one-liners from Scott Hanselman’s hilarious JavaScript and the Rise of the new Virtual Machine. Or just watch it to get entertained and marvel at how far JavaScript has come.  The talk starts 8:20 min in, straight after the fabulous introduction, “This is Scott Hanselman, he is a very famous guy on the internet”

Now you could either use something like AngularJS to write the whole application and just use ASP.NET Web API to fetch the data. Or you can mix and match ASP.NET MVC and Angular, where ASP.NET MVC could be used to route between multiple smaller SPAs and then you could use Angular routing inside the individual SPAs.

To make all this jive together we need to use a few tools:

As .net developers we are used to use NuGet to download .NET modules to use in our apps. There are similar package managers that you can use to download JavaScript frameworks, or Bootstrap or other client side packages. The most common ones are NPM (Node Package Manager) and Bower.

Once you have written all your JavaScript code you may want to minify it or uglify it or do other client side tasks like converting CoffeeScript to JavaScript and this is done with a task runners like Grunt or Gulp.

To get started, you can actually create your ASP.NET 5 project by hand. The only thing that is really needed for a DNX core project is a project.json file and a startup.cs.

The project.json file is where you define your project and add in all your dependencies (watch the magic in the references section when you add a dependency and save). The startup.cs file has two important methods, ConfigureServices where you add in the services you are going to use (like MVC), and Configure, where you add them to the pipeline by calling the Use method.

project.json

{
  "webroot": "wwwroot",
  "version": "1.0.0-*",

  "dependencies": {
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta5",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta5",
    "Microsoft.AspNet.Mvc": "6.0.0-beta5"
  },

  "commands": {
    "web": "Microsoft.AspNet.Hosting --config hosting.ini"
  },

  "frameworks": {
    "dnx451": { },
    "dnxcore50": { }
  },
}

startup.cs

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            app.UseMvc();
        }
    }

Now, if you don’t want to do everything by hand, you can create an ASP.NET 5 project in Visual Studio, or you can scaffold one out with the Yeoman tool (yo) on Mac for example.

That is basically the gist of it, but phew… that was a slew of words and tools and technologies that until recently used to be gibberish to me. A lot of them have been known for a long time by people that develop for the mean stack (MongoDB, Express, Angular, Node.JS) but it is not until now that they have been properly married with ASP.NET and the MS stack.

Oh, so many new words, my brain is exploding…

DNX – DNX is short for .NET execution engine. There are two main flavors, DNX 4.5.X (the full framework) and DNX Core 5.0 (the light-weight open source .NET version that also runs on Linux and Mac). DNX Core contains almost everything but is missing a few Windows namespaces like System.Drawing for example.

ROSLYN – Roslyn is the new .NET compiler and it gives you some pretty neat features like real-time code analysis in Visual Studio (you know the light bulbs with quick hints and tips).

OWIN – Open Web Interface for .NET - a standard interface between .net web servers and web applications.  Earlier, ASP.NET was tightly coupled with IIS. The purpose of OWIN is to break this relationship so that if you have a web server that implements OWIN correctly you can run ASP.NET on that web server. It also allows for more modularization so that you can plug and play things like MVC or authentication.

Katana - A set of OWIN components built and released by Microsoft (open source), with both hosts, servers and functional components like bindings to frameworks like SignalR and ASP.NET Web API.

Self-hosting - If you want to avoid the overhead of hosting a Web API in IIS and want something more lightweight, you can host it in your own process, i.e. self-hosting.  Self-hosting can also refer to a compiler that is written in the language it compiles, like the Roslyn C# compiler.

WebListener – a self-host ASP.NET 5 web server available on NuGet

Kestrel – a cross platform ASP.NET 5 development web server available on NuGet

SPA – Single Page Application. A web app that fits into a single web page (i.e. one get from the server), and where all the HTML, JavaScript and CSS is either gathered in one go, or loaded dynamically. Normally this is used in conjunction with JavaScript MVVM or MVC frameworks like AngularJS, Ember.js or React.

MVVM – Model View ViewModel – a common pattern for apps where you separate the code for a page into 3 separate layers. View is the UI for the page, Model is the data, and ViewModel is an interface between the View and the Data with logic that massages the data so that it fits the view.

MVC – Model View Controller – Very similar to MVVM and also the pattern that MVVM stems from. Instead of using a ViewModel it uses a Controller to communicate between the model and the view.

AngularJS – Angular is a client-side MVVM JavaScript framework from Google that does everything from data binding and templating to client-side routing and more. Some claim it is getting to big and monolithic, and lucky for them there is a gazillion other JavaScript frameworks to choose from like Ember.js, Backbone.js, Knockout.js, React etc. etc. etc. For a nice walkthrough, read Stephen Walther’s ASP.NET 5 and AngularJS tutorial

Bootstrap – Bootstrap is a sweet framework with components for responsive web apps written in HTML, CSS and JavaScript. Navigation elements, Jumbotrons, Special buttons, layout sections etc. with a large community of people doing skins/themes like the ones on http://bootswatch.com/ or http://www.bootstrapzero.com/.

TypeScript – TypeScript is kinda like JavaScript for c# developers. You can use classes and modules and interfaces, and then it compiles down to vanilla JavaScript. In Visual Studio, the conversion to JavaScript happens when you save, and you get full intellisense, Roslyn light bulbs and proper code analysis with error lists etc.

Sample TypeScript

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

Corresponding JavaScript

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

CoffeeScript – Similar to TypeScript, CoffeeScript is also a language that compiles down to JavaScript. Its purpose is to simplify JavaScript. If you want to use CoffeeScript in Visual Studio, you can either use a Grunt or Gulp task to compile it to JavaScript on save or you can install the Visual Studio WebCompiler extension that will do it for you.

Sample CoffeeScript

alert "I knew it!" if elvis?

Corresponding JavaScript

(function() {
  if (typeof elvis !== "undefined" && elvis !== null) {
    alert("I knew it!");
  }

}).call(this);

ECMAScript – ECMAScript is a scripting language specification. The more common implementations are JavaScript and JScript.

Less and Sass – Less and Sass are to CSS what TypeScript and CoffeeScript are to JavaScript. They both aim to make it simpler to write CSS, and you can use Grunt or Gulp or WebCompiler to convert the less or sass files to CSS and/or minified CSS files on save.  Among other things, you can use them to define re-usable CSS content like red and .bordered below, and also nest css nicely.

Sample Less file

@red: #FF0000;

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu {
    .bordered;
    a { color: @red; }
    a:visited { color: desaturate(@red, 10%); }
}

 Sample Sass file

$red: #FF0000;

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu {
    @extend .bordered;
    a{color: $red; }
    a:visited { color: desaturate($red, 10%); }
}

 Resulting CSS

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #FF0000;
}
#menu a:visited {
  color: #f20d0d;
}

NPM – NPM (Node Package Manager) is like NuGet for client-side stuff. Add an NPM configuration file (package.json) to your ASP.NET 5 app and load in the proper references by adding them to the devDependencies section. When you save the file you’ll see them show up under References/NPM. Typical things you would download with NPM are Grunt or Gulp or Bower.

Sample package.json file

{
  "version": "1.0.0",
  "name": "MyASPNETApp",
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-contrib-uglify": "0.10.0",
    "grunt-contrib-watch": "0.6.1",
    "gulp": "3.9.0",
    "gulp-uglify": "1.4.2",
    "gulp-concat": "2.6.0"
  }
}

Bower – Bower is also like NuGet for web stuff. Similar to NPM you add a bower configuration file (bower.json) to your app. The libraries will be downloaded to the wwwroot/lib folder by default. The * here means we will download the latest version of angular.

Sample bower.json file

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "3.0.0",
    "bootstrap-touch-carousel": "0.8.0",
    "angular": "*",
    "angular-route": "*",
    "angular-resource": "*"
  }
}

Minify – To avoid sending too much over the wire you can minify CSS and JavaScript. Minification means that you remove any characters that are non-essential, like white-space, new-lines and comments.

Uglify – Uglifying is a little bit like minifying, but usually you also concatenate a number of JavaScript or CSS files into one, and then Minify it. This is a typical task for Grunt or Gulp. 

Grunt and Gulp – Grunt and Gulp are both task runners that you use to perform tasks like minifying or uglifying css and javascript, or compiling less and sass into css, or TypeScript and CoffeeScript into JavaScript. In Visual Studio you can open the Task Runner window to run the tasks manually. The following sample shows how you can watch for changes in JavaScript files and whenever something changes, concatenate/uglify them into a single app.js file that you place in the wwwroot folder.

The Grunt way:

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.initConfig({
        uglify: {
            my_target: {
                files: {
                    'wwwroot/app.js': ['Scripts/app.js', 'Scripts/**/*.js']
                }
            }
        },
        watch: {
            scripts: {
                files: ['Scripts/**/*.js'],
                tasks: ['uglify']
            }
        }
    });

    //define tasks
    grunt.registerTask('default', ['uglify', 'watch']);
};

The Gulp way:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('scripts', function () {
    gulp.src(['Scripts/app.js', 'Scripts/**/*.js'])
        .pipe(concat('app.js'))
        .pipe(uglify())
        .pipe(gulp.dest('wwwroot'));
});

gulp.task('default', ['scripts'], function () {
    gulp.watch('Scripts/**/*.js', ['scripts']);
});

Yeoman/Yo – Yo is a scaffolding tool, together with the OmniSharp ASP.NET generator (generator-aspnet) that you can download with npm, it lets you quickly create a new empty asp.net 5 app where you don’t have Visual Studio (like on Mac or Linux).

Hopefully that should be enough to make you a little bit more comfortable with the hipster crowd, but if all else fails, just start mumbling about some obscure Powershell cmdlet and they will all dissapear.

Debugging multi-statement lines with the autos window

We have probably all debugged code like this, wanted to know what Helpers.DegreesToDirection returned and ended up re-writing the code temporarily to var dir = Helpers.DegreesToDirection…

As it turns out, this is completely unnecessary thanks to a feature that was introduced in Visual Studio 2013 but that few people know about. 

If you step over the line with F10, and open the autos window, you will find that VS has already done the return split for you.  Neat right?

Live Visual Tree – or F12 tools for XAML

Working with XAML for the past 3 years, I have been extremely jealous of the F12 tools for the web where one could simply press F12 in the browser and test and change styles and see the results live. And of course find out why an element rendered like it did.

Those tools have now arrived for XAML, in the form of

1. A Live Visual Tree that shows you all the XAML objects in the current visual tree, and lets you pick a XAML object from the tree, or pick a XAML object by selecting it in the app.

2. A Live Property Explorer that lets you change the properties and styles of the XAML elements while the app is running.

Read more about it on the Visual Studio blog

PerfTips

PerfTips is one of those, why didn’t anyone think of this before???

When you break, while debugging, you will see the perftip at the end of the line you stopped at.  The perftip tells you how long time how much time elapsed since you were last stopped. In this case it took around 3 seconds (give or take some overhead time for debugging) to execute the lines since the last breakpoint.

This is an excellent way to find slow sections of your code without having to add your own stop watches and debug code.

Clicking on the perftip will show the diagnostic tools and filter by the last 3 seconds in this case, so I can narrow down the issue further.

For more information and a debugging scenario for perftips check out the VS Blog

Diagnostic Tools

The Diagnostic Tools is a set of tools that allow you to see historical data rather than just data from a single moment in time like typical application debugging.  Most of this already existed in Visual Studio 2013 as separate entities (Intellitrace, events in the output window, performance and diagnostics hub with CPU and Memory usage tools and profiling). 

In Visual Studio 2015 this is brought together in a fantastic Diagnostic Tools Window, it’s a little bit like WindDbg light but with a UI

You can read a longer walkthrough of all the tools here.  I am just going to pick out 2 of them real quick

Intellitrace or Historical debugging (only in the Enterprise version)

In this example you can see that a number of NullReferenceExceptions were thrown and caught.  You can see this both in the debugger and represented as red and gray diamonds in the event section up top.

The debugger didn’t stop since they were handled and the process continued normally since they were caught, but they could still be causing havoc with perf, or something else so it is still interesting to find out what happened.

If you click on one of the exceptions, it will take you to the location and time where the exception happened. There is a reason this used to be called time travel debugging…

Depending on how much data you allow the debugger to save (which of course affects perf.) it could also have the locals stored.

So now we know why this happened and since it happens so often it might warrant a re-write where we check for null instead of try/catch

Memory usage

The Memory usage tab has a pretty neat feature that allows you find the root cause of a memory issue by taking snapshots of the process and comparing them. 

Here, I have taken two snapshots (2nd one is taken after clicking a refresh button in my app 4 times).

I can see without even looking at the snapshots that memory has increased by 49kb (not a lot but still), and the number of objects has increased by 789.

I then click on the +789 to get a list of all the objects on the heap, sorted by increase in instance count.

Now I look for something I recognize and find that the number of ForecastItems has grown by 28, so 7 per refresh button click…

and selecting the ForecastItems I get a root path at the bottom of the screen showing me that the reason these stick around is because they are part of ForecastViewModel which in turn is part of an observable collection of IForecastViewModels in MainViewModel

Armed with that it was pretty easy to go back to the code and track down why we accumulated ForecastViewModels, and the reason was because I forgot to Clear the Forecasts collection when I loaded new forecasts.

Lambdas in immediate and watch windows

Digging through all the items in a collection (like the forecastResults) just to look at the value of Temp can be a real time-waster. So my last productivity tip in Visual Studio 2015 is use lambdas in the watch or the immediate window to grab just the bits you are interested in.

Note: since this is code that needs to run in the context of your method, you need to make sure that you have a using statement for Linq in your cs file to use this.

Bonus: New Breakpoint IDE

I think the new breakpoint IDE also deserves a mention even though I already picked my 15 fave features.

The new breakpoint window also uses the peek functionality so the breakpoint settings are made while you are still looking at the code rather than opening up another window. 

The functionality you have here with setting conditional breakpoints and logging data to the output window is nothing new. It has been there for ages but it is now much more accessible and easy to use which makes me very happy both as an avid debugger, and as a UX aficionado.

With that said, it is time for me to go back to my coffee, and vacation dreams. 

Tess

Saving and roaming the Window layouts I use the most

I do almost all my development on a surface hooked up to an external monitor at work. Sometimes though I’ll code in front of the TV or in a coffee shop if I have a meeting down town and then the screen real estate is so precious you would think the screen was located in TriBeCa. 

This is my normal VS layout with all the essential panes pinned.  I call this the “Big Screen” layout

And this is my coffee shop “Just the codez!!!” layout with only the code editor window open.

Rather than having to pin and un-pin all the windows every time I want to change layouts, Visual Studio now allows me to save my layout choices and apply them as I want.

Not only that, the layout also roams with my profile, the one I log into Visual Studio with, so I can use the same profile on other machines too.  Awesome!

Touch Support

I use touch a lot, for scrolling, zooming, you name it.  In VS 2013 it could get pretty annoying trying to scroll a large piece of code with your fingers, but in VS 2015 you can now use the normal touch gestures to zoom, scroll, bring up context menus, select etc. It’s one of those things, when you have it you don’t notice it, when you don’t it bothers you.

Device Design Previews

Universal Windows Apps (UWP) can run on any device that Windows 10 runs on which means that they can be running on anything from a small phone to a huge surface hub.  The normal work flow would be to create a responsive design and then run it in a simulator or emulator, or maybe stretch and un-stretch the windows to see how it looks on different size hardware. 

Device Design Previews lets you change the target size directly in the design window so you can test out the design without even running the app.  Such a time saver.

Error list filtering

When you are in the middle of open heart surgery (you know when you’ve started refactoring and it’ll be a year and a half before you can compile again), then error list filtering is your friend.

With error list filtering you can filter errors by project, file, or even by error type so you can handle one group of errors at a time.

Microsoft Blend for Visual Studio 2015

In the past, I would use Blend very occasionally, when I needed to create an animation. Then I would switch back to Visual Studio immediately, while still holding my breath, because Blend was frankly not a very nice environment to write code in. It had no intellisense, no source control, just not a safe environment for a developer. 

But things have changed my friends.  Blend now uses the VS IDE, which means it has intellisense, great solution handling, debugging, source control etc. etc.

Fine, so it’s almost like VS, but I already have Visual Studio.  True, you can pretty much do everything in VS.  What I use Blend for is; animations, state management (adaptive states for UWP apps) and Sample Data (it has an amazing sample data generator if you want to work on the design before you have the actual data).  Blend makes it easier to do all these things through the IDE without having to remember how to write the code for it, and now I don’t have to switch back and forth, which makes me more productive.

In the next and final post on the topic I’ll list my favorite debugging features,

until then,

Tess 

Caveat: some of these are hidden gems from 2013

In this article (part 1) I will list my top 5 new editor features (in no particular order), and in the following ones I’ll list my favorite IDE features and debugging features in VS 2015.

Improved Code Lenses

I love code lenses almost as much as I love intellisense.  If you’ve never heard of it before, I am talking about the line that appears above your code telling you things like; who is referencing this piece of code, do my tests for this method fail or pass, who changed this code, what work items did they check in against etc. etc.  Basically anything and everything you want to know about your code, right there in the context of the editor.  It’s a little bit like magic.

And if you want to drill deeper, you simply click on the code lens and you can move directly to the method that referenced this class/method etc.

or if you want to know what work items (in this case using Git) that this code was checked in against

Code lenses have actually been around since VS 2013 but only in the Ultimate edition, now it is available in both Professional and Enterprise and the number of available code lenses keeps growing.  Read more about code lenses here.

Roslyn – or Live code analysis – or Light bulb tips

The new lightning fast Roslyn compiler for C# and VB enables some really cool scenarios like live code analysis.  This means that while you type, your code is analyzed and Roslyn comes with these neat light bulb tips suggesting ways to optimize or clean up your code.

You can, if you are so inclined, also write your own special analyzers and code diagnostics to force the people on your team to always start class names with the letter c or whatever floats your boat.

Peek Definition (Alt+F12) – now also in XAML

One of the big productivity features in VS 2013 was to get more done without having to switch context.  Like in this case, where I want to know how FromModel is implemented.  I could press F12 and move to the implementation, which would open up the file where it was implemented and switch to that. 

Instead here I press Alt+F12 and the FromModel implementation shows up in a peek window, and I can review and edit the code without making the file context switch.

The peek concept has grown in VS2015 and is now used in the break point IDE for example.  But it has also expanded to XAML which gives some major productivity boosts when styling XAML since you can change the style and see the effects of the change in the designer at the same time.  

Navigate To (Ctrl+,) – or quick search

When you call a method defined in an interface, like GetCurrentWeatherAsync below, you can’t use “Go To Definition” or “Peek Definition” since it’ll take you to the definition in the interface (IWeatherDataAsync) rather than the implementation.

This is where Navigate To (Crtl+,) comes in handy, it allows you to really quickly navigate between the definitions and implementations of the method.

For more shortcuts, check out the VS Tips and Tricks

Intellisense for a lot more scenarios

There is now intellisense for XAML data binding

json (for bower.json and package.json)

bootstrap css classes

and AngularJS directives and attributes and more…

You can read more about the HTML/ASP.NET tooling improvements here

If you feel like this list is bogus because I completely missed the best feature ever, feel free to rant about it in the comments, we are all here to learn new tips and tricks  

Tess

Bizzy Bees is super simple.  It is raining flowers, and the task at hand is to match up same colored flowers with same colored bees to remove them before the flowers reach the bottom of the screen.  Rainbow flowers can be matched with all bees and if you match a rainbow flower you score a point.

I’ve divided the walkthrough into 8 small articles to make the information a bit more digestable

1. Setting up the base project with DirectX and DirectTK
2. Creating the game assets (sprites and fonts)
3. Drawing the scene – Background/Foreground/HUD
4. Adding flowers
5. Making things move
6. Adding bees
7. User Interaction
8. Tidying up and adding finishing touches

If you want to follow along, you can download DirectXTK (DirectX ToolKit) from codeplex. DirectXTK is a toolkit that sits on top of DirectX enabling you to use XNA like constructs like the SpriteBatch, SpriteFont etc. making the transition from XNA to DirectX fairly easy and it comes directly from some of the guys that made XNA so it’s good stuff:)

Disclaimer: I am not really a C++ developer since I work mainly in C# so keep that in mind when you look at the code since there might be better ways to do things.  I welcome any and all comments that could make things better.

In order to have something to draw we’ll have to create some assets (Sprites/Direct Draw Surfaces for images and SpriteFont for fonts to draw text)  I have drawn all my images in Expression Design which you can download for free.  It’s an excellent vector drawing tool, kind of a light weight PhotoShop version, so it’s great for drawing logos or small images.   If you don’t want to spend the time right now to draw stuff you can download all my images from the bottom of this article.

Create sprites

In order to use sprites with DirectX/DirectXTK we need to convert them to Direct Draw Surfaces by opening the png file in Visual Studio and saving it as .dds

If you are following the code-a-long download the images used by BizzyBees at the bottom of this page and convert them to .dds with the following names

BeeMap.dds
FlowerMap.dds 
AnimatedBee.dds   
Background.dds
Foreground.dds
HUD.dds

For the flowers and bees we’ll use a sprite map containing several images so that we only have to load one image.  When we draw them we will draw just a portion of the image, but I’ll get to that later.

Create SpriteFonts

In XNA we could create spritefonts in Visual Studio, those spritefonts were essentially just an XML doc with info about the font.  DirectX is a little bit different, but with the right tools it is not all that much more difficult.

Download the MakeSpriteFont tool from the downloads section of http://directxtk.codeplex.com.  This tool will let you create spritefonts that you can use with the DirectX Tool Kit

1. Open a command prompt and browse to the location of MakeSpriteFont.exe

2. Run the following command to generate a sprite font for Showcard Gothic 21pt

MakeSpriteFont.exe "Showcard Gothic" MyFont.spritefont /FontSize:21

Add the assets to the project

1. Open the BizzyBees project in the file explorer and add a directory under assets called Content
2. Add all the dds files and the spritefont to the Content directory
3. In Visual Studio, on the BizzyBees project, right-click and select Add->Existing Item and add all the dds files and the sprite font.  If you want to clean it up a bit you can create a Content filter under the Assets filter and drag the new items there. 

Note: In C++ the project structure with Filters may or may not reflect the actual folder structure on disk and when you load textures etc. it is the file locations on disk that rule.
 
4. For the spritefont, change the properties in Visual Studio to Content = true

Now we have all the assets, next we’ll load them up and start drawing the scene

File/New Project

For the purposes of this walkthrough we’ll be creating a blank Windows Phone Direct3D app in Visual Studio.  If you want to add menus and other items you can also try the Windows Phone Direct3D with XAML App which allows you to add in XAML pages for menus etc. but I’ll leave that as an exercise for later:) Also, I would sincerely recommend that you read this guide on combining DirectX with DirectXTK by the creators of Chickens can’t fly (one of the best WP games ever made in my opinion).   

1. Download the latest version of DirectX Tool Kit from codeplex

2. In Visual Studio, Create a new Windows Phone Direct3D app and call it BizzyBees

3. In the file explorer, copy the extracted DirectXTK folder to the BizzyBees solution folder

4. In Visual Studio, right-click the solution and select Add->Existing project to add the DirectXTK_WindowsPhone8.vcxproj project to the solution.
You may notice that you have a lot of other projects here too, in fact you can use DirectXTK for a lot of different platforms like Windows 8 and XBOX and the code we are going to produce here is very similar if not the same as what you would write for other platforms.

You should now have something that looks like this:

5. Open the BizzyBees properties window by right-clicking the Bizzy Bees project and selecting Properties
The next few steps will be performed in the properties window.

6. Link the DirectXTK project: Under Common Properties/References click the Add New Reference button and select the DirectXTK_WindowsPhone8 project

7. Add the DirectXTK include files: Under Configuration Properties/C/C++/General edit Additional Include Directories and add the DirectXTK\Inc folder

8. Add the dxguid.lib:  Under Configuration Properties/Linker/Input add dxguid.lib to Additional Dependencies

9. Add the following includes to the pch.h file (precompile header).  We’ll be using items from these header files in pretty much all our classes

#include "SpriteBatch.h"
#include "SpriteFont.h"
#include "SimpleMath.h"
#include "DirectXHelper.h"
#include "DDSTextureLoader.h"
#include <vector>

10. Build the BizzyBees Project and run it.  For now you will just see the default cube renderer but we will clean out what we don’t need and start building our game soon.

Cleaning up the project

In this project CubeRenderer is pretty much where all the action happens.  Similarly to XNA the application run goes something like this

A. CreateDeviceResources
B. CreateWindowsSizeDependentResources
C. Update
D. Render

Rinse and repeat C and D every frame until the game ends… 

In CreateWindowsSizeDependentResources we’ll be loading up all the textures, fonts etc. then every frame we will update the scene in Update and then blit draw the updated scene in Render.   Later on we will also add user interaction but this will be event based and not part of the update/render loop.

1. We won’t be needing the SimplePixelShader nor the SimpleVertexShader so remove these from the application
2. Rename CubeRenderer to BizzyBeeGame throughout the project.  We could have scrapped the cube renderer and created a new class but this way we can delete stuff instead of retyping everything.
3. Clean up BizzyBeeGame.h and BizzyBeeGame.cpp until you only have the following

BizzyBeeGame.h

#pragma once

#include "Direct3DBase.h"

ref class BizzyBeeGame sealed : public Direct3DBase
{
public:
    BizzyBeeGame();

    // Direct3DBase methods.
    virtual void CreateDeviceResources() override;
    virtual void CreateWindowSizeDependentResources() override;
    virtual void Render() override;
    
    // Method for updating time-dependent objects.
    void Update(float timeTotal, float timeDelta);

private:
};

BizzyBeeGame.cpp

#include "pch.h"
#include "BizzyBeeGame.h"

using namespace DirectX;
using namespace Microsoft::WRL;
using namespace Windows::Foundation;
using namespace Windows::UI::Core;

BizzyBeeGame::BizzyBeeGame()
{
}

void BizzyBeeGame::CreateDeviceResources()
{
    Direct3DBase::CreateDeviceResources();
}

void BizzyBeeGame::CreateWindowSizeDependentResources()
{
    Direct3DBase::CreateWindowSizeDependentResources();
    //TODO: Load textures and fonts and initialize the game
}

void BizzyBeeGame::Update(float timeTotal, float timeDelta)
{
    //TODO: Update the scene here
}

void BizzyBeeGame::Render()
{
    const float midnightBlue[] = { 0.098f, 0.098f, 0.439f, 1.000f };
    m_d3dContext->ClearRenderTargetView(m_renderTargetView.Get(), midnightBlue);
    m_d3dContext->ClearDepthStencilView(m_depthStencilView.Get(), D3D11_CLEAR_DEPTH, 1.0f, 0);
    m_d3dContext->OMSetRenderTargets(1, m_renderTargetView.GetAddressOf(), m_depthStencilView.Get());

    //TODO: Render the scene here
}

  

We removed all the 3D rendering and in the Render method we simply clear out the space and draw a midnightBlue background.  For all you XNA devs out there, what we have done
now is the equivalent of starting a new Windows Phone XNA app and pressed F5 to run and see the cornflowerblue background : )

In the next post we’ll generate some assets so that we have something to draw on the screen.

The next step is to start adding some flowers to the screen, and the way we will do this is by creating 5 columns that each hold a set of flowers.  The reason we do this is so that each column keeps track of moving the flowers downwards and generating new flowers and also later on when you tap on a bee and then a column it will match the bottommost flower in that column to the bee to see if there is a match.

Adding flowers

The first thing we are going to do is generate the 5 columns and each column is going to generate 3 starting flowers.

1. Create a new class Column (uncheck the Windows Store checkbox when you create the class). 

2. Add a few new methods, some constants and Fields to the class

#pragma once

using namespace std;
using namespace DirectX;
using namespace Microsoft::WRL;
using namespace DirectX::SimpleMath;

class Column
{
public:
    Column(float x);
    ~Column();
    void Draw(shared_ptr<SpriteBatch> spriteBatch, ComPtr<ID3D11ShaderResourceView> texture);
    float X;
private:
    static const int columnTop = 150;
    static const int numColors = 6;
    static const int flowerDeltaY = 80;
    static const int flowerSize = 72;
    static const int rainbowColor = 6;

    vector<shared_ptr<Flower>> flowers;

    void AddRandomFlower(float y);
};

The Column class contains the following:

• X – marking the position of the column x-wise
• Draw method – that will draw the flowers on the screen
• AddRandomFlower method that will and a random colored flower to the column
• a vector (list) of flowers
• a number of constants that will allow us to space and position the flowers on the screen, and also some constants used to generate the colors,

3. Add a Flower class. The Flower class doesn’t have any methods just information about where it is located and the color of the flower

class Flower
{
public:
    Flower(Vector2 position, int color);
    Vector2 Position;
    int Color;
};

4. Implement the Column methods like this:

Column::Column(float x) : X(x)
{
    AddRandomFlower(columnTop + 2 * flowerDeltaY);
    AddRandomFlower(columnTop + flowerDeltaY);
    AddRandomFlower(columnTop);
}

Column::~Column()
{
}

void Column::Draw(shared_ptr<SpriteBatch> spriteBatch, ComPtr<ID3D11ShaderResourceView> texture){
    for (auto pFlower = begin(flowers); pFlower != end(flowers); pFlower++){
        auto flower = (*pFlower);
        RECT flowerMapRect = { flower->Color * flowerSize, 0, (flower->Color + 1) * flowerSize, flowerSize };
        spriteBatch->Draw(texture.Get(), flower->Position, &flowerMapRect, Colors::White);
    }
}

void Column::AddRandomFlower(float y){
    int color = rand() % (numColors + 1);
    flowers.push_back(make_shared<Flower>(Vector2(X,y), color));
}

and the Flower constructor like this

Flower::Flower(Vector2 position, int color) : Position(position), Color(color){}

When a new column is created it generates 3 flowers spaced flowerDeltaY apart.  AddRandomFlower randomizes the color, generates a new flower and adds it to the flowers list.

Finally the Draw method loops through the flowers and draws them.  The only difference here between this draw and what we have seen before is that we only draw a portion (rectangle) of the texture specified by the flowerMapRect (left, top, right, bottom).

Just one more little comment, we specify Colors::White here (it has been omitted earlier). This means that we are going to shine a white light on the texture essentially leaving it intact.  If we want a blue tint on the texture we can change this to Colors::Blue for example.

5. Add code to the BizzyBeeGameResetGame method to initialize the columns and randomize (using the current time as the seed) so that we won’t generate the same flowers every run.  In order to use the time we’ll also have to #include <time.h>

void BizzyBeeGame::ResetGame(){
    //RANDOMIZE
    srand((unsigned)time(NULL));

    //INITIALIZE COLUMNS
    columns.clear();
    for (int i = 0; i < 5; i++)
        columns.push_back(make_shared<Column>(i * 92 + 22));
}

6. In BizzyBeeGame::DrawFlowers – loop through and draw the columns

void BizzyBeeGame::DrawFlowers(){
    for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++)
        (*columnPtr)->Draw(spriteBatch, flowerMapTexture);
}

7. Run the app. Now we should be getting closer.  It doesn’t really do much yet but display some flowers but that will change shortly

Animating objects in DirectX is just as simple as in XNA.  In the update method we just change the position of the objects and since they are drawn every frame with their respective positions they will start moving.

If you want to create some more advanced animations, like if we would want the bees to flap their wings, you would create sprite maps with images of the various states and then just swap which portion of the sprite map you want to display each time.

Animating the flowers

The flowers are going to move down at a steady pace.  We’ll move them down at 0.4 pixels per frame (at least initially).  The 0.4 is an arbitrary number that I have picked by testing the app on my family until I found a speed that seemed good.

1. Add a new public member variable on the Column class called Velocity (float).

2. In the constructor for Column, set Velocity to 0.4f;

Column::Column(float x) : X(x), Velocity(0.4f)
{
...

3. Add a public void Update() method to Column and implement it so that it increases the Y position of all the flowers by Velocity. i.e. moving the flowers 0.4 pixels down per frame

void Column::Update(){
    for (auto pFlower = begin(flowers); pFlower != end(flowers); pFlower++){
        auto flower = (*pFlower);
        flower->Position.y += Velocity;
    }
}

4. Add a private void UpdateColumns() method to the BizzyBeeGame class and call this from the BizzyBeeGame::Update method

5. The BizzyBeeGame::UpdateColumns should look like this, just looping through the columns and updating each one

void BizzyBeeGame::UpdateColumns(){
    for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++)
        (*columnPtr)->Update();
}

6. Save and run

The flowers now slowly move downward until they move off the screen.  And they are never replenished.  We’ll need to do something to fix this.

Game Over

When the flowers reach the bottom, the game is over so we’ll have to keep track of this

1. Add a new private member variable to the BizzyBeeGame class called bool GameOver and set it to false in the ResetGame method

2. Change the BizzyBeeGame::UpdateColumns to return a bool and change it to check for if the column has reached the bottom of the flower area

bool BizzyBeeGame::UpdateColumns(){
    bool reachedBottom = false;

    for (auto columnPtr = begin(columns); columnPtr != end(columns); columnPtr++){
        auto column = (*columnPtr);
        column->Update();
        if (column->HasReachedBottom())
            reachedBottom = true;
    }
    return reachedBottom;
}

3. In the BizzyBeeGame::Update method, only update if it’s not GameOver, and also set the GameOver variable if we reached the bottom

void BizzyBeeGame::Update(float timeTotal, float timeDelta)
{
    if (!GameOver){
        if (UpdateColumns()){
            GameOver = true;
        }
    }
}

4. In order to check if the first flower reached the bottom we’ll have to add a static const int columnBottom = 620; to the Column class, and check the first flowers y position against it

bool Column::HasReachedBottom(){
    if (flowers.size() > 0 && flowers[0]->Position.y >= columnBottom)
        return true;
    else
        return false;
}

5. Finally we need to change the drawing so that we print out the game over message.  In the BizzyBeeGame::Render method, check for GameOver and call DrawGameOver right before the spriteBatch->End() call

    if (GameOver)
        DrawGameOver();

6. In the BizzyBeeGame::DrawGameOver we’ll simply print the string GAME OVER twice (once in red and once in black) with a little offset to get a more gamey effect

void BizzyBeeGame::DrawGameOver(){
    DrawString(L"GAME OVER", Vector2(79, 404), Colors::Black, 2.0f);
    DrawString(L"GAME OVER", Vector2(75, 400), Colors::Red, 2.0f);
}

YAY! so now we can loose… too bad you can’t win:)  oh well… we’ll take care of that too later

Creating a Flower Factory

The game would get a bit boring if we only had 3 flowers per column so to fix that we’ll generate new flowers as the flowers move down. 

1. In Column::Update add code to the bottom of the function to check if we have an empty column, or if the top flower has moved down past the column top, and if so add a new flower

    //generate new flowers if we need to
    if (flowers.size() == 0 || (flowers[flowers.size() - 1]->Position.y > columnTop))
        AddRandomFlower(columnTop - flowerDeltaY);

That is all there is to it. We are done with the flowers!  next time we’ll add some bees to the mix as well.

Drawing the Scene

Now we have all our assets and it’s time to draw them on the screen. 

In order to draw something we’ll need

a) something to draw – which is going to be our dds sprites (or textures)
b) a start position

In our game we’ll draw the following things on the screen

• The Background at 0,0 where 0,0 is the top left corner
• The Flowers and Bees but we’ll get to those later
• The Foreground at 0,0 as well.  We can look at it as a puppet show where the foreground will sit on top of the area where we draw the flowers so that when they drop down they will clip behind the edges of the foreground texture
• The HUD (Heads Up Display) which will be a HUD background painted at 7,7 (7 pixels from the top and 7 pixels from the left).  When painting the HUD we’ll also print out the score, the level name (in this case MARATHON), some game instructions as well as bees indicating how many lives we have left.
• A GAME OVER text on top of the whole scene when the game is lost

Getting things started in the BizzyBeeGame class

1. Add the following methods and member variables in the BizzyBeeGame.h file

private:
    shared_ptr<SpriteBatch> spriteBatch;

    //Textures
    ComPtr<ID3D11ShaderResourceView> backgroundTexture;
    ComPtr<ID3D11ShaderResourceView> foregroundTexture;
    ComPtr<ID3D11ShaderResourceView> hudBackgroundTexture;
    ComPtr<ID3D11ShaderResourceView> flowerMapTexture;
    ComPtr<ID3D11ShaderResourceView> beeMapTexture;
    ComPtr<ID3D11ShaderResourceView> lifeBeeTexture;

    //Fonts
    shared_ptr<SpriteFont> hudFont;

 void ResetGame();

    //Draw functions
    void DrawBackground();
    void DrawFlowers();
    void DrawBees();
    void DrawForeground();
    void DrawHUD();
    void DrawGameOver();

    void DrawString(const wchar_t* text, Vector2 position, XMVECTOR color);
    void DrawString(const wchar_t* text, Vector2 position, XMVECTOR color, float scale);

Right under #include “Direct3DBase.h” add the following using directives in order to be able to use things like shared_ptr, Vector2 etc.

using namespace std;
using namespace DirectX::SimpleMath;
using namespace DirectX;
using namespace Microsoft::WRL;

So now we have defined

• pointers to all the textures and fonts we’ll use. 
• a sprite batch which we will use to draw items to the screen
• a number of draw methods where we will actually draw all the items described above
• Two drawstring methods (one for regular text and one if we want to scale the text).  Typically you would create different sprite fonts for different text sizes but I am doing it this way for simplicity.  Scaling a font will make it a bit grainy.

2. In BizzyBeeGame.cpp implement all the new methods but let them be empty for now

3. In the BizzyBeeGame::Render method add the folloiwng code to start drawing the scene.  Note that all the drawing has to occur between spriteBatch->Begin() and spriteBatch->End()

    //Draw the scene
    spriteBatch->Begin();
    DrawBackground();
    DrawFlowers();
    DrawBees();
    DrawForeground();
    DrawHUD();
    spriteBatch->End();

4. So far so good, but nothing gets drawn on the screen : ) We’ll have to set up the spriteBatch and load our textures and fonts first in BizzyBeeGame::CreateWindowSizeDependentResources

    auto device = m_d3dDevice.Get();
    auto context = m_d3dContext.Get();

    spriteBatch.reset(new SpriteBatch(context));

    //TODO: Load textures 
    DX::ThrowIfFailed(CreateDDSTextureFromFile(device, L"Assets\\Content\\Background.dds", nullptr, backgroundTexture.ReleaseAndGetAddressOf()));
    DX::ThrowIfFailed(CreateDDSTextureFromFile(device, L"Assets\\Content\\Foreground.dds", nullptr, foregroundTexture.ReleaseAndGetAddressOf()));
    DX::ThrowIfFailed(CreateDDSTextureFromFile(device, L"Assets\\Content\\HUD.dds", nullptr, hudBackgroundTexture.ReleaseAndGetAddressOf()));
    DX::ThrowIfFailed(CreateDDSTextureFromFile(device, L"Assets\\Content\\FlowerMap.dds", nullptr, flowerMapTexture.ReleaseAndGetAddressOf()));
    DX::ThrowIfFailed(CreateDDSTextureFromFile(device, L"Assets\\Content\\BeeMap.dds", nullptr, beeMapTexture.ReleaseAndGetAddressOf()));

    DX::ThrowIfFailed(CreateDDSTextureFromFile(device, L"Assets\\Content\\AnimatedBee.dds", nullptr, lifeBeeTexture.ReleaseAndGetAddressOf()));

    //TODO: Load fonts
    hudFont.reset(new SpriteFont(device, L"Assets\\Content\\MyFont.spriteFont"));

    //TODO: Initialize the game
    ResetGame();

The code here is pretty straight forward, just keep in mind that this loads from the Assets\Content folder on disk, independently of how the filters are set up in the project.

5. Now we have the assets so let’s start drawing them.  The BizzyBeeGame::DrawBackground method will look like this, which means, we draw the backgroundTexture at position 0,0. 

    spriteBatch->Draw(backgroundTexture.Get(), Vector2(0, 0));

6. Implement BizzyBeeGame::DrawForeground the same way but with the foregroundTexture

7. For the HUD we need to print some things so let’s first implement the DrawString methods

void BizzyBeeGame::DrawString(const wchar_t* text, Vector2 position, XMVECTOR color){
    DrawString(text, position, color, 1.0f);
}
void BizzyBeeGame::DrawString(const wchar_t* text, Vector2 position, XMVECTOR color, float scale){
    hudFont->DrawString(spriteBatch.get(), text, position, color, 0.0f, g_XMZero, scale);
}

8. Implement the DrawHUD method, and draw the background, the level name (MARATHON) and instructions (COLLECT RAINBOW FLOWERS).  The text is blue and the level name is slightly smaller than the instruction text

void BizzyBeeGame::DrawHUD(){
    spriteBatch->Draw(hudBackgroundTexture.Get(), Vector2(7, 7));
    DrawString(L"MARATHON", Vector2(40, 10), Colors::Blue, 0.7f);
    DrawString(L"COLLECT RAINBOW FLOWERS", Vector2(45, 115), Colors::Blue);
}

9. Compile and run.  you should now se something like this on the screen

It’s not terribly exciting quite yet but in the next few steps we’ll add on all the game components