We have implemented a lot of functions for the buildings and environments of the virtual world. It will now load the terrain map, buildings, and portals to the world. When these basic features are finished, we often begin to input content and shape in the virtual world. We will enhance the map editor for using it to design the whole virtual world. Creating a map editor can highly boost the speed of designing the virtual world because it is — "What you see is what you get" — and prevents inputting boring raw data.
The editor now groups brushes, buildings, and movements into different panels. The following graph shows how we compose the Building Panel. The background is static graphic. There is a ScrollPane component whose source is pointing to the Buildings MovieClip. The Buildings MovieClip is controlled by a class which reads the building definition XML file to show the building movie clips.
We will cover key implementations here. The full code of the map editor is in the code example bundle.
When a map designer selects a building in the Building Panel, the new building will follow the mouse. Along the mouse movement, the tiles under the building will highlight in either red or bright colors. Red color means the building cannot be placed there and all bright colors means it can be placed. The following functions show how the highlighted and unhighlighted logic works. We have an addColor function to change the color of the building temporarily.
private function unhighlightAllTiles():void {
for(var i:int=0;i<_mapHeight;i++){
for(var j:int=0;j<_mapWidth;j++){
addColor(_map[i][j],0,0,0);
}
}
}
private function highlightTile(sx:Number,sy:Number,size:int):void {
unhighlightAllTiles();
var buildable = false;
var isoCoord:Point = s2i(sx,sy);
if (isoCoord.x >=0 && isoCoord.x+size-1 < _mapWidth
&& isoCoord.y-size+1 >=0 && isoCoord.y+size-1 < _mapHeight
){
buildable = true;
// loop all occupied tile by the building
for(var i:int = isoCoord.y-size+1;i<=isoCoord.y;i++){
for(var j:int=isoCoord.x;j<isoCoord.x+size;j++){
var isoTile:IsoTile = _map[i][j];
// if any occupied tile is not walkable
// than it turns red and cannot build.
if (_walkableMap[i][j] == 1){
addColor(isoTile,50,50,50);
}else{
addColor(isoTile,255,20,20);
buildable = false;
}
}
}
}
_buildable = buildable;
}
There are three modes now in the editor; they are move, paint terrain, and add building. These modes are determined by a variable.
/* tool type: move, paint, building*/ private var _currentTool:String = 'move';
When the mouse is pressed, it will check the mode and perform different actions. It will either start painting the terrain or start dragging the whole map.
private function onDown(e:MouseEvent):void {
if (_currentTool == 'paint'){
startDraw(e);
}else if (_currentTool == 'move'){
_mapHolder.startDrag();
}
}
When the mouse is moving in building mode, the new building follows the mouse and also highlights the tile under the mouse cursor to indicate whether it can be placed.
private function onMove(e:MouseEvent):void {
if ( _currentTool == 'paint'){
drawing(e);
}else if (_currentTool == 'building'){
if (_draggingBuilding != null){
highlightTile(
stage.mouseX+_gridWidth/2,
stage.mouseY,
_buildings[_draggingBuilding.id].size);
}
}
}
When the mouse is released in building mode, it will finalize the building creation and save the data for output later. If the tile under the building is occupied and cannot build anything more, it will delete the newly created building movie clip without saving it.
private function onUp(e:MouseEvent):void {
if (_currentTool == 'paint'){
stopDraw(e);
}else if (_currentTool == 'move'){
_mapHolder.stopDrag();
}else if (_currentTool == 'building'){
_draggingBuilding.stopDrag();
if (_buildable){
/* map the movie clip to the tile */
var buildingCoord:Point = s2i(stage.mouseX+_gridWidth/2,stage.mouseY);
var alignedBuildingCoord:Point = i2sLocal (buildingCoord.x,buildingCoord.y);
_draggingBuilding.x = alignedBuildingCoord.x;
_draggingBuilding.y = alignedBuildingCoord.y;
/* id 0 is the portal marker */
if (_draggingBuilding.id == 0){
var savePortalObj:PortalObject = new PortalObject();
savePortalObj.id = _draggingBuilding.id;
savePortalObj.x = buildingCoord.x;
savePortalObj.y = buildingCoord.y;
savePortalObj.connectedRoom = "lobby";
_portalList.push(savePortalObj);
}else{
var saveBuildingObj:Object = {};
saveBuildingObj.type = _draggingBuilding.id;
saveBuildingObj.x = buildingCoord.x;
saveBuildingObj.y = buildingCoord.y;
_buildingList.push(saveBuildingObj);
}
/* mark the place non-walkable after placing the building */
var size:int = _buildings[_draggingBuilding.id].size;
for(var i:int = buildingCoord.y-size+1;i<=buildingCoord.y;i++){
for(var j:int = buildingCoord.x; j<buildingCoord.x+size; j++) {
_walkableMap[i][j] = 0;
}
}
}else{
_sortableContainer.removeChild(_draggingBuilding);
}
unhighlightAllTiles();
_draggingBuilding = null;
}
}
The final step is to modify the output code to export the buildings and portals data as well. We just need to trace the building list and portal list variable into our defined XML structure.