How to: Discord Art (and other Discord AddOns)

[Elviss 5]

Hello everyone, 

 

I was asked couple of times about my UIs and what I used to make them, and since I promised, here it is, Discord pack!

 

 

 

Before we start, let me first express my gratitude to Nyali from Resurrection Gaming (Feenix, old Warsong) who introduced me to Discord pack, and to Lozareth, creator of Discord. Original Discord pack have like 8+ addons, but I will be focusing here only on 3 of them. To be frank with you, once you wrap your mind around it, you can use all of them with no problem whatsoever.

 

But, for starter, let's first mention who shouldn't be using Discord:

 

-If you don't like addons that take reasonable amount of memory (tho, I can't understand why would someone in 2016 be worried if his addons use 128 or 256 MB of RAM), you should not be using this.

 

-If you like predefined UI packs with more user friendly interface, you should not be using this.

 

-If you are lazy, and don't want to search on the web for custom art, or don't wan't to work in PS to make your own custom art, you should not be using this.

 

So, who should actually use Discord?

 

-All who appreciate aesthetic as well as functionality of their UI should use Discord

 

-All who want to make unique looking UI should use Discord

 

-Those who have some skill with Photoshop will find that it works very well when coupled with Discord (not necessary to have those skills,tho, you can find all that you need on the web) 

 

Let's get into the basics

 

Discord is addon pack designed to import custom graphic art and using it to change different elements of your user interface. Basically, they are used to improve gameplay, design and functionality, all trough console that was considered to be user friendly back in the days (tho some people today find it quite hard and unfriendly and therefor I'm writing this tutorial). Graphic files that Discord uses have to be saved in Targa format (.tga) or else they won't be loaded into game. Also, they need to be of specific size:

 

64x64

 

128x128

 

256x256

 

512x 512

 

you can also combine these sizes (f/e 128x512)

 

Make a note here, size can't go above 512x512, otherwise it can cause game to crash and you'll have to delete Discord's saved variable files (f/e DiscrdArt.lua and DiscordArt.lua.bak).

 

You can also import various fonts in game. I suggest http://www.dafont.com/ for finding fonts that will suit your UI. Fonts might come in .ttf or .otf and it is important to know which one you are using because you'll have to type in full font name inside Discord's tab for font selection.

 

To use both, custom graphics and fonts you will have to place those files in right folder. Basically that can be any folder on your hard disc, but you just need to show to Discord which folder that is. Easiest way around this is to actually place those files in default folder.

 

For Discord Art that would be:

C:\World Of Warcraft Classic\Interface\AddOns\DiscordArt\Custom Textures

C:\World Of Warcraft Classic\Interface\AddOns\DiscordArt\Custom Fonts

 

 

For Discord Unit Frames:

C:\World Of Warcraft Classic\Interface\AddOns\DiscordUnitFrames\Custom Textures

C:\World Of Warcraft Classic\Interface\AddOns\DiscordUnitFrames\Custom Fonts

 

For Discord Action Bars:

C:\World Of Warcraft Classic\Interface\AddOns\DiscordActionBars\Custom Textures

C:\World Of Warcraft Classic\Interface\AddOns\DiscordActionBars\Custom Fonts

 

Make note that you might have WoW installed in different folder, but everything past that step will stay same (interface, addons...)

 

What do you need to start working on your new UI?

 

Patience.

 

Discord was developed during vanilla years of retail, so it was like 10ish years ago, which in world of computers translates into 100 years of human life (real life human, not WoW race ). Consequently, this addons are full of glitches. Sometimes texture will fail to load for no apparent reason. Arm your self with a ton of patience and be prepared to do a little acrobatics to bypass all possible problems that you may encounter.

 

also patience to wait for me to finish this tutorial

 

Premade graphics/fonts

 

Obviously, before you can put any of those custom files you have to get them or make your own. With a little bit of Photoshop skills you can pull graphic elements out of other game screen shots, make your own, get graphic elements from popular retail UI suits (Spartan Ui, Tuk UI, ElvUI, LUI...)whatever...possibilities are endless and they are just limited by your own creativity.

 

Make a note, that while you are in game, but making some changes to already imported files trough Photoshop, or some other graphic editing program, changes that you made will not appear in game till you restart it (obviously, you also have to save changes to that file)

 

Tools

 

Like I already mentioned, you don't necessarily need Photoshop. You can really find all that you need just by google. However, having some, at last, basic Photoshop skills will really open your horizons. If you are starting with this from ground 0, I'd suggest learning basics of the basic and fast forward to layers and creating so called "Alpha channel". Here is something that might help you:

 

http://mashable.com/2010/08/12/12-beginner-tutorials-for-getting-started-with-photoshop/#121LptMmikqK

 

In case you don't want to use illegal copy of Photoshop and also don't want to pay for PS (which is completely understandable, it is quite expensive). There are solutions. I found this bundle of free graphic editing programs. Tbh, I haven't check them but some of them look promising and I certainly will do so in future since PS is becoming more and more memory demanding software.

 

http://www.creativebloq.com/graphic-design/free-graphic-design-software-8134039

 

In some newer addon packs or UI suits you can find graphic elements that you need/want to use for your UI. However, they will be in .blp format which you can not open with any graphic editing software. To go around this problem you can use .blp to .png converter which you can find here:

 

http://www.wowinterface.com/downloads/info6127-BLP2PNG.html

 

It is very simple to use. Unpack blp2png converter on your desktop, and simply drag .blp files to that icon. This will create .png copy of that file in same folder where original .blp file was. Now you can use PS or some other image editing software and simply save .png file as .tga file and then you can use it with your Discord Art. In some cases, you might have to add alpha channel, tho.

 

Process can be done in reverse, in case you need .blp file for something (making your own custom nameplates, tooltips, glues...). Remember to save .bmp file, delete (with or without backup, your choice) old .blp files and drag .bmp files to blp2png converter icon on your desktop. This will create new version of .blp files with same name but with changes that you made applied.

 

Here are some links with already finished texture packs, you might find them useful

 

http://www.wowinterface.com/downloads/info15651-ViviensArtPacksforkgPanels.html

http://www.wowinterface.com/downloads/info20340-BTexFanupdate.html

 

One last note here. You don't have to use all of Discord pack addons. You can combine, say, Discord Art with Bartender 2, if you just need quick and easy to move action bars. Or if you don't want to toy with complex cast bar elements, but just need one simple and easy to move bar, you can use oCB instead of Discord Frame Modifier, and so on...

 

But let's start with Discord Art.

Edited December 12, 2016 by Elviss

[Elviss 5]

 

I saw Discord Art represented in most of addon packs that can be found on the web, but in case you don't have it, here is download link:

 

http://www.wowinterface.com/downloads/download21942-DiscordArt

 

After you put Discord Art folders into your Interface folder, you should put all textures that you intend to use into:

 

C:/World of Warcraft Classic/AddOns/Interface/DiscordArt/CustomTextures

 

If you have game installed in some different directory, simply find custom textures inside your Discord addons folder. When you are done, you can start the game. To open Discord Art interface, once you are in game,simply type:

 

/dart

 

And menu will pop up (you can see it on right side of my screen shot, it is completely movable and you can place it anywhere else)

 

There's couple of things to notice before we move on. 

 

First of all, when you start Dart for the first time, it will initially have only 1 texture frame, so you will have to add few more. To do that click on Misc Options button as shown on left screen shot below (white arrow pointing toward button, just in case you don't see it). This will take you to menu as shown on right screen shot. All you have to do is click "plus" button (again highlighted with white arrow pointing toward) few times and add as much as you need new texture frames. I'd suggest some planning up ahead, so that you know exact number of new texture frames that you need. Or you can simply repeat this procedure each time you need to add new texture frame.

 

New texture frames will not appear straight away, you have to reload your UI, so simply type

 

/rl

 

Nope. Textures will still not appear, you need to "show" to Dart where are your textures and where you wanna use them. so lets do just that. 

On texture options (main dart window, left screen shot), between copy and paste buttons in upper section, you'll find "click to set texture" area. Simply click there and it will open new window where you should go to custom texture tab and chose texture that you want to use for that frame. Alternatively you can type in texture location (for example,  AddOns/Interface/DiscordArt/CustomTextures/Tex1.

 

After you have selected texture, you need to select blending mode from blend drop down menu (by default it doesn't have any mode selected,  therefor you can't see texture till you select one of blending modes). After this you should finally see your texture somewhere on the screen.

 

Now let's get familiar with texture controls.

 

Look at middle section of texture options tab. You'll see number of sliders, check boxes and drop down menu. We'll cover them now one by one. There's also three another tabs in this section but we'll not talk about them in this tutorial since this is just for purpose of getting you familiar with Discord, and those are bit more in-depth.

 

Height and width sliders

 

Obviously, for adjusting the dimensions of your texture dimensions. Notice that width and height can be adjusted beyond slider limit. However, you should not to go overboard with this. Textures are pixel based images, not vector shapes, therefor, if you increase dimensions of original texture, pixelization will become obvious.

 

Disable mouse and mouse wheel check box

 

To understand point of this, let's first look into alpha channel problematic. 

 

 

Black elements are basically invisible once you apply this texture to game, and they are black here just to provide artist with some more control over white elements which will be visible on texture once it is applied to game. Notice how while surface isn't filled with solid color everywhere but just on some places? That will look transparent when applied to game. Now let's get back to Dart.

 

When you enable mouse and/or mouse wheel over this texture, regardless if you are clicking on "invisible" black parts of texture, or if you are clicking on white shape, game elements behind that (characters, mobs, action bars...) won't interact with cursor. That is very convenient to safe guard some elements which you don't want accidentally moved or altered, but in some other cases you need that interaction (for example, some aesthetic elements for your HUD in the middle of the screen). so, to have control over this, you have those two check boxes.

 

Alpha slider

 

Alpha is term used in graphic design to define transparency of object. So, this is what this slider is used for. Texture with 100% transparency is all filled with solid color as it is on original texture (.tga file that you imported into custom textures folder), while 0% transparency is making texture completely invisible in game.

 

Blending drop down menu

 

Five options here:

 

-Disable will show your texture exactly as it is, but without Alpha channel included. Meaning those black areas will appear black, not hidden.

-Blend will show your texture with alpha channel

(continue later)

Edited December 13, 2016 by Elviss

[Elviss 5]

 

Discord Unit Frames

 

(continue later)

 

Discord Action Bars

 

(continue later)

[Sparkles 0]

Uuh, yes. I'm actually looking for an in-depth guide, which also gets into the script part. Wooh, looking forward to this. Cheers. (:

[Elviss 5]

Can this be pinned later on?

Edited December 10, 2016 by Elviss

[Salahuddin 0]

Hi,

I am quite interested in this stuff, but I have no ABC of this stuff.

 

I found this addon someone made on private server but I cant get in touch with both of them.

 

https://www.youtube.com/watch?v=NKGwtRSHL4U

 

https://www.youtube.com/watch?v=ZODqRnlJuRM

 

http://www.wowinterface.com/downloads/info22580-ClassicUrkUIArt.html

 

Is there anyway you could compile this UI for me?

 

Have a look at it. no hard feelings if not possible

Looking forward to hear from you.

 

Thanks

[Elviss 5]

Is there anyway you could compile this UI for me?

 

Have a look at it. no hard feelings if not possible

Looking forward to hear from you.

 

Thanks

I'll see what I can do when I finish this tutorial

[Ignas 0]

Yo Elviss, any way to make a button that makes dpsmate meter and ktm threat meter to show up if they weren't showing before and vice versa?

[Fujispeed 0]

 

Hello. Sorry for my English. I'm just starting to learn it.

Please tell me how to make a square debuff icons on target unite frame?

Now i have that 

But i wanna 

Edited January 15, 2017 by Fujispeed

[Joannax 0]

Hi man, great introduction. Thanks. 

I had a question. But nevermind. 

Best

Edited February 8, 2017 by Joannax
Figured a way to get what i wanted.

[Joannax 0]

On 1/15/2017 at 0:37 PM, Fujispeed said:

 

Hello. Sorry for my English. I'm just starting to learn it.

Please tell me how to make a square debuff icons on target unite frame?

Now i have that 

But i wanna 

Hi man, I figured out how to do this with discord frame modifier. Here is how I did it, there are probably other ways, IDK. 

Using Discord Frame Modifier (DFM), mouseover the debuffs you want to edit while having Discord Unit Frames open. If you are using the Frame Finder, you will see that the debuff frame is made up of four Regions which are named Texture, Text, Stack and Border. 

To get the result you want, we will have to work with Texture and Border.

 

So you create a frame called DUF_TargetFrame_Debuffs_1_Texture and one called DUF_TargetFrame_Debuffs_1Border. 

Let's start with the Border frame. What you do is checking the texture and changing into the plain backdrop one. This will make the debuff look like a red square at the moment, but it's okay. Next step changes the position of the red square to hide behind the Texture frame. So we change the Draw Layer setting to Background. 
 

Spoiler

 

 

 

Here's what I did for the Texture Frame, only the modifications shown on the picture below. 

Now before this point your debuff slot might look a bit misaligned. What I did was to play around with the size setting until I found one where there was only 1px left of the red square around the Texture icon. Using the FRAME LOCATION to move the Texture frame helps out here. Might not be the same values for me as for you here, it depends on your debuff size setting in DUF... Play around and find out what works for you here.

Spoiler

 

You have to do this routine for every debuff slot you want to convert... ;)

Result? looks like this. 

If you want more space between the debuffs (like the OG picture you posted), go to /DUF -> Target -> Debuffs and change the spacing there. 

Edited February 23, 2017 by Joannax
addendum

[Fujispeed 0]

Joannax Thx!

[Juicyloop 0]

Hi,

i saw in ur Discord Unit Frames that Raidicons like Star, Moon, etc. are possible.

I cant seem to find them in my Version 2.46 since they haven´t been integrated yet.

I was wondering which Version u are using, or did u implement them by urself? And if how? :D

[euron 1]

You can make Discord Unit Frames display Raidicons by going to race or rank icon, special options and check 'Show Target Icon instead'.

[Juicyloop 0]

Oh that was ez ^^ I thought i checked all the options :D

Cheers m8!

[Elviss 5]

it'll be awesome if someone pins this tutorial