Jump to content
XCOMUFO & Xenocide

Issue #146- Xenolook Widgetset


guyver6

Recommended Posts

Hi,

Me and SupSuper are working on new CEGUI look (widget set) that'll allow us to create Xenocide-looking layouts without a need to ask Art departament to do each and every UI screen we need. So...

I need sliced images of our current UI.
@Vaaish: I won't slice them myself, because it's nearly impossible, I'll show what I want.
On first fire let's take a button:
[attachment=6895:attachment]
The image is mostly self-explanatory. By tileable I mean that I can put two images side by side and they'll tile seamlessly. With the set of that 15 images me and SupSuper will be able to make any button we want. It would be nice to also have those 15 images for the "highlighted" button that's used in XNet.

Please provide us with .psd and .png file (we do use alpha channel, but that is what everyone know I think). Arrangement of elements in such file should look like this:
[attachment=6896:attachment]

Now a little tiny elements needed:
[attachment=6897:attachment]
All of these six images have to have alpha channel and be transparent so that speaker and arrow can be put on any background. Btw, we're missing a "radio-button" image (here are only two check-boxes - first esspecially for sound and 3rd one), so it would be nice to have also a radio-button image.

Arrange those into the same file that you'll put button in.

Now the hardest part: window. Or maybe it'll be better if I say windows, but that's later. Let's focus on window, and on the 2nd png I attached to this post:
[attachment=6896:attachment]
So, basic window is made of 10 images:
- 2 bottom corners (bottom-left, bottom-right)
- 3 sides (bottom, left, right)
- Tilebar, which is composed of:
* left corner
* right corner
* middle
* close button
- background (tileable)

There can be also a minimize button (for interceptor dialog), so it'd be better if you do one also.
The most important thing is, that when you put all that things together, they have to fit in nicely. Close button and minimize button are drawn [b]onto[/b] tilebar, so first CEGUI draws tilebar, and then puts buttons on it, so have that in mind.

So what I meant about "windows". Well, basicly the fact that each and one of our "dialogs" has different background, that cannot be tiled. My idea is to make that basic window first, and then create a set of [b]tileable[/b] backgrounds. How you'll do that is up to you. Since me and SupSuper are preparing whole new CEGUI look for xenocide, we'll be able to tweak that so it'll work.

Oh, one more thing: provide us with XNet screen and planetview screen [b]without[/b] that green lines on it. They are scaling very ugly, and actually we'll do that another way (guess what: we'll tile that green pattern).

Why are we doing it?
* Independence. We can't move on because we don't have screens and dialogs. With that widgetset we won't have to ask Art anymore for a dialog and wait endlessly. That's not Vaaish fault, actually Vaaish is the only one here that does 2D graphics for us, and we love him for that. Sorry if it'll sound harsh, but doing another battlesape model when we haven't finished planetview yet and need lots of 2D images is a waste of resources. My guess is if one did some Web design then he/she knows how to handle Photoshop to help us. Not talking about ones that texture models.
* Scalability. If you don't know what I mean, try running Xenocid in higher resolution (like 1600x1200, or even 1280x960), you'll know what I mean.

Greetings,
Guyver

EDIT:
@bpuk: wait with that buy/sell screen until that is ready.
@Vaaish: leave buy/sell screen for now, this one is top priority for me. Actually if everything goes how I want, you won't have to do buy/sell screen :) Edited by Vaaish
Link to comment
Share on other sites

ok let me see if I get this all straight...

You want to have the button stroke as separate components (all corners and all horizontal/vertical lines) and have the background inside each button be tilable.

It seems to me that all you need for any part of the stroke is a 1px by 1px dot int the stroke color that you can scale in any direction. It also seems like you only really need the upperleft and lower right corners since you should be able to rotate them fit whichever corner you need.

The background can become a solid fill since it will be impossible for segments like the bent upper left corner to match the pattern that is currently in there.

Now the part concerns me.

It sounds like you will be using the BUTTON elements to stretch into whole WINDOWS. ifthats the case then we need to think up how we are doin this because the button elements shouldn't be used to construct windows. We need a different set to do that.
Link to comment
Share on other sites

[quote name='Vaaish' date='Jul 8 2005, 12:50 PM']ok let me see if I get this all straight...

You want to have the button  stroke as separate components (all corners and all horizontal/vertical lines) and have the background inside each button be tilable.

It seems to me that all you need for any part of the stroke is a 1px by 1px dot int the stroke color that you can scale in any direction. It also seems like you only really need the upperleft and lower right corners since you should be able to rotate them fit whichever corner you need.

The background can become a solid fill since it will be impossible for segments like the bent upper left corner to match the pattern that is currently in there.

Now the part concerns me.

It sounds like you will be using the BUTTON elements to stretch into whole WINDOWS. ifthats the case then we need to think up how we are doin this because the button elements shouldn't be used to construct windows. We need a different set to do that.
[right][post="124474"]<{POST_SNAPBACK}>[/post][/right][/quote]i'm also part of this, so i might as well reply.

i think you got everything right, except the last part. BUTTON elements are separate from WINDOW elements, we won't be making windows out of buttons. i can't figure out where you got that idea :huh:

and we will need all the corner images, since CEGUI doesn't support image rotation. we might be able to code that in later, but for now we shouldn't make things too complicated. and there might be a widget in the future where the corners aren't all the same, so it'll make things easier in the long run.

finally, i might as well add we'll also need images for a Horizontal Slider, they'll be used a lot in Options dialogs. the slider is made of these parts:
* Thumb
* Track (the background): left, middle (tilable) and right
Link to comment
Share on other sites

Cool. I actually have written answer already, but I think I turned off the computer before hitting "Add Reply" (I was moving to my parents house for holidays). Anyway SupSuper said it all like he should :)

Making horizontal scroll bar you can make vertical one also (for buy/sell screen), piece of cake, just rotating vertical :).

Oh, and as to button/window background (or in other words "fill"), if you'll have button/widow corners and sides using fully transparent pixels where nothing should be shown, then we can draw background so it'll look very seamlessly (although I personally prefer plain buttons with solid fill, they look more estetic, on the other side, xnet buttons are nice with their background). Anyway we should have button fill pattern if we want to stay with current design.

Oh, just noticed it. Scroll bars could also use 9 images for scrollbar track (those should be really simple, like 2x2 pixels so should be easy), like buttons. Having only 3 of them (like SupSuper said) helps nothing with scalability - we can't lossless scale in 2 dimentions. I discussed it with SupSuper and we'll do it like that.

So, scrollbar is:
* thumb, 3 images:
- top
- middle - tileable in Y
- bottom
* track, 9 images:
- 4 corners
- 4 sides, tileable
- 1x1 pixel background color (or power of 2 tileable texture, if you want :) )

That was for horizontal one, vertical one make only by rotating horizontal by 90 degs, although we need that rotated images also.

uh :)

Thanks in advance and cheers,
Guyver

EDIT: Sorry I didn't mentioned it, make buttons in two color versions: silver and blue. XNet uses both of them. Edited by guyver6
Link to comment
Share on other sites

I've spent whole day on that, but here it is: a BUTTON.

[attachment=6925:attachment]

I'm attaching PSD to [url="http://bugs.projectxenocide.com/view_bug.php?bug_id=146"]Issue #146[/url].

Guyver

EDIT: that upper sliced button is just my base. What's below are actual button images Edited by guyver6
Link to comment
Share on other sites

Darn, that was hard, but...
[attachment=6929:attachment]

Text area requires little adjustments. But isn't that better button? :D

Fully scalable, no quality loss.

Now I'm waiting for window graphics. I'm not going to mess with graphics programs again. I can do things like input box, but window frame is too complicated. Also I'd like some artist to remove backgrounds and green scanlines from all our screens.

Guyver
Link to comment
Share on other sites

Sorry I'm posting again, but take a look at scalability:
[attachment=6931:attachment]

Button knows what to do, you only have to set up size. Falagard RoX :D Edited by guyver6
Link to comment
Share on other sites

[quote name='guyver6' date='Jul 14 2005, 04:16 PM']Sorry I'm posting again, but take a look at scalability:
[attachment=6931:attachment]

Button knows what to do, you only have to set up size. Falagard RoX :D
[right][post="125192"]<{POST_SNAPBACK}>[/post][/right][/quote]

why is there no padding for the text on the right side of the button?
Link to comment
Share on other sites

  • 2 weeks later...
Ok, I finally had time to work on widgets again.

I've finished XenoLook/Button/Right (which you can now use instead of TaharezLook/Button).

Here is some eye-candy :D

[b]BEFORE[/b]
[attachment=7005:attachment]
[b]AFTER[/b]
[attachment=7006:attachment]

Note that it was taken in 1024x768 resolution (hence original buttons are blurry).

Guyver
Link to comment
Share on other sites

hopefully coming this week. Had a rush freelance job that pretymuch drained all my time.

you just need the window sliced up like you did the button right?

I'll go ahead and split it up for you and post the image.
Link to comment
Share on other sites

Yeah, something like the button. Have in mind that we have there some shapes in window background that need to tile seamlessly so slice them like that.

Btw, the best solution would be to have .psd.
Link to comment
Share on other sites

I have made progress with cutting up the widow, however I'm up against a wall... sorta.

The decoration on the inside of the window is going to make for some large chunks in slices and for the corners. and for implementing the scroll bar. I can slice up the outer window just fine and then make overlay pieces that stretch separately for the decorative portionon the inside, but I need know if that will cause prog too much trouble or if it's even possible.
Link to comment
Share on other sites

Great.

First of all, we can easily add layers in widgets, so you can make overlays without problem. What concerns me is that scrollbar. Are we going to use it for all windows out there?

And one more tip: try to save texture space by leaving only necessary parts. In example see my attachement with reduced input boxes (I believe that those are input boxes ;) )
Link to comment
Share on other sites

I was planning on designing the scrollbar into the windo and have it greyed out if it wasn't needed... the other option is to slice it off and have it attachable if necessary

look at the stats screen, those small boxes are the interior overlays that turn itno the title barfor the graph and the background area for the graph. Edited by Vaaish
Link to comment
Share on other sites

If you want then make that right (and then I suppose bottom) side of a window in 2 versions - with and without scrollbar. Another thing is that we'll need scrollbar alone (without any window or the kind).
Link to comment
Share on other sites

ok let me thing through this a bit more.... I thik I'm gonna be redesigning that main window to adjust for the lines in it... might not lok as "interesting" but it'll be easier to work with.
Link to comment
Share on other sites

  • 3 weeks later...
got some time tonight. the psd has the window chopped, I 'll leave it to you guys to optomise this down however you want but you should have all the pieces you need. One thing the scrollbar will always be on the window, if the window doesn't need it the greenscreen lines are not visible but the container is always there.

I remember reading you guys needed something done to the planetview bar... what was that? Edited by Vaaish
Link to comment
Share on other sites

[quote name='Vaaish' date='Aug 25 2005, 01:35 AM']got some time tonight. the psd has the window chopped, I 'll leave it to you guys to optomise this down however you want but you should have all the pieces you need. One thing the scrollbar will always be on the window, if the window doesn't need it the greenscreen lines are not visible but the container is always there.

I remember reading you guys needed something done to the planetview bar... what was that?
[right][post="129883"]<{POST_SNAPBACK}>[/post][/right][/quote]Thanks, I'll have a look at it later.

You mean this?
[quote name='Guyver6']Oh, one more thing: provide us with XNet screen and planetview screen without that green lines on it. They are scaling very ugly, and actually we'll do that another way (guess what: we'll tile that green pattern).[/quote]
Also, when you can, whip up some graphics for the Slider widget. The standard one looks veeery ugly resized for horizontal use :P
Link to comment
Share on other sites

here is the horizonatal slider and a jpg that shows how it fits together. I don't thik the top part of the png is necessary but it's there just in case you used it somewhere :) Edited by Vaaish
Link to comment
Share on other sites

[quote name='Vaaish' date='Aug 29 2005, 12:11 AM']here is the horizonatal slider and a jpg that shows how it fits together. I don't thik the top part of the png is necessary but it's there just in case you used it somewhere :)
[right][post="130333"]<{POST_SNAPBACK}>[/post][/right][/quote]It isn't necessary, but thanks anyway. Though I have to wait for CEGUI to fix their bug for the slider to work (and look) right, it looks very peculiar now :P

Btw, could you also remove the greenspace lines from the X-Net? Here's some pics in 1280x1024 to show the difference between having the lines built into the graphic (left) or put separately as a tiled image (right). Edited by SupSuper
Link to comment
Share on other sites

×
×
  • Create New...