VirtualSpaces Professional Documentation

Getting Started

Welcome

Thank you for purchasing a DesignSkate product.

We create realtime products for your enjoyment, and to allow you to create your own web based chat rooms with minimal effort. We hope our product will be of great use to you.

Feedback is extremely important to us. If you have suggestions or find issues with the product, let us know!


Features

  • Multiple chat room support
  • Multiple avatar support
  • Socket based server
  • Integrated chat

Admin Tool

VirtualSpaces includes a small admin tool to view some additional information about your chat website. It includes the ability to kick clients from rooms, however there is presently no banning functionality. This tool will be improved with the product over time, feedback will assist us greatly with this.


Future Updates

VirtualSpaces is a fluid project at this time, and as such we may release updates to either the client, server or admin tool individually. We recommend backing up your modifications before applying any updates to this product, especially configuration changes such as avatars, rooms, server IPs & passwords.


Server Requirements

  • Node.js
  • Socket.io
VirtualSpaces requires your server to have both Node.js and Socket.io installed in order to run the server and client successfully. These can be used on both Windows and Linux machines.

Initial Configuration

To begin using VirtualSpaces, you'll need to modify the file located in the 'Config' folder named 'VirtualSpacesConfiguration.js'. This file contains the IP address for your VirtualSpaces server.

var VS_SERVERIP = "http://127.0.0.1:1223";

The default VirtualSpaces server uses port :1223. This can be modified by opening the 'SocketServer/VCServer.js' file and modifying line 13.

var VS_SERVER_PORT = 1223;

You should also configure your admin password, also found inside the 'SocketServer/VCServer.js' file on line 19.

var VS_ADMIN_SECRET = "DefaultSecret";

Once configured, start your Node.js/Socket.io server and launch the client. Providing the server is running, the client should automatically connect. If you encounter any issues with the connection, enable developer mode (we recommend Google Chrome's web inspector) to see any errors that may be occurring.


Defining Rooms

VirtualSpaces supports an infinite amount of rooms for your users to chat inside of. Creating rooms is done by modifying the server's script, let's take a look at the code.

First start by opening 'SocketServer/VCServer.js' and take a look at line 48. By default, we have the following rooms defined.

var Rooms = ["cafe", "park", "purple"];

This line simply defines the room IDs that will be used by the next array, containing our room name and some additional configurable variables. These IDs are important, let's take a look at the next array starting on line 49.

var RoomConfig = [
{
	'map_id':'cafe',
	'map_name':'Social Cafe (Room Demo)',
	'map_coordinates': '',
	'max_clients': '25',
	'entry_x': '190',
	'entry_y': '120'
}
];

We've omitted the map_coordinates from the above code example, as that line is usually fairly large. But let's take a look at each of the configurable options.

  • map_id - The ID defined in the first array, for example, cafe.
  • map_name - A friendly name to display to your users.
  • map_coordinates - Define room limits, explained in a little more detail below.
  • max_clients - The number of users allowed into this room.
  • entry_x - The X position the user starts at.
  • entry_y - The Y position the user starts at.

Each room requires a unique ID from the var Rooms line to function correctly. We have included three rooms in the code as an example. After creating or updating a room, restart your VirtualSpaces server to update the clients.


Map Coordinates

VirtualSpaces uses HTML based image maps to restrict avatar movement. We use polygon coordinates along with the image map to do this. Here's an example of what to expect from the coordinates.

16, 404, 259, 248, 308, 251, 383, 202, 440, 168, 499, 201, 425, 243, 624, 353, 755, 317, 860, 373, 848, 598, 522, 598, 36, 536

The size of these coordinates will depend on how many edges you define. Using an online based tool to overlay points onto an image of your choosing makes this process extremely simple, we recommend Summer HTML Image Map Editor. Any polygon based image map creator should do the trick however.

Paste these coordinates inside 'map_coordinates': ' INSIDE HERE ' to define the room edges.


Adding Avatars

As with rooms, there is no limit for the amount of avatars you can use at any one time. At this time, the limitation may be our menu styling, however if you have a little HTML/CSS knowledge you'll be able to adjust this with no problems. Functionally speaking, there is no limit. So let's begin, how are avatars defined?

Avatars are defined in two places. Firstly, on the client side. Let's take a look at how a single avatar is defined.

<div class="AvatarDiv" id="female_sheet">
<div class="avatarpreview" style="background:url('ClientAssets/sprites/female_sheet.png');"></div>
</div>

You'll notice we have the ID of the AvatarDiv defined as female_sheet. This ID will be sent to the VirtualSpaces server when the client joins a chat room. The preview links to the sprite sheet. The sprite sheet should have the same file name (female_sheet.png) as the ID for this avatar. This is because the server will send that ID back to the clients, and the client will attempt to load the file 'ClientAssets/sprites/female_sheet.png'' into the client.

Finally, the same ID must be defined on the server side. This is to ensure no clients send a false sprite sheet ID to other clients, causing invalid images to load in. Take a look at line 80 in the 'SocketServer/VCServer.js' file.

var ValidSprites = ["male_sheet", "test_sheet", "male_sheet2", "female_sheet"];

For each avatar defined on the client side, you must define the same ID in the ValidSprites array. If you do not do this, clients will only see the chosen avatar locally. All other avatars will be set to the default avatar.

This documentation template is provided by Frittt Templates.