// forked from nengafl's nengafl /* --------------------------------------------------------------------------------------- * マップエディタを作成できます。 * --------------------------------------------------------------------------------------- * [操作方法] * 操作はマウスのみです。 * --------------------------------------------------------------------------------------- * [マニュアル] * ・右下のマップチップのリストから、クリックでマップチップを選択できます。 * ・選択中のマップチップは右上の枠内に表示されます。 * ・左上のマップをクリックすると、選択中のマップチップを配置できます。 * 　（ドラッグ操作で、連続で配置することもできます） * ・マップが画面内に収まらない大きさなら上下左右のスライダーでスライドできます。 * * ・exportボタンで現在のマップをテキストフィールドに出力することができます。 * ・importボタンは逆にテキストフィールドのテキストを読み込んでマップに反映させます。 * * (テキストフィールドがかなり小さいので、コピペする場合は * windowsなら、テキストフィールドを右クリック[すべて選択]、[コピー]が楽です。) * --------------------------------------------------------------------------------------- * [いじりどころ] * MapContextクラス(もっと適切なクラス名募集)をいじると、 * マップのサイズを変更したり、他のマップチップ画像を読み込んだり、 * 他のテキスト形式での入出力が可能になります。 * * [例] * ワンダフルワールド用マップエディタ * http://wonderfl.net/code/f64230007f5ccfb1709e1327287d6da3e5840e5f * ワンダフルクエスト用マップエディタ * http://wonderfl.net/code/17c6b454fff55993f110f45b897cae6b83d82780 * --------------------------------------------------------------------------------------- * * サンプルとして、シンプルなドット絵エディタっぽい感じにしてます。 * * [ビギナー向け(？)いじりどころ] * ・MapContextのGRID_SIZE, GRID_COLS, GRID_ROWS(293～295行目)の値をいじると、 * 　キャンバスのサイズを変更できます。 * ・MapContext.load()内の変数sample(310行目)をいじると、パレットの色を追加・変更できます。 * ・MapContext.DEFAULT_MAPDATA(296行目)の値を、exportで出力したテキストで置き換えると、 * 　自分が作ったドット絵を初期の配置にすることができます。 * * --------------------------------------------------------------------------------------- * [修正] * 1/26 : MapContextのGRID_COLS, GRID_ROWSの値だけを変えると、コンパイルエラーになっていた問題を修正しました。 */ package { import com.bit101.components.HSlider; import com.bit101.components.PushButton; import com.bit101.components.Text; import com.bit101.components.VSlider; import flash.display.DisplayObject; import flash.display.Shape; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; [SWF(frameRate=10)] public class LevelEditor extends Sprite { private var _selectedChipType:int; // 選択中のマップチップの種類を保持する private var _isMouseDownOnMap:Boolean; // （マップ上で）マウス左ボタンが押されているか private var _mapModel:Array; // マップモデル // 各コンポーネントの参照 private var _map:Sprite; private var _mapScrollTop:HSlider; private var _mapScrollBottom:HSlider; private var _mapScrollLeft:VSlider; private var _mapScrollRight:VSlider; private var _IOTextField:Text; private var _importButton:PushButton; private var _exportButton:PushButton; private var _selectedChip:MapChip; private var _chipList:Sprite; private var _chipListSlider:VSlider; public function LevelEditor() { graphics.beginFill(0x000000); graphics.drawRect(0, 0, 465, 465); graphics.endFill(); MapContext.instance.addEventListener(Event.COMPLETE, initialize); MapContext.instance.load(); } private function initialize(e:Event):void { MapContext.instance.removeEventListener(Event.COMPLETE, initialize); initializeData(); initializeMap(); initializeSelectedChip(); initializeChipList(); initializeComponents(); MapContext.instance.setReference(_mapModel, _IOTextField); } private function initializeData():void { _selectedChipType = 0; _isMouseDownOnMap = false; } // マップを作成する private function initializeMap():void { _map = new Sprite(); _mapModel = []; for (var row:int = 0; row < MapContext.GRID_ROWS; row++) { _mapModel[row] = []; for (var col:int = 0; col < MapContext.GRID_COLS; col++) { var mapChip:MapChip; if (MapContext.DEFAULT_MAPDATA[row] == undefined || MapContext.DEFAULT_MAPDATA[row][col] == undefined) { mapChip = new MapChip(0); }else { mapChip = new MapChip(MapContext.DEFAULT_MAPDATA[row][col]); } mapChip.x = MapContext.GRID_SIZE * col; mapChip.y = MapContext.GRID_SIZE * row; _map.addChild(mapChip); _mapModel[row][col] = mapChip; } } addDisplayWindow(_map, 20, 20, 350, 350); // マップ上でのマウスイベントリスナの登録 _map.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownMap); _map.addEventListener(MouseEvent.MOUSE_UP, mouseUpMap); _map.addEventListener(MouseEvent.ROLL_OUT, mouseUpMap); _map.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMap); _map.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMap); } // 選択中のマップチップの画像を表示する枠を作成する private function initializeSelectedChip():void { _selectedChip = new MapChip(_selectedChipType); _selectedChip.x = _selectedChip.y = int((50 - MapContext.GRID_SIZE) / 2); addDisplayWindow(_selectedChip, 395, 5, 50, 50); } // マップチップのリストを作成する private function initializeChipList():void { _chipList = new Sprite(); var chipNum:int = MapChip.images.length; var chipPosX:int = int((50 - MapContext.GRID_SIZE) / 2); for (var num:int = 0; num < chipNum; num++) { var mapChip:MapChip = new MapChip(num); mapChip.x = chipPosX; mapChip.y = MapContext.GRID_SIZE * num; _chipList.addChild(mapChip); } addDisplayWindow(_chipList, 395, 60, 50, 400); // マップチップのリスト上でのマウスイベントリスナの登録 _chipList.addEventListener(MouseEvent.CLICK, mouseClickChipList); _chipList.addEventListener(MouseEvent.MOUSE_OVER, mouseOverChipList); _chipList.addEventListener(MouseEvent.MOUSE_OUT, mouseOutChipList); } // 引数で指定したDisplayObject用の窓を作成して、表示リストに追加する private function addDisplayWindow(displayObject:DisplayObject, posx:int, posy:int, width:int, height:int):void { // マスクで表示範囲を制限する var maskShape:Shape = new Shape(); maskShape.graphics.beginFill(0xffffff); maskShape.graphics.drawRect(0, 0, width, height); maskShape.graphics.endFill(); displayObject.mask = maskShape; // 位置を調整するコンテナを作成し表示させる var container:Sprite = new Sprite(); container.x = posx; container.y = posy; container.addChild(displayObject); container.addChild(maskShape); addChild(container); } // 画面に配置するコンポーネントを作成する private function initializeComponents():void { // マップのスクロール用スライダー作成 _mapScrollTop = new HSlider(this, 20, 5, scrollMapHorizontal); _mapScrollBottom = new HSlider(this, 20, 375, scrollMapHorizontal); _mapScrollLeft = new VSlider(this, 5, 20, scrollMapVertical); _mapScrollRight = new VSlider(this, 375, 20, scrollMapVertical); _mapScrollTop.width = _mapScrollBottom.width = _mapScrollLeft.height = _mapScrollRight.height = 350; _mapScrollTop.maximum = _mapScrollBottom.maximum = Math.max(MapContext.MAP_WIDTH - 350, 0); _mapScrollLeft.value = _mapScrollRight.value = _mapScrollLeft.maximum = _mapScrollRight.maximum = Math.max(MapContext.MAP_HEIGHT - 350, 0); // 入出力用テキストフィールド・インポートボタン・エクスポートボタン作成 _IOTextField = new Text(this, 10, 395, ""); _IOTextField.width = 370; _IOTextField.height = 35; _importButton = new PushButton(this, 10, 435, "import", MapContext.instance.importMapData); _exportButton = new PushButton(this, 280, 435, "export", MapContext.instance.exportMapData); // 選択中のマップチップの表示用の枠作成 graphics.beginFill(0x999999); graphics.drawRect(394, 4, 52, 52); graphics.endFill(); graphics.beginFill(0x000000); graphics.drawRect(395, 5, 50, 50); graphics.endFill(); // マップチップのリスト用スライダー作成 _chipListSlider = new VSlider(this, 450, 60, slideChipList); _chipListSlider.height = 400; _chipListSlider.maximum = Math.max((MapContext.GRID_SIZE * MapChip.images.length) - 400, 0); _chipListSlider.value = _chipListSlider.maximum; } private function mouseDownMap(e:MouseEvent):void { _isMouseDownOnMap = true; MapChip(e.target).type = _selectedChipType; } private function mouseUpMap(e:MouseEvent):void { _isMouseDownOnMap = false; } private function mouseOverMap(e:MouseEvent):void { MapChip(e.target).showFrame(); if (_isMouseDownOnMap) { MapChip(e.target).type = _selectedChipType; } } private function mouseOutMap(e:MouseEvent):void { MapChip(e.target).hideFrame(); } private function mouseClickChipList(e:MouseEvent):void { _selectedChipType = MapChip(e.target).type; _selectedChip.type = _selectedChipType; } private function mouseOverChipList(e:MouseEvent):void { MapChip(e.target).showFrame(); } private function mouseOutChipList(e:MouseEvent):void { MapChip(e.target).hideFrame(); } private function scrollMapHorizontal(e:Event):void { _mapScrollTop.value = _mapScrollBottom.value = HSlider(e.target).value; _map.x = -(int(_mapScrollTop.value)); } private function scrollMapVertical(e:Event):void { _mapScrollLeft.value = _mapScrollRight.value = VSlider(e.target).value; _map.y = -(_mapScrollLeft.maximum - int(_mapScrollLeft.value)); } private function slideChipList(e:Event):void { _chipList.y = -(_chipListSlider.maximum - int(_chipListSlider.value)); } } } import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Shape; import flash.display.Sprite; class MapChip extends Sprite { public static var images:Array = []; // BitmapDataの配列 private var _type:int; private var _image:Bitmap; private var _frame:Shape; public function get type():int { return _type; } public function set type(t:int):void { if (t != _type) { _type = t; _image.bitmapData = images[_type]; } } public function MapChip(type:int) { _type = type; _image = new Bitmap(images[_type]); _frame = new Shape(); addChild(_image); addChild(_frame); hideFrame(); } // 枠をハイライト表示させる public function showFrame():void { _frame.graphics.clear(); _frame.graphics.lineStyle(1, 0xffff00); _frame.graphics.drawRect(0, 0, MapContext.GRID_SIZE - 0.5, MapContext.GRID_SIZE - 0.5); } // 枠をぼんやり見える程度にする public function hideFrame():void { _frame.graphics.clear(); _frame.graphics.lineStyle(1, 0x000000, 0.5); _frame.graphics.drawRect(0, 0, MapContext.GRID_SIZE - 0.5, MapContext.GRID_SIZE - 0.5); } } import com.bit101.components.Text; import flash.display.BitmapData; import flash.events.Event; import flash.events.EventDispatcher; class MapContext extends EventDispatcher { public static const GRID_SIZE:int = 35; // グリッドの大きさ public static const GRID_COLS:int = 10; // グリッドの横の数 public static const GRID_ROWS:int = 10; // グリッドの縦の数 // 初期のマップ配置 public static const DEFAULT_MAPDATA:Array = [[1,1,1,8,8,8,8,1,1,1], [1,1,8,8,8,8,8,8,1,1], [1,8,8,0,8,8,0,8,8,1], [8,8,8,0,8,8,0,8,8,8], [8,8,8,8,8,8,8,8,8,8], [8,8,8,8,8,8,8,8,8,8], [8,8,5,5,5,5,5,5,8,8], [1,8,8,5,5,5,5,8,8,1], [1,1,8,8,8,8,8,8,1,1], [1,1,1,8,8,8,8,1,1,1]]; // マップチップ画像（BitmapDataオブジェクト）の読み込み public function load():void { var sample:Array = [ 0x333333, 0x666666, 0x999999, 0xcccccc, 0xffffff, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff ]; var sampleNum:int = int(sample.length); for (var i:int = 0; i < sampleNum; i++) { MapChip.images.push(new BitmapData(MapContext.GRID_SIZE, MapContext.GRID_SIZE, false, sample[i])); } // 読み込み完了イベント送出 dispatchEvent(new Event(Event.COMPLETE)); } // インポート（読み込み）ボタンの処理 public function importMapData(e:Event):void { var mapData:Array = _IOTextFieldReference.text.match(/\d+/g); for (var row:int = 0; row < MapContext.GRID_ROWS; row++) { for (var col:int = 0; col < MapContext.GRID_COLS; col++) { // マップ上の各マップチップの種類を変更する MapChip(_mapModelReference[row][col]).type = mapData[(row * MapContext.GRID_COLS) + col]; } } } // エクスポート（書き出し）ボタンの処理 public function exportMapData(e:Event):void { var mapDataText:String = "["; for (var row:int = 0; row < MapContext.GRID_ROWS; row++) { mapDataText += "["; for (var col:int = 0; col < MapContext.GRID_COLS; col++) { mapDataText += MapChip(_mapModelReference[row][col]).type.toString(); if (col < MapContext.GRID_COLS - 1) { mapDataText += ","; } } mapDataText += "]"; if (row < MapContext.GRID_ROWS - 1) { mapDataText += ",\n"; } } mapDataText += "];"; // テキストフィールドに出力する _IOTextFieldReference.text = mapDataText; } /* ここから上をいじる */ /********************************************************************************/ public static const MAP_WIDTH:int = MapContext.GRID_SIZE * MapContext.GRID_COLS; public static const MAP_HEIGHT:int = MapContext.GRID_SIZE * MapContext.GRID_ROWS; private static var _instance:MapContext = null; private var _mapModelReference:Array; // マップモデルの参照 private var _IOTextFieldReference:Text; // テキスト表示エリアの参照 public static function get instance():MapContext { if (MapContext._instance == null) { MapContext._instance = new MapContext(new SingletonEnforcer()); } return MapContext._instance; } public function MapContext(enforcer:SingletonEnforcer) { } public function setReference(mapModel:Array, textField:Text):void { _mapModelReference = mapModel; _IOTextFieldReference = textField; } } class SingletonEnforcer {}