Monday, April 9, 2007

WPF and Frame-Independent Animation

Recently I came across a good description on Ars of what Vista brings to the table in display, print, and sound. Since I used to work on the Vista team, I can verify that the article is mostly accurate (and probably more accurate than any other 3rd-party commentary I’ve seen, with the exception of Paul Thurrot’s).

The new Vista UI gets most of the limelight. This is a shame, because many of the coolest improvements to the operating system are under the hood. There are literally thousands and thousands of new features that just don’t make good “demos,” so everyone thinks Vista is just the same old thing with new makeup (check out these cool kernel improvements for a small sample). Conversely, some of the new features that make good demos are actually pretty lame in day-to-day use. For example, I remember when I was a PM at Microsoft and they showed off this new replacement for the Windows Task Switcher. It seems some dude in the Avalon group had come up with this really “clever” way for switching between windows (now called Flip3D).

Now, before we go any further, you need to understand that cleverness in software design is generally a Very Bad Thing.

While walking back to our building after the demo, one of my friends (who happened to be the lead user experience designer on our team) whipped out a verbal chair and started beating the new task switcher over the head. “How could they do this!” he ranted. Had they absolutely ignored Fitt’s Law? Don’t they realize how slow it is to (a) acquire one of those little edges of a window with your mouse (b) cycle through each window, pausing at each one to think “is this is the one I want?”, and then stopping the scroll wheel just in time. Not to mention it totally throws away the spatial layout information of your windows on the desktop.

My friend was terribly afraid this would become some manager’s pet project (because it was just so clever, and so pretty), leading to complete and utter embarrassment of the Vista user experience team.

Oops.

This is how Steve Jobs gets away with saying Mac OS is the “world’s most advanced operating system.” All he has to do is compare Flip3D to Exposé and he’s done. He can just walk off the stage. In my not-so-humble opinion, Vista is much more advanced under the hood. But the one who puts on the best show will win the hearts of the press and the consumers. Steve Jobs is simply a better story teller than Bill Gates (sad, but true).

(Now, if I have any of you really ticked off about now, just wait; I am sure I can offend you even better in some future posts... ;)

Well, all this is important to understand when you consider targeting the Windows Presentation Platform. WPF puts some incredible graphics wizardry at your fingertips. Please make sure the thing you build doesn’t just look good, but that it is also useful (by the way, the definition of a useful game is one that wastes the maximum amount of a user’s day because they can’t stop playing it).

In this week’s demo you will see some groovy shooting and a nice demonstration of how gravity works. The two most important lessons you should get from looking at the source code is (a) how to do smooth, frame-independent animation in WPF, and (b) that bitmap effect such as the “Glow” slow your animations way down (uncomment the code that applies the effect to the planets, and you will see what I mean whenever the screen tries to zoom.) I couldn’t understand what was going on with (b) until I saw this: “WPF bitmap effects are rendered in software mode. Any object that applies an effect will also be rendered in software. Bitmap effects should not be applied to large visuals or animations as this can degrade performance.” I should have seen this coming a while back, when I noticed that creating a custom bitmap effect required thunking down to hand-crafted, “unmanaged” code (for performance reasons, I’m sure).

Note that you will need to install the .NET 3.0 before trying to run the demo on Windows XP.

Demo Download 3 at the WPF Scorched Earths Game Project.

Saturday, March 31, 2007

Growing Yards and Glowing WPF

We have a new house in a new subdivision. New houses are generally surrounded by lots of dirt, plus lots of other new houses that look suspiciously similar to yours (except the colors they picked always look better). Now, a reasonable person would—under these circumstances—simply pick up the phone and call Joe’s Landscaping to come install a nice green apron around the house. You might even end up with a tree or two by accident, and some industrial bushes in a sea of woodchips against your house. Unfortunately, I’m not reasonable. I just had to go make a landscaping “design” where nothing is square (despite the fact that the whole thing is on graph paper). These “designs” require a multitude of trees, bushes, and various other plants with unspeakable Latin names, an irrigation system second only to that running under Central Park, and lots of digging in the kind of soil that would get a pottery class excited.

Making games with Windows Presentation Foundation is pretty unreasonable, too. But so far it doesn’t seem like it is going to be quite the can of worms that my landscaping “design” has turned out to be. Overall, I am impressed with WPF. I like how super-easy it is to rotate, scale, animate, and perform groovy special effects (like the “Glow” in this week’s demo that applies to any visual). It is really fun to animate the special effects. You can animate pretty much anything you want.

If any of you are just learning WPF, don’t give up! There is a very short, steep learning curve at first, but you will soon hit that “ah ha!” moment and everything is downhill from there.

A couple of snags I ran into, though: First, when laying out the planets I have to make sure nothing overlaps. To do that, I have to know what the final size of each planet is going to be after any transformations. However, WPF doesn’t tell you what the final size will be until everything has rendered the first time. But of course, I can’t render something before I’ve figured out where it should go on the screen! So I ended writing some extra event handlers and such to keep track of what the planet’s size should be regardless of whether a given visual has been rendered or loaded yet. This had the nice side-effect of giving us a good framework for high-performance collision detection.

The second WPF strangeness is how events and properties work. They are not really built in to C#, but use a lot of reflection and external “attaching” functions that just feel a bit tacked-on. This is hidden from you in XAML, but in C# where our game has to do some fancy stuff, I think the implementation could have been a bit cleaner (even without extending the C# grammar).

Otherwise, things are going fine and I only wish I had more spare time. Unfortunately, I have a lot of digging, planting, and who-knows-what-else to do in my yard. So we’ll just have to eat this elephant one juicy bite at a time.

So what are you waiting for? Head on over to my freshly-baked Scorched Earths Google Code project where you can get the “Glow” demo from the downloads section, and peruse the source code from the comfort of your home office (you aren’t reading this from work are you?!).

Thursday, March 15, 2007

Proofreading...

<Apology Content="Looks like I made some typos which broke my blog for non-IE users. Those are fixed now, and I will do better about proofing my posts in the future..." />

Friday, March 9, 2007

Zoom, Baby

WPF orginally got my attention because it was designed to take advantage of modern GPUs. Also, the framework includes a software-based rendering engine in case you don't have a fancy-pants graphics card in your PC. So you can do nice UI with some special graphical effects. As a bonus, animations and transformations are baked right into the framework.

The point of this blog is to find out how well WPF handles 2D games mixed in with the usual UI elements. My guess is that it will have decent performance, but still lag begind XNA or hard-core DirectX/OpenGL programming.

My theory is, the more UI your game requires, the better suited it is for WPF. Think of puzzle-type games that require lots of clicking (like Mahjong), or mystery-style games with images, video, and text. On the other hand, when there is little UI and lots of complex graphics do render, WPF just isn't going to cut it. Finaly, some games will require stupendous effects AND lots of UI (think, Supreme Commander). This last genre is best left to crazy, insane people. People who routinely eat nVidia chips with salsa to become "one with the machine".

This past week I made good progress; I learned how to stack UI elements, so that we can have a nice HUD-like display over the game board. The trick is using a <Canvas> as the top-level element under <Window>, and then adding another <Canvas> and a <Grid> as children. The <Grid> is absolutely positioned, and as long as it is the second child, will have a higher Z order than the <Canvas>, where you will stick all your sprites. You can of course set Panel.ZOrder if you want to force this.

The other neat thing is I learned how to make a zooming effect. This is useful for our game, because the game board is actually bigger than the window. When you shoot at another space ship and the shot goes off the screen, we want to allow it to loop back around if gravity is strong enough. Therefore, I wanted to zoom out to follow the shot.

At first I thought I would have to somehow paint the whole scene onto one side of a plane in 3D space, then manipulate the camera to get the effect I wanted. While WPF does let you map pretty much and 2D element onto a 3D model, it is a bit of a pain. Fortunately I found a better way.

WPF has these things called Transforms that can scale, rotate, and otherwise "transform" an element. Now, the
really cool part about this is that a transform will apply not only to the element you declare it on, but also to all child elements. Really, really, really nice. The demo shows how animating a single transform on the sprite canvas zooms everything all at once.

One last thing about the demo. Everything you see is done through declarative XAML (the file size is almost entirely the fault of the pretty background image). Although the .exe does not require it, I included Window1.xaml so you could see what is going on.

I am told that huge animations like the zooming effect have much better performance when executed inside the static Rendering event on System.Windows.Media.CompositionTarget. This is probably where we will do much of our animating anyway, especially our shots.

Download the demo (requires Vista or .NET 3.0 on XP)

Friday, March 2, 2007

The Learning Curve

During the past couple of weeks I’ve starting digging into “Windows Presentation Foundation Unleashed.” It’s a meaty book which makes for slow reading. On the other hand, the detail-oriented writing style helps bridge your understanding between the old Win32 visual programming model and the new “Vista” model. In any case, there is a lot to learn and experiment with.

First I need to get a handle on the way the UI controls work, and then figure out how to combine them with sprites. It isn’t obvious to me right now how you overlay UI on top of background graphics, but I’m sure it can be done.

Next week I hope to have something interesting to show and tell, but right now it’s just time to muscle through the learning curve…

Friday, February 16, 2007

Windows Presentation Planets?

Way back when I was a kid we used to go visit my grandparents and cousins in Arizona each Christmas. My mom’s older brother, Uncle Jay, was one of those old-school computer engineers. You know, the kind that went to school before anyone had even thought of putting a bunch of vacuum tubes and telephone switchboards together to play pong.

Anyway, Uncle Jay always had the latest computer gadgets. And it was sooo cool. My two brothers and I lived for that one week a year. Not only did they have the Atari consoles, but you could also play their sweet TI 99 (it had a speech synthesizer module!), and hack away and play games on their custom-built PCs (anyone remember DR-DOS?). Donkey Kong was awe-inspiring on their huge projector screen lit up by the "color cannons" in back.

One of the games I remember playing at Uncle Jay's involved several ships in a star field. You could rotate your ship and choose how much power to give your shot. The idea was to hit the other guys before they hit you. The only trouble was, the screen was full of planets. Planets with gravity. Each time you shot, your missile left a colored trail so you could make lots of psychedelic designs on the screen. (The trails may also have been useful for calculating your next shot, but I don’t remember.) If you want to get a feel for how this works, check out my clone.

Ok, so fast forward a few years. Word on the street is there’s a new game in town; the “mother of all games”. Well, who wouldn’t want to play the mother of all games? So I got me a copy of Scorched Earth. This game is the stuff legends are made of. If you haven’t tried it out (which is pretty unimaginable, but stranger things happen), Tanks is one of my favorite clones. There are exactly 21,642 Scorched Earth clones.

By now you might have guessed what I am leading up to. That’s right. We are going to take these two totally rad games, sprinkle in some modern graphical and networking madness(courtesy of WPF and WCF), and take over the world. WPF über alles!

The Big Idea

Big weapons. Big explosions. Pretty psychedelic patterns on your screen. This is what we are after.

You and up to 3 other buddies slug it out, turn-by-turn at the keyboard or over the LAN. You get to choose one of several ship designs to fly into the heat of battle. The idea is pretty simple: bump off everyone else before they do the same to you. But there is stuff in the way. Mind you, we won't have mountains like in Scorched Earth. We’ve got to have planets, and lots of ‘em. And suns. Let’s also include the occasional black hole, a worm hole or two, and a space station. Lot's of stuff we get to shoot around. Or just shoot.

Just wait until you see a sun blow up. Sweet.

Of course, we are going to need money to buy weapons, shields, repair kits, and warp crystals. So the more tricky your shot (i.e., the longer it goes without hitting something) the more dough you’ll earn. Of course, you will also get bonuses depending on what exactly it was you hit (if anything).

And money buys weapons. Really crazy, insane, fun weapons. Here is an initial list to wet your appetite:
  • Torpedos - Your basic weapon

  • Lasers - Only black holes can bend 'em

  • Hammer - Massive, Planet-breaking destruction

  • Firefly - Remote detonation with a big blast radius

  • Trinity - 3 in one

  • Sparkler - Throws off mean little beasties wherever it goes

  • Drill - Punch a hole in just about anything

  • Ferret - Attracted to your opponent's ships

  • Vampire - Sucks out power from a sun or opponent to add to your own

One last thing, We should have theme support, so people can “skin” the game however they want.

All of this should give Windows Presentation Foundation (WPF) a pretty good workout. If it can handle this game, we are golden.

P.S. - I have no idea what to call it. Any ideas?

Tuesday, February 6, 2007

Let's Make a Game

When I was in High School, about a million years ago, I went to a youth camp in the mountains with one of my buddies. We shared a tent and hung out talking about this and that. I told him how I had saved up my allowance and bought a book about BASIC programming (my sister thought I was out of my mind.) Since then I had been learning to program on my sweet IBM XT that Dad had brought home from work. So then my friend says, "hey, we should make a game together."

I had no idea what I was in for.

It didn't take like to figure out that the version of BASIC I had was pretty lame for cool games. So I got a book (can't live without 'em) and started learning C, then C++. We discovered the totally rad Fastgraph library, the amazing Watcom compiler (now open source) that let you run in DOS protected mode, and generally had a great time.

Life has changed and making games seems so daunting anymore when you look at what the big shops are turning out. But heck, some games like Scorched Earth are still more fun than some EA games I've seen. So what's a guy to do? Well, there is still room for smaller games. People call them "casual" or "indie" games now. And they can be super fun. Today's tools let you make nice looking games with about the same effort as the old DOS/Fastgraph-based ones back in the day.

So hey, let's make a game. This time we will use Windows Presentation Foundation because we can. Plus, it's a great excuse to learn the next-generation Windows GUI framework.

Learning Windows Forms wasn't a huge deal. You had the form designer in Visual Studio, and the programming model was similar to most other operating system GUI frameworks around.

Windows Presentation Foundation will get a Visual Studio designer later this year or early next year. In the meantime there is Expression Blend Beta 2 to play with. But how in the world do you program the thing?

From what I've seen so far, the WPF programming model is it's own cat. Windows Presentation Foundation takes a radical departure from the old-school UI programming model. Just imagine throwing Flash, DirectX, XHTML, CSS, and .NET into a big blender and hitting 'puree'. Now sprinkle a little HyperCard on top for that extra something special. Mmm. Tasty shakes.

This past week I started learning WPF. Microsoft has some free eLearning courses, but they are pretty basic and talk about everything from about the 10,000-foot level. Good online docs are hard to find, and looking at the Windows SDK Samples doesn't help much since the code is so wonky compared to anything I've done before (yes, I did just use the word wonky). Sure, you've got MSDN, but that is primarily a reference you use when you already have a pretty good clue of what's going on. Unfortunately, I'm oh-so-clue-less at this point.

At times like these, you've either got to go take a class, buy a book, or suffer through the agony of trying to figure it all out on your own. Well, I'd rather install Gentoo than take that last approach, and classes are just too expensive for a cheapskate like myself.

So I ordered a book, as I did when I was a kid and many times since (programmers love books - they stay up at night devising various devious ways to get more books) . Of course I had to get THE book, according to the reviews. Most of them went something like this: "Wow! You've gotta get this book! It is so awesome I can't believe it! I read it and now I can write cool apps and my girlfriend came back to me and I am going to run for president now and change the world with WPF because it totally ROCKS! Make Apps, not War!"

Right. So, we'll see if it's any good. I'll let you know.

P.S. - Stay tuned for next week when I will talk details about the sweet game we are going to use as our "experiment".

Friday, February 2, 2007

Windows Presentation Foundation and Games

Windows Presentation Foundation (WPF) blew me away the first time I saw a demo of it when I was at Microsoft. This is the biggest thing to happen to Windows UI since 1995. While making a pleasant UI with WinForms is about a gazillion times easier than with MFC, WPF makes WinForms look so boring. You know, like the PC man in the Apple commercials. Oops.

Not long after I learned about WPF, I came across a game by Mitch Walker called Mantis. Aside from a single blog entry and a sweet video, I haven't seen much else about the project since it was announced (and presumably shown at PDC 2005. If anybody has recent news, please do share. My guess is that he moved over to the XNA team at Microsoft and either abandoned the project or is in the process of porting it to the XNA framework.

Speaking of XNA, you might be wondering why this blog is not entitled "XNA Games" or something like that. For a while there was some buzz on the 'net about Windows Presentation Foundation being a potentially great platform for 2D/casual games. XNA sort of eclipsed all that. So why the heck would I want to try making a game using WPF instead?

I'll tell you.

WPF makes a beautiful UI, and blends it seamlessly with multimedia and 3D objects. Heck, you can even do particles. Plus, wherever you have WPF (in the .NET Framework 3.0 for XP, or preinstalled on Vista) you have Windows Communication Foundation (WCF). I'm absolutely drooling. WCF has built in P2P networking. Perfect for making your games reach out to the world.

Now throw in Newtonian for physics (source code here). Wow.

XNA? Well, UI is not it's strong point (font support is terrible, for example). Cool whiz-bang graphics are. And networking? No real-time goodness for you - bad llama! So it really comes down to the kind of game you want to make, and how you want to distribute it.

Join me as we explore the strengths and weaknesses of WPF. As for XNA... maybe next time.