AGStrout

Nov 24

FINALLY ADOBE! For crying out loud!

It has just been announced that in the next build of adobe's Flash player, we will finally be able to turn off the $%^&*ing context menu.
For the past ten years or so that Adobe has been making Flash player builds the right mouse button has been pretty much useless in the plugin because it either does nothing at all or it opens a context menu with all of your flash settings.

This has been one of the primary reasons that games like StarCraft and Diablo have been so very difficult to mimic on the flash platform.
Diablo II actually does not use any visual capabilities which Flash could not easily mimic on a modern PC, but it DOES make judicious use of the right mouse button.

In the latest build of flash we have finally been given the ability to use the right mouse button (YAY!!!).. but wait.. there's more.

Not only can we use the right mouse button, we can LOCK the mouse into the application, and get mouse movement vectors while flash has focus (movementX and movementY) allowing for the edge of display scrolling so popular in RTS and TBS titles. They also added events for the MIDDLE mouse button.. I've been waiting for a build like this for YEARS.

Now if only Adobe would back-track on it's "No flash for mobile" crap and choose to only do flash for somewhat fixed platforms like Android and iOS, and Apple would make a deal with them to put flash on iOS devices....

So much good news for flash and bad news for flash happening at the same time.
Still.. I remain optimistic :]

Nov 14

Works in progress

Uncategorized No Comments »

Right now I'm working on two builds for new clients.

One is for Mike Farnham, who is a longstanding fixture in the residential, business, and signage painting world.

The WIP site is here

The other is for Riverside's "Bloom!" life and wellness group which is run by our good friend April MacLean, owner of the Riverside dance studio "Room To Dance".

The WIP site is here

Aside from that, this week I am still reeling from Adobe's announcement that they will be (for the time being) abandoning Flash development for mobile.

To me this seems to be a direct capitulation to Steve Jobs' policies regarding the iOS and flash platforms, and is a great loss to the development community. It would be one thing to restrict the performance of the Flash plugin on iOS, it is another to essentially rob the entire world of future flash development for mobile (regardless of what the HTML5 lovers tell you, it is an extremely helpful platform). I know this has at least cost me one platform.

For now, it's back to work for me.

Mar 04

Bold pixel engine cont…

AS3, GameDev No Comments »

I've been in touch with the author of the bold pixel engine, and I'm going to be working with him to make improvements to the engine. This is especially advantageous since he has made many updates to the V1 lib and this way I'll be able to make some positive changes to the library without stepping on his toes in terms of versioning.

The new version of the library is already sounding very promising. I can't wait to go digging through it's guts

Cheers!

-AG Strout

Mar 04

Bold Pixel engine

AS3, GameDev 3 Comments »

I've been messing the last couple of days with the bold pixel engine by VortixGames.
You can find the library here:
Bold Pixel Engine Homepage

While using the engine in my first test project, I became acutely aware of both it's benefits and it's drawbacks. I would say what it does right is that it completely obfuscates some really terribly complex sprite management and MovieClip caching in order to make a very quickly executing game with less effort. I would say what's missing is more of a polish and some very handy options.

I'm currently working on the following options and plan to submit them to VortixGames at my earliest convenience:
- Updates to LayerEntityManager and EngineLayerManager to allow for the non-destructive removal and re-adding of layers and entities. This is important especially if you want to keep the graphical state of an entity while pausing a game for example.
- Sprite sheet support. While the engine is great, I think the one thing I found lacking for me was the support for sprite sheets (that is, large single images, usually PNGs, containing an entire animation, or the entire set of sprites for a character or object). In the current build you would have to write your own code to cull the sprite sheet into an animation stack. I've added this as another optional method to the TextureManager class.
- Special effects and filters is another big one. Currently the entire system is based on -only- blitting, so if you want an entity to be drawn with a filter, or to have it drawn using a specific blendmode, or scaled / rotated etc, you are SOL. I have not quite solidified my plan for how to implement a conditional "draw" based blit yet, and I understand why they aren't using it yet (draw is a lot slower than copypixels) but I think it would be a great addition to the engine.
- A Generic abstract game object which manages an entity. This class would create an entity, and hold a set (dictionary) of texture collection indexes (the animations available to that game object) indexed by friendly names for the animations (such as "stand" or "walk"). When set to visible=false this object would remove it's entity from the layer (while persisting a reference to the layer it belongs on), and would position the entity in real time relative to it's coordinates and a position mode. For example, in a lot of games (mario etc) it's often very useful to have the sprite positioned above and centered over the registration point. With bold pixel the sprites are currently placed down and to the right of the registration.
- Finally, I have run the code through the FDT validator and cleaned it up a lot. I would also like to re-format the code and add ASDoc comments so that clear understandable documentation is available in the form of more than just YouTube Videos (the youtube videos were VERY helpful!).

Cheers all!
-AG Strout

May 27

E4X in AS3 on FDT3

AS3, All No Comments »

I was struck with a dissapointing blow today when I both got a better understanding of E4X, and a bit of frustrating setback in my normal way of coding thanks to FDT3 (which besides a few slight annoyances is the best IDE of all time for flash AS3 IMHO).

E4X allows you to grab XML data from an XML datasource really quickly and efficiently. I love being able to load an XML file and then just use logical groupings to loop through it like:

for each(var x:XML in xmlSource..content..items..item){

// PARSE DATA FROM EACH item NODE HERE

}

Isn't that handy now? It is indeed!

But, you see, I'm doing something here I didn't intend to. The double dot operator actually means find ALL possible matches. So, if my XML contains:

<items>

</items>

<items>

</items>

</content>

For example... I'm going to grab two item nodes with the code above, which is really handy most of the time, but not if you only want to focus on nodes under the specific items node you want to look at. Well, it's as simple as taking one of those dots away! Easy no?... well no it's not because I'm using FDT3, and FDT3 sees the single dot operator as an object notation reference, not an E4X reference. I'm hoping they fix this soon, because the only way not to get a horde of warnings in my code is to use the full on .child('items')..item notation which is FUGLY compared to .items..item I'm sure you'll agree.

Ah well, If we must we must!

I'll be sure to report if FDT fixes this, they should have a new release around the corner here

Cheers!

-AG Strout

May 22

In search of the perfect Sprite

GameDev, All, iPhone 2 Comments »

It's fairly interesting to try working with a 3D API in order to do 2D graphics but that is exactly what it looks like I'm going to be doing when it comes to developing for the iPhone if I want to build any of the typical retro games that I enjoy making. Granted, I plan to move into making 3D games a bit more now that I have a good platform for doing so, but in my search for a good library to write 2D games on the iPhone with I'm coming up a bit short. The Cocos2d engine which is based on an engine written for Python is turning out to be not so helpful in this regard. After some looking about I've learned that the use of the 3D Open GLES API for 2D on the iPhone is the way to go, however, the Cocos2D engine uses the Texture2D class which was given out as a part of the SDK. This isn't going to cut it for me really since I would much rather not bother with the whole quad rendering issue, and would prefer to work with Point Sprites which are, from my understanding, orders of magnitude faster, which is why they're used in game creation for particle effects in 3D games. So now my goal is to find a way to either update Coco2D (doubtful) or to create my own set of classes to use in this endeavor. I hope you will all wish me luck as I dive further into the Open GL ES library and try to build my very first interactive iPhone entertainment application.

Cheers All!

-AG Strout

May 15

Photoshop Smear tool in Flash AS3

AS3, All, Tricks of the trade 1 Comment »

I was pondering for a moment how the distortion map was used in my previous post to create a paint spreading effect. I realized it probably has been done before, but I've never seen it done quite this way. In Photoshop there's a very handy tool for smearing bitmap content and I find it to be very useful there. I've recreated the effect here with a smooth edged brush. The dog you see is Sadie, my great dane, and subject of some recent photography by my wife.

Without further ado, here's the example, followed by the source code. The trickiest part was to make the effect "add" to the smear, rather than just to re-apply a new smear factor. I accomplished this by using the SUBTRACT and ADD blend modes.

This movie requires Flash Player 9

 
package com.agstrout.smear {
 
 import flash.display.MovieClip;
 
 import flash.display.BitmapData;
 
 import flash.display.Bitmap;
 
 import flash.filters.DisplacementMapFilter;
 
 import flash.display.Loader;
 
 import flash.events.Event;
 
 import flash.net.URLRequest;
 
 import flash.geom.Rectangle;
 
 import flash.display.BitmapDataChannel;
 
 import flash.geom.Point;
 
 import flash.display.Graphics;
 
 import flash.events.MouseEvent;
 
 import flash.display.BlendMode;	/**
 
  * com.agstrout.smear.Smear
 
  * @author Arne G Strout
 
  * Created : May 15, 2009
 
  * Re-creates the Smear tool effect from Photoshop using DistortionMapFilter
 
  */
 
 public class Smear extends MovieClip {
 
 	public var hit:MovieClip; // Click button
 
 	public var holder:Bitmap; // Result Bitmap Holder
 
 	public var bmp:BitmapData; // The source bitmap
 
 	public var output:BitmapData; // The result bitmap
 
 	public var distort:BitmapData; // The distortion map
 
 	public var filter:DisplacementMapFilter; // The distortion map filter
 
 	public var loader: Loader; // loader to load the image to be modified
 
private var _lx:Number; // The last mouse X position
 
 	private var _ly:Number; // The last mouse Y position
 
private static const MY_URL : String = "http://www.agstrout.com/images/image.jpg"; // Image to load
 
 	private var paint : MovieClip; // Paint layer
 
/**
 
 	 * Smear Constructor
 
 	 */
 
 	public function Smear() {
 
 		paint=new MovieClip(); // creates the painting layer
 
 		loader=new Loader(); // creates the loader
 
 		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,_onImageLoaded); // loader listener
 
 		loader.load(new URLRequest(MY_URL)); // Load the constant URL
 
 	}
 
/**
 
 	 * Image Loaded handler
 
 	 */
 
 	private function _onImageLoaded(event : Event) : void {
 
 		// Create the output area and source
 
 		holder=new Bitmap();
 
 		bmp=Bitmap(loader.content).bitmapData; // Use the loaded Bitmap (JPG, PNG, or GIF) for the source BitmapData
 
 		var r:Rectangle=bmp.rect;// the size of the source bitmap
 
 		distort=new BitmapData(r.width,r.height,false,_argb(256,128,128,128)); // Make the distortion map the same size with 128 in the X/Y (R/B) registers on all pixels
 
 		output=bmp.clone(); // Copy the source for the output
 
 		holder.bitmapData=output; // assign the output bitmapdata to the holder
 
 		addChild(holder); // Add the holder to the stage
 
// Filter
 
 		// Use RED / BLUE registers for X/Y displacement, and 100 amplification for a nice effect, clamp so the edges are solid.
 
 		filter=new DisplacementMapFilter(distort,null,BitmapDataChannel.RED,BitmapDataChannel.BLUE,100,100,"clamp");
 
// Create the click button
 
 		hit=new MovieClip();
 
 		var g:Graphics=hit.graphics;
 
 		g.beginFill(0x000000,0); // transparent square
 
 		g.drawRect(0, 0, r.width, r.height); // same size as the source bitmapdata
 
 		g.endFill();
 
 		addChild(hit);
 
 		hit.addEventListener(MouseEvent.MOUSE_DOWN,_onMouseDown); // PRESS
 
 		stage.addEventListener(MouseEvent.MOUSE_UP,_onMouseUp); // RELEASE
 
_update(); // UPDATE
 
 	}
 
// ON MOUSE DOWN, set the lx/ly
 
 	private function _onMouseDown(event : MouseEvent) : void {
 
 		stage.addEventListener(MouseEvent.MOUSE_MOVE,_onMouseMove);
 
 		_lx=mouseX;
 
 		_ly=mouseY;
 
 	}
 
//
 
 	private function _onMouseMove(event : MouseEvent) : void {
 
 		var dx:Number=mouseX-_lx; // diff x
 
 		var dy:Number=mouseY-_ly; // diff y
 
 		var col:Number;
 
 		var mc:MovieClip=paint;
 
 		var g:Graphics=mc.graphics;
 
 		g.clear();
 
 		var i:int;
 
 		// red
 
 		for(i=0;i&lt;128;i+=4){
 
 			col=_argb(256-i*2,Math.floor(Math.abs(dx)),0,0);
 
 			g.lineStyle(64*(1-i/128),col,1,false,"normal");
 
 			g.moveTo(_lx,_ly);
 
 			g.lineTo(mouseX,mouseY);
 
 		}
 
 		if(dx&gt;0)distort.draw(mc,null,null,BlendMode.SUBTRACT);
 
 		if(dx&lt;0)distort.draw(mc,null,null,BlendMode.ADD);
 
// blue
 
 		g.clear();
 
 		for(i=0;i&lt;128;i+=4){
 
 			col=_argb(256-i*2,0,0,Math.floor(Math.abs(dy)));
 
 			g.lineStyle(64*(1-i/128),col,1,false,"normal");
 
 			g.moveTo(_lx,_ly);
 
 			g.lineTo(mouseX,mouseY);
 
 		}
 
 		if(dy&gt;0)distort.draw(mc,null,null,BlendMode.SUBTRACT);
 
 		if(dy&lt;0)distort.draw(mc,null,null,BlendMode.ADD);
 
_lx=mouseX;
 
 		_ly=mouseY;
 
 		_update();
 
 	}
 
private function _onMouseUp(event : MouseEvent) : void {
 
 		stage.removeEventListener(MouseEvent.MOUSE_MOVE,_onMouseMove);
 
 	}
 
private function _update() : void {
 
 		output.applyFilter(bmp, bmp.rect,new Point(0,0), filter);
 
 	}
 
private function _argb(a:uint,r:uint,g:uint,b:uint):uint{
 
 		return (a&lt;&lt;24 | r&lt;&lt;16 | g&lt;&lt;8 | b); // Create a color value from a,r,g,b data
 
 	}
 
 }
 
}

May 11

AS3 Air Painting with the DisplacementMapFilter class

AS3, All 2 Comments »

I was contacted by a colleague of mine from a previous employer who asked if I still had the source code for an effect I had created for one of our projects. The effect was built to mimic the look of pouring paint onto glass which is being sprayed by a high pressure air nozzle. This effect is a simple use of math combined with a displacement map filter. I've got a few ideas how this could be made more interesting, such as adding a "spin" to the air by altering the angle just slightly on each pixel using the distance to set the amount.

This movie requires Flash Player 9

SOURCE FILE:

http://www.agstrout.com/files/Spreader.as

SOURCE CODE:

 
package com.agstrout.spread {
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.events.Event;
import flash.display.BitmapDataChannel;
import flash.display.Graphics;
import flash.utils.setInterval;
/**
* com.agstrout.spread.Spreader&lt;br/&gt;
* @author Arne G Strout
* Created : May 11, 2009&lt;br/&gt;
* A paint spreading effect which simulates paing being poored onto glass with a high pressure air hose applied to the glass.
*/
public class Spreader extends MovieClip {
public static const EFFECT_WIDTH:Number=320; // Movie Width
public static const EFFECT_HEIGHT:Number=240; // Movie Height
public static const EFFECT_FORCE:Number=.4; // Force of the "wind"
public var bmp:Bitmap; // The bitmap container for display
public var lmouseX:Number; // last mouse x , for line drawing
public var lmouseY:Number; // last mouse y , for line drawing
private var _bd:BitmapData; // the bitmap data the effect will be applied to
private var _filterbd:BitmapData; // the filter data for the effect
private var _f:DisplacementMapFilter; // the actual filter
private var _paint:MovieClip; // paint layer for drawing paint strokes to _bd
private var _col:Number; // the current paint color
 
/**
* constructor
*/
public function Spreader() {
_paint=new MovieClip(); // This MC will be used for the paint line drawing
 
// sets initial values for the "last mouse X" and "last mouse Y" values
lmouseX=mouseX;
lmouseY=mouseY;
 
// Create the bitmaps, with the effect W/H constants
bmp=new Bitmap();
_bd=new BitmapData(EFFECT_WIDTH,EFFECT_HEIGHT,true,0x00000000);
_filterbd=new BitmapData(EFFECT_WIDTH,EFFECT_HEIGHT,true,0x00000000);
 
// Creates the filter bitmap, using math to determine the angle to store for each pixel.
for(var i:uint=0;i&lt;EFFECT_WIDTH;i++)
for(var u:uint=0;u&lt;EFFECT_HEIGHT;u++){
var deltaX:Number=EFFECT_WIDTH/2-i; // The distance on the X axis between the center and this pixel
var deltaY:Number=EFFECT_HEIGHT/2-u; // The distance on the Y axist between the center and this pixel
var angle:Number=Math.atan2(deltaX,-deltaY); // angle in radians from the center to this pixel
var d:Number=Math.sqrt(deltaX*deltaX+deltaY*deltaY); // distance in pixels from the center
var dx:uint=Math.sin(angle)*(128-d/3)+128; // displacement (0 to 256) on the X axis, 128 for none
var dy:uint=-Math.cos(angle)*(128-d/3)+128; // displacement (0 to 256) on the Y axis, 128 for none
_filterbd.setPixel32(i,u,_argb(1,dx,dy,1)); // set the pixel value, using the _argb method to convert displacements to a color value
}
 
// Create the displacement map using the red and green channels and the EFFECT_FORCE constant
_f=new DisplacementMapFilter(_filterbd,new Point(0,0),BitmapDataChannel.RED,BitmapDataChannel.GREEN,EFFECT_FORCE,EFFECT_FORCE,"clamp");
addEventListener(Event.ENTER_FRAME,_onFrame); // apply the displacement map once per frame
setInterval(_shift,1000); // change paint color on a 1 sec interval
bmp.bitmapData=_bd; // Add the bitmapdata to the Bitmap container for display
addChild(bmp); // add the container to the stage.
_shift(); // set the initial color
}
 
/**
* Changes the paint color
*/
private function _shift() : void {
_col=_argb(256,                // A
128+Math.random()*128,    // R
128+Math.random()*128,    // G
128+Math.random()*128    // B
); // random color, but brighter than half luminance
}
 
private function _onFrame(event : Event) : void {
_bd.applyFilter(_bd,_bd.rect,new Point(0,0),_f); // Applies the "wind" effect
var g:Graphics=_paint.graphics; // gets the graphics context to draw the lines
g.clear(); // clears previous lines
g.moveTo(mouseX+(mouseX==lmouseX &amp;&amp; mouseY==lmouseY?2:0),mouseY); // sets start point of stroke at current X/Y pos (shift two pixels if no movement
g.lineStyle(16,_col);// sets the current color and brush size
g.lineTo(lmouseX,lmouseY); // draws the stroke to the previous X/Y pos
_bd.draw(_paint); // draws the paint layer onto the effect bitmap
lmouseX=mouseX; // record current X/Y pos for next frame
lmouseY=mouseY;
}
 
private function _argb(a:uint,r:uint,g:uint,b:uint):uint{
return (a&lt;&lt;24 | r&lt;&lt;16 | g&lt;&lt;8 | b); // Create a color value from a,r,g,b data
}
}
}

May 07

AS3 Subscription / Requesting Data Model

AS3, All No Comments »

There's a tactic that I've been using successfully since AS2, which I find to be an excellent way of handling data communication.
The event driven model which is used in most programming frameworks is a bit heavy for everyday use in lighter applications, and I assume that's why Flex introduced data binding, but even data binding is a bit unwieldy and is only available in Flex.

My approach borrows from a few years of trying different strategies to create a useful mechanism for handling the communication of updates on the Model out to the many views/controllers that use it.

When implemented you can do something as simple as:
FeedMe.instance.subscribe(FEED_KEY,_onFeedKeyUpdate); // and then later in the code private function _onFeedKeyUpdate($data:*):void{ // Handle the update to the data feed }

The feed key here could represent the currently selected character type in a video game, or the mouse state, just about anything really. The nice thing is that many multiple outlying classes can subscribe for updates every time, request in order to get the current value once (or be notified the first time a value is available), or "get" in order to check the existing value for that field.

In combination with Variable Objects especially this approach becomes very powerful.

For more information, see the project, now newly named FeedMe_AS3 on Google Code:

May 06

Flash Captcha concept

Uncategorized No Comments »

I've been pondering it and I really thing PHPBB and many other systems should start using Flash in their Captcha implementation.
One great example would be to require the user to perform some simple action within a flash environment, such as dragging a golf ball into a hole. Pretty much anything that a spambot would not be able to do. This would be MUCH less annoying than the current captcha methods, and what with Flash becoming so ubiquitous you'd only really be risking losing users who exclusively use their iPhone to register on forums, cuz that happens so often :).

Thoughts?

FINALLY ADOBE! For crying out loud!

Works in progress

Bold pixel engine cont…

Bold Pixel engine

E4X in AS3 on FDT3

In search of the perfect Sprite

Photoshop Smear tool in Flash AS3

AS3 Air Painting with the DisplacementMapFilter class

AS3 Subscription / Requesting Data Model

Flash Captcha concept

Contents

History

Topics

Blogroll