Gs2 for the Noobs #4

[John]

Hey guys, just an overview of everything we've learned in addition to more stuff!

player triggered functions:
Here are some built-in functions that gets triggered when a certain thing happened:

//#CLIENTSIDE

function onPlayerChats() { // This will be triggered everytime the player says something
  player.chat = "test"; // when the player say something, the player chat will become 'test'
}

function onPlayerEnters() { // Everytime a player enters a level, this will be triggered
  player.chat = "I've entered a level! Level name is "@ level.name;
}

function onPlayerLeaves() { // Everytime a player leaves the level, this will be triggered
  player.chat = "I've left the level!";
}

function onMouseDown(something) { // Everytime the player clicks somewhere, this will be triggered
  player.chat = "I have pressed the screen at these coordinates: x: "@ mousex SPC"y: "@ mousey SPC" and I did a "@ something SPC"click";
  // something is either "left" or "right" click (there's both too)
} 

(you can find more at graal.net)

Let's say we want to player to be able to do something with his mouse. For example, everytime when the player clicks a button, it will warp the player to the area he has pressed.
The script for this would be changing the player's X and Y.
Okay guys, this is something very very important in scripting which are the two X and Y coordinates. What are these? If you have completely no idea what coordinates mean, the please google it because it would take a whole lot of time to explain.
So Graal levels (again, if you do not know what a level is, this tutorial is not for you) have the coordinate X for horizontal and Y for vertical.

If we change something like player.x = 3; the player's horizontal position will be 3.
If we change player.y = 10; the player's vertical position will be 10.

Okay then, let's get started!

//#CLIENTSIDE
function onMouseDown(type) { // You can call the parameter anything you want, I called it type
  if (type == "right") { // If it's a right click, execute this if statement
    player.x = mousex; // mousex is the horizontal position of the mouse in the level
    player.y = mousey; // mousey is the vertical position of the mouse in the level
  }
} 

That's it, now every time you right click, it will simply warp the player where you right clicked!
Fun, isn't it?

But let's say you get tired of right clicking, what can you do?

//#CLIENTSIDE
function onPlayerChats() {
  if (player.chat == "on") { // if the player says "on"
    this.johniscool = true; // Boolean, turns johniscool to true
  } else if (player.chat == "off") {
    this.johniscool = false; // if the chat is "off" it will turn this.johniscool to false
  }
  setTimer(1); // calls onTimeOut() after 1 second, you can make it 0.01 seconds as well, anything you want, or just call onTimeOut() without waiting
}

function onTimeOut() {
  if (this.johniscool == true) { // If johniscool is true do this .... why did I add that? because if it was false I don't want the player to capt the mouse's movement of course
    player.x = mousex;
    player.y = mousey;
    setTimer(0.1); // recall onTimeOut() again after 0.1 seconds
  }
} 

If you can understand all of the above, then you're ready to move to your next step.

GUI building:
This is one fundamental chapter in Gs2, this is what the player will actually 'see'.
Let's start off by what GUI is...
GUI stands for Graphical User Interface, in short, anything that you can 'see' in the game (window, button, image ...).
I'd also want to focus on HUD (Heads-Up display), HUD has practically the same concept as the GUI but it's used to be dynamic. (e.g, HP bar on certain games, mana bar, ammo bar etc...)

Let's start by the practical stuff... GUI is not easy to learn as there is a-lot of stuff to study (variable names). Skyld has made a nice GUI Builder in the Client-RC which allows you to build your own GUI more easily.

So first off, press the two red windows button on the top right (bottom of the header):


Then check on your client and you should see a window like that:


So first, we start by the background, we need to create the 'Window' of the GUI, so select 'Window' in the first popup and press '+'.
And then you should see a window pop out on your screen:


As you can see, the window's title is 'Window 1', let's change that to a super cool name like 'AN AWESOME WINDOW TITLE!'.
How? On the Object View widow (the one that you press + on it), you can see a list of 'name' and 'value'... Scroll down to 'text' and change the title next to it:



Cool, we just customized our window's title... But nobody likes a window with no buttons! I love buttons... So let's but buttons everywhere!
Just go to Object View again, in the first popup change the Window to Button, then press '+' :



You can change it's position by holding it, you can re-size it the same way you re-size a window (holding the corners...).
And also change the name from Button 1 to anything you like... I'm gonna call mine 'SUPER MAN', and make it BIG. (change the text on the button: select the button, change the 'text' value in Object View, same thing as the Window's Title)

You can always add more buttons, but I'm only going to need one button for now...

I'm also going to add a TextEdit, or what you call a text bar that you type on, so select on the Object View (where we add stuff in) and insert Text Edit, and press '+' :



There it is, you've built your very first GUI! But let's not get so excited, this GUI DOES NOTHING!
Go to Object View, and press Compile, a window will popup:


Change 'MyGUI_' to any prefix you want, I'd like to call it 'Awzm_', this is what all the GUI variables will start with...
The weapon script is where you want it save, if you don't want to save it directly just press Compile and copy-paste the script.

A window will popup out, containing the script of the weap:

//#CLIENTSIDE
function onCreated() {
  new GuiWindowCtrl("Awzm_Window1") {
    profile = GuiBlueWindowProfile;
    style = $pref::Video::defaultguistyle;
    clientrelative = true;
    clientextent = "320,240";

    canmove = true;
    canresize = true;
    closequery = false;
    destroyonhide = false;
    text = "AN AWESOME WINDOW TITLE!";
    x = 564;
    y = 58;

    new GuiButtonCtrl("Awzm_Button1") {
      profile = GuiBlueButtonProfile;
      height = 84;
      text = "SUPER MAN";
      width = 235;
      x = 46;
      y = 143;
    }
    new GuiTextEditCtrl("Awzm_TextEdit1") {
      profile = GuiBlueTextEditProfile;
      height = 20;
      width = 254;
      x = 35;
      y = 38;
    }
  }
}

function Awzm_Button1.onAction() {
  // Button "SUPER MAN" has been pressed
} 

(your script may vary, I changed some dimensions)

Add the weapon to yourself by using findplayer("YourGraalId").addweapon(name); on the first line of the script (serverside).

As you can see, there's a function that has been auto-created by the compiler, and this function is called Awzm_Button1.onAction()

This function will get triggered everytime the player presses that button, let's make the main window destroy everytime we press the button!
My main window is called 'Awzm_Window1' (as you can see on the top script)
The function to destroy it is Awzm_Window1.destroy();

function Awzm_Button1.onAction() {
  // Button "SUPER MAN" has been pressed

  Awzm_Window1.destroy();

} 

Apply the script, and press the button and boom, the window will be destroyed...

But destroying a window isn't as cool as destroying the world, so let's create a player.chat script for it.

function Awzm_Button1.onAction() {
  // Button "SUPER MAN" has been pressed

  player.chat = "I'm a noob!!!";
  player.nick = "Noob";

} 

Save the weapon and press the button!

Now that we know what's the function for the button press, let's make use of the TextEdit we got, we know in Graal you can't change your nick/head/body everytime for a certain amount of time...
So what we're going to do is make the user type the head/nick/body name or image in the text edit, and press the button then the player will have his wish granted.
My text edit object is 'Awzm_TextEdit1', and the text that is typed in that is Awzm_TextEdit1.text ...

function Awzm_Button1.onAction() {
  // Button "SUPER MAN" has been pressed

  player.nick = Awzm_TextEdit1.text; // this will change the player's nick to anything that is written in the TextEdit

} 

And now you know the minor basics of GUI creation!
For GUI scripting, always review the code that has been generated by the compiler and try to replicate it for better coordinates...

[John]

If you've understood this tutorial, you're up for the next one...

Which will cover the knowledge and difference between classes, weapons and DBs...

[Poorface]

So basically, this is how censors, making us talk when we fall through space, the limit on text in the event house, bullets, etc. work.
Nice guide.

[Niko]

Yes! Part 4!!
Im going to continue learning on graal.net

[Niko]

Thanks!

[Poorface]

Table of contents > creation > Development

[John]

Okay creating GUI creation as a vid or would you like it with pictures?

[Ek CM Bolivar]

Yea

[Ek CM Bolivar]

Vid...pwease

[Striker]

I don't understand the last script x.x