Making a Mouse

From Spheriki

Jump to: navigation, search

This tutorial describes how you can make a mouse in Sphere and use it to select menu options. It is a beginner to intermediate tutorial and will teach you to know Sphere's mouse functions and be comfortable with trying something new. We will lightly touch on OOP.

[edit]

Create a mouse object

For the purpose of this tutorial, start a new Sphere project and label it "Sphere Mouse Tutorial".

First, every mouse based game has some sort of cursor object. A cursor must need an x and y position and some sort of image to display. We will even tack on a function to display this mouse.

Note: As this tutorial goes on, we will refer to certain scripts by the top comment on every code box. It tells you what code is in the box and the filename to save the file as.

Another Note: I will also talk to you in the comments within the code, pay attention to those as well. 

// Cursor.js //
 
var Mouse = {};
Mouse.image = LoadImage("MyMouse.png"); // change this with your own image
Mouse.x = GetMouseX();
Mouse.y = GetMouseY();
 
// this is used to draw the cursor and update the mouses x and y positions.
Mouse.updateAndDraw = function()
{
  this.x = GetMouseX();
  this.y = GetMouseY();
  this.image.blit(this.x, this.y);
}

At this time, we have a basic mouse object. We can now start applying this to a new game. 

// Main.js //
 
RequireScript("Cursor.js");
MyMouse = new Mouse;
 
function game()
{
  while(!IsKeyPressed(KEY_ESCAPE))
  {
    MyMouse.updateAndDraw();
    FlipScreen();
  }
}

Note: Remember to save the above code and set Sphere to use this as the games start script.

[edit]

Creating a Mouse Driven Menu

So now you have a blank game with a mouse. Neat huh? Now we need that mouse to do something. To have a purpose in it's currently feeble existence...

We will now add clicking support to the mouse object: 

// Cursor.js //
 
var Mouse = {};
Mouse.image = LoadImage("MyMouse.png"); // change this with your own image
Mouse.x = GetMouseX();
Mouse.y = GetMouseY();
Mouse.leftIdle = true;
Mouse.rightIdle = true;
 
Mouse.updateAndDraw = function()
{
  this.x = GetMouseX();
  this.y = GetMouseY();
  this.image.blit(this.x, this.y);
}
 
Mouse.leftClick = function()
{
  // this if conditional tells Sphere that you can click only once
  if (IsMouseButtonPressed(MOUSE_LEFT) && this.leftIdle)
  {
    this.leftIdle = false;
    return true;
  }
  return false;
}
 
Mouse.rightClick = function()
{
  if (IsMouseButtonPressed(MOUSE_RIGHT) && this.rightIdle)
  {
    this.rightIdle = false;
    return true;
  }
  return false;
}
 
Mouse.updateMouseState = function()
{
  // these if conditionals tell sphere it's okay to click again.
  if (!IsMouseButtonPressed(MOUSE_LEFT)) this.leftIdle = true;
  if (!IsMouseButtonPressed(MOUSE_RIGHT)) this.rightIdle = true;
}

Note: The menu code below will copy closely from the system script "menu.js", but it isn't an exact copy. For the purpose of this demo, the keyboard stuff will be excluded. 

// Menu.js //
 
function Menu(x, y, w, h, mouse, font, window_style)
{
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.mouse = mouse;
 
  // the "||" make it so you don't need a font or window; Sphere will assume the latter.
  this.font = font || GetSystemFont();
  this.font_height = this.font.getHeight();
  this.window_style = window_style || GetSystemWindowStyle();
 
  this.items = [];
  this.selection = 0;
}
 
Menu.prototype.addItem = function(name, callback, color, color_on)
{
  var item = {};
  item.name = name;
  item.color = color || CreateColor(255, 255, 255);
  item.color_on = color_on || CreateColor(255, 0, 0);
  item.callback = callback;
 
  this.items.push(new item);
}
 
Menu.prototype.execute = function()
{
  var done = false;
  while(!done)
  {
    this.window_style.drawWindow(this.x, this.y, this.w, this.h);
 
    for (var i = 0; i < this.items.length; ++i)
    {
      // we change item eslection color here : //
      if (i == this.selection) this.font.setColorMask(this.items[i].color_on);
      else this.font.setColorMask(this.items[i].color);
 
      this.font.drawText(this.x, this.y + i * this.font_height, this.items[i].name);
 
      // we add mouse support here : //
      if (this.mouse.x > this.x && this.mouse.x < this.x + this.w &&
          this.mouse.y > this.y + i * this.font_height &&
          this.mouse.y < this.y + i * this.font_height + this.font_height)
      {
        this.selection = i;
 
        // here we add mouse clicking support : //
        if (this.mouse.leftClick())
        {
          done = true;
          this.items[this.selection].callback();
        }
      }
    }
 
    this.mouse.updateMouseState();
    FlipScreen();
  }
}

Now we use the menu in our new game: 

// Main.js //
 
RequireScript("Cursor.js");
RequireScript("Menu.js");
MyMouse = new Mouse;
 
function game()
{
  var MyMenu = new Menu(0, 0, 80, 60, MyMouse);
  MyMenu.addItem("Quit", Exit);
  MyMenu.addItem("Quit", Exit);
  MyMenu.addItem("Quit", Exit);
  MyMenu.addItem("Quit", Exit);
 
  MyMenu.execute();
}

And that's it, try out this new menu and see how you like it. --Radnen 05:11, 14 October 2008 (IST)

Retrieved from "http://www.spheredev.org/wiki/Making_a_Mouse"
Personal tools