Wild Tiger's Sphere Tutorial Part 1

From Spheriki

This tutorial is almost a word-for-word copy of Wild Tiger's original tutorial for getting started with Sphere.

Introduction

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 window (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? Not 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.

font.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 in case 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.

Variables

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 then 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();  
}

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.

Functions

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();
}

Operators

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.
   (!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. 

Loops

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 condition is true.
}

There is also a one liner:

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

While loop example:

var main_font = GetSystemFont();
 
function game()
{
  var a = 0;
  var y = 0;
 
  while (a < 10)
  {
    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 condition is true.
}

There is also a one liner:

for (variable; condition; increment)  //what it does if condition is 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();
}

Conditionals

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();
}

Switch

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")

Arrays

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.

Click here to move to the second part of the tutorial