Hello Windows 8 XNA-ish

Yes you read that right. You can really get a flavor of XNA on that snazzy new Windows 8 installation of yours.

Anything you build using this can work as Modern UI app. I know for many of us, like the crew at Three Red Cubes, this revelation put a smile across our faces.

Before you think I am bluffing, much of what I am about to detail has been covered by the original posts. Also, there is a Channel9 post about it.

Here is a rundown of my experience and the broad strokes of the steps.

Backstory

The answer to the owes of XNA developers comes in the form of MonoGame which is an open source implementation of Microsoft XNA 4. MonoGame allows XNA-style development for plenty of platforms but that’s not the focus.

The development of MonoGame for Windows 8 has been a little slow so the hackers at SickHeadGames came to the rescue.

Now it is possible to migrate existing XNA games without having to dive through SharpDX.

(Kind of Long) Setup

a. Getting into Github

Github account and the client are free. Also, One click installs are awesome!

b. MonoGame Source Code

1. Run Git Shell.
2. Change directory (cd) to where you want to store your code
3. Copy and paste this to the shell and hit enter:

git clone https://github.com/SickheadGames/MonoGame && cd MonoGame && git submodule init && git submodule update

to start pulling the code.

c. Visual Studio Template

If you browse to C:\Users\[you]\Documents\GitHub\MonoGame\ProjectTemplates\VisualStudio11.MonoGame.2.5\VS11MGWindowsMetroTemplate you’ll find a whole bunch of files that you can zip up and copy over to C:\Users\[you]\Documents\Visual Studio 2012\Templates\ProjectTemplates\Visual C#. This will create a Visual Studio 2012 project template once you restart Visual Studio.

d. Reference MonoGame

Once you start a solution using that new template we just created, right click on your solution in the Solution Explorer and add the MonoGame Framework Windows 8 Project from C:\Users\[you]\Documents\GitHub\MonoGame\MonoGame.Framework\MonoGame.Framework.Windows8.sln.

Now, add a reference to the MonoGame Framework in your game project by right clicking on references, select Add Reference. Under Projects choose the MonoGame Framework project (check the box!) and click OK.

e. Hit F5

Make sure you select the game project to be the startup project and compile and run the project.
You should be greeted with the good-old cornflower blue that XNA programmers know and love.

f. Content Pipeline

You may have noticed the absence of that good old content project. At this time, MonoGame does not have an implementation of the Content Pipeline and Visual Studio 2012 does not have native support for XNA development therefore we need a workaround until which is in about a month at the time of writing:

1. Head over to Aaron Stebner’s blog post and (possibly) install XNA Game Studio or Windows Phone on Windows 8.
2. Open up Visual Studio 2010 and create a XNA project that will come with the content project.
3. Import all your resources and build the project which will output xnb files to C:\Users\[you]\Documents\Visual Studio 2010\Projects\[project name]\[project name]\[project name]\bin\x86\Debug\Content.
4. Copy these files to your MonoGame project’s Content folder: C:\Users\[you]\Documents\Visual Studio 2012\Projects\[project name]\[project name]\bin\Debug\AppX\Content.

Now, you can use the ContentManager object to load game assets during runtime. Just like the XNA we know.

Credits

All of this came into light, once again, from Bob Familiar’s blog posts. And it is only possible because of the hard work of the MonoGame project and SickHeadGames.

Q & A

So, is XNA dead?
I don’t think so. It has been reincarnated in Windows 8.

Will there be a Windows 8 XNA Game Studio release from Microsoft?
We don’t know yet, but you never know.

Is MonoGame the only solution?
No, SharpDX is just an awesome a solution.

For now though, here’s to having XNA back on Windows 8.


Blueprint CSS Framework in MVC3

Blueprint CSS Framework is a very simple and neat but oh-so-powerful CSS framework that I love to use in my MVC projects. It significantly reduces the time it takes to improve the aesthetics of a new eww-looking MVC project. Furthermore, it provides a very solid, 960px grid CSS system to build on. So, you won’t have wasted time working with it.

With the advent of the super amazingly sexy Razor view engine (read more about its super amazingly sexiness blogged about by Scott Gu and many others), using Blueprint feels even more intuitive.

So, without further ado, here are the steps to how it can be set up.

Step 1: Get it! Download the files.

Step 2: Stare at awe at the files. The files that should interest you are in the /blueprint/ directory. Of these, ie.css, print.css, screen.css are minified versions of files you will find in the /bluprint/src/ folder.

Step 3: Include ’em. Depending on your needs, you may or may not want to include print.css. Either way, include them in _Layout.cshtml that you can find in your /Views/Shared/ folder. Of course, remember to include the files of your interest to your project. If I put put them in my /Content/ folder, for example:

<link href="@Url.Content("~/Content/screen.css")" rel="stylesheet" type="text/css" />

Step 4: Style away!

<div class="container">
    <div class="span-24 prepend-top append-bottom last">
        <h1>Some Title</h1>
    </div>
    <div class="span-24 last">
        @RenderBody()
    </div>
</div>

You might have guessed that the CSS classes like container, prepend-top etc are being provided by Blueprint. What do they do? Exactly what they sound like. For example, the span-24 CSS class renders a column across the page 24 times span-1 which is 30px wide, by the by.

That should get you started with the framework. I’ll be writing a more extensive tutorial on Blueprint soon, so check back.