Point&Click Icon/Action Interface (Keyboard/Mouse)

[megumi014]

How to make a Point&Click action Interface.


...

...​

Hi everyone. This is a tutorial that will explain how to make a pop-up interface (f.e. “look”, “use”, “speak to”…) for Point&Click based games in RPG Maker MV through events (and a bit of scripting).

There are many ways to make it: with static pictures, changing the colour of the icon when the mouse hovers over it, depicting a small animation... Since the final "coding" depends on your take on it, I will expose the general guidelines to set the interface up and show an example of a square shaped menu with 2 icons animated and 2 icons that change their colour. I made it so you can use it with a mouse and a keyboard indifferently.

Very important: you will need 1 pluggin/snipped made by Astfgl to track down the coordinates of your mouse when it moves around the screen. You can find it in this thread (here is the

Spoiler: quote

@Rhino
...
Here have a proper code snippet:

Spoiler

//=============================================================================
// TouchInput alias
// by Astfgl
// Date: 03/04/2017
// Revision: 06/04/2017
// Free to use in any way, credits not necessary.
//=============================================================================

/*:
 * @plugindesc TouchInput alias
 * @author Astfgl
 * @help This will allow you to get the mouse coordinates each time the mouse is moved
 */

(function() {
var TIOMM = TouchInput._onMouseMove
TouchInput._onMouseMove = function(event) {
    TIOMM.call(this,event);
    this._mouseX = Graphics.pageToCanvasX(event.pageX);
    this._mouseY = Graphics.pageToCanvasY(event.pageY);
}
})()

if you can't find it). Just save it as a .js document and copy it into your project’s pluggin folder.



Step 1. Design your interface.

How many icons will you need? What is the main shape of the interface?

If your game is only mouse-based, you don’t need to stress too much about this point, but if you want to include the possibility of making your menu interactive for a keyboard too, you have to keep in mind a design that allows an easy way to navigate through it with the direction arrows (like a square or a cross shape).

Usually these interfaces show up on the right side of the object/person you want to interact with, but you might also need to show it on the left side eventually if they block the view of your character or the end of the map screen. Therefore, if your interface is not symmetrical you could optionally prepare a mirrored version of it too.

To give you an approximate idea, for this tutorial the size of the square menu I will use is 100x100 and the icons are 48x48. Remember to save them in a format that can be read by RPG Maker MV (like png) with a transparent background and place them in your project’s Pictures folder.

Spoiler: Example of pictures

Step 2. Get the coordinates for all the icons.

In every map you will need to set a parallel event to call out 2 common events continuously:

a) Player/Mouse XY: it controls 4 variables.​

-Screen X = Screen X of Player (set to… game data).
-Screen Y = Screen Y of Player.
-Mouse X = TouchInput._mouseX (set to… script) -> This is what you need Astfgl's pluggin for.
-Mouse Y = TouchInput._mouseY​

b) Interface XY: it gets all the coordinates for your icon menu.

This is all made in script form (Event Command -> 3rd page -> Advanced -> Script…) using this formula:

$gameVariables.setValue(number of the new variable, $gameVariables.value(number of the variable Screen X or Y) + or – numbers of pixels away from your character where you want the menu/icon to show up.

Which means: set a new variable to know where exactly the menu/icon needs to show up in relation to our character's position. For a square shaped background I made these two variables:

Spoiler: Background code example

//Background X -> the interface will show up on the right side of the character//
$gameVariables.setValue(6, $gameVariables.value(3) + 54);
//Background Y//
$gameVariables.setValue(8, $gameVariables.value(4) - 106);

You can also include another variable to make the interface appear on the left side of the character, but I will omit it in the example to make things less confusing.

For the icons you need 2 variables per coordinate instead of one, to let the game know where the picture starts and where the picture ends (to define an area in which the mouse can trigger the action, it will become clearer on Step 3). Here is an example of the four icons I used for the square shaped interface.

Spoiler: Icons code example

//Look Right X: left border of the picture & right border of the picture//
$gameVariables.setValue(9, $gameVariables.value(3) + 56);
$gameVariables.setValue(32, $gameVariables.value(3) + 103);
//Look Y: top of the picture & bottom//
$gameVariables.setValue(11, $gameVariables.value(4) - 103);
$gameVariables.setValue(33, $gameVariables.value(4) - 57);
//Speak Right X//
$gameVariables.setValue(12, $gameVariables.value(3) + 104);
$gameVariables.setValue(34, $gameVariables.value(3) + 151);
//Speak Y//
$gameVariables.setValue(14, $gameVariables.value(4) - 103);
$gameVariables.setValue(35, $gameVariables.value(4) - 57);
//Use Right X//
$gameVariables.setValue(15, $gameVariables.value(3) + 56);
$gameVariables.setValue(36, $gameVariables.value(3) + 103);
//Use Y//
$gameVariables.setValue(17, $gameVariables.value(4) - 58);
$gameVariables.setValue(37, $gameVariables.value(4) - 9);
//Inventory Right X//
$gameVariables.setValue(18, $gameVariables.value(3) + 104);
$gameVariables.setValue(26, $gameVariables.value(3) + 151);
//Inventory Y//
$gameVariables.setValue(20, $gameVariables.value(4) - 58);
$gameVariables.setValue(27, $gameVariables.value(4) - 9);

Step 3. Place the interface on the objects/npc.

First create 2 variables, one for the keyboard and another for the mouse (I named them Index and Index Mouse respectively).


a) First Page -> Trigger action button.
Place an event on the object you want to interact with and on the first page show all the pictures your interface is made of. If it consists in static pictures you only need one per icon. If you want it to change colours/glow/have any effect on it when the mouse hovers on top of it you will need at least 2 pictures per icon: one normal, set on 255 opacity and another with the effect set on 0 opacity initially (you could also use the same picture number in RPG Maker MV and change the icon's picture instead of playing with the opacity levels with several picture numbers, but personally I prefer the first method to avoid that split second in which the image can disappear while it changes).

If it is an NPC set the movement route of the current Event and fix its direction ON (they will face your character until the event is done).

Finally set the keyboard variable to 1 and switch on the self-switch A of the event in order to go to page 2.

You could put this all in a Common Event and just call it back instead of writing it down in every time, unless you want an interface that changes its icons depending on the object you face (like in the Gabriel Knight series).
​

Spoiler: First page

Picture #1 is the background.
Pictures #2~5 are the "look" icon. It is an "animation": the first picture is a closed eye and the last one an open one. It will appear open (hence the Move Picture) because that is where I'm setting the Index to (index 1 equals to the "look" action in Page2 of the event).
Pictures #6~9 are the "speak" icon. It is also an animation.
Pictures #10~11 are the "use" icon, one white and another green.
Pictures #12~13 are the "inventory" icon, one white and another green.

*I haven't tried more than 4 frames per animation, so I don't know how many it supports before it gets laggy.

b) Second Page -> Autorun

• First you need to make as many conditional branches as icons you have (in this example 4). The condition will be, again, written in script form. We need to tell the game to only trigger the actions when the mouse is on top of them, therefore we need to define the "walls" of that area thanks to the coordinates we got in Step 2.

"if the variable X of the mouse is bigger than the left side of the picture and smaller than the right side, and if the variable Y is bigger/lower than the top/bottom of the picture THEN the next sequence will happen".

//The number of the variables are the ones defined on the Step 2//
//look//
$gameVariables.value(22) > $gameVariables.value(9) && $gameVariables.value(22) < $gameVariables.value(32) && $gameVariables.value(23) > $gameVariables.value(11) && $gameVariables.value(23) < $gameVariables.value(33)
//speak//
$gameVariables.value(22) > $gameVariables.value(12) && $gameVariables.value(22) < $gameVariables.value(34) && $gameVariables.value(23) > $gameVariables.value(14) && $gameVariables.value(23) < $gameVariables.value(35)
//use//
$gameVariables.value(22) > $gameVariables.value(15) && $gameVariables.value(22) < $gameVariables.value(36) && $gameVariables.value(23) > $gameVariables.value(17) && $gameVariables.value(23) < $gameVariables.value(37)
//inventory//
$gameVariables.value(22) > $gameVariables.value(18) && $gameVariables.value(22) < $gameVariables.value(26) && $gameVariables.value(23) > $gameVariables.value(20) && $gameVariables.value(23) < $gameVariables.value(27)

In each condition you need to label them (to move through them with the keyboard), set the Index of the keyboard and mouse to a fixed number (in the example look =1, speak =2, use=3 and inventory =4) and finally modify the picture's opacity accordingly to the effect you desire. On the first condition (only) you also need an "Else" branch to set the Index Mouse back to 0, that way nothing will trigger if you click outside the pictures.

Spoiler: Second Page A

• Next you need yet another set of conditional branches, one for each icon (here 4), taking the Index =1, If Index =2... as the condition. Inside each of them you need to define the actions that can happen for the mouse and the keyboard. Using labels can make it all cleaner, such as:

-TouchInput.isTriggered(); (mouse left click) (action label) -> (ONLY if Index Mouse is set to the corresponding number) do the action, erase the pictures, set the indexes back to 0, set the direction fix OFF if it is an npc, switch off the auto-switch and exit the event processing.
-TouchInput.isCancelled(); (mouse right click)-> go to label: exit
-If button [OK] is pressed. -> go to label action.
-If button [Cancel] is pressed. -> go to label exit.
-If Right/Left/Up/Down are pressed, go to the label of another Index.

Spoiler: Second Page B

The Common Event: Erase menu is just a CE that erases all the pictures of the interface.
In the input triggered you can either show a text, call an event, another script to open the inventory SceneManager.push(Scene_Item);, switch ON a new switch and create a new page for a more elaborated event... etc.

• Finally there will be another separated conditional branch (the label "exit" one), in which TouchInput.isCancelled(); will erase all the pictures, turn OFF the direction movement of the event if it is an NPC and switch off the self switch.

And that is pretty much it. If there is anything unclear, you need more captions of the events or have any questions let me know.

 

[DavidFoxfire]

I'd like to use something like that, but have it controllable from the keyboard or mouse.

 

[megumi014]

I'd like to use something like that, but have it controllable from the keyboard or mouse.

What do you mean? Only with a keyboard or only with mouse individually instead of the 2 of them at the same time?

 

[DavidFoxfire]

Oh, this system allows you to use both? Now I see. Great. I'll be able to use it. Thanks.