スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

アイコン画像をドット絵風に表示

アイコン画像をドット絵風(?)に拡大表示します。





左上のアイコンをクリックすると、円でピクセルを表した拡大画像(?)が表示されます。
アイコンは、SILK ICONSのものを使用させてもらいました。

やってる処理は、半径10ピクセルの円形のスプライトを16×16個並べといて、アイコンをクリックしたときにそのアイコン画像の各ピクセルの色をBitmapData#getPixelsで取得して、
対応するスプライトの色をSprite#transform#colorTransformで設定する。というカンジです。

BitmapData#getPixelsは、左上のピクセルからアルファ、赤、緑、青の順に値が入っているByteArrayを戻します。
けど、ソレをそのまま扱うのはメンドウなので、サンプルではalpha、red、green、blueというプロパティを持つオブジェクトを順に戻すPixelIteratorクラスを作ってみました。

PixelIteratorのソースコードはこんなカンジです。

package {
import flash.utils.ByteArray;
/**
* BitmapData#getPixelsで取得したByteArrayを走査するイテレータ。
*/
public class PixelIterator {
/** 走査対象のByteArrayオブジェクト */
private var _src:ByteArray;
/** 現在のインデックス */
private var _index:int = 0;
/**
* コンストラクタ。
* @param src 走査対象のByteArrayオブジェクト
*/
public function PixelIterator(src:ByteArray) {
_src = src;
}
/**
* まだ走査していないピクセルが存在するかどうかを戻します。
* @return 存在すればtrue、そうでなければfalse
*/
public function hasNext():Boolean {
return _index < _src.length - 1;
}
/**
* 次のピクセル情報を戻します。
* @return alpha, red, green, blueプロパティを持つオブジェクト
*/
public function next():Object {
return {alpha: _src[_index++], red: _src[_index++], green:_src[_index++], blue:_src[_index++]};
}
}
}
nextメソッドが呼ばれるたびに、コンストラクタで受け取ったByteArrayから1ピクセル分の情報を取り出して、ソレをオブジェクトのプロパティにして戻します。

フレームアクションはこんなカンジです。
// ソース画像の配列
var bitmap_array:Array = [new ICON1(0, 0), new ICON2(0, 0), new ICON3(0, 0), new ICON4(0, 0)];
// ソース画像の幅
var srcWidth:int = 16;
// ソース画像の高さ
var srcHeight:int = 16;
// ボタンのオフセット
var btnOffsetX:int = 10;
var btnOffsetY:int = 10;
// pixelSpriteの大きさ
var psSize:int = 20;
// pixelSpriteの間隔
var psChink:int = 4;
// pixelSpriteを並べる領域
var screen:Sprite = new Sprite();
screen.x = btnOffsetX + psSize / 2;
screen.y = btnOffsetY + srcHeight + 4 + psSize / 2;
addChild(screen);
// pixelSpriteの配列
var ps_array:Array = new Array();
// ボタンを並べる
var btn_array:Array = new Array();
for (var i:int = 0, iEnd:int = bitmap_array.length; i < iEnd; i++) {
var btn:Sprite = new Sprite();
var bmp:Bitmap = new Bitmap(bitmap_array[i]);
btn.addChild(bmp);
btn.addEventListener(MouseEvent.CLICK,
function (e:Event) {
hidePixelSprite();
var byteArray:ByteArray
= e.target.getChildAt(0).bitmapData.getPixels(new Rectangle(0, 0, srcWidth, srcHeight));
var ite:PixelIterator = new PixelIterator(byteArray);
for (var ty:int = 0; ty < srcHeight; ty++) {
for (var tx:int = 0; tx < srcWidth; tx++) {
var ts:Sprite = ps_array[ty][tx];
var ct:ColorTransform = ts.transform.colorTransform;
var pixel:Object = ite.next();
ct.alphaMultiplier = 0;
ct.redMultiplier = 0;
ct.greenMultiplier = 0;
ct.blueMultiplier = 0;
ct.alphaOffset = pixel.alpha;
ct.redOffset = pixel.red;
ct.greenOffset = pixel.green;
ct.blueOffset = pixel.blue;
ts.transform.colorTransform = ct;
ts.visible = true;
}
}
});
addChild(btn);
btn.x = btnOffsetX + i * (srcWidth + 4);
btn.y = btnOffsetY;
btn_array.push(btn);
}
// ピクセルを表現するスプライトを並べる
for (var py:int = 0; py < srcHeight; py++) {
var h_array:Array = new Array();
var psY:int = py * (psSize + psChink);
for (var px:int = 0; px < srcWidth; px++) {
var psX:int = px * (psSize + psChink);
var ps:Sprite = createPixelSprite();
ps.x = psX;
ps.y = psY;
screen.addChild(ps);
h_array.push(ps);
}
ps_array.push(h_array);
}
// ピクセルを表現するスプライトを生成し、戻します。
function createPixelSprite():Sprite {
var ps:Sprite = new Sprite();
var g:Graphics = ps.graphics;
g.beginFill(0x000000);
g.drawCircle(0, 0, psSize / 2);
g.endFill();
ps.visible = false;
return ps;
}
// ピクセルを表現するスプライトを非表示にします。
function hidePixelSprite():void {
for (var py:int = 0; py < srcHeight; py++) {
for (var px:int = 0; px < srcWidth; px++) {
ps_array[py][px].visible = false;
}
}
}
最初に、ライブラリのビットマップの配列をbitmap_arrayとして定義しています。ICON1/ICON2/ICON3/ICON4はライブラリのビットマップにリンケージで設定したクラス名デス。

srcWidth/srcHeightは、アイコン画像の幅と高さデス。このサンプルでは最初にピクセルを表現するスプライトを作って、アイコンをクリックするたびにそいつらの色を変えるという方法をとってるので、アイコンのサイズはすべて等しくないとダメです。

screenはピクセルを表現するスプライトを格納するスプライトです。
ピクセルを表現するスプライトは、createPixelSpriteメソッドで作っています。黒い円をGraphics#drawCircleで描いて、作成時点では非表示にしています。
コレをアイコン画像の横×高さ分(サンプルでは16×16)作って、ps_arrayという2次元配列に格納してます。
ps_array[y][x]で、(x, y)の位置のピクセルを表現するスプライトにアクセスできます。

このスプライトに色を設定する処理は、ボタンのイベントハンドラ(btn#addEventListenerに渡す関数)内でやってます。
クリックしたアイコンの画像のPixelIteratorオブジェクトを作って、ps_arrayを2重ループでなめて、取り出したピクセルの色をColorTransformを使って設定しています。

スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.11.15 | | Comments(1) | Trackback(0) | Flash CS3

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。