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.


Step: b) Rotate the shape in 45 degree angle


Step: c) Select height 50 percent

OpenSpace_tile_height_50_percent copy

step: d) Set the linkage :


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.


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


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 :


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

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


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.


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.


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.


In Map Editor :

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


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


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