Modding Resources: Installing Mods | Creating Mods | Basic Code Examples | Creating a Character | Audio and Visual Effects | The Automator | User Interface | Graph Editor

User Interface

Much of the ui is still not accessible to modders, but as that changes information about how to mod it will go here.

Creating a Sub Panel

See ExampleNewTabModMain.as in the Clicker Heroes 2\mods\examples folder for a mod made using the code described here.

This will go over how to create a custom sub panel that is opened by a tab at the top of the UI, like the "Items" or "Miscellaneous" sub panels. You will need to create a custom class for your new sub panel, then create an instance of this class and a tab that can open it in the onUICreated function.

First import ui.elements.SubPanel and create a class that extends SubPanel outside of the package{ } area of your mod:

	
	import ui.elements.SubPanel

	class ExampleSubPanel extends SubPanel 
	{
		override public function update( time:Number ):void 
		{ 
			// Your code here
		}
		        
		override public function activate():void
		{ 
			// Your code here
		}
		    
		override public function deactivate( refresh:Boolean = false ):void
		{ 
			// Your code here
		}
	}
	

Within the new sub panel class you will want to override some of the default sub panel functions to make it display what you want when the tab is opened. This includes the update function, which is called every frame with delta time in milliseconds passed to it. This can be used to update the display if the information shown on the sub panel can change while it is open.

The activate and deactivate functions are what happens when the panel is opened or closed, respectively. Here is an example that will add a simple text field to our new sub panel, it will require you to import flash.text.TextField:

	
	public var textField:TextField;

	override public function activate():void 
	{
		textField = new TextField();
		textField.text = "Hello World";
		textField.x = 10;
		textField.y = 100;
		display.addChild(textField);
	}
	
	override public function deactivate( refresh:Boolean = false ):void
	{
		textField = null;
		display.removeChildren();
	}
	

First a public variable is created so that it can be accessed by following functions. The activate function creates a new TextField in that variable and sets the information for it (the text to be displayed and the x,y coordinates for where to display it), and then adds that TextField as a child to the display. The deactivate function sets the TextField to null and removes all children that had been added to the display.

Adding a New Tab

See ExampleNewTabMod.as in the Clicker Heroes 2\mods\examples folder for a mod made using the code described here.

You can add a tab to the top of the main UI to open a sub panel within the onUICreated panel of your mod's Main class. You will need to import flash.display.MovieClip and ui.CH2UI:

	
	public var newSubPanel:ExampleSubPanel;
        
	public function onUICreated():void
	{
		newSubPanel = new ExampleSubPanel();
		newSubPanel.setDisplay(new MovieClip());
		    
		CH2UI.instance.mainUI.mainPanel.registerTab(
			CH2UI.instance.mainUI.mainPanel.tabs.length,
			"Example Tab",
			newSubPanel,
			6,
			function():Boolean{ return true; },
			function():Boolean{ return false; },
			function(){ }
		);
	}
	

The above creates a new instance of our ExampleSubPanel and sets its display to a new movie clip. This is the display that children, like the TextField in the previous examples, are added to or removed from in the sub panel.

Then a tab is created to open this new sub panel, with the following parameters:

  1. CH2UI.instance.mainUI.mainPanel.tabs.length, an int for which number panel this is, by default there are 6 panels, 0 through 5. This particular line will set this tab to go after the last installed tab so that it won't overwrite another tab with the same number.
  2. "Example Tab", a string for the hover text that will display in-game.
  3. newSubPanel, the SubPanel instance that this tab will open, in this case, the one we just created.
  4. 6, an int that references the icon to use for the tab, can use 1 through 6 to use the default icons.
  5. function():Boolean{ return true; }, a function that determines whether the tab is visible, should return true or false.
  6. function():Boolean{ return false; }, a function that determines whether the tab should glow, should return true or false.
  7. function(){ }, a function that can have code that will run when a player clicks on the tab.