Bacon and Games

Category: Code & Resources (page 1 of 2)

Simple AS3 Debug Window

Sometimes when you’re chasing down a bug, the quick and dirty ‘caveman debugging’ approach is easier than using an actual debugger with breakpoints and ‘all that happiness’ (as my father says). The trace() function is great for this, but if want to view flash traces in a web-browser you have to deal with the debug player and Flash-tracer setup. And if you want to get input from someone who doesn’t have those tools you’re out of luck.

The other day I found myself in the above situation and so I wrote up a very lightweight and VERY basic class called DebugWindow. It recreates the trace() functionality within your swf, by adding a “debug window” to the display list. To use it, just call its output() method instead of using trace()

This movie requires Flash Player 9

As you can see from the demo, you can use SHIFT + SPACE to hide/show the debug window. CTRL + UP/DOWN allows you to scroll to view older text. There are a few other helper functions that allow you to clear the window entirely or clear then output in one call. You can also set window size, text, background and border colors in the constructor. It’s all commented in the class.

If you’re not done with your project and still wish to use the debug window but don’t want users seeing it, set the enabled property to false. This will remove all event listeners, hide the window and block any output calls. It’s still recommended you remove all debug code from your project when finalized.

I considered adding features like a scroll bar, line numbers and some other stuff but at the end of the day this is just meant to be a light and dirty way to get some data out of your swf no matter where it’s running, test mode, browser, iPad… whatever.

Here’s the AS3 DebugWindow Class

Oh and in case you’re wondering, I grabbed the bacon facts and Nintendo facts from these two sites… much more interesting than using Math.random()*5000 :P

Bfxr Builds on Sfxr, Adds Mixer and More

Back in February I wrote about as3sfxr-b, a free sound effect generator written in AS3. Increpare, the editor’s author, has recently updated to a version dubbed Bfxr, which extends the already fantastic AS3-based sfx generator.

Bfxr Screenshot Mixer

The biggest addition in this version is the inclusion of a mixer. That’s right, you can now create sfx with this editor and then mix several tracks together to create a much more complex, layered sfx. You don’t even have to leave the browser. All these years I’ve been using audio editing tools like a sucker. OK, ok… you can’t completely abandon your audio tools, but it is an extremely handy feature.

He’s also added some additional waveforms, filters and some other fun features. But your head is still spinning from the news about the mixer, I know. So I’ll give you a moment.

Good?

Go check out Bfxr now.

Free SFX Generator for Games: as3sfxr-b

A while back I wrote about the as3sfxr made by Tom Vian of the Super Flash Brothers. If you’re unfamiliar with as3sfxr, it’s a sound synthesizer made in Flash that you can use to create old NES and SNES style sfx for your games…FREE!

Version B, by Increpare, is built on top of Tom’s version and brings a few more features to the table, including more precise sliders, a few extra settings, 2 additional preset waveforms and a playlist of previously configured sounds. You can also generate urls for specific sounds, which can be handy if you’re collaborating with a friend and want to share sound design without having to send files back and forth. It’s not a major overhaul but the improvements are certainly welcome.

You can check out as3sfxr-b here or download the AIR version here.

Free Sound Effects Generator for Games

Some time ago, the Super Flash Bros. ported a sound effects generator called sfxr to Actionscript 3.0. The original was written by Tomas Pettersson and can be found on a few different platforms. AS3sfxr, as they call their port, gives you the ability to create old school sound effects right in your browser. The sfx can be exported as .wav files at 8 or 16 bit and 22 or 44 HZ. And if you find your mind so blown that you have to take a break mid-creation, you can save your work and reload it later to pick up where you left off.

The beauty of this sfx generator is that if you’re not sure what you’re looking for, it can randomly generate sfx for you. If you have a general sense but don’t know where to start, it can randomly generate sounds from a few preset ranges; pickup/coin, laser shoot, explosion, powerup, hit/hurt, jump and blip/select. I usually find that if I’m looking for a particular sound I can click one of these to find something close and then play with any of the 22 sliders to create exactly what I’m looking for. Perhaps the most unique and helpful feature is that the app keeps a history of the sfx you’ve created, much like a browser tracking the pages you’ve been through. You can create a whole bunch of sounds and then walk back and forward through your work to select the most fitting sound.

This isn’t a scoop by any stretch of the means, admittedly I’ve been using as3sfxr consistently for almost 9 months now. However, my suspicion is that many game developers don’t know about this gem. It’s free, there’s no royalty issues, it’s always at your fingertips and perhaps its most endearing quality, it can with little effort give your game a custom-tailored voice of its own.

If you’re looking to make a game with that classic NES sound, look no farther than as3sfxr.

How to Simplify Programming Challenges

I recently had a young programmer named Jack (that’s not his butt to the right) ask me for help with a game he’s been working on. I don’t want to give away too much about his unreleased game, but for the sake of discussion I have to at least tell you that it involves a big ass rock that goes around smashing the crap out of different shit. (and 2 sentences in I’ve hit my butt reference limit for this article)

The version he shared with me was pretty far along but he was stuck on one particular detail; getting the rock’s tail to point in the proper direction. Essentially he wanted the tail to point away from the direction the rock was moving, similar to the tail a roll of toilet paper might draw when thrown through the air.

This is a fairly common challenge in game programming and I, like many other game programmers, have done this in the past. I have code that I would have happily handed over to him, but after speaking to him we decided it would be more valuable for me to push him in the right direction rather than just take his FLA and fill in the blanks. I’ll spare you the Chinese proverb about teaching a man to fish..

On Problem Solving
Whether you’re programming super complicated banking software or just making a simple number guessing game, the process is the same.

  1. What do you need to do? Define the challenge.
  2. What do you know? Assess the tools and info you have at your disposal.
  3. Do you have all the pieces? Figure out if what you have can be used to solve the problem.
  4. If yes: Create a plan for using what you have in order to solve the problem.
  5. If no: Break the problem into smaller challenges and return to step 1

This is of course a grotesquely generalized version of problem solving. But what’s important to note is that by asking the right questions you can distill ANY problem into simpler more manageable parts. No matter how complex, the solution to all programming challenges (and most real life ones too!) is simply the sum of smaller problems solved in the right order.

Asking the Right Questions
Let’s take a look at Jack’s problem and how we might break it down into a solution.

1. What do you need to do?
We need to rotate the rock so that it’s “facing” the direction it’s moving.

This is a “plain English” definition of the problem, which is the best place to start, but before we can continue we’ll need to convert the definition of our problem into something we can quantify.

Since movieClips have a rotation (_rotation in AS2) property, it’s likely that we’re going to need to use this to point the clip in the right direction. We know that the rotation property accepts degrees, so we’re probably looking for an angle.

The real answer to Question #1 is:
“We need to figure out the angle at which the rock is moving.”

2. What do you know?
In this step you’ll want to keep the answer to Question #1 in mind, but it’s perfectly fine to be liberal about listing the things you know. You can sort out the relevant data from the irrelevant later, but you never know what piece of information might spark an idea so to start it’s a good idea to list whatever comes to mind. (be creative!)

  • Since the rock is a movieClip we have access to all of its properties; rotation, x, y, etc. These 3 are the most likely to be useful, but remember movieClips have all sorts of properties.
  • It’s moving so we probably know its speed in the x and y directions
  • Our rock might be in an environment with some rules, such as gravity, windspeed and friction. It’s our world, so we’d know all these things too.
  • We also probably know who shot Mr. Burns. Who doesn’t? But I can’t imagine that’s going to do us any good.

3. Do you have all the pieces?
Now that we’ve listed the stuff we know, we have to sift through it for something that might help us calculate an angle.

If we can define a line, we can calculate an angle. Well, a line is defined by two points so let’s look at what we collected in Question #2 and see if we can come up with two points; two points that define the path of our rock.

We have the current location of the rock, via the x and y properties of the movieClip, which would be the end point of our line. We need the starting point to complete the line, which we don’t have in our list.

This means that the answer to Question #3 is “No”. We have to put this part of the problem on hold for now and refine our problem into a more specific question:

Where can we get the starting point so that we can draw a line?

Luckily for us this is an extremely simple problem. On every frame we’re going to be updating the position of the rock. So all we have to do is store the current position of the rock before we move to the next frame. (I recommend a variable called lastPosition)

If we do that, we can add lastPosition to the list of things we know, which gives us two points. We’ve got our line! This means we can calculate an angle, which means we can figure out what angle we need in order to point the rock in the right direction. We’re almost done!

The next thing we need to do is write a function into which we can pass our starting and ending points that will give us an angle in return. Since this isn’t a math lesson, it’s a lesson about learning to fish (OK I lied about the proverb), I’ll just write the function for you. They’re adapted from one of my favorite books, Keith Peters’ Foundation Actionscript 3.0 Animation: Making Things Move! (I’m also a big fan of this book) Both are fantastic resources for math, physics and other common game programming stuff.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// AS2
function getAngle(startX,startY,endX,endY):Number{
	var dx:Number = endX - startX;
	var dy:Number = endY - startY;
	var radians:Number = Math.atan2(dy,dx);
	return radians*180/Math.PI;
}
 
// AS3 
function getAngle(st:Point,end:Point):Number{
	var dx:Number = end.x-st.x;
	var dy:Number = end.y-st.y;
	var radians:Number = Math.atan2(dy,dx);
	return radians*180/Math.PI;
}

The last thing for us to consider is how to setup the rock clip. If we set it up so it’s facing to the right in its default position [rotation=0], the angle we get back from our function will point the rock in the correct direction.

There you have it, a seemingly complex problem broken down into a few manageable parts.

This problem was small, but the process is applicable to a project of any size and challenges of any complexity. The key is accurately defining the things you need to achieve. From there you can survey what you have at your disposal and see if what you have can be used to get what you need. If you can’t, you need to define more specific questions until you have all the tools and info you need to finish the job. It’s just that simple.

Now go, build the next Farmville or twitter or Google Wave, you know…something really useful. Oh, one more thing, bedonkedonk… I lied about the butt thing too ;)

Thanks to Ajay Karat for lending me his rock and fire art for the trajectory sample above.

Olderposts

Copyright © 2017 Bacon and Games

Theme by Anders NorenUp ↑