Jump to content


Photo

Issue #146- Xenolook Widgetset


  • Please log in to reply
36 replies to this topic

#1 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 08 July 2005 - 02:27 AM

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:
Attached File  buttons.png   7.04K   193 downloads
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:
Attached File  WindowsLook.png   7.73K   143 downloads

Now a little tiny elements needed:
Attached File  elements.png   5.48K   107 downloads
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:
Attached File  WindowsLook.png   7.73K   143 downloads
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 onto 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 tileable 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 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).

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, 14 July 2005 - 05:40 AM.

Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#2 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 08 July 2005 - 05:50 AM

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.

#3 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 08 July 2005 - 02:15 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.

<{POST_SNAPBACK}>

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

too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image


#4 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 08 July 2005 - 03:33 PM

ok think I got everything now :)

#5 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 08 July 2005 - 04:21 PM

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, 08 July 2005 - 04:36 PM.

Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#6 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 14 July 2005 - 05:35 AM

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

Attached File  xenolook_button.png   33.2K   112 downloads

I'm attaching PSD to Issue #146.

Guyver

EDIT: that upper sliced button is just my base. What's below are actual button images

Edited by guyver6, 14 July 2005 - 05:57 AM.

Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#7 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 14 July 2005 - 05:42 AM

looks good but it's got a black background.... do we need these on transparnt PNGs?

#8 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 14 July 2005 - 05:58 AM

I've just corrected that. PSD has that background in a layer so shouldn't be problem anyway.

Guyver
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#9 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 14 July 2005 - 11:54 AM

Darn, that was hard, but...
Attached File  screenshot_0614105_195045505.jpg   37.35K   111 downloads

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
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#10 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 14 July 2005 - 12:12 PM

Hopefully this project will wrap up by friday and I'll be able to get this done for you.

#11 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 14 July 2005 - 03:16 PM

Sorry I'm posting again, but take a look at scalability:
Attached File  scalability.jpg   45.95K   109 downloads

Button knows what to do, you only have to set up size. Falagard RoX :D

Edited by guyver6, 14 July 2005 - 03:17 PM.

Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#12 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 14 July 2005 - 04:53 PM

Sorry I'm posting again, but take a look at scalability:
Attached File  scalability.jpg   45.95K   109 downloads

Button knows what to do, you only have to set up size. Falagard RoX :D

<{POST_SNAPBACK}>


why is there no padding for the text on the right side of the button?

#13 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 14 July 2005 - 06:35 PM

I'm having problems with text placement, but i'll try to fix this. It's still work-in-progress, those .looknfeel files are really hard to write by hand (that's why I really don't like XML).
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#14 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 23 July 2005 - 10:54 AM

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

BEFORE
Attached File  screenshot_0623105_184900286.jpg   26.69K   123 downloads
AFTER
Attached File  screenshot_0623105_184957092.jpg   22.53K   114 downloads

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

Guyver
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#15 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 23 July 2005 - 01:04 PM

What's the status of the rest widgets images? (scrollbar, window)
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#16 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 23 July 2005 - 10:54 PM

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.

#17 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 24 July 2005 - 05:00 AM

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.
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#18 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 31 July 2005 - 12:47 PM

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.

Attached Files



#19 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 06 August 2005 - 02:56 AM

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 ;) )

Attached Files


Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#20 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 06 August 2005 - 09:13 AM

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, 06 August 2005 - 09:15 AM.


#21 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 07 August 2005 - 04:16 AM

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).
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#22 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 07 August 2005 - 05:20 PM

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.

#23 guyver6

guyver6

    Captain

  • Xenocide Programming Department
  • 599 posts

Posted 08 August 2005 - 02:50 PM

Don't worry about "interesting" look. The goal of UI is to ease interaction with a game, and that's what we should design UI for, not for "interesting" look :D
Posted Image
Sourceforge: guyver6
LinkedIn: Andrzej Haczewski
"A good business idea, they say, can be explained in one sentence. Similarly, each program entity should have one clear purpose."

Join #xenocide at irc.freenode.net.

#24 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 08 August 2005 - 04:17 PM

The interface should be usable as well as aesthetically please or I have failed my job.

#25 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 24 August 2005 - 09:37 AM

Any updates on this?

too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image


#26 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 24 August 2005 - 01:00 PM

not yet. I haven't died, it'll be a bit longer.

#27 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 24 August 2005 - 06:35 PM

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?

Attached Files


Edited by Vaaish, 24 August 2005 - 06:36 PM.


#28 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 25 August 2005 - 07:38 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?

<{POST_SNAPBACK}>

Thanks, I'll have a look at it later.

You mean this?

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).

Also, when you can, whip up some graphics for the Slider widget. The standard one looks veeery ugly resized for horizontal use :P

too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image


#29 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 25 August 2005 - 07:56 AM

ok separate greenscreen for planetview, and get horizontal slider widgets made.... got it.

#30 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 25 August 2005 - 02:22 PM

Hmmm, could you put up a picture of how the window is supposed to look like all put together?

too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image


#31 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 25 August 2005 - 06:13 PM

ok here is the planetview sceen w/o the greenscreen lines on it, and the jpg of the window pieces joined

Attached Files



#32 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 27 August 2005 - 01:26 PM

Behold, it's... a resizable window!

Attached Files


too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image


#33 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 27 August 2005 - 02:08 PM

cool... all that leaves is the horizontal slider.

#34 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 28 August 2005 - 05:11 PM

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 :)

Attached Files


Edited by Vaaish, 28 August 2005 - 05:12 PM.


#35 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 29 August 2005 - 08:34 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 :)

<{POST_SNAPBACK}>

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).

Attached Files


Edited by SupSuper, 29 August 2005 - 08:35 AM.

too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image


#36 Vaaish

Vaaish

    Artwork Department

  • Xenocide Inactive
  • 1,625 posts

Posted 29 August 2005 - 09:11 AM

yeah give me a bit on that, it's not as presing as some other stuff.

#37 SupSuper

SupSuper

    Programming Department

  • Xenocide Programming Department
  • 2,418 posts

Posted 02 September 2005 - 08:10 PM

Btw, is there a concept for the combobox's dropdown list? (list of items that shows up when you click on the arrow). Because it looks kinda odd with the default TaharezLook one.

too bad, now you will never know the ancient secrets of supsupers long gone avatar ;)

Posted Image