About Store Forum Documentation Contact



Post Reply 
Noob GUI question
Author Message
dragonfly3 Offline
Member

Post: #1
Noob GUI question
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.
03-14-2011 05:40 AM
Visit this user's website Find all posts by this user Quote this message in a reply
Dandruff Offline
Member

Post: #2
RE: Noob GUI question
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.
03-14-2011 06:28 AM
Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #3
RE: Noob GUI question
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.
03-14-2011 07:37 AM
Visit this user's website Find all posts by this user Quote this message in a reply
Dwight Offline
Member

Post: #4
RE: Noob GUI question
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!

SnowCloud Entertainment - We are recruiting!
http://www.sc-entertainment.com
03-14-2011 02:11 PM
Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #5
RE: Noob GUI question
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)
03-14-2011 02:59 PM
Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #6
RE: Noob GUI question
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 smile
03-14-2011 05:02 PM
Visit this user's website Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #7
RE: Noob GUI question
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?
03-17-2011 05:51 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Harry Offline
Member

Post: #8
RE: Noob GUI question
Maybe don't use GIF or JPG but PNG which can save transparency too.
03-17-2011 06:56 PM
Visit this user's website Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #9
RE: Noob GUI question
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! grin
03-18-2011 12:16 AM
Visit this user's website Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #10
RE: Noob GUI question
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:
   
03-18-2011 02:06 AM
Visit this user's website Find all posts by this user Quote this message in a reply
Esenthel Offline
Administrator

Post: #11
RE: Noob GUI question
you could attach the png/gfx files
03-18-2011 01:14 PM
Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #12
RE: Noob GUI question
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?
03-18-2011 05:41 PM
Visit this user's website Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #13
RE: Noob GUI question
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-19-2011 02:47 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Dynad Offline
Member

Post: #14
RE: Noob GUI question
(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 wink

(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 wink


~Dynad

There is always evil somewhere, you just have to look for it properly.
03-19-2011 03:08 PM
Visit this user's website Find all posts by this user Quote this message in a reply
dragonfly3 Offline
Member

Post: #15
RE: Noob GUI question
Aaah, thank you! smile
03-19-2011 05:19 PM
Visit this user's website Find all posts by this user Quote this message in a reply
Post Reply