HeroEngine Forums
Welcome, Guest. Please login or Register for HeroCloud Account.

Author Topic: Simple Mouseover Item Highlight + Popup GUI (Beginner)  (Read 2394 times)

Ratchet_Dev

  • General Accounts
  • *
  • Posts: 15
  • Ummm... yes?
    • View Profile
    • Omnivoid Site
Simple Mouseover Item Highlight + Popup GUI (Beginner)
« on: Mar 31, 15, 11:42:51 PM »

This will create a basic script that changes the color of an object when the mouse is hovering over it. Quite a basic script. I have set the tutorial out like most of Thazager's tutorials as they are a lot easier to follow. The script was originally uploaded by HE-Jay, I have turned it into a tutorial to help new and amateur Hero Engine users.

In the DOM, create a new (client side) class
Name = TMP_ObjectHighlight
Archetype = Data

click open script

In the new script TMP_ObjectHighlightClassMethod

Code: [Select]
shared function InputMouseEvent(args references Class _MouseEvent)
  targetNode as NodeRef of Class HBNode = args.MouseTarget
  if TargetNode <> None
    when args.MouseEventType
      is Enter
        targetNode["DiffuseColor"] = "#5.0,5.0,2.5,1.0" //Changes the color if mouse is on object.
        targetNode["AmbientColor"] = "#3.0,2.0,2.0,1.0"
      .
      is Leave
        targetNode["DiffuseColor"] = "#1.0,1.0,1.0,1.0" //Resets Color to default
        targetNode["AmbientColor"] = "#1.0,1.0,1.0,1.0"
      .
    .
  .
.


Compile and submit the code.

In your world click on the object you are looking to highlight and copy the GUID
(http://puu.sh/gXfIF/75ecf1d786.png)

In the Console type in /mnac then paste in your GUID and the class (as below).


Code: [Select]
/mnac (GUID), TMP_ObjectHighlight

Now you should have the desired effect.
http://puu.sh/gXgVC/cdf8197a0f.png

This is my first tutorial so any and all advice/criticism is extremely welcome.
« Last Edit: Apr 02, 15, 09:53:13 PM by Ratchet_Dev »
Logged
IF YOU NEED ANY HELP PLEASE PRIVATE MESSAGE ME!

Lead Programmer for OmniVoid & CEO of Shattered Studios.

Thazager

  • General Accounts
  • *
  • Posts: 1156
  • Never stop learning
    • View Profile
    • Heroes and Villains MMORPG
Re: Simple Mouseover Item Highlight (Beginner)
« Reply #1 on: Apr 02, 15, 11:43:49 AM »

Works nicely.

Here is an addition for it. It lets the player click on it. If in range, a GUI will pop up and a timer will start ticking. (its a simple timer showing movement)

In the DOM, create a new (client side) class
name = TMP_timerWindow
archtype = GUIControl

add a field = myTimer

click open script

In the new script TMP_timerWindow

Code: [Select]

// create the GUI
shared function Start()
  var main = getMainWindowClass()
  if main <> None
    DestroyNode( main )
  .
  main = CreateNodeFromPrototype("tmp_timerWindow")
  main.build = true
  MiscUtils:CenterWindow(main)
.

// remove window if its there
function removeWindow()
  var main = getMainWindowClass()
  if main <> None
    DestroyNode( main )
  .
.

// check range to object
public function getRangeDistance(target as NodeRef of Class HBNode)
  targetPos as Vector3
  getNodePosition(target, targetPos)

  var player = GetPlayerCharacterNode()
  ownerPos as Vector3
  getNodePosition(player, ownerPos)

  var range = VectorLength( targetPos - ownerPos )
  RangeFound(range)
.

// show range value
function RangeFound(range as Float)
  println("range= "+range)
  if range < 0.2
    Start()   // make the window

    var main = getMainWindowClass()
    main.ResetTimer()
  else
    removeWindow()
  .
.

// set up timer
method ResetTimer()
  if( me.myTimer.timerState == ON )
    me.myTimer.stop()
  .
  me.myTimer.fireRate = 00:00:00.1
  me.myTimer.start()
.

// timer to show updates - gui movement
method myTimer_tick()
  var panel = getTimerPanel()
  if panel.size.x < 230
    panel.size.x += 2
  else
    panel.size.x = 20
    removeWindow()
  .
.

//==================================================================================================================
// get main window class for variables
public function getMainWindowClass() as NodeRef of Class tmp_timerWindow
  win as NodeRef of Class tmp_timerWindow = FindGuiControlByName(None,"game.tmp_timerWindow")
  return win
.

// get main window class for variables
public function getTimerPanel() as NodeRef of Class GUIControl
  panel as NodeRef of Class GUIControl = FindGuiControlByName(None,"game.tmp_timerWindow.timePanel")
  return panel
.

____________________________________________________________________________

Make a new XML file called TMP_timerWindow

Code: [Select]
<createControlType class='TMP_timerWindow' type='TMP_timerWindow' description='' treePath='' name="TMP_timerWindow" owner="0" textureFilter="false" layer="game" resizeable="ALL" scrollable="VERTICAL">
  <size x="250" y="20"/>
  <maximumSize x="2048" y="2048"/>
  <defaultStatePresentation>
    <color r="0" g="0"/>
  </defaultStatePresentation>
  <hoverStatePresentation>
    <color r="0" g="0"/>
  </hoverStatePresentation>
  <selectedHoverStatePresentation>
    <color r="0" g="0" b="0" a="0"/>
    <size x="0" y="0"/>
  </selectedHoverStatePresentation>
  <_panel name="timePanel">
    <position x="5" y="5"/>
    <size x="20" y="10"/>
    <defaultStatePresentation>
      <color b="0"/>
    </defaultStatePresentation>
    <hoverStatePresentation>
      <color b="0"/>
    </hoverStatePresentation>
    <autoCenter vertical="true"/>
  </_panel>
</createControlType>

____________________________________________________________________________

In TMP_ObjectHighlightClassMethod

add this under the Leave option

Code: [Select]
      is Click
        TMP_timerWindowClassMethods:getRangeDistance(targetNode)
      .

____________________________________________________________________________

In case you don't have it,
In MiscUtils add:

Code: [Select]
// center window on screen
public function centerWindow(win references NodeRef of Class GUIControl)
  screen as Vector3 = GetViewPortSize()
  win.position.x = ((screen.x - win.size.x) / 2)
  win.position.y = ((screen.y - win.size.y) / 2)
.
« Last Edit: Apr 02, 15, 06:24:15 PM by Thazager »
Logged

Thazager

  • General Accounts
  • *
  • Posts: 1156
  • Never stop learning
    • View Profile
    • Heroes and Villains MMORPG
Re: Simple Mouseover Item Highlight (Beginner)
« Reply #2 on: Apr 02, 15, 06:34:54 PM »

Quote
In the Console type in /mnac then paste in your GUID and the class (as below).

this will make the object highlite when the mouse passes over.

To make this permanent, add the GUI to a list, then read through the list adding the class to each object in the list. (In code)
Logged

keeperofstars

  • General Accounts
  • *
  • Posts: 998
    • View Profile
    • StarKeeper Online
Re: Simple Mouseover Item Highlight + Popup GUI (Beginner)
« Reply #3 on: Apr 03, 15, 12:28:58 AM »

http://hewiki.heroengine.com/wiki/$GLOM#Leveraging_.24GLOM_with_the_Asset_Library

Read that entry about being able to Glom on classes at instantiation of an item from the asset library. This should take the step out of having to glom via GUID. Instead you just make the library asset contain the gloming then anytime you double click the library to add the asset it will self glom the classes needed to make it work how you want.

So much more efficient then having lists or dealing with issues of GUIDs

Also don't forget about the
http://hewiki.heroengine.com/wiki/Gluing_a_GUI_Control_to_a_node

Where you can glue GUI controls to a node. This can be really helpful for putting GUI's onto objects and having them positioned based on the objects location. Also once again becomes a part of being something you setup in your library.

That way world building becomes just double clicking the item from the library and poof it has all the interactions and GUI it needs to have. All about making things manageable cause if you had to sit around /mnacing 10k items in your game at least 10% of them wouldn't get it and people would yell buggy game all over place. Just human nature. :) lol


Logged
[img]http://screencast.com/t/x7btcSSyp3h0[\img]

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Simple Mouseover Item Highlight + Popup GUI (Beginner)
« Reply #4 on: Apr 03, 15, 08:21:38 AM »

I covered some of this here: https://community.heroengine.com/forums/index.php/topic,5150.0.html where I GLOM a class onto a node at instantiation from the library, and when you click on the object it opens a GUI window.
Logged