Gw Temp

Menu

Tutorial - 'Sphere Basics Two' by rjt

An item about Sphere posted on

Blurb

The second part of rjt's Sphere Basic's tutorials for beginning Sphere

Body

In the last tutorial, we mainly covered writing text to the screen. This is useful, but what if you wanted to create a map with characters that move around? To do this, we'll need to:
1. Create a tileset and a map
2. Create a charset
3. Make a script to control the game

We will be using 2 new resources in step's 1 and 2: Maps and Spritesets. We'll start by creating a new map: Click File -> New -> Map. Leave the Width and Height at 64, and as we haven't created a tileset yet, leave that blank too; then cick okay (and click 'Yes' at the window that appears). 5 new windows appear. In this tutorial I'll only explain what you need to know about these. If you want more information look at my tutorial 'The Sphere Development Environment'. The main window (called 'Untitled*') has two tabs: the Map tab contains what the map currently looks like, and the Tileset tab lets you edit the current tile (the tileset can be viewed in the Tiles window). Let's make a grass tile. Open the tileset tab and click a green colour from the palette on the right side of the window. Right click inside the white square and select Fill -> RGB. This fills the tile with the green you selected. You can make the tile more realistic by right clicking and selecting Filter -> Noise. The tile will have appeared in the Tiles window, and because it's the only tile, the entire map now uses this tile. You can see this by clicking on the Maps tab. Click File -> Save As... then save it as Map1.rmp in the maps directory. So, that's Step 1 completed; on to Step 2.
Close the Map1.rmp window, and create a new spriteset (File -> New -> Spriteset). 4 windows will appear. For now, turn your attention to Untitled. The first tab in this window is Frames. This has a space for frames for each of the directions the character could be facing. Click on the rectangle beside south, and then click on the Edit tab. This is like the Tileset tab in the Map Editor. Click on the bar on the left side of the screen (beside the palette). This sets the transparency of the tile. Lower it to 0, select a white colour, and then right click in tile (the white rectangle) and select Fill -> Alpha. Now, raise the bar back up to 255, and draw a character (switch the colour to anything but green, so they can be visible over the grass). You don't have to put too much effort into this, it's just an example, and so I'd recommend just using stick figures. When you're done, go to the base tab, and encircle the feet of the character in the pink rectangle. This is selecting where the feet of the character is. Go back to the Frames tab, and double click on the next direction. It’ll be an exact copy of the last direction you made. This is because there is only one tile in the Spriteset Images window. Go t this window, and right click on the tile. Select Insert Image. Click on the new window, go back to the Edit tab on the Untitled Window, and draw the character. Repeat this for every direction in the Frames Tab. Save the character (File -> Save As) in the Spriteset folder as Character1.rss.
Now, onto the last part, making the script. Create a new script, and type this in:

function game()
{
CreatePerson("Bob", "Character1.rss", false);
AttachInput("Bob");
AttachCamera("Bob");
MapEngine("Map1.rmp", 60);
}

Save this as Main.js (in the Scripts folder), and test the game. The third line creates a new character called Bob, using the spriteset Character1.rss. The false means that the character will not be killed when you go onto a different map. The fourth line attaches keyboard input to the character (so that you can move about with the directional keys) and the fifth line makes the screen follow the character. The sixth line loads the map Map1.rmp at 60 frames per second.
As you can see, the character doesn’t look very realistic when he walks (if he walks one direction, his sprite doesn’t move, giving the impression that he’s floating, and not walking). To fix this, you’ll need to add more frames to the spriteset. To do this, open up the spriteset and in the frames tab, right click on tone of the images and select insert. Draw a character just like your image for North, but with feet in a different place. To speed this up, you can use the last icon in the Image Tools window, to copy your original image (select it, open your original image, and then drag the blue rectangle around it in the Edit tab, and then Right Click -> Copy) then paste it into your new image (click on your new image in the Spriteset Images Window, right click inside the white rectangle in the Edit Tab and select Paste -> Paste). Now you can edit the feet of your new image. Go into the frames tab, right click on the North Image and select Insert. Click in the new tile that was inserted, and select the tile with the edited feet in the Spriteset Images window. Save the image, and test the game. Now you can see that when the character walks North, the sprite makes it look like the character is walking. If you want, you can edit the rest of the spriteset, so that all walking directions look proper, but it’s only an example game, so it’d probably just be a waste of time.
So, know that you’ve got the makings of a game, you’ll need an introduction. Delete what you have in Main.js, and put this in instead:

function game()
{
GetSystemFont().drawText(0,0, "Welcome to Bob's Excellent Adventure!")
FlipScreen();
GetKey();
CreatePerson("Bob", "Character1.rss", false);
AttachInput("Bob");
AttachCamera("Bob");
MapEngine("Map1.rmp", 60);
}

By now you should understand this, so I’m not going to get into explanations. Sphere comes with a nice function to draw text at different magnifications. Using this, you can make an intro that looks like it’s ‘zooming’ into the background. Put this in your Main.js (and delete the rest):

function game()
{
font = GetSystemFont()
for(i = 0; i < 50; i++)
{
font.drawZoomedText(0, 0, i, "Welcome to Bob's Excellent Adventure!”)
FlipScreen();
}
GetKey();
CreatePerson("Bob", "Character1.rss", false);
AttachInput("Bob");
AttachCamera("Bob");
MapEngine("Map1.rmp", 60);
}

There’s some new code in this script. Line’s 4 – 8 use something called a loop. Basically, a loop runs over and over a certain amount of times. Line 4 means ‘The variable i equals 0, keep running the code in the braces while i is less than 50, and add 1 to i every time the code in the braces is run’. Note the i++; this is the same as i = i + 1. Line 6 uses drawZoomedText to draw ‘Welcome to Bob's Excellent Adventure’, at the location 0, 0 on the screen, at the magnification i. Because i increases every time the code is run, it gets larger every time, until it reaches 50, when it exits the loop, going to line 9.
There are two problems with this:
1. The text scrolls forward; it’d look better if it was going backwards
2. The text scrolls to quickly.
To solve these problems, use this code instead:

function game()
{
font = GetSystemFont()
for(i = 50; i > 1; i = i - .2)
{
font.drawZoomedText(0, 0, i, "Welcome to Bob's Excellent Adventure!")
FlipScreen();
}
GetKey();
CreatePerson("Bob", "Character1.rss", false);
AttachInput("Bob");
AttachCamera("Bob");
MapEngine("Map1.rmp", 60);
}

The only line changed is line 4. Now, i starts off as 50 and runs until it’s equal to 1, and i decreases by .2 every time the code runs. This makes the text get smaller every loop.

Okay, that’s it for this tutorial. As with the last one, you can contact me at rjt3003@hotmail.com. Happy coding!