Tuesday, January 12, 2010

The Legend of the Flying Dutchman

It's been a long time since my guild had taken a serious crack at One Light in the Darkness, the last Ulduar achievement many of us needed for Glory of the Ulduar Raider and the Rusted Proto-Drake that goes along with it. Last night one of the officers, Mhoe, approached me wondering if I would be up for a few attempts. Being that it was an off night and I had no plans I happily accepted.

Upon joining the raid and plowing headlong into all the trash bosses standing between us and Yogg-Saron Mhoe mentioned that "There was a Flying Dutchman sighting, good things are going to happen."

I had no idea what he was talking about, and as I joined the ventrillo channel late I assumed I had just missed a part of the conversation and went about the night of clearing. As circumstance would have it, I was not the only one who was as yet unaware of The Flying Dutchman; And once it was mentioned a second time the inevitable questions arose from the raid and Mhoe imparted the tale of the shadow guild member, the Flying Dutchman... Hephaestus.

Hephaestus has supposedly been in Prime for longer than any other and yet, not even the founders know who he is. His logins are rare and silent, coming online for only a short time once in a great while and then disappearing back from whence he came once again. However, these logins are greeted as a boon! Much like carrying around a four leaf clover or rabbit's foot, the guild believed that a Hephaestus showing was a good omen.

Said Mhoe, "When there's a Hephaestus sighting, good things happen."

Superstition aside, this was something of beauty. My guild had it's very own legend!

The night went on fairly normally clearing a handful of lesser hard modes that made the kills faster and having a few frustrating wipes on 1 Light Yogg due to some bad RNG... although we did have several attempts that made it look as though the achievement was definitely within our grasp; And rightly so, as we were terribly over geared for the goal at hand. But the fact that a group was put together and made it to Yogg was, in and of itself a slight miracle so I wasn't about to karmically expect anything more...

Low and behold, on the last pull of the night, pushing 20 minutes past the normal raid end time, we break into phase 3 with only one trip to the brain room. With nine and a half minutes left on the enrage timer and all raid members up we easily slew the old God of Death, netting a good majority of the raid group their achievement... and a rusted Proto-Drake.

"In Hephaestus we trust!" exclaimed Mhoe. I think next time I see him online I'll hit Zul'Gurub once more... I've always wanted a raptor mount on my Alliance shaman!

Monday, January 4, 2010

Blue Buttons: Making Your Interface look "Cool"

I recently posted a new "mod" that some folks on wowinterface.com are thoroughly enjoying. I hesitate to call it a mod, however, because there's no code, no AddOn to enable or disable, and the amount it interacts with the rest of the interface is minimal.

What is it? Blue Buttons.

Less of a mod and more of a skin, Blue Buttons simply provides a host of textures that skin the blizzard interface buttons to be a different color. I've long detested the "angsty red", as OarisJM posted, and liked the idea of changing the skin to be something different. I'd sifted through a handful of UI compilations at one point in search of a skin for the entire interface, but what I found were either incomplete panel skins or button skins that looked out of place against the rest of the UI textures.

So I set out with a simple goal: skin the in game interface buttons to be blue, like those found on the login screen. The solution is rather simple, and can be accomplished easily with just a few free tools. My version of the blue buttons is posted at the link above, ready for download, but what if you want the buttons to be green? or orange for cataclysm?

The following tutorial will show you how.

First, you'll need to download a few Programs:
  • Custom UI ToolKit: This is Blizzard's own custom UI toolkit, although it's not so much a toolkit as a set of resource files. Once you download it, run the installer and tell it to install the interface art. You can have it install the interface data as well if you like, but those files are not necessary for this tutorial.
  • BLP2PNG: Blizzard uses the file extension blp for it's textures, but this isn't an easily edited format, so to convert the files into something we'll be able to edit we need this command line software. It come in a zip file and doesn't need to be installed. Simply extract the folder to some place you can get to easily like your desktop. NOTE: If you are working on a system whose desktop does not reside on the hard drive(for instance if you are on a computer that is part of a domain and uses roaming profiles) you'll want to place this in a location on the hard drive like the root of your C: or system drive.
  • Paint Shop Pro free trial: This is the software we'll use to change the color of the buttons. It is a paid program but offers a free 30 day trial. I personally own my copy and have found many miscellaneous uses for it over the years. If you have another photo editing suite that has a color changer tool you may be able to use it instead, just make sure it will change a range of color in a region and not only one contiguous shade.
Once you have all those things go to your WoW directory and you should find an interface art folder that the Custom UI Toolkit left for you.

Inside that folder open the BUTTONS folder and copy the file named UI-Panel-Button-Up.blp to the folder with the BLPConverter in it.

Next, right click a blank space in the same folder and create a new text file named whatever you like (for this one I use the file name 'topng' since this batch file will convert textures from the blp format to the editable png format). Open the text file and type in the following:

BLPCONVERTER -m UI-Panel-Button-Up.blp

Then save the file as a batch file. To do so, go to File -> Save As. In the save dialog box change the file type to all files and put the extension .bat at the end of the file name.

Once you've got the batch file in your BLP Converter folder double click it and it will briefly flash a command line window as it performs the conversion. Once the command line window disappears you should see a new file in your BLP Converter folder. This is the file we can now edit in Paint Shop Pro.

Next, open the new PNG file in Paint Shop Pro and use the scroll wheel to zoom in on it. Choose the color changer tool from the toolbox (if you can't find a color changer tool it shares a button with the bucket flood fill tool; mousover the bucket icon and click the arrow beside it to get a drop down and select the color changer tool).

Now, with the color changer tool selected you can click on the red background to change the color of the button. Make sure to set your foreground color on the upper right corner of the screen. The RGB values I use for the Blue Buttons are: red 38, green 66, blue 143. If you accidentally color the wrong section the key combination ctrl+z is a quick way to undo your last change. As a side note when editing the remaining textures later on, I came across a texture or two that didn't cooperate with the color changer tool as well. For these textures you may have to experiment with coloring different regions of the image to get the desired effect.

Feel free to play around with different colors but keep in mind that any text placed over the button will come up yellow, so if you use the wrong color you may not be able to see what the button actually says! Once you're satisfied with how your new button looks save the file.

The next step is to make another batch file just like the one above with one exception: change the .blp extension to .png so your new batch file should look like this:

BLPCONVERTER -m UI-Panel-Button-Up.png

I name this one 'toblp'. Regardless of what you name your batch file, make sure to get the old blp file out of the folder before you convert (to prevent corruption of the file) by either deleting it or, preferably, moving it to another folder for backup purposes.

That's it!

Now that you've successfully skinned the button you can add it to your interface. To do so, copy it it your WoW directory under Interface\Buttons. If the folder is not there go ahead and create it. What happens in game is that WoW loads and extracts all these textures from it's MPQ files to a hidden directory in Interface\Buttons. You can't see these directories, but while the game is loaded they are effectively there. By creating a skinned button with the same name and placing it in the same directory our skinned button takes precedence over the default textures. This works for any texture you can find in the interface art folder created by the Custom UI Toolkit.

OK, so I lied. That's not completely 'it'. There are actually a ton of files you would need to skin like above to get the desired effect on all the UI buttons. Conveniently enough, all of the buttons that you'd need to skin are located in the same Buttons folder in interface art:

CancelButton-Down.blp
CancelButton-Highlight.blp
CancelButton-Up.blp
UI-DialogBox-Button-Down.blp
UI-DialogBox-Button-Highlight.blp
UI-DialogBox-Button-Up.blp
UI-MinusButton-Down.blp
UI-MinusButton-Up.blp
UI-Panel-BiggerButton-Down.blp
UI-Panel-BiggerButton-Up.blp
UI-Panel-Button-Down.blp
UI-Panel-Button-Highlight.blp
UI-Panel-Button-Up.blp
UI-Panel-CollapseButton-Down.blp
UI-Panel-CollapseButton-Up.blp
UI-Panel-ExpandButton-Down.blp
UI-Panel-ExpandButton-Up.blp
UI-Panel-HideButton-Down.blp
UI-Panel-HideButton-Up.blp
UI-Panel-MinimizeButton-Down.blp
UI-Panel-MinimizeButton-Highlight.blp
UI-Panel-MinimizeButton-Up.blp
UI-Panel-QuestHideButton.blp
UI-Panel-SmallerButton-Down.blp
UI-Panel-SmallerButton-Up.blp
UI-PlusButton-Down.blp
UI-PlusButton-Hilight.blp
UI-PlusButton-Up.blp
UI-ScrollBar-ScrollDownButton-Highlight.blp
UI-ScrollBar-ScrollUpButton-Highlight.blp

Additionally, you'll need to edit your batch files (right click the batch file icon -> Edit) in order to convert the entirety of the files for skinning. You can add as many files as you want for skinning with the same batch file, simply tack another name on to the end of the line with a space in between each file name. For ease of conversion I'm including the full batch files i use below for your copy and pasting pleasure. Happy skinning!

toblp.bat

BLPCONVERTER -m CancelButton-Down.png CancelButton-Highlight.png CancelButton-Up.png UI-DialogBox-Button-Down.png UI-DialogBox-Button-Highlight.png UI-DialogBox-Button-Up.png UI-MinusButton-Down.png UI-MinusButton-Up.png UI-Panel-BiggerButton-Down.png UI-Panel-BiggerButton-Up.png UI-Panel-Button-Down.png UI-Panel-Button-Highlight.png UI-Panel-Button-Up.png UI-Panel-CollapseButton-Down.png UI-Panel-CollapseButton-Up.png UI-Panel-ExpandButton-Down.png UI-Panel-ExpandButton-Up.png UI-Panel-HideButton-Down.png UI-Panel-HideButton-Up.png UI-Panel-MinimizeButton-Down.png UI-Panel-MinimizeButton-Highlight.png UI-Panel-MinimizeButton-Up.png UI-Panel-QuestHideButton.png UI-Panel-SmallerButton-Down.png UI-Panel-SmallerButton-Up.png UI-PlusButton-Down.png UI-PlusButton-Hilight.png UI-PlusButton-Up.png UI-ScrollBar-ScrollDownButton-Highlight.png UI-ScrollBar-ScrollUpButton-Highlight.png

topng.bat

BLPCONVERTER -m CancelButton-Down.blp CancelButton-Highlight.blp CancelButton-Up.blp UI-DialogBox-Button-Down.blp UI-DialogBox-Button-Highlight.blp UI-DialogBox-Button-Up.blp UI-MinusButton-Down.blp UI-MinusButton-Up.blp UI-Panel-BiggerButton-Down.blp UI-Panel-BiggerButton-Up.blp UI-Panel-Button-Down.blp UI-Panel-Button-Highlight.blp UI-Panel-Button-Up.blp UI-Panel-CollapseButton-Down.blp UI-Panel-CollapseButton-Up.blp UI-Panel-ExpandButton-Down.blp UI-Panel-ExpandButton-Up.blp UI-Panel-HideButton-Down.blp UI-Panel-HideButton-Up.blp UI-Panel-MinimizeButton-Down.blp UI-Panel-MinimizeButton-Highlight.blp UI-Panel-MinimizeButton-Up.blp UI-Panel-QuestHideButton.blp UI-Panel-SmallerButton-Down.blp UI-Panel-SmallerButton-Up.blp UI-PlusButton-Down.blp UI-PlusButton-Hilight.blp UI-PlusButton-Up.blp UI-ScrollBar-ScrollDownButton-Highlight.blp UI-ScrollBar-ScrollUpButton-Highlight.blp