In our first tutorial we have discussed the design section now in this tutorial we will move to
the development section.
After Exporting the Map :
We will get a XML which will look like this :
Map.XML :
<?xml version="1.0" encoding="utf-8"?> <!-- Generated with OpenSpace Editor [Fri Dec 17 17:13:12 GMT+0530 2010] --> <IsoMapDefinition> <TileSet> <!-- Default placeholder for empty tile --> <tile id=".."/> <!-- Tile --> <tile id="t7" walkable="1"/> <!-- Tile --> <tile id="t2" skinOnTop="1"> <skins> <skin className="stone2"/> </skins> </tile> </TileSet> <Backgrounds> <!-- Default placeholder for empty background part --> <background id=".."/> <!-- Background parts --> <background id="BG" className="BG" cache="0"/> </Backgrounds> <Map id="root" width="15" height="15"> <backgrounds width="600" height="300" rows="2" cols="2" xOffset="0" yOffset="0"> <backgroundRow>BG, ..</backgroundRow> <backgroundRow>.., ..</backgroundRow> </backgrounds> <accessPoints> <accessPoint px="3" py="13" pz="0"/> </accessPoints> <levels> <level id="0"> <levelRow>.., .., .., .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., t7, t7, t7, t7, .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., t7, .., .., .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., t7, .., .., .., .., t7, t7, .., .., .., .., .., ..</levelRow> <levelRow>.., .., t7, t7, t7, t7, .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>t7, t7, .., .., t7, t7, t7, t7, t7, .., .., .., .., .., ..</levelRow> <levelRow>t7, t7, t7, t7, t7, .., t7, t7, .., .., .., .., .., .., ..</levelRow> <levelRow>.., .., .., t7, t7, .., .., .., .., .., .., .., .., .., ..</levelRow> <levelRow>.., t7, t7, t7, t7, .., .., t2, .., .., .., .., .., .., ..</levelRow> <levelRow>.., t7, t7, t7, .., t7, .., .., .., .., .., .., .., .., ..</levelRow> </level> </levels> </Map> </IsoMapDefinition>
In OpenSpace.XML :
In OpenSpace.xml we can modify the AvatarTypes Here .
<AvatarTypes> <AvatarType className="DummyAvatarMovieClip" animTime="300" stature="30" cp0="0,5" cp1="-10,0" cp2="0,-5" cp3="10,0" /> <AvatarType className="SimpleAvatarMovieClip" animTime="250" stature="30" /> <AvatarType className="BoxAvatarMovieClip" animTime="1000" stature="31" cp0="0,8" cp1="-16,0" cp2="0,-8" cp3="16,0" /> </AvatarTypes>
For movement control we use below mentioned tag :
<ControllerType>mouse</ControllerType>
For Connection with SmartFoxServer :
Client side sfsClient.XML :
<SmartFoxClient> <ip>127.0.0.1</ip> <port>9339</port> <zone>openspace</zone> <debug>false</debug> <smartConnect>false</smartConnect> </SmartFoxClient>
Client Side Action Script
In the library of the Main.Fla put the OpenSpace component and define the OpenSpace XML path there.
Here we are going to define the client side code for the ProtoType .
We are using this class as document class of the project.
package com{
import flash.display.*
import flash.events.*
import flash.net.*
import it.gotoandplay.smartfoxserver.*
import it.gotoandplay.smartfoxserver.data.*
import com.smartfoxserver.openspace.events.*
import com.smartfoxserver.openspace.display.Tile
public class ProtoType extends MovieClip{
/*
Here we need variables for the different loaders
We are using
@avatarsLoader : for loading of avatar swf
@tilesLoader : for loading of tiles swf
@backgroundsLoader : for loading of background swf
*/
//---------------------------------------------------------
private var avatarsLoader:Loader
private var tilesLoader:Loader
private var backgroundsLoader:Loader
//Variables for the external assets libraries
private var avatarsLibrary:*
private var tilesLibrary:*
private var backgroundsLibrary:*
private var myUsername:String
private var mapRendered:Boolean
private var smartFox:SmartFoxClient = new SmartFoxClient()
private var currentMap:Object
private var nextMap:Object = {}
public function ProtoType ():void
{
handleSmartFoxServerEvent();
handleMapStructure();
handleButtonEvents();
}
private function handleSmartFoxServerEvent():void
{
smartFox.addEventListener(SFSEvent.onConnection, onSFSConnection)
smartFox.addEventListener(SFSEvent.onLogin, onSFSLogin)
smartFox.addEventListener(SFSEvent.onJoinRoom, onSFSRoomJoined)
smartFox.addEventListener(SFSEvent.onRoomListUpdate, onSFSRoomListUpdate)
smartFox.addEventListener(SFSEvent.onUserCountChange, onUserCountChange)
}
private function handleMapStructure():void
{
nextMap.sfsRoomName = "test"
nextMap.filename = "map.xml"
nextMap.px = -1
nextMap.py = -1
nextMap.dir = -1
}
private function handleButtonEvents():void
{
joinBtn.addEventListener(MouseEvent.CLICK, onJoinBtClick)
}
private function onSFSConnection(evt:SFSEvent):void
{
if (evt.params.success)
smartFox.login(smartFox.defaultZone, myUsername, "")
else
{
joinBtn.enabled = true
username_txt.enabled = true
}
}
private function onSFSLogin(evt:SFSEvent):void
{
if (evt.params.success)
myUsername = evt.params.name
else
{
joinBtn.enabled = true
username_txt.enabled = true
smartFox.disconnect()
}
}
private function onSFSRoomJoined(evt:SFSEvent):void
{
// If we entered the iso world for the first time, we have to load external assets
var loadAssets:Boolean = false
if (currentMap == null)
loadAssets = true
mapRendered = false
// Set current map data
//----------------------------------------------------------------------------------
currentMap = {}
currentMap.sfsRoomName = nextMap.sfsRoomName
currentMap.filename = nextMap.filename
currentMap.px = nextMap.px
currentMap.py = nextMap.py
currentMap.dir = nextMap.dir
if (loadAssets)
{
avatarsLoader = new Loader()
avatarsLoader.contentLoaderInfo.addEventListener(Event.INIT, onAvatarsLibraryLoaded)
avatarsLoader.load(new URLRequest("SWF/Avatars.swf"))
}
else
onOSInitialized(null)
}
private function onAvatarsLibraryLoaded(evt:Event):void
{
avatarsLibrary = evt.target.content
avatarsLoader.contentLoaderInfo.removeEventListener(Event.INIT, onAvatarsLibraryLoaded)
tilesLoader = new Loader()
tilesLoader.contentLoaderInfo.addEventListener(Event.INIT, onTilesLibraryLoaded)
tilesLoader.load(new URLRequest("SWF/Skins.swf"))
}
private function onTilesLibraryLoaded(evt:Event):void
{
tilesLibrary = evt.target.content
tilesLoader.contentLoaderInfo.removeEventListener(Event.INIT, onTilesLibraryLoaded)
backgroundsLoader = new Loader()
backgroundsLoader.contentLoaderInfo.addEventListener(Event.INIT, onBackgroundsLibraryLoaded)
backgroundsLoader.load(new URLRequest("SWF/background.swf"))
}
private function onBackgroundsLibraryLoaded(evt:Event):void
{
backgroundsLibrary = evt.target.content
backgroundsLoader.contentLoaderInfo.removeEventListener(Event.INIT, onBackgroundsLibraryLoaded)
initializeOpenSpace()
}
private function initializeOpenSpace():void
{
os.addEventListener(OpenSpaceEvent.INITIALIZED, onOSInitialized)
os.addEventListener(OpenSpaceEvent.MAP_LOADED, onOSMapLoaded)
os.addEventListener(OpenSpaceEvent.MAP_RENDERED, onOSMapRendered)
os.addEventListener(OpenSpaceEvent.MAP_ERROR, onOSMapError)
os.addEventListener(AvatarEvent.AVATAR_CREATED, onAvatarCreated)
os.addEventListener(AvatarEvent.START_MOVEMENT, onAvatarMovementStart)
os.addEventListener(AvatarEvent.STOP_MOVEMENT, onAvatarMovementEnd)
os.addEventListener(AvatarEvent.LEAVE_TILE, onAvatarLeaveTile)
os.addEventListener(AvatarEvent.ENTER_TILE, onAvatarEnterTile)
os.initialize(smartFox, avatarsLibrary)
}
private function onOSInitialized(evt:OpenSpaceEvent):void
{
os.loadMap("editorData/" + currentMap.filename, tilesLibrary, backgroundsLibrary)
}
private function onOSMapLoaded(evt:OpenSpaceEvent):void
{
}
private function onOSMapError(evt:OpenSpaceEvent):void
{
}
private function onOSMapRendered(evt:OpenSpaceEvent):void
{
mapRendered = true
// Set my skin, if not already set
var initialSkin:Object = null
var myUser:User = smartFox.getActiveRoom().getUser(smartFox.myUserId)
var skinVar:String = myUser.getVariable("_os_skin")
if (skinVar == null)
{
initialSkin = {}
initialSkin.sex = "m"
initialSkin.hair = "hair1"
}
// Set initial position if available
var initialPos:Object = null
if (currentMap.px > -1 && currentMap.py > -1)
{
initialPos = {}
initialPos.px = currentMap.px
initialPos.py = currentMap.py
}
// Create avatar
os.createMyAvatar("dummy", null, initialSkin, initialPos, currentMap.dir)
}
private function onAvatarCreated(evt:AvatarEvent):void
{
}
private function onAvatarMovementStart(evt:AvatarEvent):void
{
}
private function onAvatarMovementEnd(evt:AvatarEvent):void
{
}
private function onAvatarLeaveTile(evt:AvatarEvent):void
{
}
private function onAvatarEnterTile(evt:AvatarEvent):void
{
}
private function onSFSRoomListUpdate(evt:SFSEvent):void
{
smartFox.joinRoom(nextMap.sfsRoomName)
}
private function onUserCountChange(evt:SFSEvent):void
{
}
private function onJoinBtClick(evt:MouseEvent):void
{
if (username_txt.text != "")
{
joinBtn.enabled = false
username_txt.enabled = false
myUsername = username_txt.text
smartFox.loadConfig("config/sfsClient.xml", true)
}
}
}
}
Tags: AvatarTypes, Client Side Action Script, Connection with SmartFoxServer, Exporting the Map, onAvatarEnterTile, onAvatarMovementEnd, OpenSpace Editor, ProtoType, the Development section, Working with OpenSpace 1x
Follow us on Twitter
Subscribe to our RSS Feeds