Gw Temp

Menu

Tutorial - 'Messageboxes, maps and more' by Joey Peters

An item about RPGMaker 2000 posted on

Blurb

An excellent tutorial for Sphere detailing how to convert chipsets, terraforming, maps, messageboxes and much more!

Body


Sphere Tutorial 1
-
By Dn7
2r3r
Ok, this tutorial covers some basic things you should know about sphere. After setting up, I will teach you how to make a little dialog, and how to use the map engine. Let's start!



If you already have sphere 0.97 or higher on your machine, you can skip this step.

Step1. Download the gibson

Get it from http://sphere.sf.net/ , click on files, then on official releases. Note that only till .97 is available, there is already a .98, but we will not cover any new features from it anyway.

Step2. Unzip, and configure

Unzip the stuff to some dedicated directory, like c:\sphere :o. If you wish, you can place a link on your desktop (DOH!). Anyway, open up the configurator (config.exe). Under the video tab, click standard32.dll, then click configure driver. Here you choose for full screen.

Note that there are also other drivers.
- standard32 > this driver is the standard 32 bit colour
directdraw driver
- standard16 > 16 bit (implented in std32)
- standard8 > 8 bit (256 colours, also implented in std32)
- sphere_gl > opengl driver. I only recomend this in
windowed mode.
- interpolateXX > interpolation, this makes the screen look
more smooth under a lower resolution.
however, it will go a little slower.
- greyscale > XD

You don't have to configure Audio or Input, just hit OK.

Step3. Running the thing

WindowsME,XP : No problems
Windows98 : There could be some problems with some
missing links. You can fix this be
either:
- Updating your windows box
http://www.microsoft.com/ntworkstation/downloads/Recommended/ServicePacks/MFCLibrary.asp
- Installing Microsoft C++ 6.
- Installing a new version of explorer
MIGHT work, because it practically
updates the system. Not recommended.

Assuming it will just run (it probably will) we will go to the
next step.

Step4. Setting up a new project

You just click the blanc sheet in the toolbar, and voila.
Enter as a project name something like, sphere test. You know
the thing... Hit OK.

Now you get a window which is your working environment XD. Get
used to it.

First, because your project is all blanc, we add a script which sphere will start when you run your game. Right click the Scripts folder and hit insert. As a filename, choose game.js. Hit OK.

Now, we are going to set the resolution and assign the main script. Double click 'Game settings' in your working environment. Here you can edit your game name (which will appear as the window title when you run your game), the game resolution and script. Valid common resolutions are:

320x240
400x300
640x480
800x600
etc.

Now hit the main script combo box, select game.js. Now hit OK.

Congrats, you configured your project... Now let's get it to
work.

Step5. Making it work

This is where people might get stuck :o. Double click game.js
in your working environment. Here you can edit your code as
plain text. Note that there is syntax highlighting, which means
special words and syntaxes (symbols) get a special colour.

Ok, the main script needs the function game. For now, we will
skip the theoretical stuff, and just insert:

function game(){}

Hit the save button. Note that unsaved progress will not be used
by the engine. You can see if your file has been saved by the
asterisk (*). You can now hit the 'thunder' button to test your
game. You will see it close instantly, but we got a start.

Step6. Converting RM2k compatibles

Yes, sphere is very flexible with this kind of stuff. They made
some really nice converters. There are, however, few problems.
Those include terraforming. There is no terraforming in sphere.
That doesn't mean there could not be terraforming, they could
always make it, are make a custom map editor. But I doubt that
will be developed.

. Converting tilesets.
You will have to convert a tileset, we will use it later. Be sure
to remember where you stored it!

Click File > Import > Image to tileset. Now select the image file
(preferable PNG or BMP, JPG will suck quality). Then, you select
the tileset filename, preferable somewhere in c:\Sphere\Tilesets
or something. Hit save again. Them, you set the width and height
to 16 x 16 if you are using RM2k chipsets. Hit OK. Done =)
Note that you can use any size of tileset. However, if you want
to use IE 32 x 32 with importing a RM2k chip is impossible. If
you want to do it, you must first rescale the RM2k chip to double
its size. Then you can use 32 x 32. (a smart formula would be
new rm2k tileset width = wanted tilesize / 16 * rm2k tileset width
new rm2k tileset height = wanted tilesize / 16 * rm2k tileset height

. Converting sprites.
We will need at least one sprite. However, it would be better to
just borrow one. Converting sprite will prolly be explained somewhere
in tutorial 3. Sorry =( too hard for you now.

You can insert a sprite by right clicking Spritesets and then click
insert. If you want to borrow one, you should check the sphere
directory, subfolder games. Check some of the games directories for
some sprites in 'Spritesets' and hit OK when you found one.

.Converting fonts.
We will need at least one font. However, RM2k system sets aren't
sphere compatible, and vica versa. You can, however, easily
convert nitty gritty windows fonts. Hit File > Import > Windows
Font to Sphere font. Select the desired options, make sure the colon
is set to WHITE, or it will not show up properly later. Hit Ok. Then
save it somewhere. Be sure to remember it's location.

Now insert the font in your project. Right click Fonts and hit
insert. Select the file and hit save again.

Step7. Some basic scripting

Now that we got all the goodies, let's do some basic scripting.

You should not be worried about scripting. We will not need it a lot,
because I will give you some scripts, which enable you to use sphere
a lot easier. I'm just getting you through this so you understand
how sphere works.

Openup game.js, there, you got the function game. Game is the first
function sphere calls. Why? Well, cheese is a correct answer here.
A function is like an action. You could have functions, which make
message boxes appear, or disappear :o... It's what you call a 'call'
or 'event' in RM2k. Let's say you want to function Text, which would
display your nightly text. You would start with an empty function:

function Text()
{
}

Another important thing to understand are variables, also called
'variables' or 'switches' in RM2k. A switch is simple a variable
which can be true or false.

A variable is declared (made) by using the word 'var' (var is a
keyword, so it get's coloured blue). So if you want a variable
which stored your name, you would have:

var my_name;

Your variable can not start with numbers, it can't contains spaces
either like you can in RM2k. Keep that in mind. The ';' is used
to tell the engine this is the end of the line. You will always
need a ';' at the end of your lines which you would like to be
executed.

Fine, I just told you variables can be switches too, right? Well,
in JS variables are multifunctional, and can be anything, ranging
from words to numbers to complete objects. These are common types
we will work with:

Numbers : 1 2 3 4 5 6 7 8 9 0 etc
Strings : "Hello world!"
Booleans (switches) : True or False (1 or 0)

Let's say you want to store a number in the variable age, which
isn't declared (made) yet. You do:

var age = 16;

If age was already make, you can just do:

age = 16;

If you always want to use the age = 16; method, then you could
make a whole list of prototypes. Which contains only the
declaration of the variable:

var age;

Then you could later always do: age = 16;. Don't worry about it
now. Ok, you can apply this to all types of variables. The next
type are Booleans (switches):

var chest1picked = false;

this makes a new variable which says that chest one has not yet
been picked. You can also use 'true'.

IMPORTANT

Everything in JS is 'case sensitive', which means that sphere
makes a difference between 'pie' and 'PIE'. You could have
stored the number 3 in 'pie' and 12 in 'PIE'. You must always
spell keywords (things like var, function, if etc) in lower
case, which means you cannot spell it like: VAR iF fUnCtIoN.
Got that? Ok.

Let's say the user somehow managed to pick up the chest, then
we do:

chest1picked = true;

Ok, that's it about switched for now. Let's go to strings.
A string is an 'array' (like a list) of characters (a,b,c)
thus it can be a word, a sentence etc. If you are going
to use strings, you must not confuse sphere with variables.
That means this is wrong:

var myname = Joey;

Why? Because 'Joey' could be a variable here, and sphere
does not know that you want to use it as a string.
If you are going to use strings, you must put them between
"quotes".

var myname = "Joey";

This is the correct way to do it. Ok, that's for variable
types.

< Using it >

Now, open-up game.js again. Insert this text at the top
of your code, fill in yourself

var name = "putyourname here";
var age = 15;
var am_i_stupid = false;

Notice that when you want to check if your syntax is correct
you can click Script -> Check Syntax. If there is something
wrong, it will tell you what and where. Use it alot.

Next, we are going to write a function...
:o :o :o
Which will display some text, which will later evolve in a
messagebox
:o :o :o.

You still have the function Text, right? You must also have
a font. First, we must store the font inside a variable.
The type of the variable will be an object. I will explain
later. So, add this line on top of you code again:

var font = LoadFont("filename.rfn");

Replace filename.rfn with your font filename. Great, you
now have a font stored in the variable 'font'.

Back to the function. First, some autonomy of the function:

1 2 6 3 64 5 4
Function Text(sometext){ ..... }

1. Keyword which tells sphere that he is dealing with a
function.
2. The 'name' of the function. You need it to call your
function. (it is also called 'call' in RM2k)
3. Parameters, this are undeclared (not yet made)
variables which you can use in your function, if you
give another parameter to the function, the variable
value will be changed by that parameter (this is
a bit vague now.)
4. Braces are used for the 'compound', it tells sphere
what code to 'execute' when the function is 'called'
5. The code, can be anything.
6. Brackets are so sphere knows he is dealing with parameters.

We are going to evolve function Text into:

function Text(display_text)
{
font.drawText(5,5,display_text);
FlipScreen();
GetKey();
}

:o ... I will try to explain 'parameter' using this
example... You can give 'display_text' a value when you
call it. That means that when I do:

Text("Holy shit!");

display_text will be "Holly shit!". Or when I do:

Text(15);

display_text will be '15'. Or even worse (^^)

Text(name);

display_text will equal the value of variable 'name'.

Copy / Past function Text at the end of your code.
Now you should have something like:

// Start of code

var font = LoadFont("font.rfn");
var name = "Joey";
var age = 15;
var am_i_stupid = false;

function game(){}

function Text(display_text)
{
font.drawText(5,5,display_text);
FlipScreen();
GetKey();
}

// End of code.

Do not yet worry about GetKet FlipScreen etc.
Now, we want to use the function text. How are we going to
do that? Well, sphere first executes function game. So we'll
have to put the code between function game's braces ({ & })
Something like:

function game()
{
// Here comes code
}

Now at the place where // Here comes code is, we insert:

Text("Hello world!");

Save it, and click run. Weeeee!!! :P.

FAQ:

q: I get an error.
a: Syntax check your script, you prolly made a small mistake

q: How do I quit it?
a: Hit a damn key

q: It works, but I don't see anything!
a: Make a new font which is WHITE not BLACK.

Now, sphere has some predefined function for you, like
GetKey() and FlipScreen(). What do they do? Well, it's like
a RM2k function like ShowMessagebox, but just more basic.
GetKey() waits until a key is pressed (same as 'password'
function in RM2k). FlipScreen() simply draws the screen,
if you do not use FlipScreen, the screen will not be updated
and thus be black. (prolly).

The font variable is a 'font' (doh!), in Sphere, a font is
treated like an object. That means the font variable has
some nifty 'functions' and 'variables' himself. However
functions in objects could be called methods.

If you are going to use a function/variable inside an object
you must use the period (.) . So it would be:

font.(somefunction or variable)

A font object has the function drawText, which draws text to
the screen. (wee). It also has few other functions, but
we will cover that later.

Now we know about objects, we will make another one! Using
a window style. A window style is used for the borders of
a messagebox in example. You should borrow one from another
game. Right click Windowstyles, insert. And search one out.

We are going to store the windowstyle in a variable called
window. Put the declaration at the top of you script.

var window = LoadWindowStyle("The filename.rws");

We now have a windowstyle object called window, containing
the windowstyle saved in 'filename.rws'. Be sure to replace
it with the correct filename or it will not work (it will
return a 'file not found' error).

Now we evolve function Text into:

function Text(display_text)
{
window.drawWindow(0,0,GetScreenWidth(),GetScreenHeight() / 3);
font.drawText(5,5,display_text);
FlipScreen();
GetKey();
}

First, .drawWindow is a function of a window object. You must FIRST
draw the window before the text is drawn, or it will overlap.

GetScreenWidth() : Returns the width of the screen resolution
...Height() : DOH
drawWindow(x,y,width,height) : Draws a window starting at
point X, Y, with width and height set to the parameter.

Save, and hit run again. You now have a nitty gritty messagebox.

FAQ:

q: I don't see the window borders
a: You are not supposed to.

q: My text get's out of the screen ;_;
a: We will cover that now

Ok, let's say you want more than one line of text to display.
We then do: font_object.drawTextBox(x, y, w, h, offset, text);
Ok, so we get:

function Text(display_text)
{
window.drawTextBox(0,0,GetScreenWidth(),GetScreenHeight() / 3);
font.drawTextBox(5,5,GetScreenWidth(),GetScreenHeight() / 3,0,
display_text);
FlipScreen();
GetKey();
}

Try it! :D (You could do: Text("Wow, look I now got this really super
super long text which I want to show. But normally, it get's of the screen
. So I use drawTextBox to make it automaticly go right! Isn't it nice?!");)

< Using maps >

Start a new project. Insert the main script and configure it. Now we
are going to make a map...

Right click maps, and click insert. Type testmap or something and hit
save. If you are prompted for map size and tileset, you keep the map
size, and select the tileset you converted earlier.

Now you get the map editor. Go edit the map ;) It wont be too hard.
We won't yet set any obstructions (walls, where you cannot walk),
or events. So when you are done, right click a tile where you want
the hero to start, and hit Set Entry position. Now hit save. Close
the map. Now open your main game script. Now you put this there:

function game()
{
MapEngine("mapfilename.rmp",60);
}

Replace the mapfilename with your filename. Hit save, and run. Weee!!
Ok.

Now, we must create a person which can actually 'walk' on the map.

function game()
{
CreatePerson("hero","spriteset.rss",false);
AttachInput("hero");
AttachCamera("hero");
MapEngine("mapfilename.rmp",60);
}

replace the filenames again. Save, and hit run. Wee!!! :P

Ok, that's it for today. If you have questions or anything join up
somewhere here in IRC:

irc.dynastynet.net #gamemaker
esper.net #sphere
or MSN: dragonumber7@hotmail.com.