ステージエディタ(基本実装中)

状況

今日は「ブロックとかをドラッグ&ドロップで配置したい」という作業まわりだけで終わってしまった。


詰まったのは、

  • Listにグラフィックを追加する場合、UIComponentじゃないといけない?
    • Spriteを入れようとしてまず詰まる
    • Imageにするも、並んで表示されずに詰まる
    • Imageのheightなどを設定して、ようやく並んで表示される
  • ドラッグ&ドロップの対応
    • event.targetではなくevent.currentTargetで対象を取得
    • さらに、currentTargetはObjectなので、「as UIComponent」でキャスト

あたり。


まだ、ドラッグ&ドロップの時に「ドラッグしてる時の見た目」と「ドロップした後の見た目」の位置が違うので、そこの調整をしたいが今日はもう時間がないので、平日に続きをやる予定。

swf

一応、左の「HOGEHOGE」や「FOOBAR」を中央のキャンバスにドラッグ&ドロップできる。配置したものをさらにドラッグ&ドロップ可能。それ以外はただ配置しているだけ。

コード

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()">
	<!--Script-->
	<mx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.core.UIComponent;
			import mx.core.IFlexDisplayObject;
			import mx.core.DragSource;
			import mx.controls.Image;
			import mx.managers.DragManager;

			private function init():void{
				drop_item_box.addChild(CreateAASprite("HOGE\nHOGE"));
				drop_item_box.addChild(CreateAASprite("FOO\nBAR"));
			}

			protected function CreateAASprite(in_Text:String):Image{
				//まずは文字列を普通に表示するものを作成
				var text_field:TextField = new TextField();
				{
					text_field.text = in_Text;

					text_field.border = false;
					text_field.x = 0;
					text_field.y = 0;
					text_field.width = 99;
					text_field.height = 99;
				}

				//その内容をビットマップデータとして取り込む
				var bmp_data : BitmapData = new BitmapData(text_field.textWidth+5, text_field.textHeight+5, true , 0x00000000);
				{
					var matrix : Matrix = new Matrix(1,0,0,1,0,0);
					var color : ColorTransform = new ColorTransform(1,1,1,1,0,0,0,0);
					var rect : Rectangle = new Rectangle(0,0,bmp_data.width,bmp_data.height);
					bmp_data.draw(text_field, matrix, color, BlendMode.NORMAL, rect, true);
				}

				//取り込んだビットマップデータを表示
				var bmp_obj:Bitmap = new Bitmap( bmp_data , PixelSnapping.AUTO , true);
//				{
//					bmp_obj.x = -text_field.textWidth*0.5;
//					bmp_obj.y = -text_field.textHeight*0.5;
//				}

				var image:Image = new Image();
				{
					image.width = bmp_obj.width;
					image.height = bmp_obj.height;
					image.addChild(bmp_obj);
					image.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler_Create);
				}

				return image;
			}

			//ドラッグできるデータを新規作成してドラッグ開始
			private function mouseDownHandler_Create(event:MouseEvent):void{
				var trg:UIComponent = event.currentTarget as UIComponent;

				var image:Image = new Image();
				{
					var bitmapData:BitmapData = new BitmapData(trg.width, trg.height, true , 0x00000000);
					{
						bitmapData.draw(trg);
					}
					var bitmap:Bitmap = new Bitmap();
					{
						bitmap.bitmapData = bitmapData;
					}

					image.width = bitmap.width;
					image.height = bitmap.height;
					image.addChild(bitmap);
					image.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
				}

				//ドラッグ中のイメージを作成
				var imageProxy:UIComponent = new UIComponent();
				{
					imageProxy.addChild(image);
				}

				//ドラッグされるデータを作成
				var dragSource:DragSource = new DragSource();
				{
					dragSource.addData(image, "img");
				}

				//ドラッグを開始
				DragManager.doDrag(trg, dragSource, event, imageProxy);
			}

			//対象をドラッグする
			private function mouseDownHandler(event:MouseEvent):void{
				var trg:UIComponent = event.currentTarget as UIComponent;
				//ドラッグされるデータを作成
				var dragSource:DragSource = new DragSource();
				dragSource.addData(trg, "img");

				//ドラッグ中のイメージを作成
				var imageProxy:UIComponent = new UIComponent();
				{
					var bitmapData:BitmapData = new BitmapData(trg.width, trg.height, true , 0x00000000);
					{
						bitmapData.draw(trg);
					}
					var bitmap:Bitmap = new Bitmap();
					{
						bitmap.bitmapData = bitmapData;
					}
					imageProxy.addChild(bitmap);
				}

				//ドラッグを開始
				DragManager.doDrag(trg, dragSource, event, imageProxy);
			}

			private function dragEnterHandler(event:DragEvent):void{
				var trg:UIComponent = event.currentTarget as UIComponent;
				DragManager.acceptDragDrop(trg);
			}
			private function dragOverHandler(event:DragEvent):void{
//				var trg:UIComponent = event.currentTarget as UIComponent;
//				trg.setStyle("backgroundColor", "#FFFF99");
			}
			private function dragExitHandler(event:DragEvent):void{
//				var trg:UIComponent = event.currentTarget as UIComponent;
//				trg.setStyle("backgroundColor", "#FFFFFF");
			}
			private function dragDropHandler(event:DragEvent):void{
				var trg:UIComponent = event.currentTarget as UIComponent;

				var image:UIComponent = event.dragSource.dataForFormat("img") as UIComponent;

				image.x = event.localX;
				image.y = event.localY;

				trg.addChild(image);
			}
			private function dragCompleteHandler(event:DragEvent):void{
//				var trg:UIComponent = event.currentTarget as UIComponent;
//				trg.setStyle("backgroundColor", "#FFFFFF");
			}

			public function changeLX(event:Event):void
			{
				//stepValue.text = "Value Selected is "  + event.target.value;
			}
			public function changeRX(event:Event):void
			{
				//stepValue.text = "Value Selected is "  + event.target.value;
			}
			public function changeUY(event:Event):void
			{
				//stepValue.text = "Value Selected is "  + event.target.value;
			}
			public function changeDY(event:Event):void
			{
				//stepValue.text = "Value Selected is "  + event.target.value;
			}
		]]>
	</mx:Script>


	<!--View-->
	<mx:Panel title="Owata Editor"
		paddingTop="10" paddingLeft="10"
		paddingRight="10" paddingBottom="10">

		<mx:HBox borderStyle="solid">
			<!--Left-->
			<mx:VBox borderStyle="solid" id = "drop_item_box">
			</mx:VBox>

			<!--Center-->
			<mx:Canvas borderStyle="solid" id="myCanvas" backgroundColor="#FFFFFF" width="400" height="300"
				dragEnter="dragEnterHandler(event)"
				dragOver="dragOverHandler(event)"
				dragExit="dragExitHandler(event)"
				dragDrop="dragDropHandler(event)"
 			/>

			<!--Right-->
			<mx:HBox borderStyle="solid">
				<!--List-->
				<mx:HBox borderStyle="solid">
					<mx:VBox borderStyle="solid">
						<mx:List id="my_obj_list" width="100"/>
						<mx:HBox borderStyle="solid">
							<mx:Label text="Add"/>
							<mx:Label text="Del"/>
						</mx:HBox>
					</mx:VBox>
				</mx:HBox>

				<!--Param-->
				<mx:VBox borderStyle="solid">
					<!--Top-->
					<mx:HBox borderStyle="solid">
						<mx:VBox borderStyle="solid" horizontalAlign="left">
							<mx:Label id="label_hoge" text="Category"/>
							<mx:ComboBox id="object_category"/>
						</mx:VBox>
						<mx:VBox borderStyle="solid" horizontalAlign="left">
							<mx:Label text="Name"/>
							<mx:TextInput  id="my_obj_name" text="Block 1" color="#000000"/>
						</mx:VBox>
					</mx:HBox>

					<!--Center-->
					<mx:Grid borderStyle="solid">
						<mx:GridRow borderStyle="none" id="row1">
							<mx:GridItem borderStyle="none" >
								<!--empty-->
							</mx:GridItem>
							<mx:GridItem borderStyle="none" horizontalAlign="right">
								<mx:Label text="UY:" textAlign="right"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" >
								<mx:NumericStepper id="val_uy" change="changeUY(event);" value="0" minimum="-9999" maximum="9999"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" >
								<!--empty-->
							</mx:GridItem>
						</mx:GridRow>
						<mx:GridRow borderStyle="none" id="row2">
							<mx:GridItem borderStyle="none" horizontalAlign="right">
								<mx:Label text="LX:" textAlign="right"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" >
								<mx:NumericStepper id="val_lx" change="changeLX(event);" value="0" minimum="-9999" maximum="9999"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" horizontalAlign="right">
								<mx:Label text="RX:" textAlign="right"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" >
								<mx:NumericStepper id="val_rx" change="changeRX(event);" value="0" minimum="-9999" maximum="9999"/>
							</mx:GridItem>
						</mx:GridRow>
						<mx:GridRow borderStyle="none" id="row3">
							<mx:GridItem borderStyle="none" >
								<!--empty-->
							</mx:GridItem>
							<mx:GridItem borderStyle="none" horizontalAlign="right">
								<mx:Label text="DY:" textAlign="right"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" >
								<mx:NumericStepper id="val_dy" change="changeDY(event);" value="0" minimum="-9999" maximum="9999"/>
							</mx:GridItem>
							<mx:GridItem borderStyle="none" >
								<!--empty-->
							</mx:GridItem>
						</mx:GridRow>
					</mx:Grid>

					<!--Bottom-->
				</mx:VBox>
			</mx:HBox>
		</mx:HBox>
	</mx:Panel>
</mx:Application>