Microsoft Popfly: Building Games Without a CS Degree

Author : John Montgomery, Group Manager, Microsoft Popfly,
Blog : http://blogs.msdn.com/johnmont/

This article appeared in the Expression Newsletter; subscribe to get the next issue.

Microsoft Popfly is a simple, web-based tool for creating and sharing various kinds of applications including web pages, mashups, and casual games – content that people could embed in their personal web pages, blogs, or Facebook pages. Popfly is designed to make it easy for someone with little or no programming experience to create good-looking results quickly. To do this, we had to focus on creating a new kind of programming environment – lightweight, web-based, and most important, simple.

Let’s take a minute to talk about some of the concepts that underlie Popfly and quickly build a simple game to see how it comes together.

Actors and Scenes: Popfly Concepts

One of the most important aspects of the design was to make it friendly and approachable. Throughout the Popfly game creator you’ll find we focused on providing visual abstractions for common programming concepts. In particular we took relatively complex game ideas about levels and level editors and character editors and various ideas about events and motions and created a simpler set of concepts. For example, games consist of actors that reside in scenes.

Also, instead of starting with more common programming concepts such as events, Popfly starts with the idea of a behavior. Behaviors are assigned to the actors and scenes and group together an event and the actions you want to have happen when the event occurs.

For concepts that span the entire game (like your score), we also have the concept of a game. And we wanted to enable people to get immediate feedback on their projects, so we have a prominent “Play!” button so you can at any time try your game out.

Under the covers, Popfly is a Silverlight application and uses many Silverlight technologies, especially XAML, the XML markup used by Silverlight and the Windows Presentation Foundation. For example, as users navigate the UI in the Popfly game creator, Popfly is saving users’ choices in XAML. The Popfly game engine, which is written in a combination of JavaScript, C #, and XAML, is responsible for reading the XML and executing the game from it. For users who find Popfly’s UI paradigm to restrictive, however, Popfly also enables users to create behaviors in JavaScript and to upload complex actors that using XAML.

From a UI design perspective, we focused on making the user interface look “friendly” – we made the icons large and as self-explanatory as icons can be and focused on using as little text in dialogs as we could and avoided as much as possible the icon-dense UIs that populate many business programs. Our palette tended to bright colors rather than the more utilitarian black-on-gray you often see, and our font choices tended to be more whimsical, though still legible. We also focused on making sure that users with 1024 x 768 resolution monitors could still use Popfly.

Creating a Simple Popfly Game

Let’s construct a simple game where one actor chases another actor that is in turn following the mouse. Browse to Popfly and sign in, then click on “Create a Game.” You’ll see that Popfly provides a host of templates that you can start with that represent the kinds of games you can create. You could also start by copying (or “ripping”) someone else’s game. For the purpose of this article, click on “…or start from scratch.

Click on the “Scenes” icon and you’ll see that Popfly has pre-populated your game with five scenes (Intro, Main, Won, Lost, and How to Play.” This set of scenes will work for us for now, but rather than the plain white background we’d like something a bit more active. Popfly includes an array of backgrounds to choose from or you can upload your own. Paging through the list, we find one that suits our needs.

Click on the large “Save” button to save your progress.

Next, let’s add some actors. Click on the Actors icon in the upper-left hand corner of the game creator. As with scenes, Popfly comes with a large library of actors to choose from, but after browsing through the library we decide we want something more personal, so we’re going to upload some actors.

Click on the Game icon. On the right side you’ll see the UI for adding files from the web or from your computer. We’ll add two from our computer: adam.jpg and john.jpg. Notice that Popfly automatically uploads the file when you click on it – Popfly doesn’t wait for you to click the upload button. These two actors will be the hero and villain of our game.

We now need to turn these images into actors. Click on the Actors button and then click on New. This will add an actor named Actor 1. Click on the Actor 1 icon, then click on the Appearance icon below – the one with the big arrow pointing to it. Popfly tries to give hints like that when the next step may not be obvious.

Popfly will now offer you a brush palette, text tool, and even a place for inputting raw XAML (the markup language used as the underlying display language for things in Popfly). We’re going to make a couple of changes here. First, let’s make the actor smaller than the default 150 x 150 pixel size – let’s make it 40 x 40 pixels. Just type 40 into both the Width and Height boxes.

Now, we’ll add one of those uploaded images to the actor’s appearance. Click on the film reel, and from the image chooser, pick the Adam image. Notice that it immediately sizes into the 40 x 40 box that we created in the previous step. Click the X in the upper right-hand corner of the actor window. We just need to do the same thing for the John actor, so click the New button and follow these steps for the John image.

It’s time to add these actors to a scene. Click on the Scenes button to go back to the Main scene. You’ll see that Popfly automatically added your two new actors to the palette on the left. Let’s add one instance of each to the game: click once on Actor 1 then click where you want it positioned in the scene (anywhere will do). Repeat the same process for Actor 2, but position it fairly far away from Actor 1. These two positions will be the starting positions for the actors in our game.

If you were to click Play right now, you’d find you have a pretty boring game. We need to assign some behaviors to these actors. To do that, click on the Actors icon, then on Actor 1.

In the Actor editor below, click on the Behaviors button. Popfly understands a variety of different basic behaviors like motion, shooting, disappearing and appearing. They’re all constructed in the same way: when some event occurs, take some set of actions. We want Actor 1 (our hero) to follow the mouse, so we need to add a motion behavior.

Click on the Motion icon to add a new motion to Actor 1’s behavior. Although there are several parts to this behavior there’s only one we need to modify to make Actor 1 follow the mouse: click on the “Motion” property of the Motion 1 behavior to get to Popfly’s motion editor.

There are several parts to the motion editor and you can experiment with them at any time. To create our game, though, we only need to make two changes to the basic screen: First click on the Mouse button, then click on the Toward arrow. This tells Actor 1 to move toward the mouse. You can also set properties such
as the maximum speed (by default a rather sluggish 100 pixels per second) or how long to take this action for, but we don’t need to change those. Click on the X to close this screen, and X to close the Actor 1 behavior screen.

Now set Actor 2’s behaviors: we want him to follow Actor 1 just slightly faster than Actor 1 moves. Click on Actor 2, then on Behaviors, then add a motion by clicking on the Motion icon. As before, we just need to modify the motion property of this behavior, so click on the Motion button next to Motion 1. To have Actor 2 follow Actor 1, we need to change Actor 2 to move relative to Actor 1. Click on the Actor button, select Actor 1 from the window, click the X to close this window, then select Toward. Also, to make this game a little more challenging, set the Max Speed to 105 – 5 pixels per second faster than Actor 1 can move. Click the X in the upper-right corner of this window to close it, then do the same again for the next window.

We’re ready to give our game a test run. Click the big Play button. You’ll see the intro screen and if you click once more our game will run. You’ll see Actor 2 chase Actor 1 around the screen and eventually push Actor 1 off the edge of the screen.

Conclusion

We haven’t created the most interesting game in the world, we admit. If you want to keep building on it, try making Actor 1 shoot at Actor 2 when you click the mouse button, and then make the game end when either Actor 2 is shot or Actor 1 collides with Actor 2. With the basic principles of behaviors under your belt, you’ll find you can build all sorts of games very quickly with Popfly.

The idea we were pursuing with the Popfly game creator was to encourage people who had an idea for a game to try creating it: We wanted to make the leap from playing a game to building your own simple. So far we’ve see Popfly games created by professional programmers and by twelve-year-olds.