HeroEngine Forums
Welcome, Guest. Please login or Register for HeroCloud Account.
Pages: [1] 2 3

Author Topic: Simple ability tooltip window  (Read 8301 times)

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Simple ability tooltip window
« on: Jan 08, 12, 12:20:55 PM »

Making a simple ability tooltip window

What we are trying to achieve:



1. First thing we do is create a new class for the tooltip window.
Name: MY_AbilityTooltip (you can use your prefix instead of MY)
Archetype: guicontrol
Parent Class: GUIPanel




2. Create a new GUI prototype
Name: MY_AbilityTooltip
Inherit from: _panel
Class: MY_AbilityTooltip



3. Resize your panel, add some labels
This is how I did mine

Note: In the screenshot there is TS_AbilityTooltip as TS is prefix I use for my game, you should have MY_AbilityTooltip instead or whatever your prefix is.
Note 2: There are a lot of panels in mine, as I needed them for borders and corners (I'm not gonna walk you through borders, open _button to see how they are done). All my labels are located inside panel named 'background'


4. As we don't need to change any default values of panels and labels (besides color, texture, font, and size) we can go on  and write our code.

« Last Edit: Jan 08, 12, 02:51:52 PM by LastJudge »
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: How to make a simple ability tooltip window
« Reply #1 on: Jan 08, 12, 12:29:24 PM »

5. Open script for MY_AbilityTooltipClassMethods and write code for your labels. This is how mine looks like:

Code: [Select]
method setAbilityName(name as String)
  an as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityName")
  an.text = name
.

method setElement(element as String)
  ae as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityElement")
  ae.text = "Element: " + element
.

method setMinDamage(mindmg as String)
  amd as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityMinDamage")
  amd.text = "Min Damage: " + mindmg
.

method setMaxDamage(maxdmg as String)
  amd as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityMaxDamage")
  amd.text = "Max Damage: " + maxdmg
.

method setCooldown(cooldown as String)
  ac as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityCooldown")
  ac.text = "Cooldown: " + cooldown + " seconds"
.

method setRange(range as String)
  ar as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityRange")
  ar.text = "Range: " + range + " meters"
.

method setTargetType(targettype as String)
  att as NodeRef of Class GUILabel = FindGUIControlByName(me, "tooltipWindow.background.abilityTarget")
  att.text = "Target type: " + targettype
.

Note: change "tooltipWindow.background.abilityName" and others to wherever your labels are located within the GUI prototype


6. Modify E_AbilityBarClassMethods (or in case you are using your own abilitybar modify it's code). You need to add onMouseEnter and onMouseLeave methods. On mouse enter we create our tooltip window and on mouse leave we destroy it.

Code: [Select]
method onMouseEnter(args references Class GUIMouseEvent)
  target as NodeRef of Class GUIControl = args.source
  abilityTooltip as NodeRef of Class MY_AbilityTooltip = CreateNodeFromPrototype("MY_AbilityTooltip")
  abilityTooltip.name = "MY_AbilityTooltip"  
  abilityTooltip.build = true
  
  when target.name
    is "Ability1"
      println("Ability1: Weapon Strike")
      abilityTooltip.setAbilityName(abWeaponStrike:GetAbilityName())
      abilityTooltip.setCooldown(abWeaponStrike:GetAbilityCooldown().secondsTotal)
      abilityTooltip.setElement("None")
      abilityTooltip.setRange(abWeaponStrike:GetMaxRange())
      abilityTooltip.setTargetType(abWeaponStrike:GetTargetType())
    .
    is "Ability2"
      println("Ability2: Fireball")
      abilityTooltip.setAbilityName(abFireball:GetAbilityName())
      abilityTooltip.setCooldown(abFireball:GetAbilityCooldown().secondsTotal)
      abilityTooltip.setElement("Fire")
      abilityTooltip.setMinDamage(abFireball:GetMinDamage())
      abilityTooltip.setMaxDamage(abFireball:GetMaxDamage())
      abilityTooltip.setRange(abFireball:GetMaxRange())
      abilityTooltip.setTargetType(abFireball:GetTargetType())
    .
    is "Ability3"
      println("Ability3: Heal Damage")
      abilityTooltip.setAbilityName(abHeal:GetAbilityName())
      abilityTooltip.setCooldown(abHeal:GetAbilityCooldown().secondsTotal)
      abilityTooltip.setElement("Light")
      abilityTooltip.setRange(abHeal:GetMaxRange())
      abilityTooltip.setTargetType(abHeal:GetTargetType())
    .
  .
.

method onMouseLeave(args references Class GUIMouseEvent)
  abilityTooltip as NodeRef of Class GUIControl = FindGUIControlByName(0,"game.MY_AbilityTooltip")
  if abilityTooltip != None
    DestroyNode(abilityTooltip)
  .
.
Note: GetAbilityCooldown().secondsTotal gives is actual number of seconds instead of 0:00:03.000 time format.


7. Now the tooltip window is done and hopefully functional :)
« Last Edit: Jan 08, 12, 12:39:55 PM by LastJudge »
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: Simple ability tooltip window
« Reply #2 on: Jan 08, 12, 05:28:35 PM »

Thanks for taking the time to make a tutorial. :)
Hopefully more people will also take the time.
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: Simple ability tooltip window
« Reply #3 on: Jan 08, 12, 05:35:26 PM »

Thanks for taking the time to make a tutorial. :)
Hopefully more people will also take the time.

Well I figured since I already take time creating this stuff, I might as well share it. It doesn't really take that much of my time.

I just hope people will at least read the code and try to understand it and not just mindlessly copy it :)
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: Simple ability tooltip window
« Reply #4 on: Jan 08, 12, 05:40:42 PM »

Thanks for taking the time to make a tutorial. :)
Hopefully more people will also take the time.

Well I figured since I already take time creating this stuff, I might as well share it. It doesn't really take that much of my time.

I just hope people will at least read the code and try to understand it and not just mindlessly copy it :)

Yeah, I feel the same way.
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: Simple ability tooltip window
« Reply #5 on: Jan 08, 12, 05:50:42 PM »

Also when I tried to learn HSL I didn't really know where to start. After some time I figured that GUI is a good place to start because it's easy to see results there. At first I just modified a few scripts but then I just started to create my own classes and GUI prototypes to make things as I wanted them. For example combining name, level, health bar and experience bar into status bar instead of having a separate status bar for health and name and another one for experience + level.

So I pretty much hope that these simple scripts will help others start with HSL too. I will post more tutorials soon. (for the combined status bar most probably)
Logged

Jamielea

  • General Accounts
  • *
  • Posts: 11
    • View Profile
Re: Simple ability tooltip window
« Reply #6 on: Jan 12, 12, 06:32:14 AM »

When I hover out of the ability the panel doesn't display and I am just left with a white background but however if I hover over another ability the text changes. Any thoughts mate?

Code: [Select]
method onMouseLeave(args references Class GUIMouseEvent)
  abilityTooltip as NodeRef of Class GUIControl = FindGUIControlByName(0,"game.ability_ToolTip")
  if abilityTooltip != None
    DestroyNode(abilityTooltip)
  .
.
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: Simple ability tooltip window
« Reply #7 on: Jan 12, 12, 06:57:10 AM »

When I hover out of the ability the panel doesn't display and I am just left with a white background but however if I hover over another ability the text changes. Any thoughts mate?

Code: [Select]
method onMouseLeave(args references Class GUIMouseEvent)
  abilityTooltip as NodeRef of Class GUIControl = FindGUIControlByName(0,"game.ability_ToolTip")
  if abilityTooltip != None
    DestroyNode(abilityTooltip)
  .
.

Are you sure game.ability_ToolTip is correct?

Logged

Jamielea

  • General Accounts
  • *
  • Posts: 11
    • View Profile
Re: Simple ability tooltip window
« Reply #8 on: Jan 12, 12, 07:00:23 AM »

Yes. I have create a _panel and named it ability_ToolTip and inside there I have _labels which are named like yours. I have only added the abilityName label for now as a text.

On hover the panel appears with a white background and the abilityName appears as correct. But on mouse out it doesn't disappear.
Logged

Jamielea

  • General Accounts
  • *
  • Posts: 11
    • View Profile
Re: Simple ability tooltip window
« Reply #9 on: Jan 12, 12, 07:09:31 AM »

Is there a screen I can view which nodes are created? Like viewing them live when I interact with it?
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: Simple ability tooltip window
« Reply #10 on: Jan 12, 12, 07:27:36 AM »

Is there a screen I can view which nodes are created? Like viewing them live when I interact with it?

have you set "game" as layer for ability_Tooltip in properties?
Logged

Jamielea

  • General Accounts
  • *
  • Posts: 11
    • View Profile
Re: Simple ability tooltip window
« Reply #11 on: Jan 12, 12, 07:44:06 AM »

Oh man I am so silly lol. I just set it now and it works. Thanks mate. Its me being new.
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: Simple ability tooltip window
« Reply #12 on: Jan 12, 12, 04:01:19 PM »

Oh man I am so silly lol. I just set it now and it works. Thanks mate. Its me being new.

Don't worry, we all make silly mistakes from time to time. ;) I'm glad it works.
Logged

piluve

  • Developer
  • *
  • Posts: 25
  • Spain Development
    • View Profile
Re: Simple ability tooltip window
« Reply #13 on: Jan 13, 12, 10:37:25 AM »

Another good tutorial  :o :o :o
See you!
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: Simple ability tooltip window
« Reply #14 on: Jan 13, 12, 10:41:18 AM »

Another good tutorial  :o :o :o
See you!

Thanks. I'm glad you enjoy it ;)
Logged
Pages: [1] 2 3