Designing A Responsive Tooltip System in Unity

[Music] sometimes when designing and developing our games we need to strike the difficult balance of presenting the right amount of information to the player without overwhelming them with walls of text and data often for the purposes of aesthetics we may also want to avoid lots of verbose and very utilitarian interfaces after all icons are much easier on the eye but what we make up for in readability we may often lose in cognition sometimes for whatever reason our interfaces may end up obfuscating things and so we'll need to find ways to recontextualize them to our players this is where tool tips can be incredibly effective as well argued that we process images a lot faster than words so tooltips are an incredibly useful way to convey extra information to the player as they interact with parts of a game while maintaining the goal of keeping an interface clean or easy to read for me tooltips are a great example of designers using an input method and target platform to its strengths we're so used to mousing over things in other software player behavior may inherently cause them to explore the screen to gain a better understanding of their context and so it only makes sense to predict and allow for that curiosity in the games that we create hi there i'm matt and welcome to game dev guide in this video we're going to take a look at how you can build a flexible tooltip system for your game in unity we're going to design a tooltip system that handles the basics of showing and hiding a tooltip object we're going to create a tooltip trigger script for anything that can be interacted with in our scene that we'd like to show a tooltip on we're also going to take a look at how we can use some of the ui components to size the tooltip dynamically based on its contents and how to offset our tool tip based on the mouse position to avoid the contents rendering off screen so let's go ahead and get started shall we i have a little prototype game here with some tiles and a basic ui most of the assets here are provided by the infamous and ever wonderful kenny links to those posted in the description currently it's pretty unclear on our scene what anything does and so i think we need to use some tool tips to better explain the lay of the land to the player we want our tooltip to always render on top of anything in our game's ui so the best way i've found to do this is to have a completely different canvas exclusively for our tool tip this way we can set the sort order in the canvas renderer to its maximum value and confirm that it'll always be on top next let's create our tooltip itself i want my tooltip to be inside a white box and have a header area and then a description area so i'll create the base background for the box using an image and add a vertical layout group and two text mesh pro elements and label them accordingly i want my tooltip to dynamically resize based on the content so let's disable the child force expand options on the vertical layout element and enable the control child size option instead next let's add a content size fitter to the image and set both properties to preferred size now as our text increases in length our image resizes to fit if we enable or disable the header or content our image also resizes so this is okay but if our text is too long and isn't formatted we end up with a rather long and unreadable block of content here to avoid this we need our text field to have its size limited by the layout system so let's add a layout element to our tooltip and set the preferred size to 500. now our text wraps nicely and our tooltip looks more presentable however we now have the issue that if our text is just a few words long the horizontal size of our box no longer resizes to fit its short content but if we toggle the layout element on or off notice how our box resizes so we need to create a way for our layout element to toggle on or off based on the size of the content let's create a new script on our tooltip simply call tooltip and at the top let's add the execute in edit mode attribute and add a reference to our header and content fields as well as the layout element let's also add an integer called character wrap limits in the update method let's use a ternary operator to check the length of our fields and define if the layout element should be enabled or not now our tooltip will check the field contents and size itself accordingly so we've now got a tooltip that can take some text and we'll resize itself let's look at how we can get the tooltip to actually show let's create a new script on our canvas called tooltip system in here let's create a singleton reference and a static method called show and hide let's also add a reference to our tooltip when the show method is called we'll enable the tooltip and when the hide is called we'll disable it now all we need to do is call tooltip system.show from any object that we'd like to show our tooltip let's create another script called tooltip trigger here we'll add the event system interfaces for ipoint to enter and i point to exit and call our show and hide tooltip methods now if we add the trigger component to some of our ui elements and play the scene our tooltip now shows and hides whenever we roll over the object next let's get our tooltip displaying some contextual information relative to what we're mousing over on our tool tip let's add a set text method with a string for the header and a string for the content some tooltips won't need a title so i want to be able to control whether or not a header is shown and hide the header if the argument is null or empty it's also worth mentioning that it's kind of pointless setting the layout element in the update method as the size only really needs to change when the text is initially set so we should probably move this but if you want the additional functionality of being able to preview the size changes in the editor consider just wrapping it around an edit mode check first now let's go back to our tooltip system script and update our show method to require some content and finally on our tooltip trigger let's add the string properties for our header and contents and pass them into our show method then we just need to go through and fill out the information we'd like to display in the inspector now we mouse over our elements the tooltip displays the corresponding text and titles however it's not very useful being in the center of the screen like that most tooltips behave by appearing adjacent to the cursor so let's get our tooltip following our mouse in our update method let's assign the mouse position to a vector2 then we'll set the position of our tooltip based on the mouse position i'm using the built-in input system for this but if you're using the new input manager package you'll likely want to use the input system ui input module class and get its value using the action.readvalue vector2 method instead i really don't know why it's so verbose but whatever now if we roll over our items our tooltip will well it'll probably render in the center of the mouse and flicker a whole bunch like this let's deal with the flickering first that's occurring because as soon as our tooltip shows up the mouse is blocked by our tool tip which cancels the trigger and hides the tooltip and then because it disappears it's no longer blocked so the mouse over event registers again and shows the tooltip again and so on and so forth this is simply fixed by telling our canvas not to block raycasts by disabling or removing the graphics raycaster from the tooltip canvas now let's deal with our tooltip being positioned to the center of our mouse at first glance it looks like we can just change the pivot point of our rec transform to the bottom right hand side of our mouse cursor however as we move our mouse to the right or bottom of our screen you can see that this still causes our tooltip to render incorrectly and we don't really want our tooltip message displaying off screen as that kind of defeats the point of having one so we need to dynamically anchor our tool tip relative to the position of the mouse and the screen width and height and that's looking pretty good now we have a tooltip that flexibly resizes and position itself nicely the final touch is adding a little bit of input delay after all the user might just be clicking the button and may not want to see the tooltip every single time they mouse over so i'm going to use my favorite tweening library for this you'll know it folks it's lean tween time you can of course write your own co-routine instead though it's pretty straightforward here we'll just add about half a second delay before calling the method but cancel the delay call if the mouse escapes the element i've also added a little fade animation for when the tooltip is enabled as an aside it's also worth mentioning you can get tool tips working on world elements just make sure that the game object has a collider of some sort and simply edit the tooltip trigger to also include the on mouse enter and on mouse exit methods and that's pretty much it for this video a straightforward one this time around but many of you seem to respond well to these ui related videos so hopefully it's been useful as always let me know your thoughts down below also just a reminder that the gamedev guide channel has its own discord server it's home to a number of developers from the community who are all working together to share knowledge and help each other out this video actually came into fruition from a question that was raised by a member over there so if you like the idea of being a greater part of the community and getting to know fellow subscribers of the channel be sure to follow the link in the description down below and who knows maybe something you're struggling with might end up as an inspiration for a video here on the channel anyway that's all from me if you enjoyed the video be sure to give it a thumbs up if you're new to the channel please consider hitting that subscribe button or if you'd like to check out more videos from me first there's a couple of recent ones on screen now that you might also be interested in as always thank you very much for watching and i will see you again next time

Channel: Game Dev Guide

Views: 66,922

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games

Id: HXFoUGw7eKk

Length: 9min 44sec (584 seconds)

Published: Wed Nov 04 2020