HeroEngine Developers > Developer Created Tutorials

basic window (template for other windows)

(1/2) > >>

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

--- End code ---


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

--- End code ---

_______________________________________________________________
In new (xml) script TMP_Button add


--- Code: ---<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>

--- End code ---
_______________________________________________________________
In script (client side) script MiscUtils add function


--- Code: ---// 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)
.

--- End code ---

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

Navigation

[0] Message Index

[#] Next page

Go to full version