Using Sphere
From Spheriki
Welcome to the using Sphere tutorial. By now, you might have downloaded Sphere, opened it up and was lost to the emptiness you saw inside of it. This tutorial will teach you that that emptiness is your blank canvas in which your creativity can flourish.
This tutorial will be a very easy step-by-step procedure with helpful screenshots at every single step. You shall never get lost, and you shall never worry. So relax and enjoy the experience!
NOTE: This does not teach you how to make a game. It teaches you how to use Sphere. There is no code, or example code in this tutorial. Furthermore, it is modular, you don't need to read it from top to bottom, pick the areas you wish to know more about, and skip the areas you already know. But you may start from the top if you want to, this is how it was initially designed.
Contents |
Sphere
Sphere is an editor that allows you to create games for its game engine. It'll do everything for you from creating spritesets to windowstyles, maps fonts and images. Oh, and code too!
Step 1: Open Sphere
First and foremost, open Sphere. Double click the icon and a screen much like this will appear:
Step 2: New Game
Now click on File, then New and then: Project.
Now a message box will pop up prompting you to name a project folder and game title. Do this now, preferably with what you see in the screenshot.
With that done your project will reveal itself:
Images
Images are used often in a game. They represent any graphical component such as items and GUI elements such as a HUD, and even battle effect images.
Step 1: New Image
To make a new Image just click on File, then New and then Image.
Alternatively, you can move the mouse to the project tree where the images folder is, right click it and select new image.
Step 2: Drawing
To draw, select a tool from the tools list above, by default you use the pen tool. In total there are 7 different tools plus an F which means "fill" and an A which means Anti-alias. Anti-aliasing only works on circles and ovals, however.
Click the Circle tool.
Step 3: Choosing a Color
To choose a color just left-click somewhere in the color palette.
Your color will appear at the bottom alongside another color. To switch between these colors just click on the black box to the lower-left.
To do further edits to the image you can right click the image and browse several of the features it has. The Color Picker is great for selecting nearby colors within the image.
When you have selected a color, draw a circle. Note: the circle will draw from the center out. After that, save the image as: Circle.png
Maps
All RPG games have maps. And each map needs to be built with some tool. Sphere's editor has such a tool, and this is how to use it.
Step 1: New Map
First create a new map, follow the same method you did for the image. This time it'll prompt you to fill in a width and height. Set it up the way it is here:
When it says to create a new tileset click 'yes'.
You should come to an empty canvas like this:
After that you can begin making the map. But! There are no tiles. There are several methods. One way is to make the tile yourself.
Step 2: Making Tiles
To make a tile click on the Tileset tab. You should come to a screen that looks much like the image editor:
Next, we can draw in a tile. I'm going to draw a grass tile. Use what info you know from the image tutorial to help draw the tile. Feel free to copy this image, if you want.
Now when we go back to the 'Map' tab the map would be filled in with your tile. This is automatic since we filled in the only black tile on the map.
There! Even though this was automatic, there are indeed several tools to help you draw your map. There are paint cans to fill in the map, the grid like tools change the size of the brush when in pen mode and the 1x, 2x, and 4x boxes zoom the map respectively. We'll get into the advanced stuff later.
To add more tiles to the tileset, right click the tileset and select 'append tiles':
When the dialog box pop's up put in a value of twenty. We can always add more later, if the need arises.
After that, select the next tile by clicking the next open space in the tileset. It may not look like a new tile is there, but trust me there is. Then continue drawing. Draw water tiles, perhaps a bridge, trees and sand.
To copy in tiles from another source you can import them by heading to file>import>image_to_tileset. Another way is to copy and paste directly into the tileset:
You can select multiple tiles, such as this tree by clicking and dragging.
Or a bunch of tiles:
Step 3: Making Layers
Every map has multiple layers. Some have two, others have 4, or even more. With Sphere you can have limitless layers, but try to keep the count small. More layers means more to draw and that's no good.
Right click the current layer and choose 'insert layer':
Then right click the new layer, and choose properties:
In this menu, you can see there are various options for parallaxing and scrolling effects. These are more advanced features and will be eplained at a later time. For now just hit 'ok'.
After you do that make sure the new layer is selected, then flood fill it in with a blank tile:
To make a blank tile, just set that slider to the far right to '0' and paint it full. These invisible tiles allow you to see into the layer below. It might get confusing at first but you'll get the hang of it. Remember to slide it back to the top to continue painting in color. Notice if you slide it half-way you make semi-transparent tiles, this is useful for glass or clear structures.
Once that is complete continue drawing and making new layers as you see fit. Here is my completed forest:
Step 4: Tile Properties/Collisions
Collisions are used in every video game since Pong. They detect whether or not you had hit into a solid object. To make an object solid in Sphere, right click the first tile in the tileset, then choose properties:
Notice there are a few things you can do here. For one, you can change that tiles specific name. This name is used in code for more advanced purposes. You can also change its animation speed and the tile it'll automatically animate to. You can toy with this if you made water that you want to animate. For obstructions, click on the button in the pop-up box that says 'edit obstructions':
You will notice two arrows. Keep clicking on the next arrow '->' until you come across the tile you want obstructed. After that, click on the presets button and then click on the 'blocked' preset.
Just keep doing this for all tiles you want blocked by the player! Notice there are other blocking options? These are for more interesting designs. Well, that's all there is to it. Now click 'ok' twice to quit back to the map.
