Remember Populous?

Large.

Man, Populous was fun...

Anywho, what we have here is a fun little world-building tool in an isometric view. Simply grab your parcel of land, and drag up and down to bring it up or down. While that panel is highlighted, use keys 1-8 on your keyboard to swap out different types of land.

The wonderful thing about this, is how easy it is to change. I went with a Green Hill Zone from Sonic the Hedgehog for the design...because...well, it lent itself to it, I guess. Or maybe Sonic 3D Blast really got wedged deep into my brain.

Anyway, changing. If you want more land types, it's easy! I just need to draw it in an isometric view. No programming changes or anything. We could even adapt the programming to use multiple tilesets (say we allow the number keys to now change the FAMILY of tile, and repeated presses will cycle through different panels of that family).

So, have fun. Build things!

Glowy Things

Large version.

Here's another "gotta make something" post. I'm actually pretty happy with the ethereal feel of it. Sort of ghostly, but not necessarily spooky. There are two elements at play here.

1). Glow Filter. I talked about filters in the last post. This is just adding a glow filter via actionscript. I'm adjusting the strength of the glow with the second important element of this .swf.

2). We're using TRIGONOMETRY again! Now, there are several ways to get the pulsing glow effect, but I thought about it...and...the sine wave came to my aid! If you're familiar with the sine wave, you know that it oscillates from a crest to a trough and continues this (think of a REALLY sloppy sideways "S" - that's pretty much a sine wave). Each of these full runs is called a period. So we have a curve that goes from n to 0 to -n and back to 0. Handy for a repetitive movement! I'm essentially feeding sin an increasing number (representing the x axis - in other words, we're moving RIGHT along the wave) and it's spitting back a stream of numbers that go uuuuuuup and back doooooooown and back uuuuuuup until we all vomit, we're so dang full of numbers! Er. Or something. So our glow strength is going from 10 to -10 and back again. Since a negative strength on a glow makes the glow invisible...well...we don't see it.

OH, almost forgot two little things. The spat out number (the ups and downs) are amplified by 10 to get a strong glow effect. We're upping the amplitude of the sine wave! Joy of joys! The other little thing...when the glow is negative, I'm having some fun making the origin points of the glows jump around randomly in the dark. Creepy little buggers!

NOTE: One last thing, I swear. As each origin point is created, it also randomizes the QUALITY of the glow. That's why you sometimes see nice round glows, and other times you'll see more squared off glows. In this case, I wouldn't say there's a difference in quality. Just different effects.

Playing with Light

Large.

You probably know how nifty Flash's built-in filters are. Dropshadows, glows, bevels, oh my! BUT, rather than activating these filters with the properties panel in Flash, why not take a peek under the hood and tweak them?

That's exactly what's going on up there. You see, each of those above green shapes is constantly redrawing its shadow relative to the yellow light source. It's actually a pretty easy technique to use, and it's a handy tool for faking light sources in your games and animations.

To actually use a filter in Flash, you'll first need to import it (import flash.filters.* where * is a wildcard OR the name of the specific filter you want). From there, you can just set up a var placeholder for the filter. Something like:

var myFilter;

Then we'll set that "myFilter" to a the filter we want. So...

myFilter = new DropShadowFilter(1,45,0,1,4,4,1,1,false,false,false);

What's up with all those numbers after the DropShadowFilter? Well, those are what we call arguments, and those are the specific parameters of the dropshadow. Flash has a nice built-in assistance tool that will fill you in on what each is. The ones I specifically messed with for the above .swf are the first two (1 and 45, the distance of the shadow and angle of the shadow, respectively).

Now at this point, it's important to note that the myFilter = new DropShadowFilter line is in the ENTER_FRAME of my movie clip - things will be changing, and I want to check for those changes every frame.

Let's take a look at MY version of the above line...
myFilter = new DropShadowFilter(distance*.05,newAngle,0,1,4,4,1,1,false,false,false);

The difference, of course, are the first two values. Those don't mean much without the backing code, so...
diffX = x - LightSource.main.newLight.x;
diffY = y - LightSource.main.newLight.y;
var distance = Math.sqrt(diffX * diffX + diffY * diffY);
newAngle = Math.atan2(diffY,diffX) * 180 / Math.PI;


What's going on? Well, we're first figuring the distance between the green object and the light source (subtract the light source's position from the green object's position for both axes). With our good buddy Pythagoras, we know the distance between two points is equal to the square root of the difference on each axis squared. Uh...C = the square root of A^2+B^2. Trust me. 


So there's the distance of the dropshadow! Note that I multiplied it by .05. That's because I wanted to keep the shadow from getting too crazy long. 


Now the meat - the ANGLE - of the dropshadow. The line starting with newAngle is where the magic happens. Using some trigonometric witchcraft known as the arctangent, Flash can calculate the angle between two objects. We just need the difference in positions (already got that, remember? diffX and diffY). And since Flash sees fit to deal with trig in radians, but rotation in DEGREES, we need to convert it. Easily done. Just multiply by 180/pi. Huzzah! Trig!