Gw Temp


Tutorial - 'The Sphere Development Environment' by rjt

An item about Sphere posted on


A tutorial explaining the in's and out's of Sphere's development environment


This tutorial explains the Sphere Editor and how to use it. It’s aimed at people new to Sphere or as a reference.
Sphere uses 8 types of resources: Maps, Spritesets, Scripts, Sounds, Fonts, Window Styles, Images and Animations. It’s clear what all of these are, but it’s important to understand exactly when each is used and how to use the relevant editors.

Obviously, maps are the things that your character walks around. Maps have the .rmp extension, and they can be imported from images (.bmp, .png, .jpeg, .jpg, .jpe and .pcx) and from Verge maps.
The map editor has five windows:

Map Window: This window’s title is the name of the current map. It has two tabs, Map and Tileset. Map is for editing the map, using tiles created in the Tileset tab. On the left side of this tab is a section for layers. You can add a layer by Right clicking on Base and selecting Insert Layer. All of the tiles on the new layer are set the first tile in the Tiles window. Layers that are listed above each other, appear higher in the map (so if a character on the base layer walked under a tile that wasn’t transparent, they would not be seen), and layers that are lower in the list appear lower on the map. The rest of this tab is for drawing tiles on the map. You can add triggers and entities (other people) to the map through right clicking and selecting Insert Entity -> Person/Trigger. The window that pops up when you select Person contains sections for putting the name of the character and the spriteset. The scripts section of this window has a drop down box for selecting an event and the code that goes with that event goes in the text box. The tileset tab is for editing the tile currently selected tile in the Tiles window. There is a palette to the right, and the bar beside that is to select the transparency of what you draw.

Tiles: This window shows the tileset of the current map. You can add a tile by right clicking and selecting Insert Tile. You can animate the tile, by right clicking and selecting Properties, check the Animated box, type in the number of the next tile in the animation in ‘Next Tile’ and then the delay between them in the ‘Delay’ box. If you want to make certain areas of the tile unwalkable, click the Obstructions button and draw the unwalkable areas.

Swatch: This window holds palettes. For example, right click anywhere in it and select Default -> DOS. MS Dos colours will appear. To add your own colour, select it in the Edit tab, and then right click and select Insert Colour Before.

Map Tools: This window contains tools to speed up using the Map tab. The 1x1, 3x3 and 5x5 are for drawing multiple tabs at once. The yellow rectangle lets you select tiles without drawing anything. The next tool acts like 1x1, except that you can hold down the mouse button and drag it over multiple tiles to draw multiple tiles at once. The next two tools let you copy and paste singular tiles, and the two after that do the same but with entities. The next button is for drawing obstructions (things the character cannot walk through). The red circle with a red line through it, and a black line in the background, is the button for deleting obstructions, and the next button is used for moving them. The last three are to make, move and delete zones. Zones are areas of the map where scripts are run every so often. To edit this, right click in the zone (after drawing it on the map) and select Edit Zone. In the execute box, type the code to be executed. To change the amount of time between when it’s executed, type it in the ‘Steps between executes’ box.

Image Tools: The tools in this window help you drawing in the Tileset Tab. All of these perform the same functions they do in other drawing programs, so there’s little need to explain them.

Spritesets: Spritesets contain entities’ sprites. They’re saved in .rss format, and can be imported from Verge Spritesets and the same image formats as Maps. There are four windows, but three of them are the same as from the map editor (Image Tools, Swatch and Spriteset Images, which is the same as Tiles). The last window has three tabs and has the same title as the name of the current Spriteset. The first tab (Frames) has a place for each of the directions your character could be facing. To set a picture into one of these slots, select a frame from the Spriteset Images window, and then click on the slot beside the appropriate direction name. If you want to set more than one frame to a direction (so as the character walks it switches between frames), then right click on the slot and select Append. To change the delay between frame switches, right click on the frame and select Properties. You can add your own direction by right clicking on the white area on the left side of the window and selecting Append. When first created, it’ll be called ‘unnamed’; to rename it, right click and select properties.
The edit tab performs the same function as the edit tab in the map editor, so there’s no need to explain it. And lastly, the base tab controls where the feet of the frame are. This is used to help calculate where a character cannot walk (so that the feet of a character cannot walk through an obstruction). To select the feet, drag the pink rectangle around them.

Scripts: Scripts in sphere are Java Script files (with the extension .js). The script editor is just like any text editor. You can check the syntax of your script using Script -> Check Syntax.

Sounds: Sphere accepts many sound formats (.wav, .flac, .mp3, .mp2, .ogg, .mod, .xm, .it, .s3m). You can test sounds, after adding them to your project, by double-clicking on them. The player has Play and Stop buttons and a volume bar on the right side.

Fonts: Sphere uses it’s own .rfn font format, but you can import Windows and Verge fonts (File -> Import ->). You can edit the fonts in the Font Editor (double click on the font). It’s essentially the same as the Edit tab in the Map Editor (the bar along the bottom lets you scroll between the letters).

Window Styles: Window styles are saved in .rws format, and can be imported from inages (same formats as maps). The Window Style Editor has a palette and transparency bar on the right side of the screen, and a box for drawing tiles in the center. Around the box are 8 portions of window. You can’t see them, but if you click around the edges of the window, parts will appear highlighted in a purple box.

Images: Images are available in all of the formats that maps, window styles and spritesets can be imported from. The Image Editor is like the edit tabs in the Map and Spriteset editors. There is also an Image Tools window and a Swatch window, identical to those from the Map and Spriteset Editors.

Animations: Sphere supports animations of formats .mng, .flic, .flc and .fli and an animation viewer. They can be shown in game using code (var ThisAnimation=LoadAnimation(); ThisAnimation.drawFrame(0, 0);).

That’s my brief tutorial on the Sphere Environment. If you want you can send feedback to