Implementing Online Help

From Multiverse

Jump to: navigation, search
User Interface Development

Overview  •  Managing Widgets  •  Event Handling  •  Using Widget Templates  •  Customizing Key Bindings  •  Localizing UI Text  •  Character Creation Framework  •  Minimap Component  •  Scripting Avatar Appearance

Reference

Widgets  •  Property Elements  •  Imageset Files

Tutorials

Hello World  •  Creating a Button  •  Creating a Menu  •  Creating a Help Dialog  •  Using Radio Buttons

Contents

[edit]

Overview

Online help display
Enlarge
Online help display

Multiverse Fantasy Demo World contains an example of an online help screen that appears when you first log in, and whenever you press F11. The implementation consists of:

  • MvFantasyHelp.xml file that defines the SocialHelp widget, the dialog box that displays the help text.
  • Entries in the key bindings files Bindings.xml and bindings.txt to bind the F11 key to the help command.


[edit]

Procedure

The easiest way to implement your own online help system is to copy the implementation from Demo Fantasy World and then modify it to suit your needs. If you have not already done so, download the Demo Fantasy World asset repository.

Then follow these steps:

  1. Import the neccessary assets to your asset repository:
    • Open Asset Importer tool, and select asset type "FrameXML."
    • Click the "XML" button, browse to mv_fantasy\Interface\FrameXML in the Demo Fantasy World asset repository, and choose MvFantasyHelp.xml.
    • Click on the "ImageSet XML" button, browse to mv_fantasy\Interface\FrameXML, and choose MvChat.xml. This file is already in the Sampleworld asset repository, but choosing it here will ensure the proper dependency is noted and import it if you are using another asset repository.
    • Click the Save icon to import the asset definition and requisite files to your asset repository.
    • Exit Asset Importer
  2. The Sampleworld asset repository already has the necessary entries for online help in Bindings.xml and bindings.txt, so if you are using the Sampleworld asset repository (or a modified version of it) then you don't need to do anything extra. If you are using your own asset repository not based on Sampleworld, then see the section below on key bindings and add the lines to your key bindings files.
  3. Edit your theme (.toc) file in asset-repository\Interface\FrameXML (where asset-repository is the root directory of your asset repository), and add the name of the Frameset XML file, for example, MvFantasyHelp.xml. In Sampleworld, the theme file is mars.toc. Important: put the name of the new XML file at the END of the theme file.
[edit]

Key bindings

As described in Customizing Key Bindings, you can easily customize the client's key bindings. For online help, the pertinent settings are as follows.

[edit]

Bindings.xml

The following <Binding> tag calls the SocialHelp.Show() method when the HELP command is invoked. 

<Binding name="HELP" header="ACTIONS">
   SocialHelp.Show()
</Binding>

The Show() method is a predefined method for Region widgets that displays the widget.

[edit]

bindings.txt

The following line binds the HELP command defined above with the F11 key: 

F11 HELP

Thus, when the user presses F11, the Client displays the help dialog.

[edit]

Frameset XML File

Following is the complete text of the XML frameset file, MvFantasyHelp.xml, for the online help dialog.

The majority of the file is taken up by the definition of the HelpFrame virtual widget. For more information on virtual widgets, see Using Widget Templates.

The actual SocialHelp dialog box (a Frame widget) is defined at the very end of the file with: 

<Frame name="SocialHelp" inherits="HelpFrame" parent="UIParent" id="200" hidden="false">
    <Anchors>
      <Anchor point="TOP"> <Offset><AbsDimension x="0" y="-10"/></Offset> </Anchor>
    </Anchors>
</Frame>

The inherits attribute specifies that the dialog is a child of HelpFrame.

The <Scripts> tag near the end of the file contains an <OnLoad> tag with some Python code to display the dialog and set some values. This OnLoad script is called when the widget is initially loaded, that is, when the user first logs in. 

<OnLoad>
  SocialHelp.Show()
  SocialHelpTitle.SetVertexColor(0.1, 0.1, 0.1)
  SocialHelpTitle.SetAlpha(0.9)
  SocialHelpTexture.SetVertexColor(1.0, 1.0, 1.0)
  SocialHelpTexture.SetAlpha(0.9)
  SocialHelpOKButtonTexture.SetVertexColor(0.1, 0.1, 0.1)
  SocialHelpOKButtonTexture.SetAlpha(0.6)
</OnLoad>

The first line displays the SocialHelp widget. The remaining calls are to objects whose names are defined based on the parent's name. For example, SocialHelpTitle is the name of the Texture widget defined with 

<Texture name="$parentTitle" file="Interface\MvChat\Mv-ChatFrame-Interior">

In the name, "$parent" is replaced at runtime with the name of the Texture widget's parent, namely "SocialHelp." So the widget's actual name is "SocialHelpTitle." 

<Ui>
    <Frame name="HelpFrame" inherits="MvBasicFrame" frameStrata="DIALOG" 
           toplevel="true" movable="true" enableMouse="true" hidden="true" virtual="true">
	<Size>
	    <AbsDimension x="640" y="420"/>
	</Size>
	<Layers>
	    <Layer level="BACKGROUND">
        	<Texture name="$parentTitle" file="Interface\MvChat\Mv-ChatFrame-Interior">
                    <Size> <AbsDimension x="500" y="24"/> </Size>
		      <Anchors>
			<Anchor point="TOPLEFT"> <Offset><AbsDimension x="4" y="-4"/></Offset></Anchor>
			<Anchor point="TOPRIGHT"><Offset><AbsDimension x="-4" y="-4"/></Offset></Anchor>
		      </Anchors>
		</Texture>
        	<Texture name="$parentTexture" file="Interface\MvChat\Mv-ChatFrame-Interior">
		    <Anchors>
			<Anchor point="TOPLEFT" relativePoint="BOTTOMLEFT" relativeTo="$parentTitle">
                            <Offset><AbsDimension x="0" y="0"/></Offset>
                        </Anchor>
			<Anchor point="BOTTOMRIGHT">
                            <Offset><AbsDimension x="-4" y="4"/></Offset>
                        </Anchor>
		    </Anchors>
		</Texture>
	    </Layer>
	</Layers>
	<Frames>
	    <FontString name="$parentName" inherits="FrameNameFont" text="Demo World Help">
		    <Size>
		      <AbsDimension x="200" y="12"/>
		    </Size>
		    <Anchors>
		      <Anchor point="TOP"><Offset><AbsDimension x="0" y="-12"/></Offset></Anchor>
		    </Anchors>
	    </FontString>
	    <FontString name="$parentWelcome" inherits="HelpFont" text="Welcome to Demo World, a live
 demonstration of the Multiverse platform. This is an example of a simple 'social world' where you
 interact with other players.  Since this is a demo, there may not be anyone else logged 
 in right now.  Even if no one else is logged in, you can interact with Barbie, who is a Non-Player
 Character.">
		<Size>
		    <AbsDimension x="600" y="72"/>
		</Size>
		<Anchors>
		    <Anchor point="TOP" relativeTo="$parentName" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="-6"/></Offset>
		    </Anchor>
		</Anchors>
	    </FontString>
	    <FontString name="$parentMovement" inherits="HelpFont" text="Move your character using 
 the arrow keys 
      or the 'w' 'a' 's' 'd' keys.">
		<Size>
		    <AbsDimension x="600" y="36"/>
		</Size>
		<Anchors>
		    <Anchor point="TOP" relativeTo="$parentWelcome" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="-6"/></Offset>
		    </Anchor>
		</Anchors>
	    </FontString>
	    <FontString name="$parentCamera" inherits="HelpFont" text="Move the camera with the mouse.  
      Left button moves the camera without moving your character.  Right button moves both.  
      The mouse wheel zooms in and out.">
		<Size>
		    <AbsDimension x="600" y="56"/>
		</Size>
		<Anchors>
		    <Anchor point="TOP" relativeTo="$parentMovement" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="-6"/></Offset>
		    </Anchor>
		</Anchors>
	    </FontString>
	    <FontString name="$parentActions" inherits="HelpFont" text="Select actions from 
 the action bar on the bottom right.  You can also use the F keys.  Move the mouse over the 
 buttons to see what they do.  The leftmost action button allows you to change your character.">
		<Size>
		    <AbsDimension x="600" y="56"/>
		</Size>
		<Anchors>
		    <Anchor point="TOP" relativeTo="$parentCamera" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="-6"/></Offset>
		    </Anchor>
		</Anchors>
	    </FontString>
	    <FontString name="$parentChat" inherits="HelpFont" text="Use the chat window to chat 
with other players.  Press Enter to activate the edit box.  Press Enter again to send your chat 
message to others.">
		<Size>
		    <AbsDimension x="600" y="48"/>
		</Size>
		<Anchors>
		    <Anchor point="TOP" relativeTo="$parentActions" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="-6"/></Offset>
		    </Anchor>
		</Anchors>
	    </FontString>
	    <FontString name="$parentHelp" inherits="HelpFont" text="Click the help button on the 
 action bar or F11 to bring up this help screen again.">
		<Size>
		    <AbsDimension x="600" y="48"/>
		</Size>
		<Anchors>
		    <Anchor point="TOP" relativeTo="$parentChat" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="-6"/></Offset>
		    </Anchor>
		</Anchors>
	    </FontString>
	    <Button name="$parentOKButton" inherits="FrameNameFont" text="OK">
        	<Size>
		    <AbsDimension x="80" y="20"/>
		</Size>
		<Anchors>
		    <Anchor point="BOTTOM" relativeTo="$parent" relativePoint="BOTTOM">
			<Offset><AbsDimension x="0" y="10"/></Offset>
		    </Anchor>
		</Anchors>
		<NormalText inherits="FrameNameFont" justifyH="CENTER" justifyV="MIDDLE"/>
		<Layers>
		    <Layer>
			<Texture name="$parentTexture" file="Interface\MvChat\Mv-ChatFrame-Interior"/>
		    </Layer>
		</Layers>
		<Scripts language="python">
		    <OnClick>
                      SocialHelp.Hide()
		    </OnClick>
		</Scripts>
	    </Button>
	</Frames>
	<Scripts language="python">
	    <OnLoad>
               SocialHelp.Show()
               SocialHelpTitle.SetVertexColor(0.1, 0.1, 0.1)
               SocialHelpTitle.SetAlpha(0.9)
               SocialHelpTexture.SetVertexColor(1.0, 1.0, 1.0)
               SocialHelpTexture.SetAlpha(0.9)
               SocialHelpOKButtonTexture.SetVertexColor(0.1, 0.1, 0.1)
               SocialHelpOKButtonTexture.SetAlpha(0.6)
	    </OnLoad>
	</Scripts>
    </Frame>

    <Frame name="SocialHelp" inherits="HelpFrame" parent="UIParent" id="200" hidden="false">
        <Anchors>
          <Anchor point="TOP"> <Offset><AbsDimension x="0" y="-10"/></Offset> </Anchor>
        </Anchors>
    </Frame>
</Ui>
Retrieved from "http://update.multiverse.net/wiki/index.php/Implementing_Online_Help"
Personal tools