[Other Tutorial] Mouse support & Buttons (for newbies)

[Alesteir]

Hello everyone!

Lately I've been trying out the Mouse System (Touch screen) and as warned it was indeed kind of hard to make it work (considering I'm a newbie at scripting).
After tons of trials and research around I finally made it work, so I thought I'd share this small tutorial for those not-so-good at scripting like me and hopefully it'll be useful for someone.

-
We start off by making a class (which will be needed to call the script) and inside this class we'll put the definition "Initialize" which will be the first thing to run once you execute the script.
Inside the initialize definition we'll write "draw_button" which is another definition containing all the code to draw the button(s).

Inside "draw_button" we'll have viewport.z which, if I understood correctly, is the "priority", you'll want to set it higher than all the other stuff you may have to make the button display over all other pictures (the background, for instance).
Once we are done drawing the button and positioning it on the screen, we'll call "update" which is another definition used to track the cursor's position and it's behavior inside the screen.

The Mouse script I'm using is the one in the wiki tutorial (by Crazyninjaguy), the other ones are pretty much similar except the functions' names may differ a little bit.
Inside "Update" we have the function "Mouse.mouse_in_area?" which takes as arguments the position of the button sprite (300, 300 in this example) and then the size of the image (32,32 in this example).

After we check the cursor's position, if it's true then it'll check next if the user is clicking any button (Mouse.click?(number)), the number is 1 in this case, which is "Left click".
If both conditions are true (the cursor is over the button and the user is pressing left click) then it'll open up the PC (or do whatever the button is meant to do).

Whatever the previous conditions are met or not, update will call itself infinitely every 1 frame (or whatever you'll set) to check continuously the cursor's position/behaviour, until you break/dispose.

Class NameClass

    #The button's position in the screen
    ButtonX = 300
    ButtonY = 300 

    #How often to check cursor's position/behaviour
    RefreshTime = 1 
   
    def initialize
       draw_button
    end

    def draw_button
       @sprites={}
       @viewport=Viewport.new(0,0,Graphics.width,Graphics.height) #x,y and size of image
       @viewport.z=99999 #The priority

       @sprites["NameButton"]=IconSprite.new(ButtonX,ButtonY,@viewport)
       @sprites["NameButton"].setBitmap("Graphics/Pictures/NameImage")

        update
    end

    def update
       if Mouse.mouse_in_area?(ButtonX,ButtonY,32,32)
          if Mouse.click?(1)
             pbTrainerPC
          end
       end
       pbWait(RefreshTime)
       update    
    end

End

To run the script, make an event and add as script "@NameClass=NameClass.new" and what you should expect to happen is the button to appear at x and y = 300 and the pc opening up once you click on it. If you see no cursor, it's because you're missing the "Mouse.png" in Graphics/Pictures.


-
While it may seem (really) obvious to most people, I hope this tutorial will be at least a bit useful to some other, if any expert scripter happens to pass by and has any suggestion to improve this, it'd be really useful as I'm trying to learn!