Construct Time #7: Tooltip System

6

Features on these Courses

Stats

1,975 visits, 2,802 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 8 May, 2020.

This is what we're gonna do:

As always, the file is available for free on my Patreon: patreon.com/posts/36903197

Tooltips!

The obvious requirements to having a tooltip system is to have some kind of UI system. I was tempted to reuse my gamepad menu example file, but I decided not to, because ProUI wasn't really all that necessary for this system.

Instead I setup a sprite with these instance variables and a Timer behavior for the button.

For the tooltip, I used 2 sprites and a text object. The text and the black sprite have the tween and the pin behaviors, while the main white sprite has 3 instance variables and only the tween behavior.

Initialising the tooltip

I used the shiny new pin behavior to pin position, angle and absolute size to the main sprite. By default, the tooltip is invisible and created on its own layer on top of everything else.

Opening and closing the tooltip

For this I setup two functions. Both use the tween behavior to tween the size of the tooltip and the opacity of the text and outline to get a nice opening and closing animation.

For the opening, I take a lot of parameters that are all provided by the button sprite from its instance variables.

Linking to the buttons

Now, to actually call these functions, I just needed a few lines that start a timer on button hover and closes any open tooltip. And when the mouse is not over a sprite anymore, it also closes the button

And then, once the timer is over, just call the openTooltip function

The only weird thing here is the x and y coordinates being passed

It's a debatable design decision, but I decided to have a single position being passed, and if the tooltip shouldn't follow the mouse, it's just the button's position + the offset, but if it follows the mouse, I only pass the offset.

Since tooltipFollowMouse is a boolean, doing abs(Sprite.tooltipFollowMouse - 1) is the same as doing a "not".

This is only one of the many ways to do this, so you can try replacing that system with something that makes more sense to you as an exercice if you want :)

Also, notice that in the function, followMouse is a number and not a boolean. This is so I can pass it as an expression because in C3 boolean parameters cannot be passed with an expression: You need to check a box instead.

Following the mouse

Following the mouse is pretty easy once you have the offset. It's only a single line that runs on every tick:

And you're done. It wasn't that hard, was it?

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Thanks! Had a system for tooltips but it was a bit more bulky.

  • Great tutorial, well explained, I think the tooltip will work great for in game tutorials to show what different controls do.