Print

[Thazager]

Beginner scripting

(These are for programmers to help get started in HSL and are not a teaching of how to code a game)

This is a base window and will be used in many of my Tutorials. It uses the GUI pics from textures that all engines have. (They will not do anything on their own.)

In the DOM, create a new (client side) class
name = TMP_Window
archtype = guicontrol
add a parent to the class,  _GUIBaseWindow

In new (XML) script TMP_BaseWindow

Code: [Select]

<createControlType class='TMP_Window' type='TMP_Window' description='' treePath='' name="TMP_Window" owner="0" textureFilter="false" layer="game" resizeable="ALL" scrollable="VERTICAL">
  <size x="250" y="250"/>
  <maximumSize x="2048" y="2048"/>
  <defaultStatePresentation>
    <color a="0"/>
  </defaultStatePresentation>
  <hoverStatePresentation>
    <color a="0"/>
  </hoverStatePresentation>
  <selectedHoverStatePresentation>
    <color r="0" g="0" b="0" a="0"/>
    <size x="0" y="0"/>
  </selectedHoverStatePresentation>
  <_panel name="BGpanel" texture="\GUI\chat_v2.dds" insertBefore="toppanel">
    <position x="4" y="4"/>
    <size x="242" y="242"/>
    <maximumSize x="2048" y="2048"/>
    <anchor bottom="true" right="true"/>
    <defaultStatePresentation>
      <color a="0.800000012"/>
      <position y="211"/>
      <size x="300" y="300"/>
    </defaultStatePresentation>
  </_panel>
  <_panel name="toppanel" dockMode="TOP" insertBefore="bottompanel">
    <size x="250" y="20"/>
    <defaultStatePresentation>
      <color a="0"/>
    </defaultStatePresentation>
    <hoverStatePresentation>
      <color a="0"/>
    </hoverStatePresentation>
    <_panel name="left" dockMode="LEFT" texture="\GUI\chat_v2.dds" insertBefore="right">
      <size x="20" y="20"/>
      <defaultStatePresentation>
        <position x="456" y="222"/>
        <size x="40" y="40"/>
      </defaultStatePresentation>
      <hoverStatePresentation>
        <position x="456" y="222"/>
        <size x="40" y="40"/>
      </hoverStatePresentation>
    </_panel>
    <_panel name="right" dockMode="RIGHT" texture="\GUI\chat_v2.dds" insertBefore="mid">
      <size x="20" y="20"/>
      <defaultStatePresentation>
        <position x="494" y="222"/>
        <size x="-40" y="40"/>
      </defaultStatePresentation>
      <hoverStatePresentation>
        <position x="494" y="222"/>
        <size x="-40" y="40"/>
      </hoverStatePresentation>
    </_panel>
    <_panel name="mid" dockMode="FILL" texture="\GUI\chat_v2.dds">
      <size x="210" y="20"/>
      <defaultStatePresentation>
        <position x="496" y="222"/>
        <size x="5" y="40"/>
      </defaultStatePresentation>
      <hoverStatePresentation>
        <position x="496" y="222"/>
        <size x="5" y="40"/>
      </hoverStatePresentation>
    </_panel>
  </_panel>
  <_panel name="bottompanel" dockMode="BOTTOM" insertBefore="left">
    <size x="250" y="20"/>
    <defaultStatePresentation>
      <color a="0"/>
    </defaultStatePresentation>
    <hoverStatePresentation>
      <color a="0"/>
    </hoverStatePresentation>
    <_panel name="left" dockMode="LEFT" texture="\GUI\chat_v2.dds" insertBefore="right">
      <size x="20" y="20"/>
      <defaultStatePresentation>
        <position x="456" y="262"/>
        <size x="40" y="-40"/>
      </defaultStatePresentation>
      <hoverStatePresentation>
        <position x="456" y="262"/>
        <size x="40" y="-40"/>
      </hoverStatePresentation>
    </_panel>
    <_panel name="right" dockMode="RIGHT" texture="\GUI\chat_v2.dds" insertBefore="mid">
      <size x="20" y="20"/>
      <defaultStatePresentation>
        <position x="494" y="262"/>
        <size x="-40" y="-40"/>
      </defaultStatePresentation>
      <hoverStatePresentation>
        <position x="494" y="262"/>
        <size x="-40" y="-40"/>
      </hoverStatePresentation>
    </_panel>
    <_panel name="mid" dockMode="FILL" texture="\GUI\chat_v2.dds">
      <size x="210" y="20"/>
      <defaultStatePresentation>
        <position x="496" y="262"/>
        <size x="5" y="-40"/>
      </defaultStatePresentation>
      <hoverStatePresentation>
        <position x="496" y="262"/>
        <size x="5" y="-40"/>
      </hoverStatePresentation>
    </_panel>
  </_panel>
  <_panel name="left" dockMode="LEFT" texture="\GUI\chat_v2.dds" insertBefore="right">
    <size x="20" y="210"/>
    <defaultStatePresentation>
      <position x="456" y="262"/>
      <size x="40" y="5"/>
    </defaultStatePresentation>
    <hoverStatePresentation>
      <position x="456" y="262"/>
      <size x="40" y="5"/>
    </hoverStatePresentation>
  </_panel>
  <_panel name="right" dockMode="RIGHT" texture="\GUI\chat_v2.dds">
    <size x="20" y="210"/>
    <defaultStatePresentation>
      <position x="494" y="262"/>
      <size x="-40" y="5"/>
    </defaultStatePresentation>
    <hoverStatePresentation>
      <position x="494" y="262"/>
      <size x="-40" y="5"/>
    </hoverStatePresentation>
  </_panel>
</createControlType>


[Thazager]

Make basic button. This will also be used in many of my tutorials. As will the function centerwindow().  (They will not do anything on their own.)

In the DOM, create a new (client side) class
name = TMP_Button
archtype = guicontrol
add a parent to the class, _GUIButton

click open script

Code: [Select]

// while clicking on button
// cant set up in GUI itself as the gui then flickers
// change when the button is clicked on
method OnMouseDown(args references Class GUIMouseEvent)
  target as NodeRef of Class _GUIButton = args.source
  if target <> None
    target.defaultStatePresentation.position.y = 148  // GUI location of pic
    target.hoverStatePresentation.position.y = 148
  .
.

// after click on button
// cant set up in GUI itself as the gui then flickers
// change when the button is clicked on
method OnMouseUp(args references Class GUIMouseEvent)
  target as NodeRef of Class _GUIButton = args.source
  if target <> None
    target.defaultStatePresentation.position.y = 123  // GUI location of pic
    target.hoverStatePresentation.position.y = 123
  .
.

_______________________________________________________________
In new (xml) script TMP_Button add

Code: [Select]

<createControlType class='TMP_Button' type='TMP_Button' description='' treePath='' name="TMP_Button" texture="\GUI\aaron_test_textures.dds" textureFilter="false">
  <size x="80" y="20"/>
  <maximumSize x="2048" y="2048"/>
  <defaultStatePresentation>
    <position x="174" y="124"/>
    <size x="98" y="24"/>
  </defaultStatePresentation>
  <hoverStatePresentation>
    <position x="174" y="124"/>
    <size x="98" y="24"/>
  </hoverStatePresentation>
  <selectedHoverStatePresentation>
    <color r="0" g="0" b="0" a="0"/>
    <size x="0" y="0"/>
  </selectedHoverStatePresentation>
  <_label name="text" dockMode="FILL" text="name" justification="TOPCENTER">
    <size x="80"/>
    <defaultStatePresentation>
      <color r="1" g="0" b="0"/>
    </defaultStatePresentation>
  </_label>
</createControlType>
_______________________________________________________________
In script (client side) script MiscUtils add function

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


[H3R013]

i know this is an old topic but it still works up to the point where it says in MiscUtils add....

where is MiscUtils ? i cant find it to add that last bit of code

[Thazager]

This script might not exist for everyone. If that is the case, we will create the script. On the script editor, top far left side, is the create new script button. It will be a client side script, and can be made empty to start. Click this and add name of script MiscUtils. Then we can add functions to it. Since this is not a class methods script it does not need a class to define it.

[H3R013]

i get the error saying the name is taken . see pic attached

i even search for it in all scripts and cant find it

[H3R013]

now i found it but i cant edit it !

How do i edit it ?

[H3R013]

oh wow lol nvm u just double clik on it and it opens 

ok so i did all the tutorial but i dont see any changes in my world

How do i use this tutorial after making all those changes ?

Do i have to be in a certain place in my world to see the changes ?

[Thazager]

This tutorial is inherited by other GUIs. They can use it for a starting point and add to it. It wont show by itself.