[Novice] Button To Post In-Game Chat

[[sSi]Ignorance]

This mod assumes you have a text editor (notepad++ is good) to edit .package files with and also assumes that you have read through all of the 'Useful Threads' referred to in the sticky that pertain to making mods. It's 'Novice' difficulty because the mod is actually fairly complicated in structure, even if the first half of this guide is Beginner difficulty.

For this tutorial, you'll be making a button that posts something to game chat. Its main purpose is to teach you about how packages and templates work, along with giving you a cool button that lets you do something semi-practical.

Set-up

If you don't have an unzipped copy of resources0.s2z, please unzip it now.
I'll wait.
...
...
...

Anyway, go into resources0\ui\ and get game_chat.package and game.interface. Since we're making a button there, that's where you'll need to put it. game_chat.package is used in two places: the lobby and the game. Your button will appear in-game.




Next, post these into Heroes of Newerth\game\ui\. You don't need to make it into a honmod or .s2z yet and you should keep it in text format so that you can edit it in-game.



Finding what we need.

Next, we're going to make an image to put our texture in. Before we do that, though, we need to find a good place to put our image. Remember, when doing panels, the game will place a panel in front of another one if it's after another in the code. There's a UI command called BringToFront(); which will alleviate this problem, but we wont be using that. Instead, we'll just put it at the end of the section we're looking at.

Take a look around game_chat. It's full of things that have nothing to do with the in-game chat, but are rather used during the lobby chat. You'll find that the vast majority of stuff in there is for lobby chat. It's also a great place to look around for things you might find interesting. Read through the file. See if you can follow the code.

At the very end, you'll see what we're interested in:

<template name="game_chat_window">

Everything from that line of code to the </template> at the end of it is what we're interested in. Unfortunately for us, most of it can't be modified. We can't even look through what's said in chat! However, there is something we can do (well, other than make our text yellow) and that's add something to this section.

Templates

Templates are used for two things: Simplifying code and refering to the same code multiple times. Let's say I want to make a dozen buttons that all post to chat "Too bad it's me, blacksmith!" Well, to do this, I could either make a dozen buttons that are practically identical, or I could make a template and use it in twelve different instances. Speaking of which, you call a template by doing this:

<instance name="game_chat_window">

You can do this anywhere you want any time, so long as the template is either in the interface you're working with or in a package imported by your interface.

We aren't actually going to place our image here. Instead, we're just going to make it show when this shows and hide when it hides.
How will we do this?
We'll take one of the panels that they made and use ToggleWidget to get it to work. ToggleWidget will hide a widget if it's visible and show a widget if it isn't. A widget is a panel, a frame, a button, an image, etc. So long as we name our image, this will work great.
We could use any panel or label in this template. The only things that are specific to something are the allchat and teamchat textboxes.
So, I'll choose the shortest one.

<panel name="{interface}_chat_backer" align="center" valign="center" height="93.5%" width="99%" color="#00000075"/>
Change to:
<panel name="{interface}_chat_backer" align="center" valign="center" height="93.5%" width="99%" color="#00000075" onshow="ShowWidget('chosen_name');" onhide="HideWidget('chosen_name');" />

Now, we can finally make the <image> which will be in game.interface. Because that portion of game_chat is loaded as noclick, it's impossible to make anything in it clickable.

Images

Images, like panels, frames, buttons and everything else of that sort, can have onloads, onshows, onclicks, whatever. They're special in one way in particular, though. Instead of looking the same, they're based on an image you decide to use. These can be found in textures.s2z, but are usually refered to all over the resources0.s2z. They're saved as .dds's but should be refered to as .tga's because that's how the game reads them.
Anyway, we'll leave figuring out which image is blacksmith's icon for another day. We'll just use the one I found from some previous work I've done. You're going to want to use texture="/heroes/dwarf_magi/icon.tga"
So far, we've created an image in chat. But wait! Before we finish, we should decide the dimensions and location of this image. Luckily, the top left corner of chat is given to us at the beginning of chat. Let's put it a little to the right of that. 4h is about the size of an icon. It's a little small, in fact, but it's big enough for our purposes. I take the x and h values from the x and y offsets from the actual chat panel. Visibility is initially set to false so that we don't see it until we togglewidget it in later.

<image name="chosen_name" visible="false" x="7h" y="37.5h" width="4h" height="4h" texture="/heroes/dwarf_magi/icon.tga/" />

If you've placed the onshow and onhide in game_chat in an appropriate location and made this panel, a blacksmith icon should now appear in chat.

'Hello World!'

We're still going to use this button to post something to chat when we click it. You can use onclick="" for that. There's also a UI Command called TeamChat('Hello World!'). You can use these to get what you want. Also, if you want to be able to change it through the console, you'll have to create a string for what's said in TeamChat(). You should also become familiar with onload, which will be helpful to intialize your strings. There's a little bit of advanced coding in this, but I'll give you what I put at the end of game.interface right before the </package>.

<image
        name="chosen_name"
        noclick="false"
        visible="false"
        x="7h"
        y="37.5h"
        width="4h"
        height="4h"
        texture="/heroes/dwarf_magi/icon.tga/"
        onload="If(StringEmpty(string_name),CreateString('string_name','Too bad! It\'s me, BLACKSMITH!'));"
        onclick="TeamChat(string_name);"
/>

If you used code like mine, you can use SetSave string_name "This is the text I want in chat." in the console to make it save text other than what you put in the string initially.

If all goes well, you should get something like this when chat is up:

[Bearsmith]

Awesome, as someone who understands programming logic a simple explanation about some basic commands like this is exactly what I needed. Thanks.

[[1337]ChaGan]

Im 2 dumb for it arg. i did:

<panel name="{interface}_chat_backer" align="center" valign="center" height="93.5%" width="99%" color="#00000075"/>
Change to:
<panel name="{interface}_chat_backer" align="center" valign="center" height="93.5%" width="99%" color="#00000075" onshow="ShowWidget('chosen_name');" onhide="HideWidget('chosen_name');" />

in the game_chat.package
and then i posted:

    <image name="chosen_name" visible="false" x="7h" y="37.5h" width="4h" height="4h" texture="/heroes/dwarf_magi/icon.tga/" />
    <image
        name="chosen_name"
        noclick="false"
        visible="false"
        x="7h"
        y="37.5h"
        width="4h"
        height="4h"
        texture="/heroes/dwarf_magi/icon.tga/"
        onload="If(StringEmpty(string_name),CreateString('string_name','Too bad! It\'s me, BLACKSMITH!'));"
        onclick="TeamChat(string_name);"
/>

in the game.interface at line 3967.
why it dont do anything? it shows up but i cant click on it
EDIT: ok now i understanded it

[AOoToO]

how to Unzip the unzipped Resources0 and i did but i cant find INTERFACE files plss answer fast this idea sound awesome!!

[Oloko]

how to Unzip the unzipped Resources0 and i did but i cant find INTERFACE files plss answer fast this idea sound awesome!!

I'm not too sure I fully understand your sentence.
If you don't know how to unzip resources0, here is how to do it:
First you need an archiver like 7-zip or Winrar.
Double click resources0, when it ask you for an application to use for the file, choose your archiver.
Now you should be able to extract the file like any archived file.

Your also saying you can't find INTERFACE files, be sure to look inside the UI folder you extracted from resources0. INTERFACE are the files extensions, they might be hidden by your system.