Archive for the ‘OpenSpace’ Category

Working with OpenSpace 1x for the Development section

February 3rd, 2011 by aabhaanjan

openSpace

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]

<?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>

[/xml]

In OpenSpace.XML :

In OpenSpace.xml we can modify the AvatarTypes Here .

[xml]

<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>

[/xml]

For movement control we use below mentioned tag :

<ControllerType>mouse</ControllerType>

For Connection with SmartFoxServer :

Client side sfsClient.XML :

[xml]

<SmartFoxClient>

<ip>127.0.0.1</ip>

<port>9339</port>

<zone>openspace</zone>

<debug>false</debug>

<smartConnect>false</smartConnect>

</SmartFoxClient>

[/xml]

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.

[xml]

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)

}

}

}

}

[/xml]

Tags: , , , , , , , , ,

Working with Open Space V 1.0

December 7th, 2010 by aabhaanjan

Working with Open Space V 1.0

Design Section:

As we know isometric projection depends upon the view angle. We need to follow the design pattern based on tile.  First we will design a tile and decide the size (height and width) here I am defining it 122X61.

Lets design an isometric tile :

Step :  a). Draw a rectangular shape.

Isometric_tile_step_1

Step: b) Rotate the shape in 45 degree angle

OpenSpace_tile_rotate_45_degree

Step: c) Select height 50 percent

OpenSpace_tile_height_50_percent copy

step: d) Set the linkage :

OpenSpace_tile_registeration

Skins Swf : we will need to design a skin swf where all skins for the tiles and object will be designed. In below given image I am designing a skin for the Tile . The important point need to remember while designing we have to give it a linkage in the library as shown in the picture given below.

OpenSpace_IsoObject_designed_based_on_tile

Combination of Tiles : For complex objects which are bigger than the one size we need to develop it using combination of tiles . As given image I have put 4 Tiles in the isometric view and guided (because we only need it as the base for design).

OpenSpace_complex_IsoObject_designed_based_on_tile

Over these guided tiles we will design the base (if needed). As shown in the below given image.

Over the base we will design the object for example I have tried to design an object.

Last point what we need to remember that we will have to give it a proper linkage name.

BackGround Swf : we will need to design a background swf where all where specially we will design the backgrounds as shown in the image I have used example graphics for the background of OpenSpace. The important point need to remember while designing we have to give it a linkage in the library ..

Development and Deployment in the OpenSpace Editor :

Now we need to deploy these in the OpenSpace Editor. For now I have installed trial version of OpenSpace. Go to Start ànd OpenSpace Trial OpenSpace Editor Trial and click it.

After clicking the OpenSpace Trial you will get a window like this. Where I am putting some values for the required fields for example :

OpenSpace_StartPage

New  project : Select “New project ” if you want to create a new OpenSpace .

Following are details of this screen . There are two parts :

OpenSpace_Project_Detai_Page

Project details :

Title : Here I am putting the name of project “TestIso”.

Folder : Here we will set the directory path of the project.

Skins SWF : Here path of the  swf will come which is containing Skins.

Backgrounds SWF : Here path of that swf will come which is containing Backgrounds.

Auto generate skins : by checking this field we allow the editor automatically generate the skins.

Avatar mockup scale : by dragging  it we can decide the avatar’s size.

Tile properties :

Here we decide the Tile’s properties .

Tile Size : Here we decide the Tile Size.

Tile ratio : Here we define  the ratio between the height and width of the tile. Show tile elevation : Show the tiles elevation

On clicking create :

On clicking create we will get assets in the library of Skins as shown in this image.

OpenSpace_making_tiles

It has all the assets what we had designed in the Skin Fla. Now we can to create the New Skin to set the different properties on it

.

In Tile Editor : Create and edit the tile according to your requirement using

Proerties panel. For this example I have created a tile and skinned it with the tile skin also selected “walkable ”value true because I want the player should walk on this.

Similarly we will need to create the tile for every object.

OpenSpace_making_supertiles

In SuperTile Editor :

In this section using the tiles we can create the super tiles.

In Background Editor :

Similarly in the background section we will create the background using the existing backgrounds assets.

OpenSpace_creating_backgrounds

In Map Editor :

Create the new map and add the object on the grid. As example I have added here.

OpenSpace_creating_maps

Now using export the map we need to export the map for world use.It will generate the map in xml format.

OpenSpace_export_maps

For Updating Skins Library :

Create the object in the Skins fla and generate the swf. In Skin Editor section of OpenSpace create new skin and add the class it will get updated.

Lets move to the second part where we will import the XML and link it with SmartFoxServer 🙂

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,