- Popfly September Update
-
While I’ve been working on a super secret (ok, just regular secret and probably not exciting to anyone but me) project the last month which you won’t see for a bit, the rest of the Popfly team found time in between actually super (and secret) projects of their own to provide a couple cool updates to Popfly. One is a perennial request. You’ll now be able to track which projects are ripped from which to see whose based projects on yours and what other projects were based on. There’s also a new badge and more info on your news feed. You can read more about the updates here on the team blog or check them out yourself at http://www.popfly.com!
- How To: Create Lander
-
At PAX, one part of my presentation/demo on Popfly was creating the game Lander from scratch. It was a hit with the crowd so I decided to do a screencast of an extended version of the demo which creates a full version of Lander (for the presentation I only implemented the up/down motions, not the swivel motions that let you travel horizontally.
So if you weren’t able to attend the presentation at PAX, or just want to check out Popfly and learn how to create a game from one of the developers, check out the video below!
- Popfly Game Creator at PAX
-
For those of you in the Seattle area this coming weekend for PAX, be sure to stop by the Microsoft booth if you’re interested in checking out the Popfly Game Creator. I will be giving a demos of the PGC Friday at 5:00, as well as Saturday and Sunday at 11:30 AM. I’ll also hang around at the booth for a while after each talk if you want to stop by and chat.
For a schedule of other MS demos, check out the full listing at Gamerscoreblog: http://gamerscoreblog.com/team/archive/2008/08/22/560668.aspx
- New Features Since Launch
-
We’ve been hard at work on new features for the Popfly Game Creator since first launching this May. I took some time to demo new features in the following video:
Video: Popfly Game Creator July New Features
You can also check out Adam’s blog for more info here and here, find games you haven’t played here (requires sign-in so we know what games you’ve played), and of course, check out Popfly to see things for yourself!
- Happy Mother's Day! (Games for Mom)
-
Look Mom, I made you something:
Happy Mother's Day!
For those of you who are not my mom, the above game is my take on Plato's Allegory of the Cave (my Mom is a Philosophy and Religious Studies professor at the University of Idaho). I made the game using Popfly Game Creator, the product I work on for the Non-Pro Developer Tools team at Microsoft. You can use the tool to make 2D web games without writing any code. If you don't believe me, check out what my very non-programmer girlfriend came up for her mom (who teaches Spanish to elementary age children). A matching game for learning the colors:
And another game to learn the animals:
It's great to be able to do something creative for Mother's Day again. Love you Mom!
(For those of you interested in how these games were made, just click the tweak button and you can see them in Popfly for yourself! Next week I'll post some tips and tricks on the special effects I did in the Allegory of the Cave so that others can incorporate them into their own games).
- One week of Popfly Game Creator
-
It’s now been one week since we first released Popfly Game Creator to the public at Maker Faire and on the web on May 2nd. I thought I’d take today to point out some of the cool games that people have made.
User zbuff001 made this challenging set of minigames:
while Adam made a pseudo-rhythm game “Type Type Revolution:
Raden managed to make “Badly Built Wall” very difficult: http://www.popfly.com/users/Raden/HARD%20GAME
Moo777 had a great game – Bellyjish Adventure with multiple stages: http://www.popfly.com/users/moo777/The%20Bellyjish%20Adventure
Here’s an interesting one a bit along the lines of the old "Scorched Earth" type games that someone came up with at Maker Faire:
One of the great things about building PGC on the Popfly platform is the collaboration it provides. Since the games are Popfly projects, users can share their games with others, which lets everyone learn from and tweak them. It’s cool to see a variety of games coming both that make interesting tweaks on existing games and samples, and those that folks come up with all on their own. It’ll be exciting to see what folks come up with after they’ve had more time with the creator.
I’m sure there are plenty of great games that I missed. If you have something you’d like to share, feel free to link it in the comments!
5/10/08 Update: Bellyjish Adventure is back up, removed the embedded "Badly Built Wall" update since the sounds were annoying :).
5/10/08 Update: Also removed the embedded Bellyjish Adventure since its sounds also were annoying :). Both are linked instead.
- Rainbow Duckies - Great post on creating games with grandchildren
-
Michael Leonard is another engineer on the Popfly team and just posted a great entry on the experience he had testing the Popfly Game Creator with his granddaughters. It really is a great example of the interactions you can have when you're not just playing games, but actually making them.
- Capping your actor’s speed
-
If you’ve been playing around with Popfly Game Creator long enough, you’ve probably noticed that if actors get going fast enough, they can sometimes manage to fly right through a wall. There are some things you can do to get around this like making your walls extra thick, or making sure your actors go slow, but I’ll be the first to admit that this can get kind of annoying.
The issue is that with the alpha release of PGC, we only check for collisions once during each frame. If your actor is moving so fast that one frame it’s on the left side of the wall and on the next it’s on the right, we will never know that in between it should have collided. We have to actually catch the actors colliding during a frame in order to realize they collided and then resolve the collision. This was due to both time limitations and the performance limitations of running on the browser’s JavaScript engine (we could probably do it, but given our short timeframe before releasing the Alpha, we chose to go with the “good enough” method you see in the Alpha) since doing continuous collision checking is both harder to code and less performant [yes, I know this is not a word that means fast – but dude, English is a living language] due to all the math.
We’ll probably do something about this down the road sometime after Silverlight 2.0 RTMs, we begin requiring it and can begin using C# (no promises as usual). But in the meantime, I figured I’d post some quick custom code which you can help dealing with this by capping the speed of your actor.
You might think that you can just use the “Max Speed” value in the motion dialog and be done, however there are many cases where this isn’t good enough. While Max Speed does work, it only concerns itself with the current behavior. What Max Speed does under the covers is calculate the amount of acceleration to apply such that the contribution from that behavior will reach terminal velocity at the value you enter. If you have two behaviors, both with a Max Speed of 100, and they both are pushing in the same direction, your max speed will actually be 200. While that example is a little contrived, there are many times, especially in physics based games like Badly Built Wall, that over time, the contribution from various behaviors and collisions will add up to making you go really fast.
How do you overcome this? Why with a custom behavior of course! Adding a custom behavior with the following code should do the trick:
var maxSpeed = 200;
var maxSpeedSquared = maxSpeed * maxSpeed;
var velX = this.GetValue("XVelocity");
var velY = this.GetValue("YVelocity");
var velocity = {X: velX, Y: velY};
var speedSquared = Vector2.MagnitudeSquared(velocity);
if (speedSquared > maxSpeedSquared)
{
var normalizedVelocity = Vector2.Normalize(velocity);
this.SetValue("XVelocity", normalizedVelocity.X * maxSpeed);
this.SetValue("YVelocity", normalizedVelocity.Y * maxSpeed);
}
Add this as a the last behavior to your actor and set its event to Timer->Every Frame. What this code does is check your speed every frame after all your motion behaviors have contributed to it and if it exceeds the value you set for maxSpeed at the top, resets your velocity to point in the same direction as before, but to go only as fast as maxSpeed. You can set maxSpeed to a whatever value you want, and as long as that value is low enough that your actor can’t pass through the thickness of your walls in a single frame, you should avoid any unexpected jumping through walls. [Note: All the *Squared values are used as a programmer’s trick to avoid the square root operation (Math.sqrt) which is fairly costly in terms of processing time.] For even simpler code, check out the following from Badly Built Wall:
var velX = this.GetValue("XVelocity");
var velY = this.GetValue("YVelocity");
if (velX > 201) this.SetValue("XVelocity", 200);
if (velY > 201) this.SetValue("YVelocity", 200);
This code doesn't actually cap the max speed, but rather the velocity in the vertical and horizontal directions. This is subtly different in that it means you could actually end up going 200 in the horizontal and 200 in the vertical directions, which, if we remember our distance formula means we end up going sqrt(200^2 + 200^2) altogether or about 283 pixels / second total. Basically, it means you can go faster in the diagonals than you can just straight up and down or left and right. As you can probably tell it’s quite a bit less complicated (and therefore faster) and even though it’s less general can actually be desirable in games like Badly Built Wall where you are colliding mostly against axis aligned rectangles (their sides are horizontal or vertical rather than at an angle).
Happy creating!
- Mailbag: Even Easier Music
-
Reader Michael Sterling pointed out today (or rather late last night) a neat tool that lets you create music even more easily than with Finale:
For people who want even easier music creation so are willing to give up some of the nuance that Finale offers, they could try JamStudio.com. It's kind of like GarageBand for the mac (I'm sure there's a non-apple analogy), but even a bit simpler. You just choose the instruments you want to use and then assign chords to each measure. They want you to sign up, and there's a little tutorial video that plays when you first start, but you can skip it and don't have to sign up (although you might need to if you want to export the music, I'm not sure)."
I took a look and it indeed looks pretty cool. You can sign up for free, but to export an mp3 of your work requires a $10/month subscription. Might be worth it if you create a bunch of songs, sign up for a month, then export everything at once for your game. After playing with it a bit, it sounds like it’s using samples instead of midi for at least some of the instruments (which sounds a lot better although you lose the retro vibe) and is indeed super easy to use, even if you know little or nothing about music.
- Creating Music for Popfly Game Creator
-
Sound and music is probably one of the most overlooked areas of new hobbyist game developers. Just adding a cheesy soundtrack and cute hopping and squishing noises subtly changes a boring, simple game into one that feels professional and complete. The funny thing is that usually this process is completely subliminal with most people not realizing the difference sound makes. Even great games can be vastly improved through the use of audio as anyone who has completed Portal can tell you.
PGC allows you to upload your own music and sounds as .WMA or .MP3 files to use in your games. You can find a “How To” explaining the process of uploading and playing back audio on the Popfly wiki here. There are many programs which allow you to record audio on your computer from very basic programs (Windows Sound Recorder) to very advanced interface/software packages such as Pro Tools. However, this all assumes you are in possession of musical instruments, recording equipment and are musically capable or willing to invest the time to become so. That’s a lot of commitment for most folks.
While I can’t help you with the becoming musically capable part, I recently dug up a free program called Finale Notepad which I had played around with during my freshman year of college. The full version of Finale is a professional tool for creating music scores on the computer. At least back when I first used it, it was pretty much the standard for creating music notation. The Notepad version probably isn’t full featured enough for that crowd, but it’s great for composing simple songs which can then be exported as MIDI. MIDI is an electronic format which isn’t an actual recording, but rather the instructions to synthesize a piece (what notes to play, what synth instruments to use and when to play them). As such, it’s a great tool for making retro game music, because that’s exactly the kind of music that was used back in the 8 and 16-bit days of Super Nintendo and Genesis. I usually just play around on the staff in the key of C to get what I want, but I believe you can also hook up a keyboard to record the notes. Even if you aren’t musically inclined, you can probably put together some basic tracks by trial and error. Once you’re happy with your piece, just click File->Save As… and change the file type to MIDI.
Since PGC requires files to be of type .WMA or .MP3, you’ll now have to convert the MIDI file. The easiest way I’ve found to do this is to change your recording device to “What You Hear” in the sound settings in control panel. If this option isn’t available (I think some drivers don’t support this option) like on my work machine, an easy workaround is to plug a cable into your headphone jack and back again into the microphone jack on your computer. You may have to play around with the volume settings to get it just right. Once you’ve done this, you can easily use Windows Media Player to playback the MIDI and Windows Sound Recorder to record a WMA file (Vista) or a WAV file (XP) which you can then convert to a WMA or MP3 using a tool like CDex. There might be an easier way to do this – if so, let us know in the comments.
- Editing the appearance of Actors, Scenes etc…
-
One thing you’ll probably notice in our UI is that most of the options for editing the appearance of an item in PGC are grayed out (because we haven’t implemented them yet…). Luckily, all the visual elements in PGC are Silverlight 1.0 XAML and there are free and fairly easy to use tools available that let you tweak away to your hearts content. You can also start from scratch if you’d prefer, creating a new XAML file for use in the PGC. Right now, your best bet for editing the visual appearance of Silverlight XAML is probably the Expression Blend 2.5 March 2008 Preview which is available for free (at least until Expression Blend 2.5 is finished and released) here. There are other tools available such as Visual C# Express 2008, (heck, XAML is text based XML, so even Notepad will work, although if you’re working with anything aside from simple shapes, a graphical editor is probably useful :)), but at the moment my preference is Blend.
The basic idea for editing an actors appearance is to go to the appearance dialog, click “Switch to XAML” and then copy/paste the XAML into Blend. Once in Blend, you can make your tweaks and edits, then paste back the resulting XAML into Popfly. I’ve put together a quick video tutorial of the process, so check it out:
- Popfly Game Creator Alpha Goes Live!
-
Today we went live with the Popfly Game Creator Alpha! What’s the Popfly Game Creator? It’s an online tool for creating web based games similar to the casual games you’ve probably wasted hours playing when you should have been studying/working/eating/sleeping. Well now you can waste hours making them as well! You should be able to make any simple 2D game without too much trouble. The Popfly Game Creator (hereafter referred to as “PGC”) is aimed at anyone who’s advanced enough with computers to write an email, so don’t be scared. You can start off tweaking existing games or create your very own from a blank slate. We’ve created lots of “How To’s” and video introductions to get you started. For an overview and links to more help content, click here.
While I joke about wasting time, even though pretty much anyone can learn how to use PGC in a couple hours, that doesn’t mean your time is wasted! One of the great things about Popfly is that you’re secretly learning to program while using it! Once you get advanced, you’ll probably find there are some things you’d like to do that the built in behaviors don’t allow. That’s where we get you. What you haven’t realized is that now you know a whole bunch of concepts that us programmers use to make computers go. So when you hit this point, just hit the little “Custom Code” button on your behavior screen and your behavior will pop up a little code window with the implementation of the behavior in JavaScript. You can then tweak the JavaScript or replace it entirely. Just hit the preview button to see your results. There are lots of JavaScript tutorials available on the web to help you get started, otherwise you may be able to do what you want just by trial and error using the code you see on screen as a guide. If you really get going, you might want to check out our API documentation.
The PGC is the latest piece of Popfly to go live. Already on the Popfly site (www.popfly.com) is the Popfly Mashup Editor – to which many improvements also went live today – and web page editor. Since it’s Popfly, there are all sorts of ways you can share your games and interact with your friends. Like mashups, Popfly games can be shared as Facebook applications or embedded just about anywhere so you can post your creations in your blog, on your Facebook profile, pretty much anywhere you can embed things. Once you share a game, your friends can tweak it, create their own version and share it back.
We provide you with a gallery of actors, backgrounds effects and sounds to make your games, which you can then tweak, or even create your own. Everything is Silverlight based and we allow you to tweak the XAML, so you can do all sorts of fun things to modify existing actors or create new ones (including animating them!). Since it’s XAML, most actors are vector based and can be resized however you want without getting pixel-y. There are many editors available for working with XAML, including exporters for products like Adobe Illustrator and several free ones. Check out the Expression Blend 2.5 Preview and Visual C# Express 2008 both of which are free (while the Blend preview lasts anyway) and can give you a nice split view showing the XAML below the graphical editor. Note that the current version of VS Express only supports WPF XAML, not Silverlight, but it should mostly work if you’re just tweaking existing XAML.
A huge thanks goes out to DanC from lostgarden.com for some great XAML based artwork which is available in the PGC. Check out his site for a great resource on game design as well as more free game art. More thanks go out to Adam’s wife, “Princess Linz” for her contributions and the Expression team for their contributions as well.
This is our “Alpha” release. What that means is that it’s even earlier than “Beta”! Basically, there are lots of features that aren’t available yet, and you’ll probably run into some bugs. Hopefully not too many :). We’re putting this out for you guys to try to get your feedback, so let us know what you think and what directions you’d like to see us go – that will help us prioritize what to focus on next. As Adam says on his post, we’ve got a lot of ideas and we’re sure you do too!
Edit: Fixed youtube embeds.
PS: Over the next few days I’ll be posting some advanced PGC tips and tricks, so stay tuned…
- Introduction
-
Hi, I’m Ben Anderson, a developer on the Microsoft Non-Professional Tools team. I recently joined the team to work on the newly released Popfly Game Creator. Prior to that I worked on the Visual C++ team and before that, I went to Carleton College. If you want to learn more about me, you can check out my old college site (I no longer have access to the site and I’m not sure if it will be up forever, so don’t be surprised if it disappears, or they give some other student my old username and it gets replaced), my blog posts on VCBlog, or some of the research papers I worked on.
I’ll be posting here to share into, tips and tricks for using the Popfly Game Creator. Stay tuned for more info on PGC!
