Contribution: Lowres Sprite

[tronster]

Created a "Lowres" simulation sprite for those who want chunky pixels for a particular look in a sprite (or just want to flash back to the days of the Apple ][e.)

Feedback and suggestions welcome.



package
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;

/**
* A sprite with simulated low resolution draw commands.
*
* @example
* var lr:LowRes = new LowRes(20, 20);
* stage.addChild( lr );
* lr.plot(1, 1);
* lr.plot(2, 2, 2, 2);
* lr.plot(4, 4, 3, 1);
* lr.plot(3, 5, 1, 3);
*/
public class LowRes extends Sprite
{
public const DEFAULT_RESOLUTION_X:Number = 40;
public const DEFAULT_RESOLUTION_Y:Number = 40;

/// Hold the color.
private var rgba :uint;
public function set color( rgb:uint ) :void { rgba = rgb << 8; }
public function get color():uint { return (rgba & 0xffffff00); }

/// Is coordinate system 1 based (default) or 0 based (typical Flash coordinate system.)
private var offset :int = -1;
public function get isOneBased() :Boolean { return (offset == -1); }
public function set isOneBased( useOne:Boolean ) :void { offset = useOne ? -1 : 0 }

/// # of pixels that make up the width of the screen.
public var resolutionX :int;

/// # of pixels that make up the height of the screen.
public var resolutionY :int;


/// Horizontal 'low res pixel' size.
public var pixelWidth :Number = -1;

/// Vertical 'low res pixel' size.
public var pixelHeight :Number = -1;

private var isRedrawing :Boolean = false;
private var drawCommands :Vector.<DrawCommand>;


/**
* Ctor
* @param (resx) # of low res pixels to have across the screen.
* @param (resy) # of low res pixels to have up/down the screen.
*/
public function LowRes( resX:uint = 0, resY:uint = 0, width:uint = 0, height:uint = 0 )
{
super();

drawCommands = new Vector.<DrawCommand>();

resolutionX = resX;
resolutionY = resY;

// If width and height passed in, size it.
if ((width != 0) && (height != 0) )
resize( width, height );

if ( stage != null ) init();
else addEventListener( Event.ADDED_TO_STAGE, init );
}

/**
* Initialize
*/
public function init( e:Event = null ) :void
{
removeEventListener( Event.ADDED_TO_STAGE, init );

// Set defaults for 40x40
if (resolutionX < 1) resolutionX = (stage.stageWidth / DEFAULT_RESOLUTION_X);
if (resolutionY < 1) resolutionY = (stage.stageHeight / DEFAULT_RESOLUTION_Y);

// If the pixel width hasn't been set by now, use stage dimensions.
if (pixelWidth <= 0 )
resize( stage.stageWidth, stage.stageHeight );
}

/**
* Set the boundries of real pixels.
* @param realWidth Number of pixels wide this will use.
* @param realHeight Number of pixels high this will use.
*/
public function resize( realWidth:uint, realHeight:uint ) :void
{
pixelWidth = realWidth / resolutionX;
pixelHeight = realHeight / resolutionY;

graphics.clear();

isRedrawing = true;
for (var i:int = 0; i < drawCommands.length; i++)
plot( drawCommands[i].x, drawCommands[i].y, drawCommands[i].width, drawCommands[i].height );
isRedrawing = false;
}

/**
* Plot a pixel or area.
* @param x, Horizontal position
* @param y, Vertical position
* @param width
* @param height
*/
public function plot( x:int, y:int, width:int = -1, height:int = -1 ) :void
{
if (width < 0) width = 1;
if (height < 0) height = 1;


if ( !isRedrawing )
drawCommands.push( new DrawCommand(x, y, width, height) );

graphics.beginFill( color, 1.0 );
graphics.drawRect(
(x + offset) * pixelWidth, (y + offset) * pixelHeight,
width * pixelWidth, height * pixelHeight );
graphics.endFill();
}

/**
* Clear the graphic's plane.
*/
public function clear():void
{
graphics.clear();
drawCommands = new Vector.<DrawCommand>();
}

}
}


internal class DrawCommand
{
public var x:int;
public var y:int;
public var width:int;
public var height:int;

/**
* Ctor
* @param x, Horizontal position
* @param y, Vertical position
* @param width
* @param height
*/
public function DrawCommand(x:int, y:int, width:int, height:int )
{
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
}

[tronster]

Some additional examples:


Set the color to red before plotting:


// Draw a red dot in the middle
var lowres:LowRes = new LowRes(20, 20);
stage.addChild( lowres );
lowres.color = 0xff0000;
lowres.plot(5, 5, 10, 10 );



Default area is full stage, how to set an area half of the stage size.


var lowres:LowRes = new LowRes(20, 20,
stage.stageWidth * 0.5, stage.stageHeight * 0.5);
stage.addChild( lowres );
lowres.plot(2, 2 ); // draw a dot



The drawing grid is 1 based by default; if you prefer 0 based.


var lowres:LowRes = new LowRes(20, 20);
lowres.isOneBased = false;
stage.addChild( lowres );
lowres.plot(0, 0); // Now 0,0 is the upper-left corner



Finally if you want to have a lowres grid of 100x100:


var lowres:LowRes = new LowRes(100, 100);
stage.addChild( lowres );
lowres.plot(50, 50); // Draw a dot in the center

[dr_tchock]

Sounds cool, will try this out some time if I need an old-skool vibe!

[marco.rossi]

Cool.
Will definitely try this ...