Is there any sort of tutorials for the GUI editor for noobs? I've never worked on GUI before and don't quite understand how the editor works and can't find any sort of tutorials or videos that show how to use it.

I understand how to create actual windows, buttons, sliders, etc. I just don't understand the graphics side of it; how to texturize them and make them into interesting shapes, etc.; how to implement graphics into them to make them look like the one on the esenthel tools page instead of just a basic window.

I had this question too when i first started. I basically messed around with the editor until i got the gist of it.

From what i understand, you just need to create your own nifty gui styles and use those styles for your gui objects, be it a window, button etc.

To find the gui style editor, click on the small button to the left of the data browser button. Once you click on that, a window will pop up and you will see a bunch of options you can modify. From there it will be pretty easy and once you're satisfied, save it. Now, whenever you make a new guiobj, you have an option to link it with your newly created gstl.

does it allow the application of jpg images for texturing or does it work in the same way that objects do, where you have to apply materials? That's the part I'm confused about-how get the actual images, shapes, and textures like in these pictures:

http://www.esenthel.com/?id=tool/gui_editor
(click on the picture to enlarge it-the fancy gray box in the style editor with stone textureing and gems in the corners)

http://www.esenthel.com/?id=features
(the cool looking sci-fi style window next to the GUI section)

http://www.aiononlineguides.com/image/disbar.jpg
(the entire skill & map bar in this picture-the fancy curvers, shapes, textures, etc.)

Once I figure out how to get actual graphics & textures into the style editor I should be able to figure out the rest. I'm pretty good at graphic design, I've just never worked with a GUI editor before so it's all brand new to me. It's one of the few things that doesn't have a vid tutorial.

I would make a photoshop image, save it as you like and convert it to a .gfx.

After that in the GUI editor, load the newly created .gfx as an image. Never used the style editor... So I am very curious about your questions as well!

you can just drag and drop bmp/png/jpg files to "image" textline in the properties window.

(I just noticed that dropping jpg files can produce transparent gfx files, while bmp/png/tga work fine, I'll fix jpg's for next release)

Aha! That explains one of the problems I was having-with jpgs.

Dragging & dropping directly will work so much better for me. I will give it a try.
Thanks for the help

Is there a way to do transparency in GUI images? I tried the option in the converter that says to make purple transparent & it didn't work. I've attached samples that I'm working with to give you an idea of what I'm trying to do:

This is a GIF. The white boxes are transparent but you can't tell on a white background. I'm trying to achieve that transparency:
   

JPEG and GFX format comes up solid white:
   

When I tried the make purple transparent option, this is what I got (created a bmp to show here but the GFX looks this way as well). Maybe I used the wrong shade of purple?
   

What am I doing wrong?

Maybe don't use GIF or JPG but PNG which can save transparency too.

Yay, it worked! I didn't even think about trying PNG. I always use JPG or GIF. All's good and on a roll now. Thanks!

ok, sorry for being a pain in the butt :( I have a couple more questions.

1-Are the progress bars suitable for xp bars, health bars, mana bars, etc?

Why are the progress bars discolored?

Here is a screenshot:
   

you could attach the png/gfx files

I followed the video tutorial and clicked on the progress bar button, then inserted. Then I adjusted the size and shape I needed, then set the colors in the little settings window that pops up for each. It automatically assigned "GUI/progress0.gfx," "GUI/progress1.gfx," and so on, respectively, for each bar. However, I don't see any such .gfx files in my GUI folder. So I think maybe I'm missing a step. Do I need to somehow save each progress bar individually?

do I need to create my own graphics for the progress bars and insert them in the GUI editor? I don't see an option to save the progress bars that it inserts by default. I'm still confused.

(03-18-2011 05:41 PM)dragonfly3 Wrote:  I followed the video tutorial and clicked on the progress bar button, then inserted. Then I adjusted the size and shape I needed, then set the colors in the little settings window that pops up for each. It automatically assigned "GUI/progress0.gfx," "GUI/progress1.gfx," and so on, respectively, for each bar. However, I don't see any such .gfx files in my GUI folder. So I think maybe I'm missing a step. Do I need to somehow save each progress bar individually?

Those Gfx files can be found in the engine.pak file.. if you just unpack it you will see a folder with all the gui gfx images

(03-18-2011 05:41 PM)dragonfly3 Wrote:  do I need to create my own graphics for the progress bars and insert them in the GUI editor? I don't see an option to save the progress bars that it inserts by default. I'm still confused.

You can set the new images of your own in the Progressbar properties back/progress image.

If you want them to be standard then you can edit the Engine.pak file with your own images and repack it


~Dynad

Aaah, thank you!