Godot custom tooltip - 2D&3D

hi everyone today we are going to create a modular tooltip node that allows adding a tooltip to any 2d 3d and control nodes we will also see how we can animate the tooltip in order to add polish to our game as always link to the final version of the code and to all the assets used are in the description let's get started we will start by making a tooltip for 2d nodes then we will add four lines of code to support the 3d and control nodes our tooltip can work with any node that emits the mouse entered and mouse exited signals control nodes and every collision object natively emits this signals so working with them is especially easy in this scene we have an area to d which inherits from collision object with a nice sprite from kenny assets and we have this simple placeholder tooltip we are going to start by creating a new script it's going to inherit from node we're going to call it tooltip i'm going to use a script template i made called headers let's open the script and you can see it simply add headers according to godot documentation style guide to let the user control how the tooltip would look we are going to create an export variable and we are going to call it visuals resource it is going to be of type packed scene then the user can create whichever tooltip he wants and simply pass it to our tooltip node we are now going to create a private variable called visuals and it is going to be of type control and it is going to be the actual tooltip itself then in our ready function we need to instance this visual node so we simply are going to say visuals is going to be equal to the visual resource instance and of course we need to edit as a child we would now like to know on which object to listen to the mouse entered and mouse exited signals [Music] so we are going to create an expert variable we are going to call it owner path and it is going to be of type node path this way the user can use any type of tree structure he wants now we are going to create an unready variable in which we are going to get the actual owner so we are going to call it owner node and we're going to use get node and we are going to use the owner path now in our ready function we can say owner node connect mouse entered to a function we are going to create in a second called also mouse entered but with the private sign and we are going to copy this line and connect the mouse exited and most exited and i've made an error here and i need to add another e at the end we can now go ahead and create this mouse entered and mouse exited functions so let's give ourselves some room and create the mouse entered function which receives nothing and returns nothing and we are going to take visuals and set them to be visible by using show now we will create the most exited function which again receives nothing and returns nothing and we are going to set our visuals to be hidden by calling the height function now in order to easily get to our tooltip node from anywhere in our project we are going to add a class name to our script and the class name is going to be simply tooltip now we can go to our simple example click on our base node and we're going to add a tooltip by simply typing tooltip and choosing the correct one and now we need to assign the base as being our owner and we can add the placeholder tooltip we saw before now we can run by pressing f6 or the run current scene button and you can see it's visible at the beginning which is not optimal we are going to solve it in a second but if i hover over our owner we can see the tooltip and when i leave the tooltip disappears [Music] so let's go ahead and set the default behavior of the tooltip to be hidden we're going to call visuals dot hide now we want to create some delay from when the mouse enter the object to when the tooltip shows so we are going to create a private variable which is going to be of type timer [Music] in our ready function we are going to initialize this timer so we are going to set timer to be a new timer we are going to edit as a child of the tooltip and we're going to connect the timeout signal of our timer to a function we're going to create immediately [Music] which is going to handle showing the tooltip so we'll call it custom show so now instead of calling visuals to show when the mouse entered the owner we're going to start the timer with some delay and we're going to create a an export variable of type float and again i i think i want to control the the range so we're going to set it like this in a range of between let's say 0 to 10 with the jumps of 0.05 and this is going to take care of this error and now when the mouse enter we are going to start the timer when the timer finishes we are going to call custom show and when the mouse exit we are going to call mouse exited so let's create this custom show function which receives nothing and returns nothing and we're simply going to call visuals.show but we also want to stop the timer so we are going to call sorry timer dot stop and we are going to copy it to mouse exited also and the reason we copy it here is to make sure that if the user hover over the owner and leaves before the timer stops that we won't show the tooltip so now let's set some default value to delay let's say half a second and we can immediately play and we can see that between the hover and the appearance of the tooltip we have a delay of half a second all that is left now is to control the tooltip position in order to do this we are going to create some more export variables the first one is going to be whether or not we want the tooltip to follow the mouse so it's going to be a variable called follow mouse and it is going to be of type bool and we are going to make sure it's initialized to be true and we are going to add another export variable called offset in the x-axis and i'm going to again control the range of it it's going to be a float between 0 and let's say 100 with the jumps of 1. and we're going to copy this line and create another offset for the y and this is going to set how far away from the mouse or the owner we're going to draw the tooltip now i like to cast this two variables into a vector two which called offset and this is just a prefer a preference of mine so you don't have to do it you can leave it like this so the first function we are going to implement in order to draw the tooltip in the correct location is going to be called get a screen position it is going to receive nothing and return a vector 2 which is the position in which we want to draw the tooltip so we're going to create a variable called position we're going to initialize it to be a vector 2 with zeros and we're going to return this position vector so that we get rid of this error [Music] now we want to handle the 2d case which is the first case we are going to implement so we are going to say [Music] if our owner node is of type node to d we're going to set the position to be equal the following function the owner node dot [Music] get a global transform with canvas and this is going to return a transform in the space of the viewport and in order to transform from the transform itself to a vector 2 we are going to return the dot origin [Music] now we are going to override the process function because we want the tooltip to update its position based on the current mouse position so we're going to override the function process we're going to do it if and only if our visuals is visible [Music] and for now we're going to say that visuals dot rect position is going to be equal to get screen position [Music] and we can already run it and you will see that when i hover the tooltip now appears in the center of our owner [Music] now we want to handle the case when we want to appear next to the mouse so we can say if follow the mouse is true simply return get viewport get mouse position [Music] and because follow mouse is defaulted to be true if we run now you'll see that the tooltip follows the mouse [Music] we are now going to take it one step further we want the tooltip to be to the right of the owner or the mouse and above it so we are going to change the way we calculate the wrecked position of our tooltip [Music] we are going to delete this line for now and instead we are going to define a new variable called base position or base pause and we are going to set it to get screen position now we are going to defined two new variables one is going to be called final x and it is going to be currently be the base position dot x and we are going to create another variable called final y and it is going to be the [Music] base position in the y axis minus the extents in the y-axis and we still don't have this extent variable but we're going to create it right now it's going to be an unready variable and it is going to be equal to visuals rect size and of course i have an error because my spelling is horrible so let's fix this and now we can finally set the visual's rec position to be equal to a new vector which is simply the final x and final y and now if we run we get an error here and the reason is visuals is only initialized in our ready function so we also need to initialize our extents in our ready function so let's first of all delete this line and make sure that we declare extends to be vector 2 and now in our ready function under the initialization of visuals we'll calculate the extents and we simply can say extends [Music] is equal to visualize sorry visuals dot rect size and now we can run and you can see that the tooltip appears to the right and to the top now let's insert our offset into the picture so we simply need to add the offset in the x-axis and subtract the offset in the y-axis and now let's test it let's set offset to be i don't know 20 and after y to be 10 and run it again and you can see that the tooltip is offsetted from the mouse by that amount of pixels and if we cancel the follow mouse we'll see that it is offsetted from the center of our owner and this is working so that's zero everything and now let's watch what happens if our owner is at the edge of the screen so if i hover now you can see that the tooltip is getting out of the frame so a tooltip is part of our user interface and as such we won't allow it to be outside of the screen so we need to handle this case of when the tooltip extends the limits of our screen [Music] so first of all to allow for some control uh for the for the user we are going to add two export variables which we are going to again create control their range they are going to be padding in the x and padding in the y and it is going to control uh how close to the edge we allow the tooltip to be and i'm going to cast it again for a padding vector now in our process function we can't immediately know what the final x and final y would be first we are going to calculate the borders of our screen and then we will see if the tooltip is out of those borders we need to change the size so the borders is going to be get viewport dot size and we are going to subtract padding from that now we want to test if we need to draw the tooltip on the left side of the owner or mouse and we want to also test if we need to display the tooltip below our owner or the mouse so we can test if our final x plus the extents in the x axis is greater than our border in the x-axis we need to set the final x to be to the left so it's going to be base position x minus offset x minus extends x and again for the y but this time on the opposite so if final y is less than padding in the y axis we simply set the final y to be the base position in the y plus the offset in the y and that's it we can already run it and you can see that even in the edge if i get too close it's going to go to the left and if i go to high it's going to draw below and any combination of those states we can also test the padding let's say padding 10 on all axes and now i can't really get to the edge if i get to a distance of 10 pixels from the edge of the screen i'm going to flip sides now we are going to do the same for 3d but as you are going to see it is going to be a matter of changing two lines of code here we can see that we have an area 3d which is the castle in the center and we have another nice model from kenny assets we would now like the tooltip to show on the 3d space so first to go let's go to our area and let's add the tooltip node let's set the base to be our owner and let's assign again this placeholder tooltip from the before now if we run we can see that because we are following the mouse uh it's already working but if i set mouse follow to be false you'll see that we see the tooltip at 0 0 at the top left corner and the reason is if we look at the function because our owner is not node to d we return the position 0 0 so now let's add those two lines of code i was telling you about to make our self-support 3d so if our owner node is spatial we are going to set position to be equal to get the viewport and get the camera and we're going to use a function called unproject position which returns the position in screen of a 3d point and we are going to get the owner node which is a spatial node so we can get the global transform dot origin and that's it that those are the two lines we need to add to control sorry to support 3d and we can immediately run and you'll see that now we get the tooltip in the correct position and the reason is it's so low is because our castle position is actually slightly below where you see the the trees inside the castle so this is why it's so low that we can very easily fix it by setting the offset to something like maybe 20 and i don't know 40 and you can see yeah it's slightly more centered now but you can change it to whatever you like [Music] so uh i don't have an example for it but you can trust me it's going to work like this we're going to add another two lines of code to con to also support control nodes and to get the position of a control node in the screen we can simply use owner node.get wrecked position and and any control node has erect position which is the position in screen space of this node and this is as you can see here this is going to let us draw a tooltip over any control node so we are finished with creating the node now let's take some time and have fun with it so we have this hexagonal map with the base in the center and three resource types clay wood and stone all these hexagons inherit from the same tile script and the resource are all children of this resource scene and the base is a child of this base scene so if we want to add tooltips to our resources into our base all we need to do is edit these two nodes so let's start with the base because we only want to add this very simple tooltip to it so i'm going to add the tooltip assign the base as the owner and i have created before um a base tooltip and i'm going to set it now and that's basically it i can run the scene now and when i hover over my base you can see i have a tooltip so with this node it's just a matter of two clicks and you have tool tip to any object in your game now for our resources i want to add an animated tooltip that would be uh nicer and would add a lot of flair to our game so for that purpose i created um a resource tooltip and you can see it has an animation and the animation is the icon kind of swirls in and the text is getting revealed so let's look at it a few more times and i want this animation to happen every time we hover over a resource node so you can see we have functions to call this animation player and we can play it forward and backward and get a nice animation there are two more functions set textures and set value and they help us customize our tooltip to fit the resource so you can see the resource has three variables the name the amount and the texture and you want to connect those three variables to the fields that represent our tooltip so in order to do that we are going to go to our base resource scene we are going to add a normal node and we are going to call it resource tooltip we're now going to attach a script to it and we're going to give it some unique name because a resource tooltip is taken so we're going to call it resource tool tip like this and we are going to make it inherit from our tooltip script and now we need to override some of the functions so the first one we are going to override is the ready function and here we are going to set the texture and the label of our tooltip so we are going to say visuals set texture to our owner node dot texture and visuals dot set value to our owner node resource name [Music] and our owner node value [Music] sorry amount now we need to override the custom show and the mouse exited functions because we don't want to simply hide and show our tooltip we want to play the animation so let's override the mouse exited function to first of all remember to stop the timer and then call our visuals play show function which sorry play hide because we're overriding mouse exit and in our custom show function we are we are going to call play show and those functions simply play the animation so we can copy and paste it here and just change it to show one final change we are going to add to the red function the line visuals dot show to make sure that the parent is showing and now let's run the correct complex 2d scene and you can see that i have a tooltip over my base and if i hover over the clay we can see the animation and for some reason godot doesn't like to play this animation when we move so what i'm i will do here is simply in our resource tooltip i'm going to set the follow mouse to be false and then add some offset let's say 50 in the x and now because the tooltip is going to be static if i run it again we have the tooltip over the base and we have the tooltip over the resources and it's going to play the animation correctly and now you can see that this stone because it was going to be exiting the screen is drawing the tooltip to the left and that is it thank you so much for watching my tutorial i made this tutorial as a prerequisite to a tutorial series in which i will create a full 3d rts gaming godot if that sounds like something you would want to watch subscribe to get notified when the videos come out as always links to the code and the assets used are in the description thank you and have a nice day goodbye

Channel: Indie Quest

Views: 5,807

Keywords: Godot, 3D, 2D, Game development, Tooltip, Custom tooltip, UI, game design

Id: eOVvI1ztcPg

Length: 32min 49sec (1969 seconds)

Published: Thu Oct 22 2020