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!

Rainbow Rain

Large version.

I'm not really sure what's up with this one. I've been a little dry in the creative area lately, so I wanted to just make SOMETHING...so, enjoy Rainbow Rain!

On a side note, my homepage is now up and running! Let me know what you think.

Hooray!

Large version here.

And if you're interested, here's the project in AIR form.

Why is this post entitled "Hooray!"? Well, because every little box that goes across your screen is a potential party! Click at the right time to smash through the colored boxes. Now, you may notice your confetti enlarges based on how many boxes you take out in one swipe - more smashes at once equals more party!

So...enjoy this! It's been sitting around my drive for a while in one form or another.

Menu 2 - A little more useful!

Here's the second menu in large form.

This might have a little more purpose. Imagine a contractor wants to offer his or her services, but wants to give potential clients an estimate on the type of work he or she does. Bingo! Done! This would also be useful for just about any shop that sells a variety of items...or any site that wants to show options of any sort, for that matter. Heck, a character artist could show off their creations in a gallery format!

Oh, and it's fairly dynamic - if you want to add another item, it's about a 30-second process (not counting whatever content you add to the panel at right). Yay expandability!

Menus! Menus! God, how I love menus!

Large version here.

Here is the first of two little menus I whipped up. I realized that this "does nothing" stuff is a lot of fun, but creating something that serves a purpose has its place, too! And so, here you go...

This one is a hypothetical color preview panel. It's not completely useful, but it would have its applications, I suppose. It needs just a few little extras to make it really useful. It wouldn't be a huge stretch to calculate the complementary color for the selected tile to show a little color palette. Anyway, enjoy!

If you didn't figure it out, you can roll over the colors to see them in the large panel. Click the "More" button to slide in a random assortment of new colors!