Dot Editor
20×20のエリア内にドットをうち、それぞれのマスに関して塗られている（=1）塗られていない（=0）を判断して、その結果を配列に出力します。
出力された配列を元に、ファンクション「setBmpData」内でビットマップを描画しています。
単色のドット絵であれば、出力結果の配列を読み込んで、それを元に描画すれば、AS上で使用することができます。
/**
* Copyright goodbyegirl1974 ( http://wonderfl.net/user/goodbyegirl1974 )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/8aHr
*/
package {
import flash.utils.ByteArray;
import flash.geom.Rectangle;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import flash.display.Sprite;
import fl.controls.Button;
public class DotEditor extends Sprite {
public static const MODE_DRAW:String = "draw";
public static const MODE_ERASE:String = "erase";
public static const MODE_RESET:String = "reset";
private var _horizonalGridNum:int = 20;
private var _verticalGridNum:int = 20;
private var _gridWidth:Number = 20.0;
private var _gridHeight:Number = 20.0;
private var _mouseDownFlg:Boolean = false;
private var _mode:String = DotEditor.MODE_DRAW;
private var _allGridArray:Array = [];
private var _modePointer:Sprite;
private var _outPutWindow:Sprite;
private var _outPutTextField:TextField;
private var _outPutBitMap:Bitmap;
/**
* コンストラクタ。
**/
public function DotEditor() {
// write as3 code here..
init();
}
private function init():void
{
//とりあえず、20×20のグリッドを表示。
var i:int = 0;
for(i; i < _verticalGridNum; i++)
{
var j:int = 0;
var targetArray:Array = [];
for(j; j < _horizonalGridNum; j++)
{
var sprite:GridSprite = new GridSprite(_gridWidth, _gridHeight);
sprite.x = _gridWidth * j;
sprite.y = _gridHeight * i;
addChild(sprite);
sprite.addEventListener(MouseEvent.MOUSE_DOWN, gridMouseDownHandler);
sprite.addEventListener(MouseEvent.MOUSE_UP, gridMouseUpHandler);
sprite.addEventListener(MouseEvent.ROLL_OVER, gridRollOverFunction);
stage.addEventListener(MouseEvent.MOUSE_UP, gridMouseUpHandler);
targetArray.push(sprite);
}
this._allGridArray.push(targetArray);
}
//ボタンを3つ配置。
var drawButton:Sprite = makeBtn(80, 20, "描画");
drawButton.x = 40;
drawButton.y = 420;
addChild(drawButton);
drawButton.addEventListener(MouseEvent.CLICK, modeButtonClickHandler);
var eraseButton:Sprite = makeBtn(80, 20, "消去");
eraseButton.x = 140;
eraseButton.y = 420;
addChild(eraseButton);
eraseButton.addEventListener(MouseEvent.CLICK, modeButtonClickHandler);
var resetButton:Sprite = makeBtn(80, 20, "リセット");
resetButton.x = 240;
resetButton.y = 420;
addChild(resetButton);
resetButton.addEventListener(MouseEvent.CLICK, modeButtonClickHandler);
drawButton.name = DotEditor.MODE_DRAW;
eraseButton.name = DotEditor.MODE_ERASE;
resetButton.name = DotEditor.MODE_RESET;
_modePointer = new Sprite();
_modePointer.graphics.lineStyle(0, 0xcc0000);
_modePointer.graphics.beginFill(0xcc0000);
_modePointer.graphics.moveTo(-40, -2);
_modePointer.graphics.lineTo(-40, 2);
_modePointer.graphics.lineTo(40, 2);
_modePointer.graphics.lineTo(40, -2);
_modePointer.graphics.endFill();
_modePointer.x = drawButton.x;
_modePointer.y = drawButton.y + 15;
addChild(_modePointer);
var showOutPutButton:Sprite = makeBtn(80, 20, "出力");
showOutPutButton.x = 340;
showOutPutButton.y = 420;
addChild(showOutPutButton);
showOutPutButton.addEventListener(MouseEvent.CLICK, showOutPutButtonClickHandler);
//出力用ウィンドウの生成。
_outPutWindow = new Sprite();
var w:Number = 400;
var h:Number = 400;
_outPutWindow.graphics.lineStyle(1, 0x333333, 0.5);
_outPutWindow.graphics.beginFill(0xffffff, 0.5);
_outPutWindow.graphics.moveTo(0, 0);
_outPutWindow.graphics.lineTo(0, h);
_outPutWindow.graphics.lineTo(w, h);
_outPutWindow.graphics.lineTo(w, 0);
_outPutWindow.graphics.endFill();
var btnClose:Sprite = this.makeBtn(80, 20, "閉じる");
_outPutWindow.addChild(btnClose);
btnClose.x = w / 2;
btnClose.y = h - 30;
btnClose.addEventListener(MouseEvent.CLICK, btnCloseClickHandler);
_outPutWindow.visible = false;
this._outPutTextField = new TextField();
_outPutTextField.autoSize = TextFieldAutoSize.LEFT;
_outPutWindow.addChild(_outPutTextField);
addChild(_outPutWindow);
}
private function btnCloseClickHandler(event:MouseEvent):void
{
_outPutWindow.visible = false;
_outPutWindow.removeChild(_outPutBitMap);
}
/**
* 出力ボタンをクリックした際のファンクション。
**/
private function showOutPutButtonClickHandler(event:MouseEvent):void
{
_outPutTextField.text = "";
//出力用配列の生成。Gridの数だけ0を格納した配列を作成する。
var outPutArray:Array = [];
var i:int = 0;
for(i; i < _horizonalGridNum; i++)
{
var array:Array = [];
var j:int = 0;
for(j; j < _verticalGridNum; j++)
{
array.push(0);
}
outPutArray.push(array);
}
//全グリッドの走査。
var targetArray:Array;
for each(targetArray in _allGridArray)
{
var targetGrid:GridSprite;
var arrayIndexNum:int = _allGridArray.indexOf(targetArray);
for each(targetGrid in targetArray)
{
if(targetGrid.type == "clicked")
{
var gridIndexNum:int = targetArray.indexOf(targetGrid);
outPutArray[arrayIndexNum][gridIndexNum] = 1;
//targetArray[indexNum] = 1;
}
}
}
//全配列の再チェックしてトリミング。
//Step1:上段から順に走査。何か表示が出た時点で処理をとめる。
for (i = 0; i < outPutArray.length; i++)
{
targetArray = outPutArray[0];
if(targetArray.indexOf(1) == -1)
{
//1が含まれていない、つまり何も描画されていない。
outPutArray.splice(0, 1);
}
else
{
break;
}
}
//Step2:下段から順に走査。何か表示が出た時点で処理をとめる。
for (i = outPutArray.length - 1; i >= 0; i--)
{
targetArray = outPutArray[i];
if(targetArray.indexOf(1) == -1)
{
//1が含まれていない、つまり何も描画されていない。
var indexNum:int = outPutArray.indexOf(targetArray);
outPutArray.splice(indexNum, 1);
}
else
{
break;
}
}
//Step3：左列から順に走査。何か表示が出た時点で処理をとめる。
for (i = 0; i < outPutArray[0].length; i++)
{
var totalNum:int = 0;
for each(targetArray in outPutArray)
{
totalNum += targetArray[0];
}
if(totalNum != 0)
{
break;
}
else
{
//1が含まれていない、つまり何も描画されていない。
for each(targetArray in outPutArray)
{
targetArray.splice(0, 1);
}
}
}
//Step4：右列から順に走査。何か表示が出た時点で処理をとめる。
for (i = outPutArray[0].length - 1; i >= 0; i--)
{
totalNum = 0;
for each(targetArray in outPutArray)
{
totalNum += targetArray[i];
}
if(totalNum != 0)
{
break;
}
else
{
//1が含まれていない、つまり何も描画されていない。
for each(targetArray in outPutArray)
{
targetArray.splice(i, 1);
}
}
}
//トリミング終了後の配列をテキストフィールドに出力。
for each(targetArray in outPutArray)
{
_outPutTextField.appendText("[" + String(targetArray) + "]," + "\n");
}
_outPutWindow.visible = true;
_outPutBitMap = setBmpData(outPutArray, 2, 2);
_outPutWindow.addChild(_outPutBitMap);
_outPutBitMap.x = 300;
}
/**
* モード選択ボタンをクリックした際のファンクション。
**/
private function modeButtonClickHandler(event:MouseEvent):void
{
var targetButton:Sprite = event.currentTarget as Sprite;
var selectedMode:String = targetButton.name;
this._mode = selectedMode;
if(this._mode == DotEditor.MODE_DRAW || this._mode == DotEditor.MODE_ERASE)
this._modePointer.x = targetButton.x;
if(this._mode == DotEditor.MODE_RESET)
{
var targetArray:Array;
for each(targetArray in _allGridArray)
{
var targetGrid:GridSprite;
for each(targetGrid in targetArray)
{
targetGrid.changeColor(DotEditor.MODE_ERASE);
}
}
this._mode = DotEditor.MODE_DRAW;
}
}
/**
* ボタンを生成するファンクション。
**/
private function makeBtn(widthNum:Number, heightNum:Number, btnLabel:String = "btn"):Sprite
{
var btnSprite:Sprite = new Sprite();
btnSprite.graphics.lineStyle(1, 0x999999);
btnSprite.graphics.beginFill(0xcccccc);
btnSprite.graphics.moveTo(-widthNum / 2, -heightNum / 2);
btnSprite.graphics.lineTo(-widthNum / 2, heightNum / 2);
btnSprite.graphics.lineTo(widthNum / 2, heightNum / 2);
btnSprite.graphics.lineTo(widthNum / 2, -heightNum / 2);
btnSprite.graphics.endFill();
var labelField:TextField = new TextField();
labelField.text = btnLabel;
labelField.autoSize = TextFieldAutoSize.CENTER;
labelField.x = -labelField.width / 2;
labelField.y = -labelField.height / 2;
labelField.selectable = false;
labelField.mouseEnabled = false;
btnSprite.addChild(labelField);
this.buttonMode = true;
return btnSprite;
}
/**
* グリッド上でマウスダウンした際のファンクション。
**/
private function gridMouseDownHandler(event:MouseEvent):void
{
_mouseDownFlg = true;
var targetGrid:GridSprite = event.currentTarget as GridSprite;
targetGrid.changeColor(this._mode);
}
/**
* グリッド上でマウスアップした際のファンクション。
**/
private function gridMouseUpHandler(event:MouseEvent):void
{
_mouseDownFlg = false;
}
/**
* グリッドにロールオーバーした際のファンクション。
**/
private function gridRollOverFunction(event:MouseEvent):void
{
if(!_mouseDownFlg)
return;
var targetGrid:GridSprite = event.currentTarget as GridSprite;
targetGrid.changeColor(this._mode);
}
/**
* 出力結果をビットマップに反映させるファンクション。
**/
private function setBmpData(outPutArray:Array, pixWidth:uint = 1, pixHeight:uint = 1):Bitmap
{
var horizonalPixelNum:uint = outPutArray[0].length;
var verticalPixelNum:uint = outPutArray.length;
var bmd:BitmapData = new BitmapData(pixWidth * horizonalPixelNum, pixHeight * verticalPixelNum, true, 0x00ffffff);
var colorBmd:BitmapData = new BitmapData(pixWidth, pixHeight, true, 0xff000000);
var emptyBmd:BitmapData = new BitmapData(pixWidth, pixHeight, true, 0x00ffffff);
var bmp:Bitmap = new Bitmap(bmd);
var i:int = 0;
for(i; i < outPutArray.length; i++)
{
var targetArray:Array = outPutArray[i];
var j:int = 0;
for(j; j < targetArray.length; j++)
{
//0か1かの結果を取得する。
var colorNum:int = targetArray[j];
var rect:Rectangle = new Rectangle(j * pixWidth, i * pixHeight, pixWidth, pixHeight);
var bytes:ByteArray;
if(colorNum == 1)
bytes = colorBmd.getPixels(new Rectangle(0, 0, pixWidth, pixHeight));
else if(colorNum == 0)
bytes = emptyBmd.getPixels(new Rectangle(0, 0, pixWidth, pixHeight));
bytes.position = 0;
bmd.setPixels(rect, bytes);
}
}
return bmp;
}
}
}
import flash.display.Sprite;
class GridSprite extends Sprite
{
private const TYPE_DEFAULT:String = "default";
private const TYPE_CLICKED:String = "clicked";
private var _type:String = TYPE_DEFAULT;
private var _widthNum:Number;
private var _heightNum:Number;
/**
* コンストラクタ。
**/
public function GridSprite(widthNum:Number, heightNum:Number)
{
init(widthNum, heightNum);
}
private function init(widthNum:Number, heightNum:Number):void
{
buttonMode = true;
_widthNum = widthNum;
_heightNum = heightNum;
drawGrid(widthNum, heightNum);
}
/**
* 色を変化させるファンクション。
**/
public function changeColor(type:String):void
{
if(this._type == type)
return;
switch(type)
{
case DotEditor.MODE_DRAW:
this._type = TYPE_CLICKED;
break;
case DotEditor.MODE_ERASE:
this._type = TYPE_DEFAULT;
break;
}
//this._type = type;
drawGrid(this._widthNum, this._heightNum);
}
private function drawGrid(width:Number, height:Number):void
{
var color:uint;
switch(this._type)
{
case TYPE_DEFAULT:
color = 0xcccccc;
break;
case TYPE_CLICKED:
color = 0x333333;
break;
}
graphics.clear();
graphics.lineStyle(1 , 0xaaaaaa);
graphics.beginFill(color);
graphics.moveTo(0 , 0);
graphics.lineTo(0 , height);
graphics.lineTo(width , height);
graphics.lineTo(width , 0);
graphics.endFill();
}
/**
* _typeを取得するゲッター。
**/
public function get type():String
{
return this._type;
}
}