Friday, March 30, 2012

This Is The DEVELOPER Forum

[:1]This forum is the DEVELOPER forum. That means it is here for questions and discussion on topics relating to the DEVELOPMENT of addons, such as:

Creating addons.

Designing addons.

Testing addons.

Modifying addons.

Lua code.

XML code.

TOC files.

If you haven't already, go and read the FAQ.

THIS FORUM IS NOT WHERE YOU SHOULD ASK GENERAL MOD QUESTIONS SUCH AS "WHERE CAN I FIND A MOD THAT DOES XYZ". USE THE UI CUSTOMISATION FORUM FOR THAT PURPOSE.

IF YOU DON'T FOLLOW THIS SIMPLE GUIDELINE YOUR THREAD MAY BE MOVED/DELETED WITHOUT WARNING
.

Don't make Tunga a sad Red Panda. Thank you .|||My bad, first time on site, thanks for the info though it is appreciaated and i never want red pandas to be sad

Klishu's XML Tutorial

[:1]Hey there. This is Klishu here, author of BGSoundAlerts and BGTextAlerts. During the past few days I've seen many people asking for where to find a simple Tutorial to start your own addons. That is why I've made up this little tutorial to let you get to know the Basic WoW XML.

Introduction

A very good aspect of the game that I like is the ability to customize the user interface (UI) to suit your gameplay requirements. Therefore if everyone uses this potentiality to create their own add-ons life would be easier in WoW.

I know that many of you out there would like to create their own add-on so I thought that I could cover the basics of the XML involved in creating the visual appearance of your add-on. I won't be going deep in explaining the code involved to make the add-on work.

The Add-on

Add-ons usually come with at least 3 files. These are:

  • the .toc (table of contents) file

  • the .lua file

  • the .xml file



The .toc file includes basic information about your add-on (i.e. Name, Description, Author, Version)

The .lua file contains the code your add-on is going to use.

The .xml file contains the visual appearance of your add-on.

Creating our first add-on

In this tutorial we will create a simple, useless add-on that consists of a text-box, a button, some text telling us what to do and the close button at the corner. When you click the button, the text in the text-box will appear in the chat-window.

Create a folder in your WoW root directory named Interface and inside this folder create another folder called AddOns (You might have these folders already). In the AddOns folder create a folder named Simple (this will be the name of our folder). Create the following files in this folder:

  • Simple.toc

  • Simple.lua

  • Simple.xml



These are the files for your Add-on.

The XML File

If you want to have a good add-on its always best to have a friendly interface to it. Plan what you want the user to see well as you will notice that all those buttons and words you see in the WoW UI and any other add-on involve a lot of numbers.

Let's start off: Open the XML file you've created, with a XML Editor (Notepad is fine). XML is like HTML, that means elements are defined by an opening tag and closing tag using the greater than (>) and less than (<) operators.

The first line of your XML file should always be the following (you can copy and paste it):

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.blizzard.com/wow/ui/

C:\Projects\WoW\Bin\Interface\FrameXML\UI.xsd">

Your XML goes here...

</Ui>


This element defines the XML Schema we are about to use (this isn't important... just make sure you do this each time you're going to create your add-on).

Notice how we've defined the element:

  • We opened the element tag using the less than operator (i.e. <)

  • We than typed in the type of element (i.e. Ui)

  • We entered the attributes of the the element (i.e. xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" etc.)

  • We closed the tag using the greater than operator (i.e. >)

  • We marked the end of the element using the closing tag (i.e. </Ui>)



Note that an element can have more than one attribute and that an element ends with a closing tag using the slash (i.e. /)

We will place all our elements that we'll add in the ui element.

Loading the Scripts and Creating the frame

The first element we will define after our UI element is the Script element. These are .lua files that contain the code which we'll use. To do this, add a <Script> tag in the between the UI tags:

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.blizzard.com/wow/ui/

C:\Projects\WoW\Bin\Interface\FrameXML\UI.xsd">

<Script file="Simple.lua"/>

</Ui>


The attribute file references the .lua file to load. (i.e. Simple.lua) Notice that the values of attributes are enclosed by double quotation marks. (i.e. ") Notice also that we didn't need to add a closing tag for the Script element because we used the slash at the end of the <Script> tag.

Let's move on...

Frames are the dialog boxes we see in WoW. An example is the Chat Frame. You can then add buttons and text to your frames.

To create a frame for your add-on we use the <Frame> tag. The <Frame> tag can have quite a good number of attributes but we will only use 3 for now. Add the <Frame> tag after the <Script> tag:

<Frame name="SimpleFrame" parent="UIParent" visible="true">

</Frame>


Here we create an element of type Frame. We named our Frame as "SimpleFrame". The visible attribute tells WoW if that frame should be visible once the game has loaded (this value can be "true" or "false"). The parent attribute makes SimpleFrame a child of the frame name UIParent. (Your add-ons main frame should have its parent set to UIParent always.)

Don't forget to include the closing tag for the Frame element or else your add-on won't work.

Got through all that? On to the next part...

Sizes and Anchors

All the elements you will create will usually contain a Size element. This element will define how big another element will be.

Let's make our frame 200 by 133 pixels large. Add the following:

<Frame name="SimpleFrame" parent="UIParent" visible="true">

<Size>

<AbsDimension x="200" y="133" />

</Size>

</Frame>


The above is very easy to understand. The element AbsDimension tells has the x-value and y-value that SimpleFrame should be. Notice that AbsDimension (like Script) doesn't have a closing tag because of the slash that is already in the tag.

That's all for our frames size.

Anchors define the position of the frame relative to the parent frame. Add this to the Frame element:

<Frame name="SimpleFrame" parent="UIParent" visible="true">

<Size>

<AbsDimension x="200" y="133" />

</Size>



<Anchors>

<Anchor point="CENTER"/>

</Anchors>

</Frame>


(Use the american form of "centre")

What we have just done will attach the CENTER of SimpleFrame to the CENTER of UIParent (Therefore our frame will be in the dead centre of the screen). An element can have more than one anchor but we will stay out of that. The value of the point attribute can be: "CENTER", "TOPRIGHT", "BOTTOMLEFT", "BOTTOM", "TOP", etc.

Like that we have defined the Size and Position of our frame. We shall now define the background of our frame.

The Backdrop

The backdrop element will define what to use for the back-ground of our frame and which borders to use for the edges of our frame. Add this after the <Anchors> tag.

<Frame name="SimpleFrame" parent="UIParent" visible="true">

... Size

... Anchors

<Backdrop bgFile="Interface\TutorialFrame\TutorialFrameBackground"

edgeFile="Interface\DialogFrame\UI-DialogBox-Border" tile="true">

<EdgeSize>

<AbsValue val="16"/>

</EdgeSize>

<TileSize>

<AbsValue val="32"/>

</TileSize>

<BackgroundInsets>

<AbsInset left="5" right="5" top="5" bottom="5"/>

</BackgroundInsets>

</Backdrop>

</Frame>


What we've just added to SimpleFrame will create a semi-transparent black background and will use a grey border. The background and borders are files which are found in the interface.mpq file in the WoW directory. The tile attribute will tile the background equally amongst SimpleFrame. The EdgeSize defines the size of the border and the TileSize defines the size of each tile. BackgroundInsets defines how much to "squash" a background. Notice that the values of EdgeSize and TileSize are given in an AbsValue element and the BackgroundInsets values are given in an AbsInset element.

That's all for the backdrop.

The Text

Text we want to show in our frame is defined with a FontString element. It's a good idea to place FontStrings in the "ARTWORK" layer. Layers define which element should appear on which other element. Add this to your SimpleFrame:

<Frame name="SimpleFrame" parent="UIParent" visible="true">

.. Size

.. Anchors

.. Backdrop

<Layers>

<Layer level="ARTWORK">

<FontString name="Simple_Text" inherits="ChatFontNormal" text="Type in something:">

<Anchors>

<Anchor point="TOP">

<Offset>

<AbsDimension x="0" y="-33"/>

</Offset>

</Anchor>

</Anchors>

</FontString>

</Layer>

</Layers>

</Frame>


Here we've placed our FontString in the "ARTWORK" layer. Its position will be 33 pixels down from the top of SimpleFrame. The Offset element moves an element from its anchor. FontStrings can have a Size element, Anchors and Layers like the Frame element. Notice the inherits attribute:

ChatFontNormal is another FontString. Our FontString inherits all attributes and elements that ChatFontNormal owns. This is why we didn't include a Size element because the Size of Simple_Text will be the same as that of ChatFontNormal.

Notice that the y attribute of the AbsDimension is negative because we want Simple_Text to move down. If we entered a positive value than it would go up. Positive x values will move right and negative x values will move left.

The text attribute defines what text should be displayed.

The Buttons and The Edit Box

Buttons are defined using the Button element while Edit boxes are defined with the EditBox element. We'll add the Accept button, the Close button and the Edit Box all at once and then we'll take a look at each one of them.

<Frame name="SimpleFrame" parent="UIParent" visible="true">

.. Size

.. Anchors

.. Backdrop

.. Layers

<Frames>

<Button name="Simple_CloseButton" inherits="UIPanelCloseButton">

<Anchors>

<Anchor point="TOPRIGHT">

<Offset>

<AbsDimension x="-3" y="-3" />

</Offset>

</Anchor>

</Anchors>



<Scripts>

<OnClick>Simple_Close();</OnClick>

</Scripts>

</Button>



<EditBox name="Simple_EditBox" letters="50">

<Layers>

<Layer level="BACKGROUND">

<Texture name="Simple_Background">

<Color r=".2" g=".2" b=".2" a="1"/>

</Texture>

</Layer>

</Layers>

<Size>

<AbsDimension x="190" y="20"/>

</Size>

<Anchors>

<Anchor point="TOPLEFT">

<Offset>

<AbsDimension x="5" y="-66"/>

</Offset>

</Anchor>

</Anchors>

<Scripts>

<OnEnterPressed>

Simple_AcceptButton:Click();

</OnEnterPressed>

</Scripts>

<FontString inherits="ChatFontNormal"/>

</EditBox>



<Button name="Simple_AcceptButton" inherits="OptionsButtonTemplate" text="GO!">

<Anchors>

<Anchor point="BOTTOM">

<Offset>

<AbsDimension x="0" y="20"/>

</Offset>

</Anchor>

</Anchors>



<Scripts>

<OnClick>Simple_ButtonClick();</OnClick>

</Scripts>

</Button>

</Frames>

</Frame>


We can place elements that the user can interect with inside the Frames element. Don't get Frames mixed up with Frame. The Frames element can be placed inside the Frame element.

The first element we add is Simple_CloseButton button. This button inherits UIPanelCloseButton which has the Size ready for us. We place it a little away from the TOPRIGHT corner using the Offset element. This button has the element Scripts. Inside this element are "events" that can happen to the button. The only event that we placed in, is the OnClick event. When Simple_CloseButton is clicked the function Simple_Close() which is inside Simple.lua is executed.

The second element is the Simple_Editbox edit box. This doesn't inherit anything and as you can see we had to take care of the Size and even the "BACKGROUND" layer of this element. In this layer of the element we placed a Texture which is a "picture" of some sort. The Color element defines the color of the texture in RGB (Red, Green, Blue) values (each value can be between 0 and 1). The attribute "a" stands for alpha which is the opacity of an element. This means that the texture is fully opaque (this value must also be between 0 and 1).

Note: A texture can have a file attribute which refers to a Texture file in the Interface.mpq we mentioned earlier.

The FontString element inside Simple_Editbox will contain the text the user has inputed. The OnEnterPressed Script has an "element based" function. Therefore when the user presses enter, the element Simple_AcceptButton will be clicked.

The next element is the button Simple_AcceptButton. This button inherits OptionsButtonTemplate which takes care of the Size of the button and the Textures used for the button. The button will be displayed just above the bottom of the frame because of the Offset element. When the button is clicked (the button can be clicked by the user or by the Simple_ActionButton:Click() function) it will execute the function Simple_ButtonClick().

That should be all for our XML file. Notice that the elements of XML files can be in any order you want therefore you can have the Anchors element before the Size element and so on.

Make sure you save Simple.xml before you close it.

The .lua file

I'm not going to go over explaining the .lua file as this Tutorial is about the XML part. Open Simple.lua (Notepad would be fine). Add the following to the file:

function Simple_ButtonClick()

DEFAULT_CHAT_FRAME:AddMessage(Simple_EditBox:GetText());

Simple_EditBox:SetText("");

end

function Simple_Close()

SimpleFrame:Hide();

end


Save the .lua file and you close it.

The .toc file

The .toc file contains the general information of your add-on (i.e. Name, Description, Notes, Author). Open the Simple.toc file (Notepad will be fine) and add the following:

## Interface : 11200

## Name : Simple

## Notes : A very simple add-on.

## Author : Klishu

Simple.xml


The Interface number is the version of the Interface WoW is currently uses. This number changes with each patch. If you use an older number, WoW will tell you that your add-on is out of date.

Name is the name of your add-on.

Notes is a description of your addon.

The last line tells WoW which XML files to load.

The other information is optional and if you want, the .toc file can contain other inforamtion.

Save Simple.toc and close it.

Trying out Simple

Time to try out your add-on. Launch WoW. When you're at the Character Log-in screen, press Addons (on the lower left of the screen), search for Simple and tick the box next to it. Click Accept and log-in to the game.

Once you log-in the frame you created should show up. Type in something in the edit box and press Enter or the GO! button. This should empty the edit box and add a message to the chat frame with what you had written in the edit box.

Once you close the frame you will not be able to open it again. You could implement a slash command to open the frame once it is closed. (Slash Command tutorial: http://www.wowwiki.com/HOWTO:_Create_a_Slash_Command).

Now it's up to you to create a spectacular add-on using Blizzard's XML. You can do some research on more elements on WoWWiki. You can also check wowui.incgamers.com for some good addons which you can also open and notice the code and even learn from it.

Looking forward to seeing your addons! :)|||(Reserved)|||I wish I had this when I was starting out. But umm, XMLs arent needed anymore except if it's for bindings, isnt it ?|||great tutorial, it has given me the courage to proceede, now if I could only figure out what kinda mod I need.

Also just and fyi, in line 2 of the lua code there is a space in the middle of the word text that is causeing an error|||Great tutorial, deserves a sticky, grats :)|||Um i have one small problem.... how do u make an xml? and the other things|||Arghh this is soo confusing!|||Just create a simple ".txt" file and rename it.|||Great stuff, very much enjoyed the tutorial :D|||Yah dude i think i followed ur stuff to the letter but i am still having issues I think it is BC maybe needs an update, but still was cool of you to post this

Cataclysm Beta Keys

[:1]
Attention all Mod Authors,

World of Wacraft: Cataclysm has gone into Beta Testing and to celebrate IncGamers is likely going to get keys from Blizzard for our valued Mod Authors.

Like the previous beta tests there was a HUGE demand for these keys and to make sure your the first we need some information from you, so that WHEN we get these keys we can hand them out straight away.

To be eligable you MUST,

  • Have a addon hosted on wowui.incgamers.com that is up to date with the current patch 3.3.5.

  • The Addon MUST be your own and not someone elses that you have uploaded here.

  • Addons such as "Hello World" and Compilations do not count.



How can you get a key just PM me with these details.

  • First and Last name.

  • B.net account login (this is what you use to login to World of Wacraft and NOT password).

  • Region (US, EU etc).

  • and a Link to your Addon/s on wowui.incgamers.com.

This info will be kept strictly confidential and will only be used to make sure that authors only get one key.

We do NOT require your passwords, Blizzard Entertainment and IncGamers.com will NEVER ask anyone for their battle.net account passwords, if you receive a message requesting it, it is likely a scam.

Incgamers and Blizzard reserve the right to deny anyone a key.

We will only have a limited number of Keys to give away so please get your PMs sent ASAP.

Good Luck.

Lothaer and the IncGamers team.
|||Are there no beta keys to giveaway? D:|||Quote:








Are there no beta keys to giveaway? D:




Are you a mod author, do you meet the requirements? If so, did you send him the requested pm?|||Just wondering, are there going to be any beta keys given out to regular members? Both expansions have had regular members have a chance to get it, multiple times. Once included a story, I believe? Lol.

It's entirely possible that there's not many keys to give out this year, and I know the first wave is this one, but just saying.|||I think anyone with a 5k+ post count should get one. Automatically.

Ow, and a discount at the movies (have you SEEN the admission price these days?)|||Lol, well then, maybe if I had kept my old account info that was on this site that I could never find, I'd be in the 5K+ posts area =P.|||*GRINS* I got my beta key this morning, through the usual random number generator that is the Blizzard superbrain!|||Any update on the availability of keys? Just wondering if there's still any left... had sent a PM out in July and haven't heard anything yet|||Waiting for a note from Blizzard EU still.