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

Author Topic: How to make a simple scrollable chat window  (Read 23069 times)

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
How to make a simple scrollable chat window
« on: Jan 06, 12, 03:21:56 AM »


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.
---------------------------------------------
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



2. Add  _GUIBaseWindow as a Parent Class to the newly created Class.
3. Click Save




4. Create a New GUI Prototype.
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*



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 heirarchy)
6. In the Orangizer>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:


Temp_ChatWindow Behavior Properties


Temp_ChatWindow Layout Properties


Temp_ChatWindow Misc Properties


Scrollable Layout Properties


ClientArea Layout Properties


E_ChatInputBox Layout Properties








« Last Edit: Aug 12, 12, 07:38:59 PM by Jrome90 »
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #1 on: Jan 06, 12, 03:25:30 AM »

--------------------------
Required Scripts
--------------------------
1. Open the Client Side Class named "TMP_ChatWindow" in the DOM.
Click "Open Script". That will allow us 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
  //myLabel.E_ChatMsgTime = SYSTEM.TIME.NOW
  me.SetColorForChannel( msg, channel )
.
method Chat_GetClientarea() as NodeRef of Class GUIControl
  return FindGUIControlByName(me, "Scrollable.clientarea")
.


« Last Edit: Jun 19, 12, 11:04:38 PM by Jrome90 »
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #2 on: Jan 06, 12, 03:25:47 AM »

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"
   myLabel.defaultStatePresentation.color.r = 1
   myLabel.defaultStatePresentation.color.g = 1
   myLabel.defaultStatePresentation.color.b = 0
   myLabel.defaultStatePresentation.color.a = 1
   .
   default
   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 )
 .
.

« Last Edit: Jan 06, 12, 03:38:53 AM by Jrome90 »
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #3 on: Jan 06, 12, 03:26:46 AM »

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, "TEMP_ChatWindow" )
.
//method GetChatInputBox() as
     NodeRef of Class TMP_ChatWindow
//  return FindGUIControlByName( None,"E_ChatInputBox" )
//.

Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #4 on: Jan 06, 12, 03:28:38 AM »

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     
    .
  .
.





*Fixed  to  match  the  other  scripts
« Last Edit: Jan 06, 12, 04:13:39 AM by Jrome90 »
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #5 on: Jan 06, 12, 03:29:36 AM »

 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:

Code: [Select]
//  The chat window.
        chatWindow as NodeRef of Class TMP_ChatWindow = FindGUIControlByName( None, "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

« Last Edit: Jan 06, 12, 05:08:25 PM by Jrome90 »
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #6 on: Jan 06, 12, 03:52:32 AM »

It would be nice to have this as a tutorial on Wiki :)
Logged

Commando

  • General Accounts
  • *
  • Posts: 4
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #7 on: Jan 06, 12, 05:09:05 AM »

It would aslo be cool to have a seperate forum section where people share code and other things to do with the Hero Engine.

Thanks for the post anyway Jrome90 im sure this will come in use for a lot of people.
Logged
Commando
InvisionLabs
http://www.invisionlabs.co.uk

runningbird

  • General Accounts
  • *
  • Posts: 37
    • View Profile
    • Runningbird Studios
Re: How to make a simple scrollable chat window
« Reply #8 on: Jan 06, 12, 01:51:41 PM »

I agree we need a wiki area for people to share tutorials like this.

Thanks for the tutorial!
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #9 on: Jan 06, 12, 03:25:59 PM »

In what script is the whole GUI called? Or at least the parts that are always displayed (exp bar, status bar, ability  bar) ... I created my own class and GUIXML for status bar (which also includes exp and level indicator) so I want to remove the old status and exp bar and use mine instead.

Any ideas?
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #10 on: Jan 06, 12, 05:04:17 PM »

In what script is the whole GUI called? Or at least the parts that are always displayed (exp bar, status bar, ability  bar) ... I created my own class and GUIXML for status bar (which also includes exp and level indicator) so I want to remove the old status and exp bar and use mine instead.

Any ideas?

Is "E_PlayerAccountClassMethods" what you are looking for?

I just forgot something. I will update the tut but I will have to use Code formatting..
Logged

LastJudge

  • General Accounts
  • *
  • Posts: 215
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #11 on: Jan 06, 12, 05:06:16 PM »

Yup, that's what I was looking for. I kinda expected a more obvious name ;)

thanks :)
Logged

runningbird

  • General Accounts
  • *
  • Posts: 37
    • View Profile
    • Runningbird Studios
Re: How to make a simple scrollable chat window
« Reply #12 on: Jan 06, 12, 08:35:13 PM »

there is an error in the following

Code: [Select]
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 front  msg to clientArea.children()
 msg.text = message
 //myLabel.E_ChatMsgTime = SYSTEM.TIME.NOW
 me.SetColorForChannel( msg, channel )
.
method Chat_GetClientarea() as NodeRef of Class GUIControl
 return FindGUIControlByName(me, "Scrollable.clientarea")

this var clientArea = me.Chat_GetClientarea()
should be
Code: [Select]
var clientArea = me.Chat_GetClientarea
Logged

Jrome90

  • General Accounts
  • *
  • Posts: 330
    • View Profile
Re: How to make a simple scrollable chat window
« Reply #13 on: Jan 06, 12, 09:23:47 PM »

RunningBird, There is no error.

I am calling the method below "Chat_GetClientarea()".
Code: [Select]
method Chat_GetClientarea() as NodeRef of Class GUIControl
 return FindGUIControlByName(me, "Scrollable.clientarea")

returns the gui control "clientarea" as a NodeRef of Class "GUICONTROL".
I can then access the noderef .
If you Remove the "()", the compiler thinks you are  wanting to access a field in the Class.

You get the error :
Field 'Chat_GetClientarea' not found in the database:GOM::lookupClassDefID(785): Definition not found: Chat_GetClientarea
« Last Edit: Jan 06, 12, 09:38:49 PM by Jrome90 »
Logged

runningbird

  • General Accounts
  • *
  • Posts: 37
    • View Profile
    • Runningbird Studios
Re: How to make a simple scrollable chat window
« Reply #14 on: Jan 07, 12, 12:56:45 PM »

whoops I'm sorry I get the error

Method children not found on the following line

Code: [Select]
add front  msg to clientArea.children()
If I take the () off of clientArea.children it compiles I had the wrong line.
Logged
Pages: [1] 2 3 ... 8