Sphere Step by Step
From Spheriki
Contents |
Introduction
Welcome to Sphere, Step by Step. This is a guide made by Feek that shows you exactly how certain things are done in sphere. Although this article is missing screenshots, the directions aren't that hard to follow. This tutorial does not teach you JS, for that go DaVince scripting tutorial. However, it does teach you how to use sphere.
You will need to:
- Download Sphere here, if you haven't already.
- Download The Resource Pack here. You will need it. The guide is also saved within the contents of the zip folder.
Now let's get started!
Step by Step
Unlike most tutorials, this one is easier. It takes no programming knowledge since all the codes herein are yours to copy and paste. Of course you would need to know how they work or at least simply why. It also takes very little knowledge about game making. So once your ready, please continue on and let the tutorial begin!
Steps 1,2, -- The Start
Step 1: Click on File, then New.
Step 2: A field has now shown up. It is here that you can make the project folder and name the game. Type in "Tut1" in the field that says Project Name. Type in "Tutorial 1" where it says Game Title. Press the OK button.
Steps 3,4, -- Sphere
Step 3: Welcome to sphere! It is here that you can view the contents of your project folder. Every game needs to have a start script. So we shall create one. Click on the blank page icon on the toolbar. The scripting window has now popped up. Let's write our first bit of code. Type this into the window:
function game()
{
}
It will be the first function of your game. Now save the code. It will be saved to the scripts section of your project folder. To save click on the floppy disc icon in the toolbar. A save window popped up, type in "Main". Now, press save. Now close the window. You'll notice a + on the scripts folder. Press it. It's now open and you can view your script file.
Step 4: Now double-click on Game Settings on top of the file list. There will be a Game Title field. As you can see, it is already called Tutorial 1. Go to the Author field and type in your name. In the description area, you can type in anything you want. Now, look at the Main Script section. Notice it says Main.js? It's the game script you made. Leave that alone for now. You can also change the screen size. Be careful as because not all screen sizes will work. Leave it be for now. With that set, press OK.
Steps 5,6, -- Map Making
Step 5: Now, how do we make a game? We can't have a game unless there is a map, code, and a character. Right click on the folder that says spritesets. Scroll down to Insert. Press it. This is how you can insert spritesets from another source. You can make your own too, but I prefer you don't in this tutorial. Browse to the folder where you downloaded this tutorial. There will be a sprite called, "Face.rss". Click on it then press Open. It will give you a message telling you if it should be copied to your folder. Just click on Yes. Good! Now your spriteset folder will have a plus. You can click on that plus if you like. Let's do the same for a map. Right click on maps, scroll, then click on Insert. Browse to where this document was stored and find a map called, "Play Field.rmp". Another message will pop up. Once again, press the Yes button. Good! You now have a spriteset and a map.
Step 6: Open up the maps folder, if you haven't already. Double click on the map called, "Play Field.rmp". The map has now popped up. You will notice a ST on the upper left hand corner of the window. It is your starting position. Let's change it! Right click on any location on the map that doesn't have a tree. Scroll to Set Entry Point, then click it. You will now start at that location. Notice that there are 2 layers. Base and Above. Notice that I have placed many tress around the map. However, they are missing tops. Click on "Above" in the layer section. In the Tiles box, find the tile that looks like a treetop and click on it. Now scroll over to the map and place that piece above each tree. If you miss a space, you can't undo it. You'll need to click on the invisible piece and place it, or right click on the map and press on Select Tile to select an invisible piece. Once all of the tree tops are covered, save the map by clicking on the save disc or by pressing CTRL+S. After saving, minimize the map editor.
Steps 7,8, -- Obstructions
Step 7: Open up the spritesets folder if you haven't already. Double click on the sprite named, "Face.rss". You have now entered the sprite window. Notice that there are 8 directions. However, this sprite only has 4 directions. You can edit him by clicking on the Edit tab, but there is no need. Instead, click on the Base tab. This is where you can make a bounding box. Click on the upper left most pixel. Hold your mouse and drag it across the screen ending on the bottom right side. You should have made a box around him. Now save it by clicking on the disc or pressing CTRL+S. Close the window.
Step 8: Now reopen or expand the map you were working on. Look for the tree trunk tile in the Tiles box and right click on it. Select Properties and click on it. This is where you can make it animated. But we aren't. Click on the Edit Obstructions button. Now, you will be able to see the tile. Click on the Presets button, then click on Blocked. This tile will now become blocked. Click on the OK button. Click on the other OK button. Then save the map. Now you have a map and a sprite with bounding. Let's make it into a walk around game!
Step 9, -- Creating a Game
Step 9: Expand the scripts folder and double-click on, "Main.js". This is where you put the game function. Now add in this:
function game()
{
CreatePerson("you","Face.rss",false);
}
That will create a person, it will become you. This is a function. It tells the computer to do something, this one will create a player called, "you" using the face spriteset. The false means that it won't be deleted when the map is closed in-game. Now add in this:
function game()
{
CreatePerson("you","Face.rss",false);
AttachCamera("you");
AttachInput("you");
}
The two lines I added do what they say. It attaches the camera on you so that the screen will follow you. The input is also attached so you can move it with the arrow keys. Now add in this:
function game()
{
CreatePerson("you","Face.rss",false);
AttachCamera("you");
AttachInput("you");
MapEngine("Play Field.rmp",60);
}
Now the map engine is called. It will open the map that you edited which was called, "Play Field.rmp". It will automatically place your character at the ST area. It is now time that you saved the script and tested the game! To do so, save and close the window. Then click on the lightning bolt, or by pressing CTRL+F5. Remember to exit when your done by pressing ESC.
Steps, 10,11, -- Teleporting
Step 10: Thought you were done? Well you aren't! We now need you to warp between two maps. In order to do so we need a second map. Right click on the map folder and choose Import. Now, back to where this folder is, import, "Play Field 2.rmp". Click Yes on the message and open it up. You will see another field, except this time the trees have changed and there is an open section to the left. Notice that the ST is in the upper right corner? Don't move it because you won't be starting in this map. You can now close or minimize this map. Now, click on the blank page icon. It will create another place to write code. Type in this:
function Teleport(x,y,map)
{
}
It will become the start of the teleport script. Notice that I added in (x,y,map) instead of (). The x will indicate your new x position, same goes for the y. The map section is for the name of the map that you will be teleporting or warping to. Now let's use those in the code between the brackets.
function Teleport(x,y,map)
{
ChangeMap(map);
SetPersonLayer("you",0);
SetPersonX("you",x*16);
SetPersonY("you",y*16);
}
There! We can now set your x, y, and map! Notice the *16, since these maps are tile based, it'll make it easier if you just plot in the tiles x and y (the tiles being 16*16), because the set person commands will want to set you at a certain pixel, and there are a lot of pixels! Also notice that Change map is on top. You need to go to the map before your placed on the map. The SetPersonLayer() function will place you on layer 0 or the layer that the trees are on. Then you won't be walking on top of them. It is now time to save this script, call it, "Stuff.js". Now exit the window. Open up "Main.js". At the top, before the function add this to a new line:
RequireScript("Stuff.js");
Now save the script and close the window.
Step 11: It is now time to use the teleport script! But we'll need to be able to access both maps! So, open up, "Play Field.rmp". Look at the line of trees to the right of the map. There would be dirt spot there. Right-click on the tile closest to the top of the two dirt squares and select Insert Entity, then select Trigger. A window has now popped up. Make sure the layer says 0-base-ST, which is the layer your sprite is on. It should have it by default. In the execute box type in:
Teleport(1,7,"Play Field 2.rmp"); // top trigger,
That will teleport you to the second map at those tile-based coordinates. The // means that the words after it are not read by the engine. They are comments and you can add them in if you wish. They affect nothing. Do the same with the tile below it. Right-click, select Insert Entity and click on Trigger.
Teleport(1,8,"Play Field 2.rmp"); // below trigger.
That will teleport you to the field a tile less because you were near the bottom. Good, now save and close the map. Open up, "Play Field 2.rmp" and add the triggers to the left of the map. Remember to right-click and click on add entity then, trigger. Change them to:
Teleport(18,7,"Play Field.rmp"); // for top trigger, Teleport(18,8,"Play Field.rmp"); // for bottom trigger.
Good! Now you can go back and fourth between the maps. Save this and close it. Now test run your game by hitting the lightning bolt or pressing CTRL+F5.
Steps 12,13, -- Text Box/NPC's
Step 12: Now, we need talking. So let's go make a talk script! Open up, "Stuff.js". Underneath the teleport script write in this:
function Talk(txt)
{
}
txt will be used to show a message that you will type in at a later time. Sphere uses a font object for it's text. Click on File, then import, then on Windows Font to Sphere Font. A font box will now have popped up. Search for Arial. Keep it regular and at a size of 10. It's color will be black. After clicking on OK, a save window opens up. Call it, "TutFont". Make sure it is in the font folder of your game, then save it. Now, open up the "Stuff.js" window and add the following line to the top of the code before everything:
var MyFont = LoadFont("TutFont.rfn");
Now you created a font object. That font will be displayed when you type in a message to be displayed on screen. Usually when text is displayed a window pops up beneath it. Sphere uses windowstyles. For this tutorial you will use the one in this folder. All you need to do is import it like the stuff before. It is called, "Window.rws". Now go back to the code and type in this under the last bit:
var MyFont = LoadFont("TutFont.rfn");
var MyWindow = LoadWindowStyle("Window.rws");
Now we need to use them in a function. Go back to the Talk function and add in this:
function Talk(txt)
{
while(!IsKeyPressed(KEY_ENTER))
{
}
}
We made a while loop that will contain the window and text. A while loop will keep on going until it is broken. When I added in the IsKeyPressed, I put a ! behind it. The ! means not equal or not. That means while the enter key is up, the stuff will hapen. If you press the key down, it will stop doing stuff. Now let's make it do stuff. Put this before the Talk function:
SetTalkActivationKey(KEY_SPACE);
It will tell sphere to use the spacebar when talking to other people. Now add this to the Talk function:
function Talk(txt)
{
var sh = GetScreenHeight();
var sw = GetScreenWidth();
while(!IsKeyPressed(KEY_ENTER))
{
RenderMap();
MyWindow.drawWindow(8,sh-48,sw-16,40);
MyFont.drawTextBox(8,sh-48,sw-16,40,0,txt);
FlipScreen();
}
}
So, that will render the map, or draw it behind the window and the font. The window and font should be placed at the bottom of the screen, if you copied the positions correctly. txt will display the text you will later type in. The sh ans sw are variables much like the window and text. However, these guys hold the screen height and width. Then we don't need to call GetScreenHeight() everytime you need the screens height. FlipScreen() will draw everything onto the screen. It's a must for every loop that deals with drawing or blitting. Now save the code and exit the window.
Step 13: We now need to make an NPC. A person you can't control but may interact with. By right clicking on the spritesets folder and selecting Import you can add in another character. This time look for, "Face2.rss". Now open up, "Play Field 2.rmp". Right click anywhere that no tree is touching. Click on Insert Entity and then Person. In the spriteset field click on the, "..." button. Search for, "Face 2.rss". Open it. In the Name section click on the, "Generate" button. It will now have the name, "Face 2_1". It will have a script selector. Currently it's on Create. Whenever the sprite is created it will run that script. In that box type in this:
SetPersonDirection("Face 2_1", "west");
Now when it is created it will look west instead of the default, the first direction in the spriteset. Now it needs to talk. Click on the scripts selector and scroll down to On_Talk and type in this:
Talk("Greetings and salutations to you. Welcome to my little play field! Remember, the Japs were never commies, or pigs either.");
Now when you press the spacebar near it, it will say that message. Pressing Enter will clear that message. Now click on OK and save the map. Now you can test play it. Go ahead and talk to him!
You are done.
Last Words
There may be more in the future, but for now there is only this. I hope it was easy for you to understand and I hope you had fun learning. It was a pleasure to help. Thank-you.
