Scrollable Chat Window
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.
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
2. Add _GUIBaseWindow as a Parent Class to the newly created Class.
3. Click Save
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
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"
7. Next, just set all the properties for each control the same way that you see in the following images:
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".
- If you have any errors, check for any mistakes.
- Please don't just copy and paste it. While typing, try to figure out how each part of the script works*
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.