Scrollable Chat Window

From HEWIKI
Jump to: navigation, search

Contents

He intermediate.png

Overview

This tutorial was original posted in the forums by Jrome90. I just copied it here and added some additional modifications like transparent background and scrolling from bottom. I also added the window to the "game" layer.
As much as I would like it to be, this is not a full tutorial. It is just a way to show how to make a simple scrolling chat box. An alternative to the default one.
I hope this can help somebody. All scripting is done on the client side.
Note: If you have replaced the "Clean Engine" scripts with the "E_" prefix, be sure to use your new scripts in place of the "E_" scripts.
Due to access permissions, images could not be uploaded and embedded into page. They had to be linked externally.

Prerequisites

Before going any further, you should already have worked through at least the following tutorials:

You should have HeroBlade open, and the script editor. Either create a new client-side script, or use one of your existing client-side work scripts where you can add the necessary function. Whichever script name you use, should be inserted in the place of <script-name> below.

This tutorial has been written in a "cookbook" fashion so that it is not necessary to understand each GUIControl attribute. If you want though, there is a detailed line by line explanation of the modifications, farther down on this page.

To learn more about the details of other GUIControl attributes which were not modified in this tutorial, please see the comprehensive list of Base Fields on the GUIControls page. The documentation there also includes a wealth of other information about the different Controls, including the default and potential values for each of their fields.


Setup Classes, And GUI Prototype

1. Create a new class in the Client DOM.
Name the class TMP_ChatWindow
Description: A very basic chat window
Archetype: guicontrol
http://img846.imageshack.us/img846/348/createnewclassdom.png

2. Add _GUIBaseWindow as a Parent Class to the newly created Class.
3. Click Save
http://img857.imageshack.us/img857/4553/tmpchatwindowaddparentc.png

4. Create a New GUI Prototype in the GUI XML Organizer Panel.
Name it TEMP_ChatWindow (You can name it whatever you want but, keep in mind you will need to change the script(s) below)
Description: A simple chat window that can scroll
Inherit From: _window
Class: TMP_ChatWindow
"Click Okay"
http://img846.imageshack.us/img846/1968/createnewguiprotowindow.png

5. In the properties panel click on the TEMP_ChatWindow. Make sure it is highlighted.(It will be on the top since it is the highest in the hierarchy)
6. In the Organizer>GUI XML find the prototype E_ChatInputBox Double click on it. That should have added it to the GUI control as a child of "TEMP_ChatWindow".
If not just click and drag the "E_ChatInputBox" onto "TEMP_ChatWindow"
http://img24.imageshack.us/img24/815/addechatinputboxchildof.png

7. Next, just set all the properties for each control the same way that you see in the following images:
Temp_ChatWindow Properties
http://img209.imageshack.us/img209/954/scrollchat1.png

Scrollable Properties
http://img818.imageshack.us/img818/9656/scrollablearea1.png

ClientArea Properties
http://img37.imageshack.us/img37/9291/clientarea1.png

E_ChatInputBox Properties
http://img521.imageshack.us/img521/189/chatinput1.png

Required Scripts

1. Open the Client Side Class named "TMP_ChatWindow" in the DOM.
Click "Open Script". That will allow you to create a new ClassMethods Script.

2. Type the Following script into the editor. When you are finished typing it Click "Compile" to check for errors and then click "Submit".

method AddChatMessage( message as String, channel as String )
 msg as NodeRef of Class E_ChatLabel
 msg = CreateNodeFromPrototype("E_ChatLabel")
 msg.build = true
 msg.dockMode = TOP
 
 var clientArea = me.Chat_GetClientarea()
 add back  msg to clientArea.children
 msg.text = message
 //msg.E_ChatMsgTime = SYSTEM.TIME.NOW
 me.SetColorForChannel( msg, channel )
.
 
method Chat_GetClientarea() as NodeRef of Class GUIControl
 return FindGUIControlByName(0, "game.TEMP_ChatWindow.Scrollable.clientarea")
.
 
method SetColorForChannel( myLabel as NodeRef of Class E_ChatLabel, channel as String )
 when ToLower( channel )
   is "tell"
   myLabel.defaultStatePresentation.color.r = 1
   myLabel.defaultStatePresentation.color.g = 0.4
   myLabel.defaultStatePresentation.color.b = 1
   myLabel.defaultStatePresentation.color.a = 1
   .
   is "system"  // set the color to yellow
   myLabel.defaultStatePresentation.color.r = 1
   myLabel.defaultStatePresentation.color.g = 1
   myLabel.defaultStatePresentation.color.b = 0
   myLabel.defaultStatePresentation.color.a = 1
   .
   default  // set the color to white
   myLabel.defaultStatePresentation.color.r = 1
   myLabel.defaultStatePresentation.color.g = 1
   myLabel.defaultStatePresentation.color.b = 1
   myLabel.defaultStatePresentation.color.a = 1
   .
 .
.
 
method SetChatFocus(command as Boolean)
 chatInput as NodeRef of Class E_ChatInputBox = FindGUIControlByName(me,"E_ChatInputBox")
 if not command
   SetKeyboardFocus(chatInput)
 else
   SetKeyboardFocus(chatInput)
   chatInput.value = "/"
   SetCaret( chatInput, 2, 2 )
 .
.

3. Next Open up the existing script "E_ChatHandlerClassMethods" Retype the entire script, or just modify the existing script to be like the one below.

method HE_GotChatMessage( chatMessage as String, channelName as String )
 
  if me.DisplayChannel( channelName )
       me.GetChatWindow().AddChatMessage( chatMessage, channelName )
     . 
.
 
method OpenChatInput(command as Boolean)
     me.GetChatWindow().SetChatFocus(command)
     //  if input == None
     //    input = CreateNodeFromPrototype("E_ChatInputBox" )
     //    input.build = true
  //  .
     //  input.visible = true
     //SetKeyboardFocus( input )
.
     //
     //  Restrict displayed chat messages to limited,well-known channels.
     //
method DisplayChannel( channelName as String ) as Boolean
     when ToLower( channelName )
          is "game"     
          .
          is "tell"     
          .
          is "system"     
          .
          default
               return false
          .
     .
     return true
.
 
method GetChatWindow() as NodeRef of Class TMP_ChatWindow 
    return FindGUIControlByName( None, "game.TEMP_ChatWindow" )
.
//method GetChatInputBox() as NodeRef of Class TMP_ChatWindow
//  return FindGUIControlByName( None,"E_ChatInputBox" )
//.

4. Then Open up the existing script "E_ChatInputBoxClassMethods" Retype the entire script, or just modify the existing script to be like the one below.

method OnKeyDown( args references Class GUIKeyboardEvent ) 
 
  when args.keyCode
    is 27  //  escape key
      SetKeyboardFocus( None )
      //me.visible = false
      me.value = ""
      args.handled = true
    .
    is 13  //  enter key
      args.handled = true
      msg as String = me.value
      // Strip leading spaces
      while FindString( msg, " " ) == 1 and msg.length > 1
        msg = SubString( msg, 2, msg.length )
      .
      if msg.length > 0
        first as String = SubString( msg, 1, 1 )
        if first == "/"
          if msg.length > 1
            SendCommand( msg )
          .
        else
          SendChat( msg, "game" )       
        .
      .
      SetKeyboardFocus( None )
      //me.visible = false     
    .
  .
.

5. And Finally, Open up the existing script "Input_Command"
Retype the entire script, or just modify the existing script to be like the one below.

function onCmdStart(cmd as String) as Boolean
 return true
.
 
function onCmdStop(cmd as String) as Boolean
 
 when cmd
   is "PlayMode"
     $PLAYMODE._togglePlayModeState()
   .
   is "HotKey1"
     SendCommand( "/ability useabWeaponStrike" )
   .
   is "HotKey2"
     SendCommand( "/ability useabFireball" )
   .
   is "HotKey3"
     SendCommand( "/ability useabHeal" )
   .
   is "HotKey4"
     SendCommand( "/ability useabRubyFire" )
       .
   is "HotKey5"
   .
   is "Chat"
     $Chat.OpenChatInput(false)
   .
   is "SlashChat"
     $Chat.OpenChatInput(true)
     //var box = $Chat.GetChatInputBox()
     //box as NodeRef of Class E_ChatInputBox = $Chat.GetChatWindow() // Accesses the input box
     //box.value = "/"
     //SetCaret( box, 2, 2 )
   .
   is "ClearTarget"
     var acct = GetAccountID()
     call server E_playerAccountClassMethods:ClearClickTarget(acct)
   .
   is "NearestTarget"
     var acct = GetAccountID()
     call server E_playerAccountClassMethods:SelectNearestTarget(acct)
   .
   default
     println( "Got key(" + cmd + ") but did not handle it" )
     return false
   .
 .
//  
//  println( "Got key(" + cmd + ")" )
//  
 return true
.

6. Open up the E_PlayerAccountClassMethods and add the following under the comment "The Chat Window".(Just below the code that creates the "Status bar" ) So it will look like this:

//  The chat window.
        chatWindow as NodeRef of Class TMP_ChatWindow = FindGUIControlByName( None, "game.TEMP_ChatWindow" )
        if chatWindow != None
          DestroyNode( chatWindow )
        .
        chatWindow = CreateNodeFromPrototype( "TEMP_ChatWindow" )
        chatWindow.build = true

And That is all. Everything should work. If I missed something Please let me know. I hope this helped.

Additional information

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox