Graal Forums - Custom GUI Image Tutorial

Graal Forums (https://forums.graalonline.com/forums/index.php)

- Graphic Design (https://forums.graalonline.com/forums/forumdisplay.php?f=9)

- - Custom GUI Image Tutorial (https://forums.graalonline.com/forums/showthread.php?t=81591)

Custom GUI Image Tutorial

I figured this fell more into Graphics rather than scripting, so I placed it here. This is a small tutorial to teach you how to create a Graal GUI skin from scratch. Criticisms/Comments welcome. Rep if you like it/found it helpful.

http://www.sympgraal.com/Ian/guitutorial.png

Very nice :)
Now more pixelers will know how to make guis :p
++rep

lol Nice one.

You already taught me this ;)

Do these support alphatransparencies?

Quote:

Originally Posted by Demisis_P2P (Post 1419498)

Do these support alphatransparencies?

They have full support for alpha transparencies.

Here is my take on a loosely vista-themed one.

It made it with Era's gui template so it's much smaller than yours.

It looks pretty good in game, but I can't change text colors, etc. so it doesn't fit perfectly.

Quote:

Originally Posted by Demisis_P2P (Post 1419517)

profile.fontcolor ?

Quote:

Originally Posted by cbk1994 (Post 1419519)

profile.fontcolor ?

I'm not staff.
I'm just overwriting graphics locally to test them in game.

I'd love to see a classic one :O! (Default Q Menu like this!)

+rep :)

i did a classic one on old vs, remember??

rep++ [you don't need the profile= part, btw]

I edited the tabs and the scrollbar images a bit too, so this is what the News gui looks like for me now on Era.

I see that you have a single pixel on the bottom left that represents the background. What you're doing is just making Graal's job more difficult because it has to tile a single pixel rather than a larger set, which takes more CPU time.

If you want a solid colored background simply remove the background pixel from the image and set opaque to true in the Window's profile then change fillcolor accordingly.

Attached is the image I'm using for the simple gray window theme based on VGUI in the Source Engine. The image has 80 percent opacity.

And combined with this profile, it makes the window background to what I want it to be without having to put it in the image file.

PHP Code:


		
			
  new GuiBlueWindowProfile("GuiGrayWindowProfile") {

    this.bitmap = "guigray80_window.png";

    this.fonttype = "Verdana";

    this.fontsize = 14;

    this.fontstyle = "b";

    this.fontcolor = {255, 255, 255};

    this.fontcolorna = {176, 176, 176};

    this.fontcolorhl = {0, 0, 0};

    this.opaque = true;

    this.fillcolor = {88, 88, 88, 255 * 0.80};

    this.fillcolorhl = {255, 164, 0};

  }

The result is also attached.

I don't think Graal is tiling the single pixel. Theres a "tile" variable, I'm pretty sure it's being stretched when this is set to false.

demisis, post yours! it's great =D

Quote:

Originally Posted by Crow (Post 1419566)

I don't think Graal is tiling the single pixel. Theres a "tile" variable, I'm pretty sure it's being stretched when this is set to false.

Well don't do that either. :rolleyes: You don't need to stretch a single pixel when you should be using the fillcolor like I said.

This is an example of a no-back GUI image. To do this, simply omit the background or replace it with the ambient color (magenta in this case)

How would i add this to my server. I am new to scripting and i added as a WNPC and added it to myself and the blue gui is still the same.

Quote:

Originally Posted by Emera (Post 1648182)

How would i add this to my server. I am new to scripting and i added as a WNPC and added it to myself and the blue gui is still the same.

A simple wNPC won't do much. You need to upload the custom GUI (images) to your server aswell, and make sure you edit the script to use the appropriate filenames.