Code & Resources | Bacon and Games

Category: Code & Resources (page 2 of 2)

Quickly Demo MovieClips with the MCStepper Class

Some of the goals I have for this site include demystifying Actionscript for the artists out there who are struggling to learn it. Most of the tutorials out there are aimed at programmers and don’t speak to artists, many of whom have learned just enough to get by and don’t understand the concepts of classes, events, instances, scope and other programming wizardry.

With respect to building games, it’s also a goal of mine to help artists and programmers work together more easily. One way to do this is to help give artists a better understanding of how programmers use their art and animation. Understanding the context of the work you’re doing is key to collaborating with someone who is doing the other half of your work. Another way to help programmers and artists work more efficiently is to create tools to aid the development process, which is what I’ll be doing in this article.

Artists often need to demo character designs and other layouts or animations through the course of a project. I’ve seen them struggle to build PowerPoint-esque demos so others can review their work, usually by copying and pasting next and back buttons from a previous project. Hardcoding, typos and other needless errors can steal valuable time while the artist tries to figure out why their next and back buttons aren’t behaving as they expected. There must be an easier way ;)

I’ve built a very simple MCStepper class that will allow you to create demos of a movieClips very quickly. Simply create an instance of the class then pass it the instance name of a movieClip. Next and back buttons will be automatically generated for you. The user can then flip through the frames of the movieClip. One line of code and you can easily demo your character designs and animations. Here’s a few examples of what it looks like.

This movie requires Flash Player 9

The class is meant to be a quick utility for demonstrating work, though there are a few “features”

Buttons are automatically generated for you. However you can choose to have them displayed above, beside or below your movieClip.
You can change the color of the buttons so that they stand out against the background of your movie.
A frame counter will be auto-generated as well, so the user knows how many frames are in your movieClip. This textField will be hidden if there isn’t enough room between the buttons or if you opt to have them beside your movieClip, rather than above or below it.
If you define frame labels, they will be displayed as tooltip rollovers when the user hovers over the movieClip. This feature was included as a quick and dirty way to add basic info like “hero #1” or “main boss” to your demo, for reference purposes. Be aware that these can run off the right of your movie…

Besides the insert statement to include the class, you only need one line of code to create each of the above examples.

// create blue buttons above the movieClip "dude0"
var stepper0:MCStepper = new MCStepper(dude0,"top",0x255396);
// create red buttons on either side of movieClip "dude1"
var stepper1:MCStepper = new MCStepper(dude1,"sides",0xff0000);
// create default buttons for movieClip "dude2", below and black
var stepper2:MCStepper = new MCStepper(dude2);
// to change the color of the button but keep them below the movieClip,
// use "below" as the second argument
// besides omitting frame labels, you can suppress the tooltip by
// setting the showLabels to false. ex: stepper1.showLabels = false;

As I intend to do with all my Actionscript for Artists articles, I will include 2 sample implementations. The first a pure actionscript example, showing the way a programmer would likely use this class. The second is an approach that an artist, more likely to do most of the setup in the Flash IDE, would be more comfortable.

For Programmers: Download the pure actionscript demo and files here.
For Artists: Download the “artists” demo and files here. – you will want to put the baconandgames folder in the same folder as your fla

Note: These sample files are in CS4. The MCStepper class will work with older versions but will throw a reference error if published for Flash Player 9 or earlier due to ghd MCStepper’s use of the currentFrameLabel property.

I encourage artists to spend some time with both implementations and see if they can make sense of the pure actionscript approach. Here’s a tip to get you started. The Document class, in this case Main.as (defined in the Property Inspector), is run immediately after the swf loads, as if it was code written on frame 1 of the main timeline. If you can understand that, the implementation is the same as the timeline version. You just have to sort out what’s setup (attaching and positioning visual assets) and what part handles the MCStepper functionality.

Whether you take the pure actionscript approach, using external .as files or follow the IDE-reliant timeline approach, I hope people will find this class useful in future collaborations. If you have questions or find bugs, please leave comments and I will follow up. Fun Fact: The art in this demo is from a little side project I’m working on with some friends, so stay tuned :)

Learn How to Make Flash Games

29.04.2010 / Sean James McKenzie / 1 Comment

If you’re looking to learn how to make a Flash game, Adam ‘Atomic’ Saltsman and Chevy Ray Johnston are coming to your rescue. They’ve recently launched a joint venture, Flash Game Dojo, which is a site dedicated to helping ease people into the world of creating Flash games. Their site aims to answer questions like “How do I add gravity to an object?”, “How do I get keyboard input?” and “Who shot Mr. Burns?”. OK, I made that last one up, plus we all know that it was Maggie. Anyway… Granted the information they’re providing is specific to using their respective frameworks, but a lot of the key concepts and programming models you’ll learn working with Flixel and FlashPunk are still relevant when building a game completely from scratch. And they’re open source frameworks, so if you’re uncomfortable using formulas without deriving them first (remember high school math?), you can open up the guts and see what’s going on under the hood of something as eerily simple as this:

1
2
3

// adding gravity to the player
var player:FlxSprite = new FlxSprite();
player.acceleration.y = 600;

What’s really neat about what Adam and Chevy are doing is that they’re aiming to usher people into the world of creating games. They’re NOT trying to push their respective frameworks, which as products in a marketplace would be competitors. Instead they’ve chosen to offer their work up as free open source options, a space in which they can support each other rather than compete. They’re working together toward a common goal: Get people making great games. I applaud them for that.

I have an upcoming series of articles entitled “Actionscript for Artists” which will focus on providing tools to help artists and programmers work more easily together to make games. It’ll be a mix of code samples, tutorials aimed at teaching artists the basics of Actionscript and tips on how to communicate and collaborate. I come from a more traditional Flash gaming background that uses vector art, movieClips and other techniques more native to Flash, so my focus will be on that style of Flash game development. Flixel and FlashPunk are Flash frameworks that turn Flash into an environment similar to the way old NES games were built, using sprite sheets and raster images. Though our approaches to Flash game development are different, we’re all trying to do the same thing: get people making great games. And besides, variety is a good thing. I’ve only dabbled in Flixel and though it’s a very foreign approach for me (I’m used to building everything on my own, so adhering to a framework is tough for me to get used to) I intend to learn Flixel and FlashPunk. I don’t think I’ll ever abandon the way I’ve always made Flash games, but I do like to try new things, evolve and add new things to my bag of tricks.

Flash Dojo offers a bunch of handy services:

A wiki with documentation on both frameworks
Q&A style explanations for how to build common game elements
Free swf hosting for people who want to quickly test and share a game… likely to be used by people who want to share a work in progress that isn’t ready to go on Newgrounds. You upload a swf and the site gives you a link to share it. It’s that simple. I’ve got webspace coming out of my ears but this is so simple I will undoubtedly use it from time to tim.
Articles about game design
Software recommendations
Tutorials
Completed game source for your learning/tinkering pleasure
And the bulk of their site’s updates are broadcast via RSS so you can stay abreast of what’s new

If you’re interested in game design I strongly recommend you comb through Flash Game Dojo. Spend some time playing with their frameworks, see what they can do and how they work. But remember that Adam and Chevy don’t have all the answers and they haven’t thought of everything. They will be the first to tell you that their framworks aren’t the ways to build games, they’re just two ways to build games. Learn from what they’ve done, add your own flair and if you think you have found a better way to do something you may well have. I’m sure Adam and Chevy are interested in being the starting point from which people can learn how to make games. What they’re probably NOT interested in is creating a legion of game designers who rely so heavily on Flixel or FlashPunk that the frameworks speak louder than the game experiences created with them. The idea is for people to play your game and remark, “That’s a great game!”, rather than “That’s a great Flixel game!”.

Create. Learn. Play. Question. Invent. Share.

Adam is known for games such as Gravity Hook and Canabalt which he built using the Flixel Framework, for which he is also responsible. Chevy Ray Johnston is behind Flash Punk, another Flash game framework. Both frameworks are designed to handle a lot of the heavy lifting, collision detections, ui, asset management, etc., so that you can focus on game design.

Calculating the Distance from a Point to a Line in AS3

04.03.2010 / Sean James McKenzie / 9 Comments

I recently made a game for a client that involved a giant sweeping laser of doom (the game had the laser, not the client). Sounds cool, right? Not if the laser happened to touch you while you were busy blowing up robots. Sound even cooler now that you know there were robots? It was. But that’s not what I want to talk about today. What I’d like to cover is the slightly more exciting topic of how to calculate the distance between a point and a line.

I won’t go into the math behind it, not because it’s complicated but because it’s just not that interesting or important to understand. I’ll just give you the code and then talk a little bit about why it might be useful in a game. If you really want to know how the math works, leave a comment or email me and I’ll do a follow up. For now, here’s a simple visualization (download source here):

This movie requires Flash Player 9

Once again I’ve built on a handy function written by Keith Hair that finds the point of intersection between two lines. Using his lineIntersectLine() function and my getDistanceFromLine() function you can calculate the distance between a point and a line very easily.

Why is this useful? I wrote it so that I could determine if the doom laser had overtaken my hero. Since the laser was represented in my code by two points (a line) and I knew the location of the hero (a point) all I had to do was calculate the hero’s proximity to that line. When the hero’s proximity was less than a certain distance >> kill hero. And because this calculation was done mathematically rather than being tied to a hitTestObject() based on the laser’s movieClip¹, adjusting the laser’s killzone was as simple as changing one variable.

Here’s another example of how this information might be useful in a game. Suppose your game has a laser cannon which fires in a straight line, as opposed to the sweeping radar motion in my prior example. If you know each enemy’s proximity to the laser you can apply varying damage and effects to each enemy based on that information.

There are plenty of ways you could use this in a game, but I’ll leave that up to your creativity. You can download the source files for the above demo here. Oh and as is often the case with art in or around my site, the bad-ass laser and art in the screen grab above was done by my partner in crime, Ajay Karat of The Devil’s Garage. He and I are working on some games (not for clients) so expect to see some stuff from us in 2010.

When designing your games you’ll want to keep your visual assets separate from your calculations. Let your calculations dictate what needs to be displayed, not the other way around. Tying calculations to visual assets is usually, if not always, inefficient and inflexible. ↩

Intersection of an Ellipse and a Line in AS3

22.02.2010 / Sean James McKenzie / 17 Comments

A few months back I was working on a game for which I needed to be able to calculate the points of intersection between a line and an ellipse. I wanted enemies and the hero to be able to collide with and avoid an elliptical obstruction in the middle of the game. I also wanted to be able to calculate whether enemies had a line-of-sight to their targets, given this elliptical obstruction. I did some searching to see if anyone had written a class to handle this. Keith Hair wrote a very nice class that does this with a circle. Aaron Clinger and Mike Creighton wrote a a very nice Ellipse class, but it didn’t deal with ellipse-line intersections, only ellipse-point intersection and general ellipse calculations such as area and circumference. Both of these are great finds, but neither of them did what I was looking for.

Since I couldn’t find what I was looking for I decided I would write it myself and since Aaron and Mike’s Ellipse class had so many useful features I though I’d have my class extend theirs. Here is a demo of my EllipseExt class which has all the bells and whistles of Aaron and Mikes Ellipse class plus some intersection calculation methods added:

This movie requires Flash Player 9

You will notice that by dragging one of the nodes inside the ellipse you lose a point of intersection. However if you switch on the “extend line indefinitely” option the nodes will no longer act as start->end points but rather 2 points that define an infinite line. This is a feature I found helpful for game programming, so I decided to build it in as an optional argument of the getIntersections() method. There is another optional argument that came out thinking about game logic; the sort option. With sort set to true, the getIntersections() method will sort the points by proximity to the first node used to define the line (i.e. the first required argument). This can be very helpful if one of the line’s nodes is a hero or enemy approaching the ellipse and you need to know which of the returned points represents the potential point of impact.

Examples:

// generic form
public function getIntersections(p1:Point,p2:Point,extend:Boolean=false,sort:Boolean=false):Array
 
// define points that make up our line
var A = new Point(mouseX,mouseY);
var B = new Point(0,0);
// create an ellipse 200x100 at (50,50)
var ellipse:EllipseExt(50,50,200,100);
 
// Example 1:
// find intersections of line AB and ellipse BETWEEN points A and B
var ar:Array = ellipse.getIntersections(A,B);
 
// Example 2:
// find intersections of line AB and ellipse DEFINED BY points A and B
var ar:Array = ellipse.getIntersections(A,B,true);
 
// Example 3:
// find intersections of line AB and ellipse BETWEEN points A and B
// ar[0] will contain the point of intersection that is closest to point A
var ar:Array = ellipse.getIntersections(A,B,false,true);

There are a few other available methods, which I’ll refer to as shortcut methods because each of these can be achieved through the getIntersections method. However, these 4 methods either handle some of the logic you’d otherwise need to build around the getIntersections() method OR they’re acceptably lighter options depending on what you need to know about the line and the ellipse interaction. These are commented further in the EllipseExt class itself, but here’s a preview:

// simply determines if there is an intersection point at all (line-of-sight)
checkForIntersection(p1:Point,p2:Point):Boolean
// returns the point of intersection between the center of the ellipse and pt
getPointCenterIntersection(pt:Point):Point
// returns points of intersection on the ellipse at the given y coordinate
getInersectionsFromY(y:Number):Array
// returns points of intersection on the ellipse at the given x coordinate
getInersectionsFromX(x:Number):Array

The classes and source code for the above demo can be downloaded here.

I’d like to add some additional methods to this class, specifically for calculating tangent lines/points, which would be useful for pathfinding routes around an ellipse. But I figured that this was far along enough that it was worth sharing. If you have questions or find a bug, please feel free to contact me and I’ll be happy to do what I can to help. I hope you’ll find this useful. Enjoy!

Additional stuff on ellipses for those who need to brush up:
Ellipse Equation Visualizer
Ellipse-Line Intersection
Quadratic Equation

Bacon and Games

Category: Code & Resources (page 2 of 2)

Quickly Demo MovieClips with the MCStepper Class

Learn How to Make Flash Games

Calculating the Distance from a Point to a Line in AS3

Intersection of an Ellipse and a Line in AS3

Sean James McKenzie

Categories

The Usual Footer Stuff