Cold Constructs

MP Bar system

Corey — Mon, 18 May 2009 08:02:55 +0000

This is my most polished module and one that I’m most proud of. It’s a stupid fun module that, when you attach the behavior to an object, will allow users to browse a bar menu full of various drinks whenever they click on the object. It adds an icon of the drink the user selected to their nametag. The icon “drains” over time and eventually goes empty, at which point you should grab another.

Each drink adds a certain amount of “drunkeness points” for every sip (you can tell how many sips you have by the icon on your nametag) to your avatar and over time your avatar will show signs of intoxication, such as bubbles above their heads and the propensity to fall down randomly. You avatar has a drink tolerance that’s determined by your MP level and how many drinks you’ve had in a session.

As of this writing there’s only 4 types of beers to choose from. In the future I’ll be adding a lot more, and not just beer but wines and spirits too. Good stuff.

If you have any other ideas for what drunk effects I should add, let me know. (Note that I can’t touch the avatar graphics so I can’t add new animations. I also can’t currently blur the screen because that would kill performance and it can get annoying.)

Module page. Search the marketplace for “bar system” or my username, “vonwolfehaus”.
Price: 1700 coins.
Configurable options: x and y position that the bar menu appears at when opened

MP Timeout chair

Corey — Sun, 17 May 2009 07:52:50 +0000

With the opening of Metaplace to the masses, I can finally show off a couple of the projects I’ve built for the platform.

I’m not sure why I made this module but I did. If user sit in a piece of furniture with this behavior attached to it, they’ll be giving a dunce cap with the word “FAIL” on it. They’ll also be scorned by a message from the world owner. If the user tries to leave the chair before their time is up (time is also configurable) they will be kicked from the world.

Module page.
Price: 30 coins.
Configurable variables: timeout length, timeout message (title too), x and y position of the hat.

Labs: Pixel transition

Corey — Wed, 01 Apr 2009 20:35:18 +0000

What I wanted was a fast, seamless way to transition from clickable thumbnail on a zui canvas while dynamically loading the content of whatever the thumbnail represented. I just loved the idea of loading content while zooming into a thumbnail without loading a higher-res image to take its place, then having the pixelated thumbnail disinigrate to reveal the actual content that got loaded during the transition. Anyway, it was the best idea that I could come up with for my application, so here we are.

I started by converting the thumbnail to a Vector array of Bitmaps. I planned on using TweenLite to shuffle each bitmapped pixel off the screen, and hoped I could do some fancy stuff with the Bitmaps like scale them for interesting effects. I did this by dumping the uint values of the bitmap into a ByteArray using getPixels(), then creating a new Bitmap for each value in the ByteArray using readUnsighnedInt() in a while loop. Each new Bitmap (representing a pixel of the original image) was added to that Vector array I mentioned:

var pixels:ByteArray = srcBMD.getPixels(srcBMD.rect);


	pixels.position = 0; // make sure we start reading from the beginning


	var newx:int = src.x;


	var newy:int = src.y;



	while (pixels.bytesAvailable) {


		  var splodeParticle:Bitmap = new Bitmap(new BitmapData(1, 1, false, pixels.readUnsignedInt()), PixelSnapping.ALWAYS);


		  splodeParticle.x = newx;


		  splodeParticle.y = newy;


		  ++newx;


		  if (newx > src.x + src.width) {


			    ++newy;


			    newx = src.x;


		  }


		  container.addChild(splodeParticle);


		  pixArray.push(splodeParticle);		


	}

I’d then loop through each item in the Vector to tween them off stage, revealing the loaded content below them.

Turns out this was a pretty dumb idea.

The performance was extraordinarily sluggish during the while and for loops (naturally) and I wasn’t able to get a smooth tween because of this. Also, the ByteArray did not recreate the original image correctly — it came out rather distorted:

I’m still not sure why, as this is my first time dealing with the ByteArray class, but I figured I’d cut my losses and try a different approach.

Since I was getting great results with blitting in other experiments, I figured I should try holding a Vector array of Points that represented the pixels I wanted to move around. The actual “moving” simply ran setPixel() on a Bitmap for each Point in the array after I ran some translation calculations to get shit moving all nice-like. Points have a lot of extra baggage that I didn’t want though, so I just used a custom class that simply stored some dimensional variables and called it good.

I based my classes off of Andre Michelle’s Bitmap Particle experiment — he knows more math than I ever will and came up with a fucking brilliant effect there that I can only dream of achieving, so mad props to that bloke.

Anyway, as you can see this worked out pretty damn well. I could spend a whole week on this experiment, playing with the variables (especially the ignite var) to get different transitional effects, as well as adding more filters… but I’ll just leave this basic example for you to play with. Just be sure to show me anything particularly cool you come up with!

BitmapText class

Corey — Thu, 05 Mar 2009 21:32:44 +0000

A new section is up on the projects page where I put classes I’ve written that I think might be useful to others. People seemed to like my post on bitmap text so I released the class I use to do the boring work for me.

public function BitmapText(nWidth:int, nHeight:int, multiline:Boolean = true, fontFormat:TextFormat = null, avgPointSize:Number = 12, pad:int = 0)

Usage:

// Optional format

var format:TextFormat = new TextFormat();

format.font = "Verdana";

format.size = 10;



var bmt:BitmapText = new BitmapText(300, 500, true, format, 12, 100); // only width and height are required

bmt.addText("This is html text, which can't be mixed with regular text.", true); // set last param to false for regular text

this.addChild(bmt.render());

More instructions/explanations are in the class itself.

Development notes

Corey — Wed, 04 Mar 2009 08:38:23 +0000

NOTE: I’ve since deleted this page because it was redundant — all notes and details of my projects are included in the posts themselves, not a a separate page. Not sure why I thought this was a good idea in the first place.

I wrote ~~a new page~~ — available in the sidebar under the aptly-titled “Pages” heading — where you can access my explanations for projects I’ve done.

They detail what techniques I’ve used and why; why I went this route instead of that; where I got my inspiration from, if any, and so on.

First up is my first Labs release (actual Labs subsite coming soon), which you can view below this post. You can actually figure it out if you read the source, but who has the time for that, honestly? Sometimes I just want to know the method someone used and work out the details on my own, so here I am trying to provide that service to you. Hope you dig!

Labs: Pixel particle trails

Corey — Wed, 04 Mar 2009 04:13:46 +0000

I’ve been messing around with particles, particularly the blitted, traily kind I guess. Click on the image below to pop and watch it. Grab the source at the bottom and let me know if you do something cool with it.

The particle trails you see are actually all on one bitmap that I draw to after updating each particle in sequence, per frame tick. The particles themselves are a simple class that keeps track of a few variables such as velocity and position. The class doesn’t extend anything, instead the Main class of the swf draws a line from where the particle was in the previous frame to where it is in the current frame.

To make them fade over time I simply did a colorTransform on the whole bitmap at the begining of the tick method. I didn’t alter any hues obviously, I just subtracted the alpha value of the bitmap a little. So the longer the pixel has been in the bitmap, the lower it’s opacity. I wish I can claim that cleverness but I actually got the idea from somewhere else… probably 8bitRocket.

This method of graphics manipulation, called blitting, is the way to get a metric fuck-ton more performance out of Flash than is possible with mere Sprites. You can see there’s 600 “particles” in the demo — had I simply extended the Sprite class and used that to render the scene, I probably would have only been allowed a few hundred sprites while keeping the framerate at around 30.

If you want to see some great examples of blitting, check out 8bitRocket’s posts on the subject. You can even find a blitting engine called PixelBlitz — check out this badass schmup demo of his!

Status update

Corey — Thu, 18 Sep 2008 19:27:12 +0000

It’s been a while since my last update unfortunately. I’m planning on updating the site at least once a month with new projects and experiments but sometimes that’s just not possible.

This time it’s because I’m an alpha tester for Metaplace, and I’ve been putting most of my free time into that. Check out the site, post in the forums (maybe you’ll get selected for the upcoming beta) — it’s an excellent project with a ton of potential.

But I’ve also been working on a new AS3 experiment that implements a blitting engine for sprite rendering. This allows me to display over 1000 sprites on-screen at once, as opposed to the 300-400 that’s possible with no special code. I’ll be implementing this in my upcoming Flash game. Maybe.

Scaling dynamic text in AS3

Corey — Tue, 24 Jun 2008 22:27:56 +0000

Recently I’ve had the need to scale a dynamic text field which was fed by XML. Readability after scaling was not important, but it did have to look good (it’s for a full Flash site). However, scaling the MovieClip that the text field was in would cause some pretty chaotic behavior with the text — the text would try to scale with its parent but in doing so would shift around spastically until the parent MC settled into a new scale. This was unacceptable.

A quick google didn’t yield anything relevant, so I was left to my own devices. I remembered being able to draw pixels to a BitmapData object while writing my game in order to improve performance, so I figured I’d see if I could just copy the pixels from the text field and “bake” it into a bitmap.

Turns out you can. In fact, Adobe had already done this in the help files and it’s actually extremely easy. Check it out:

var tf:TextField = new TextField();

tf.text = "bitmap text";



var myBitmapData:BitmapData = new BitmapData(80, 20);

myBitmapData.draw(tf);

var bmp:Bitmap = new Bitmap(myBitmapData);

this.addChild(bmp);

No sweat right? Anyway, since I didn’t find any help on this anywhere else (granted, I didn’t look very hard), I thought I’d share this little adventure of mine. Hope it’s helpful.

Endless pages

Corey — Mon, 23 Jun 2008 19:41:23 +0000

I’m not sure who came up with the idea first, but the crazy kids at Humanized gave me the inspiration to try this out for myself with jQuery. You can read their rationale for it, but the basic concept is that the “Next page” nav links are pretty ridiculous now considering how easy it is to dynamically load new content with ajax.

Now when you scroll down to view more content, it just loads it up automatically, giving the illusion of endless scrolling and a page of seemingly infinite length.

View the example page.

Also. I’ve updated autoScroll, fixing some stuff. You know how I said I’d release early and often? Turns out that doesn’t work well with me. I get lost in the code and after I finish and upload it, I completely forget to do anything else with it, such as adding a DocType to the page. Heh, yeah, not gonna do that anymore.

Quick suggestion: combining endless pages with my autoscroll script would make the page browsing experience completely seamless and effortless. Try it!

AutoScroll

Corey — Tue, 17 Jun 2008 13:15:05 +0000

AutoScroll is a quick prototypage to see how well this alternative to the scrollbar would work. There’s an invisible scroll area at the very top and bottom of the page. When the user hovers their mouse over one of the areas it scrolls the page in that direction. Faster scrolling is achieved by moving the mouse deeper into the area.

View the example page.