Gw Temp

Menu

Tutorial - 'Wild Tiger's Sphere Tutorial' by Guest

An item about Sphere posted on

Blurb

An excellent overall guide on using Sphere. Great for people wanting something a little more diverse than a single guide.

Body

Wild-Tiger's sphere tutorial! --- email me at wildtiger670@hotmail.com for more information.
Thanks to GoddessLaura for helping me change mistakes throughout this tutorial.

-------------------------------------------------------------------------------------------------------------------------------------------------------
| Please tell me what you think of this tutorial by emailing me at the adress above. |
| I just wanna know what you guys think of it. :) Tell me if it's helpful or not, and also, |
| Please give requests of what you want in this tutorial, if I can i'll add it and tell you i've updated it. |
| Also, please notify me of any errors in the tutorial. Thankyou! |
-------------------------------------------------------------------------------------------------------------------------------------------------------

http://a-extreme.homeip.net/downloads/ You can find this tutorial, my game in progress (with Neko-San's help) and whatever little things I put there.

So you want to learn Sphere? Do you know how to actually use the program but want to script something? Read on!

First of all, let's start with the basics. I know you probably just want to skip this, but it's really good for you to know if you seriously want to use Sphere. Even if you have some knowledge of Javascript you may need to read it. Please bare with it, it'll help you in the end.

Also...this tutorial will be long, and I’m making it long so I can feed a lot of information to you. Trying to make sphere easier for you :) You should probably go over something a couple of times if you don't understand it, and if you still can't understand something you can visit the #sphere channel on IRC at: irc.esper.net port: 6667.
If I’m there (I’m Wild-Tiger) I’ll help you, and if I can't or I’m not there ask someone else that's there. :)

Okay, first thing's first, let's create ourselves a project! File | New | Project shall get you there. Just type in a name, anything at the moment. You can change it later (I like to use the same name in both the project title and the game title).

Okay, now goto File | New | Script and up shall pop up a script with absolutely nothing in it! Woohoo! Let's make it do something. Okay, to begin with, save the new script as "Game.js" in the scripts folder of your game. Now we need to go to the project page (It'll have the name Project [name] up the top of it and list the different folders (Maps, Spritesets etc.). Double click Game Settings. Now in main script choose "Game.js". Click okay. This is the starting script that will run when you press the execute button.

Now, when you start a game, you need to have a starting function, or else it won't know what to do!
Write this in:

function game()
{
// Script goes here.
}

What will this do? No terribly much. game() is the start of every sphere program. You can only have one of these in your whole game. You place whatever you want to happen inside { and }. Okay, let's make it say "Hello world?" Replace the above with this:

var main_font = GetSystemFont(); // variable name_of_variable = what_it_equals;

function game()
{
main_font.drawText (0, 0, "Hello world!"); // Draw Text
FlipScreen(); // You HAVE to FlipScreen to get anything to appear on the screen!!!
GetKey(); // Waits until you press a key (Any key)
}

To run the program, either press CTRL + F5 or, click the little lightning icon.

GetSystemFont() : This is the system's default font. If you'd like the change it just use LoadFont ("name.rfn"); name.rfn being the name of your font's name.

drawText : main_font.drawText (0, 0, "Hello world!"); means GetSystemFont().drawText(x, y, string_or_value);
Don't try using that by the way, as it won't work. X and Y has to equal a number, and string_or_value has to be just as the name says, unless of course any of those three have been defined somewhere.

FlipScreen() : This has to be used to draw the text, images and such. The text will not appear if you don't.

GetKey() : Waits until any key is pressed.

---------------------------------------------------------------------------------------------------------------------------------

Just incase you don't know, anything with // is a comment, which means that the engine cannot see it at all.
A comment can also be used across multiple lines, like so:

function game()
{
/*
main_font.drawText (0, 0, "Hello world!");
FlipScreen();
GetKey();
*/

/*
Text can also be written here, and you don't have to worry about
the engine caring, because when it's in a comment
it completely disregards it!
*/
}
*** This would run, but close as there's no text to the screen. If you added something that's not in the comment brackets, that would run. ***

Comments tell you or someone reading your code what it does, or even use it to block out pieces of code to see if something works or not.

---------------------------------------------------------------------------------------------------------------------------------

Now, variables (like the one above) can be used in different ways.

var name_of_variable = what_the_variable_changes_to;

It could be...

var how_many_items = 0; // This would cause variable how_many_items to equal to 0.

or

var hello = "Hello world!"; // This would cause variable hello to equal the string "Hello world!"

or

var main_font = GetSystemFont(); // This will get the system font, and they can be used in front of .drawText.

*****

To use these in the above game() function, edit:

main_font.drawText (0, 0, "Hello world!");

to

main_font.drawText (0, 0, hello);

See how it says everything that is in the "hello" variable? If you changed hello to how_many_items, it'd show 0 on the screen.
Variables are used to store values and strings.
var hello = "Hello how are you today?";
Can be used over and over, without having to write "Hello how are you today?" over and over again.

By the way, you should keep in mind; a variable’s name must be original each time.

Variables are case sensitive. Hello and hello would be completely different variable names.

You can update a variable with the same name however:

var main_font = GetSystemFont();
var hello = "Hello world!";

function game()
{
hello = "Hello world...has changed!";
main_font.drawText (10,10, hello); // Instead of hello being "Hello world" it'll be the changed version.
FlipScreen();
GetKey();
}

---------------------------------------------------------------------------------------------------------------------------------

Hrm, I just remembered. What if you want to add things on the same line? A string of text plus a variable...or many strings and variables? Easy, just use the + sign.

var main_font = GetSystemFont();
var hello = "Hello world!";

function game()
{
hello = "Hello world...has changed!";
main_font.drawText (10,10, hello + " " + "Hello world...again!");
FlipScreen();
GetKey();
}

That " " with nothing in it would just make a space, or otherwise it'd come out as "Hello world!Hello world...again!".

If you had the variables ready, you could do things like:

main_font.drawText (10,10, var_1 + var_2 + var_3 + " " + var_4);

That'd come out different, depending on what the variables are. Just make sure it has a space in the strings that have no " " after it, like var var_1 = "Hello! "

---------------------------------------------------------------------------------------------------------------------------------

One thing can stop the use of a variable though. If it's in a function, it can ONLY be used in that function (unless you had prototypes, I’ll get to that later)

var main_font = GetSystemFont();
var a = "A";
function game()
{
main_font.drawText (0, 0, a); // This will work!
FlipScreen();
GetKey();

var b = "B"; // This is in another function, so it won't work in Goto_B, as it's not a global variable.
Goto_B();
}

function Goto_B ()
{
main_font.drawText (0, 10, a); // This will work, seeing the a variable is a global.
main_font.drawText (0, 20, b); // This won't work, b is not defined!
FlipScreen();
GetKey();
}

A global variable is a variable that can be used anywhere, and updated anywhere no matter where it's being updated.
It could be in a function, it could be out in the middle of nowhere. To make a global variable, just put it out in the open, above everything else. See var main_font and var a above? Those could be changed anywhere.

---------------------------------------------------------------------------------------------------------------------------------

That brings me to functions!

See the above one? That's how you make one, I’m sure you can figure it out, it's just like game...just an original name. To call it would just be:

Goto_B();

Keep in mind, just like variables, functions must have original names, and just like variables, they are case sensitive.

Now, a trickier one would be one with arguments. Eg,

var main_font = GetSystemFont();
function game()
{
Text (0, 0, "Hello world!"); // This will place "Hello world" at 0,0 on the screen, using the Text() function below.
Text (10, 10, "Hello world, again!!"); // This would place "Hello world, again!!" on the screen, after pressing a key after the first.
}

function Text (x, y, what_to_write)
{
main_font.drawText (x, y, what_to_write)
FlipScreen();
GetKey();
}

Another example:

function game()
{
Draw_Image (0, 0, "Bob.png"); // Draw's image "Bob.png" at point x, y.
}

function Draw_Image (x, y, image)
{
var cur_image = LoadImage(image); /* LoadImage (image) is basically what it sounds like. It
loads the image.*/
cur_image.blit (x, y); // This will draw the image at point x, y.
FlipScreen();
}

It can be a variable as well.

var main_font = GetSystemFont();
var Hello = function()
{
main_font.drawText (0, 0, "Hello!");
FlipScreen();
GetKey();
}

function game()
{
Hello();
}

---------------------------------------------------------------------------------------------------------------------------------

Hrm, let's talk about operators.

Okay, example.

var x = 10;
x = x + 1; // This would return x = 10 + 1, so x = 11;
An easy shortcut:
x += 1;
And to just add by 1 could also be said as:
x ++;
The same could be used with minus.
x -= 1;
x --;

Just use it in a function like this:
var main_font = GetSystemFont();
var x = 90;

function game()
{
main_font.drawText (0, 0, x); // Before is increased by 100.
x += 100; // x now equals 190.
main_font.drawText (0, 10, x); // After it is increased by 100.
FlipScreen();
GetKey();
}

Basically it all works the same:
x *= 10; would be the same as x = x * 10; // * means times
x /= 10; would be the same as x = x / 10; // / means divided
x %= 10; would be the same as x = x % 10; // % means remainder.

eg:
var x = 10;
x %= 10; // Would return 0.

Basically that means x was 10, then it was set to remainder of 10 / 10 which equals 0.

Another operator, although you may know what it does by now is the = operator.

x = 10; // That makes x equal to 10.

Other operators
These operators test for truth, and based on that return true or false.

&& : And eg.
(0 && 1) returns false.
(1 && 1) returns true.
== : Equal to eg.
(1 == 10) returns false.
(1 == 1) returns true.
|| : Or
This returns true if one side or the other are true.
!= : Not equal to
This returns true if the right side is false
eg.
var x = 1;
var y = 2;
(x != y) // Returns true, as 1 doesn't equal 2. So, this returns true.
(!x) /* Means "not x", so it's asking if x doesn't equal 1, return true. This returns false, as x is
of course 1. */

And some more operators...

< : Under eg.
(0 < 10) returns true.
(11 < 10) returns false.
> : Over eg.
(10 > 0) returns true.
(9 > 10) returns false.
<= : Under or equal to eg.
(0 <= 10) returns true.
(10 <= 10) returns true.
(11 <= 10) returns false.
>= : Over or equal to eg.
(10 >= 0) returns true.
(10 >= 10) returns true.
(9 >= 10) returns false.

---------------------------------------------------------------------------------------------------------------------------------

Phew, that's over! Let's move to loops now!

There are basically two types of loops: for loop and while loop.

While loop:

The while loop continues performing the action until the condition is false.

while (condition)
{
// What it does if returned true.
}

There is also a one liner:

while (condition) //what it does if returned true.

While loop example:

var main_font = GetSystemFont();

function game()
{
var a = 0;
var y = 0;

while (a < 10) // If b is equal to 0...
{
main_font.drawText (0, y, a);
a ++;
y += 10;
}
FlipScreen();
GetKey();
}

For loop:

This loop is a little tricky. You define a variable, use a condition and increment the variable.

for (variable; condition; increment)
{
// What it does if returned true.
}

There is also a one liner:

for (variable; condition; increment) //what it does if returned true.

For loop example:

var main_font = GetSystemFont();

function game()
{
for (var i = 0; i <= 10; i++) // variable i is equal to 0. while i is under or equal to 10 , add one to i.
{
main_font.drawText (0, i*10, i); // i times 10 (So i doesn't actually equal i times 10.)
}
FlipScreen();
GetKey();
}

---------------------------------------------------------------------------------------------------------------------------------

Let's do conditionals now, they're important.

If:
The if loops is quite easy to understand. It works like this:
if (condition) // Example, if (a == b)
{
// Add what it needs to do.
}

There is also an else command, which means if the condition returns false, then something else will happen.

if (condition)
{
// What it does if returned true.
}
else
{
// What it does if returned false.
}

Or you can do...

if (condition)
{
// What it does if returned true.
}
else if (condition)
{
// What it does if returned false.
}
else if (condition)
{
// What it does if above returned false.
}

Else ifs can pretty much continue as long as you need.

Basically, if the condition is true, it'll perform the action once. If it's false it'll either do a different action if there's an "else" command, and continues checking until there isn't any possible reactions.

There is also a one liner:

if (condition) //what it does if returned true.
And if you need else...
if (condition) //what it does if returned true.
else // What it does if returned false.

If example:

var main_font = GetSystemFont();

function game()
{
var a = 0;
var b = 1;

if (a != 1) main_font.drawText (0, 0, "a doesn't equal 1!");
else main_font.drawText (0, 0, "a does equal 1!");

if (b == 0) // If b is equal to 0...
{
main_font.drawText (0, 10, "b is equal to 0!");
// More lines can be added if it's not a one liner. (Duh)
}
else // Else, if it's anything other than 0...
{
main_font.drawText (0, 10, "b isn't equal to 0!");
}

FlipScreen();
GetKey();
}

Switches:

A good substitute for "else if" is a switch.

switch (condition)
{
case (possible answer): // if condition equals "possible answer"...
{
// What it does...
break;
}
case (another possible answer): // if condition equals "another possible answer"...
{
// What it does...
break;
}
}

Now this has to have a break after every case, or else it'll continue down the list, even if the condition isn't true.

Switch example:

var main_font = GetSystemFont();

function game()
{
var what = 0;

switch (what)
{
case (0):
{
main_font.drawText (0, 0, "What is equal to 0");
break;
}
case (1):
{
main_font.drawText (0, 0, "What is equal to 1");
break;
}
}

FlipScreen();
GetKey();
}

What could even be a string, like var what = "Hello"; , then it could have case ("Hello"):

---------------------------------------------------------------------------------------------------------------------------------

I know, you're probably dying to dive into map making and making cool things like Battle Systems and Menus and such. But you have to wait. None of these things will work if you don't know how to use the basics! I’ll tell you how to do harder things later. For now, let's work with Arrays.

Okay, say you want to store player names, without having to make a variable for each one.
Instead of doing this:
var player_1 = "Bob";
var player_2 = "Fred";

You could just do this:
var Players = new Array(); // Create a new Array.
Players[0] = "Bob";
Players[1] = "Fred";
Players[2] = "George";
Players[3] = "Tim";

Don't want to write the numbers? Sure!
var Players = new Array(); // Create a new Array.
Players.push ("Bob");
Players.push ("Fred");
Players.push ("George");
Players.push ("Tim");

Players.push really just means that it adds what's specified in the Brackets ( and ) to the front of the end of the array list as a new number.

You can also do it this way:

var our_array = new Array ("Item 1", "Item 2", "Item 3"); // You can do as many as you want, and you can also use numbers
// Rather than strings.
Basically, our_array[0] would be "Item 1", our_array[1] would be "Item 2" and our_array[2] would be "Item 3".

To draw an array, just do this:

var main_font = GetSystemFont();

var Players = new Array(); // Create a new Array.
Players.push ("Bob");
Players.push ("Fred");
Players.push ("George");
Players.push ("Tim");

function game()
{
for (i = 0; i < Players.length; i++)
{
main_font.drawText(0, i*10, Players[i])
}

FlipScreen();
GetKey();
}

Woah! What's Players.length?? That's just how many "Players" there is: [0] (Bob) , [1] (Fred), [2] (George) and [3] (Tim).
I suppose this is a good time to say that an Array always starts from 0.

Now, what does:
for (i = 0; i < Players.length; i++)
{
main_font.drawText(0, i*10, Players[i])
}
mean?

Simple. It just continues adding one to i until it reaches the players length, which is in this case is 3. Then it'll draw Player[i] (i being the current number). So it'll start at Players[0]...Players[1] and so on until it goes through them all.

---------------------------------------------------------------------------------------------------------------------------------

Phew. We made it through the basics! Well I hope you did. If you didn't you may find everything else hard. Anyway, let's make things happen. Oh and by the way, don't expect to make that perfect game you've been dreaming up in two days. It takes a lot of practice and knowledge of sphere and javascript to get you that far! I can't even do it yet ;_; But I’m in the middle of one, so hey, not too bad, eh? Let's make a map and do stuff!! Wooo!

Well, before we start you need to have a map and a spriteset ready. Now I’m not going to give you one because the maps too big for this kind of tutorial (trying to keep it small in size) so just scout around other games and see what you can use, or if you want, play around with "import" under file.

Just make sure your spriteset is in the spriteset folder, and your map is in the map folder.

Okay, make our map work shall we? How? Like this:

function game()
{
CreatePerson ("Player", "guy.rss", false); // The false part just means that the player wont be destroyed after every time
AttachCamera ("Player"); // the map's changed.
AttachInput ("Player");
SetTalkActivationKey (KEY_ENTER); // When you talk to a person, you have to press enter!
MapEngine ("Map.rmp", 80); // Starts up your map.
}

Just change the above how you like. If you want to change the main player's name from "Player" (Though this really has nothing to do with the actually hero, it's just what you call if you want the spriteset you're controlling to do something, like move in a scene for instance. Guy.rss should be changed to your spriteset's name, and Map.rmp should be changed to the name of your map.

From here you can probably walk around like an idiot! Woohoo!

Okay, let's make a player that you can talk to. Open up the map, right-click where you want to put this person and then Insert Entity | Person...
Okay, now, type in a name for this person... let's call him Bob. (Don't put "" on either side of Bob's name) Now click the little box with "..." in it and find your spriteset. Once found, press okay. Now, click okay again, then close the map after saving it.
Now we need to make a text box function.

Okay, go to your main script (In my case, game.js) Make sure you keep the above game function there. Underneath it, make a new function, like so:

var main_font = GetSystemFont();
var main_window = GetSystemWindowStyle();

function game()
{
CreatePerson ("Player", "guy.rss", false);
AttachCamera ("Player");
AttachInput ("Player");
SetTalkActivationKey (KEY_ENTER);
MapEngine ("Map.rmp", 80);
}

function Text_Box (txt)
{
win_main.drawWindow(16, 16,GetScreenWidth()-32,GetScreenHeight()-192);
fnt_main.drawTextBox(20, 22,GetScreenWidth()-34,GetScreenHeight()-202, 0, txt);
FlipScreen();
RenderMap();

while (GetKey() != KEY_ENTER);
}

Some new stuff! Okay, I’ll explain them.
GetSystemWindowStyle() : Well, this gets the system's window style. If you like, you can use LoadWindowStyle ("name.rws");
name.rws being the name of your window style.

RenderMap() : Alright, this'll make the map show while the text box is on, as FlipScreen() pretty much just makes the whole thing black. Try taking out RenderMap() and see what happens.

while (GetKey() != KEY_ENTER) : All this means, is while GetKey (any key) isn't pressed, then wait until GetKey() is pressed.

.drawWindow (x, y, width, height) : Basically makes a box at x, y, with the size of width and height. GetScreenWidth() and GetScreenHeight() basically just return the size of the game screen. So, if we minus something it'll shrink.

.drawTextBox (x, y, width, height, offset, text) : Makes a text box, so that it continues until it hits the side of the box with writing, then it'll go down to the next line, so that it doesn't go off the screen.

Hope that made sense. Okay, save that, and go back to the map. Right click on the player and click edit entity. Now, goto "On Activate Talk" in the little selection bar. Underneath that, type Text_Box ("Hello world!"); Now click okay. Save the map and run the game. Now all you have to do is walk up to the guy, talk to him (usually enter or space bar) and he'll say "Hello world". Simple.

---------------------------------------------------------------------------------------------------------------------------------

Let's add a menu!

Okay, before we start I’ll get you acquainted with EvaluateSystemScript() and EvaluateScript(). Well basically, if you had a game with just one -huge- script files there'd be utter chaos. Trying to find a certain piece of code would take ages. That's why we split them up, and call them. EvaluateSystemScript () Calls a certain script from the System folder of sphere. Use it like: EvaluateSystemScript ("menu.js");
To call a script that's -in- your game, use EvaluateScript ("name.js");

Okay, let's make a menu! Add this in to your game:

EvaluateSystemScript ("menu.js"); // This has to be called to use a menu!!!

function Game_Menu()
{
RenderMap();

var menu = new Menu();
menu.addItem ("Items", Items_Menu);
menu.execute (10, 40, 110, 64); // x, y, width, height
}

function Items_Menu()
{
// This is empty!
}

function t() { } // This does nothing, it's just so you can put something in the menu item so it makes more sense.

Woah! menu.addItem? menu is now defined, and anything with menu.addItem will add onto that list (as long as it's in the function, remember var menu = new Menu() isn't a global. Execute makes a box for all the menu items to go into.

Okay, so how do we get this to open when we press a key? Simple. BindKey(). Go up to the game function, and change...

function game()
{
CreatePerson ("Player", "guy.rss", false);
AttachCamera ("Player");
AttachInput ("Player");
SetTalkActivationKey (KEY_ENTER);
MapEngine ("Map.rmp", 80);
}

to this...

function game()
{
BindKey (KEY_ESCAPE, 'Game_Menu()', 't()');
CreatePerson ("Player", "guy.rss", false);
AttachCamera ("Player");
AttachInput ("Player");
SetTalkActivationKey (KEY_ENTER);
MapEngine ("Map.rmp", 80);
UnbindKey (KEY_ESCAPE);
}

How does bind key work? Well basically you have the open key.... KEY ESCAPE, what it opens... our Game_Menu() and when you press escape again what does it do? t(), which does nothing. So it just closes. Okay, save and try that. Usually pressing escape quits the game, but not anymore! How do you quit now? Well until you make an Exit (just do menu.addItem ("Exit", Exit); ) item in the menu, just press Alt + F4. Even with the exit item, Alt + F4 is faster.

---------------------------------------------------------------------------------------------------------------------------------

Phew, hope I haven't confused you so far? Well, now that we've figure out how to make a menu...how about we'll make some items for it, hey? Just to make sure, before you can rush into a game you have to make every little bit in it, items..equipment...etc...sphere is much more complex than RPG Maker 2k, if you use that and will require a lot more work. It'll need teams of people and months of work (Well, depends what your making) and if your by yourself, you'll need a lot more time ;) Duh. Anyway, I suppose you should learn about Objects first!

I must admit, I really have no idea how to explain them, because hey, I’m quite new to sphere myself...well sorta. I know enough to use it. :) How about I’ll give you an example?

function Item (name, amount)
{
this.name = name;
this.amount = amount;
}

So what does this mean? Well first you're making an object, called "Item". Secondly, Item has two parameters, name and amount. Thirdly, the name and amount property are direct links to the function parameter. That'll mean this.name = the name you give it. Eg, new Item ("Potion", 10); which would mean this.name = "Potion" and this.amount = 10. To call "this" outside of the function, you'd have to have an Object name. You could do this:

var potion = new Item ("Potion", 10);

And to call "Potion" or 10 you'd do this:

potion.name or potion.amount

And to draw it to the screen you would do this:

main_font.drawText (0, 0, potion.name);

There are other ways other than "var potion" for the Object name, but before showing you that, just incase you don't understand and want a working Item Object, I’ll write it out for you all together, just so you can look it over and try to understand it:

var main_font = GetSystemFont();

function Item (name, amount)
{
this.name = name;
this.amount = amount;
}

var Potion = new Item ("Potion", 10);

function game()
{
main_font.drawText (0, 0, "Name: " + Potion.name); // Would come out as "Name: Potion"
main_font.drawText (0, 10, "Amount: " + Potion.amount); // Would come out as "Amount: 10"
FlipScreen();
GetKey();
}

---------------------------------------------------------------------------------------------------------------------------------

Well, now I’ll show you how -I'd- make the items. Rather than making a variable for -each- item, i'd put it in an Array. This way, you can list them using the numbers in the square brackets [ and ]. Okay, first off, let's call the array.

var Items = new Array();

Now, let's add in our Item function:

function Item () // This should be blank, rather than this.name = name.
{
this.name = ""; // See how I made these blank? That's so I can set them inside our array, rather than list them on one line.
this.amount = 0;
}

Okay, now let's make the first part of our array...number 0.

Items[0] = new Item () // First, let's declare the first Item in our array a new Item.
Items[0].name = "Potion"; // Next, let's make the empty "this.name" become "Potion".
Items[0].amount = 10; // And now for the empty amount...

See how this is working? Basically it's making a new "this.name" for each variable..array or whatever you want to call it. This basically means you can make many more items, with the same function. Let's make some more items!

Items[1] = new Item () // Second in the array..
Items[1].name = "Ether";
Items[1].amount = 5;

Items[2] = new Item () // Third in the array..
Items[2].name = "High Potion";
Items[2].amount = 2;

This means you can call the names like this main_font.drawText (0, 0, Items[0].name); or if you want to change them after you've created them (Why you would want to change the name of an item is beyond me...so let's just change the amount, because it'll have to increase and decrease as you buy and sell items in your game):

Items[0].amount ++; // This'll make Items[0].amount increase by one!

Okay...now...let's make this into a menu, so that it will list all the items. I’m not sure if I’ll get a fully working items menu in this tutorial...we'll see how I feel. Let's just make it say "Item used" without doing anything else other than that when you press it, okay?
Let's make this open up on your map, because it looks better there. Make sure you have a map ready. I’ll call my map just "Map.rmp".

EvaluateSystemScript ("menu.js");
var main_font = GetSystemFont();

function Item ()
{
this.name = "";
this.amount = 0;
}

var Items = new Array();
Items[0] = new Item ()
Items[0].name = "Potion";
Items[0].amount = 10;

Items[1] = new Item ()
Items[1].name = "Ether";
Items[1].amount = 5;

Items[2] = new Item ()
Items[2].name = "High Potion";
Items[2].amount = 2;

function game()
{
BindKey (KEY_ESCAPE, 'Game_Menu()', 't()'); // If you want to try it out without a map, just remove everything
CreatePerson ("Player", "guy.rss", false); // inside this function, and replace it with Game_Menu();
AttachCamera ("Player");
AttachInput ("Player");
SetTalkActivationKey (KEY_ENTER);
MapEngine ("Map.rmp", 80);
UnbindKey (KEY_ESCAPE);
}

function Game_Menu()
{
RenderMap(); // Make sure to remove this if you're not using a map.

var menu = new Menu();
for (var i = 0; i < Items.length; i++)
{
if (Items[i].amount > 0)
{
menu.addItem (Items[i].name + ": " + Items[i].amount, useItem);
}
}
menu.execute (10, 40, 110, 64);
}

function useItem()
{
main_font.drawText (0, 10, "Item used");
FlipScreen();
GetKey();
}

Woah...what does:

for (var i = 0; i < Items.length; i++)
{
if (Items[i].amount > 0)
{
menu.addItem (Items[i].name + ": " + Items[i].amount, useItem);
}
}

mean? Basically, it'll go through the length of Items (Items[0], Items[1], Items[2]....that's 3 items!) and then it'll check if the current item's amount is over 0 before adding it. If it does equal to 0, it won't show up in the menu, but if it does it'll show up with the name and amount of the item, and useItem will show "Item used". Try changing one of the amount for one of the items. Go on. It won't be there anymore!

---------------------------------------------------------------------------------------------------------------------------------

I know.. let's make a stat's menu. This is easier to do, and I can make this work without too much coding. I'll actualy make this one work. :D First of, let's make an object, shall we?

function Stats (name, hp, mp)
{
this.name = name; // The name of your player
this.hp = hp; // The health points
this.maxhp = hp; // The max health points (eg, 10 out of 50 hp. The 50 would be the max, and hp above would be current.
this.mp = mp; // Ditto for the above, except magic points
this.maxmp = mp;
this.atk = 0; // The player's attack
this.def = 0; // The player's defence
this.level = 0; // The players current level
this.alive = true; // Is the player alive or not?
}

By the way, when I have this.maxhp = hp, it doesn't mean that it'll always be the same as hp all the time. It just sets it to the max at the start. So, basically it'll start off as 10 out of 10 hp, and if you minus PlayerObject.hp, it'd minus only the current hp, but max would be the same. (5/10 for example)
Okay, this'll make our object. This is basically a mix of the two types we can make, one liner and seperate lines:

var main_font = GetSystemFont(); // Load the font
EvaluateSystemScript ("menu.js"); // For our menu

var Members = new Array();
Members[0] = new Stats ("Bob", 10, 0); // Name is bob, hp is 10 and mp is 0.
Members[0].atk = 5; // Sets player 0's attack to 5.
Members[0].def = 3; // Sets player 0's defence to 3.
Members[0].level = 1; // Sets player 0's level to 1.

Members[1] = new Stats ("Fred", 5, 5);
Members[1].atk = 2;
Members[1].def = 9;
Members[1].level = 1;

Members[2] = new Stats ("George", 5, 10);
Members[2].atk = 6;
Members[2].def = 1;
Members[2].level = 1;

Let's make a stats function!

function Show_Stats (who)
{
main_font.drawText (0, 0, "Name: " + Members[who].name);
main_font.drawText (0, 10, "HP: " + Members[who].hp + " / " + Members[who].maxhp);
main_font.drawText (0, 20, "MP: " + Members[who].mp + " / " + Members[who].maxmp);
main_font.drawText (0, 30, "Atk: " + Members[who].atk);
main_font.drawText (0, 40, "Def: " + Members[who].def);
main_font.drawText (0, 50, "Level: " + Members[who].level);
FlipScreen();
GetKey();
Stats_Menu(); // Go back to the stats menu after you've looked at the player.
}

Now for the status menu!

function Stats_Menu()
{
RenderMap(); // Make sure to remove this if you're not using a map.

var menu = new Menu();
for (var i = 0; i < Members.length; i++)
{
if (Members[i].alive == true) // Checks if the player is alive or not.
{
menu.addItem (Members[i].name, new Function("Show_Stats("+i+");") );
}
}
menu.execute (10, 40, 110, 64);
}

So what's "new Function ("");" ? Well, it's another hard one to explain, I don't know it to well, but that's the only way I know how to make the menu open up "i" from the for loop. You could do new function() { ShowStats (i); } But that doesn't like to work for some reason... I suppose i'll just tell you it's the same thing, except what you write is in the "" of the Function, and to add the "i" you -have- to have the "+i+" bit. So it's like this: new Function(" ShowStats (" + i + "); ");

What that does is Show the stats of the current member it's up to. So if Member[0] is created, and you press Member[0] it has to open ShowStats(0); Which then in turn would open what it needs for that player.

Now, let's run it!

function game()
{
Stats_Menu();
}

-- http://a-extreme.homeip.net/downloads/ to get an updated version, just download this again.