xboxscene.org forums

OG Xbox Forums => Official MediaXMenu (MXM) Forum => Dashboard Forums => MXM WIP Beta forum => Topic started by: Yuyu on January 20, 2004, 07:38:00 PM

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 20, 2004, 07:38:00 PM

OK I have looked at the WIP test skin on my Xbox' several times, I then tryed to study the Skin.xml for a better understanding of how it works, but with no luck....

How would I make a menu that looks like the pic below(yes with it going a bit behind the image at the bottom) and then make it look like it is rotating like a whell on its side, I saw that it did this in the test skin, but like i said I can't do it. Maybe my brain's fried from these first couple weeks back to school ? (My professor's are pounding our brains more than usual)
user posted image

If you could maybe just show me how the main item and the one on the left and right, and the bottom one behind the image is done, and I could get it from there ?

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 21, 2004, 02:52:00 AM

QUOTE (Yuyu @ Jan 20 2004, 11:38 PM)

The test skin in the latest "WIP" build has a good example, and includes the "tweening" modifier to make things move smoothly.

This post has been edited by BenJeremy: Jan 21 2004, 10:52 AM <

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 21, 2004, 06:48:00 AM

BJ I said I looked at the Test Skin with the wip

QUOTE

OK I have looked at the WIP test skin on my Xbox' several times, I then tryed to study the Skin.xml for a better understanding of how it works, but with no luck....

I don't get it... Thats why I said that I needed someones help in seeing how it was setup, so if maybe like I said before, someone could just post the positioning of the Main and 2 side elements, and the bottom element behind the image, I could understand from there, or maybe you could just edit the test skin.xml for me so that the text is not "Z" pointed and it only has the menu on it ? I'll try agin to figure it out, but still unsure of how to do it...

Title: How To Setup Rotating Menu...?
Post by: geniusalz on January 21, 2004, 10:06:00 AM

Check out this tool I wrote to get zpoint tags easily.
As usual, vb runtimes are required.

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 21, 2004, 11:57:00 AM

I guess no one understands that I don't get it...
I don't get how to stup the items even if I had the Z points...
I don't want the text to be angled or anything like in the test skin, I want it to just sit there "flat" on the screen in its position until the person moves to the next menu item, which would make it look like the menu was rotatingbecause of the placement of the items and the "tweener" effect... So if I knew WTF to do for just the main item and the one on the left and right, I could grasp the concept from there... <

Title: How To Setup Rotating Menu...?
Post by: yourwishismine on January 21, 2004, 12:06:00 PM

QUOTE (geniusalz @ Jan 21 2004, 02:06 PM)

Check out this tool I wrote to get zpoint tags easily.
As usual, vb runtimes are required.

Damn genuisaltz,

you should stop coding in VB and use a real language like C++. :P <

Title: How To Setup Rotating Menu...?
Post by: geniusalz on January 21, 2004, 11:12:00 AM

Why spend an hour doing something when it can be done in 5 mins?

As for the menu:

Here's the points being used:

QUOTE

And here's the text elements used to make a menu:
      <LayoutElement Type="Text" Source="CGTitle" Section="-1">
         <TextColor>0xD4FFFFFF</TextColor>
         <Pos ZPoints="MenuP1" L="107" T="238" W="205" H="52" />
         <Scaling Y="True" X="false" />
         <Proportional>true</Proportional>
         <Modifier Type="Tweener">
         <Source>MenuScroll</Source>
         <Ease>Both</Ease>
         <Next>Menu0</Next>
         <Prev>MenuP2</Prev>
         <PrevColor>0xA8FFFFFF</PrevColor>
         <NextColor>0xFFFFFF00</NextColor>
         </Modifier>
         <XPos L="126" T="151" W="132" H="27"/>
      </LayoutElement>
      <LayoutElement Type="Text" Source="CGTitle">
         <TextColor>0xFFFFFF00</TextColor>
         <XPos L="136" T="183" W="183" H="52"/>
         <Pos ZPoints="Menu0" L="107" T="238" W="205" H="52" />
         <Scaling Y="True" X="false" />
         <Proportional>true</Proportional>
         <Modifier Type="Tweener">
         <Source>MenuScroll</Source>
         <Ease>Both</Ease>
         <Next>MenuN1</Next>
         <Prev>MenuP1</Prev>
         <PrevColor>0xD4FFFFFF</PrevColor>
         <NextColor>0xD4FFFFFF</NextColor>
         </Modifier>
         <IsMenu Wrapped="true" Horizontal="false">true</IsMenu>
      </LayoutElement>
      <LayoutElement Type="Text" Source="CGTitle" Section="1">
         <TextColor>0xD4FFFFFF</TextColor>
         <Pos ZPoints="MenuN1" L="107" T="238" W="205" H="52" />
         <Scaling Y="True" X="false" />
         <Proportional>true</Proportional>
         <Modifier Type="Tweener">
         <Source>MenuScroll</Source>
         <Ease>Both</Ease>
         <Next>MenuN2</Next>
         <Prev>Menu0</Prev>
         <PrevColor>0xFFFFFF00</PrevColor>
         <NextColor>0xA8FFFFFF</NextColor>
         </Modifier>
         <XPos L="123" T="210" W="186" H="32"/>
      </LayoutElement>

The rest should be self-explanatory

Whenever you define a 'section' attribute, it gets the next or previous title, as opposed to the current title. So your menu is really a bunch of text elements showing titles with 'section' as -2, -1, 0, 1, 2
Negative is previous, positive is next, 0 is current. You don't need to say section="0" because that's the default.

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 21, 2004, 04:19:00 PM

Yes, ZPoints can be a bit daunting.... the idea is that ZPoints are 3-D coordinates, and an element can be comrpised of 3 or more of these points (yes, even complex shapes). They include texture coordinates, which determines how the image or text is mapped to the resulting shape.

In the simplest format, you can merely define 4 ZPoints in a square and forget the complicated 3-D stuff.

I made these named sets primarily to make it easier for various elements to "share" these sets of points for tweening operations. These allow you to smoothly transition between two different locations when the menu selection is changed, for example. <

Title: How To Setup Rotating Menu...?
Post by: geniusalz on January 21, 2004, 05:37:00 PM

You could support a simplified version, like so:

<PointSetName>
<Rectangle x="50" y="50" h="10" w="100" rotate="50" />
</PointSetName>

Which will just display the element rotated 50 degrees clockwise, using the x and y values as the pivot.

This could also be specified in the pos tag. <

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 21, 2004, 06:12:00 PM

QUOTE (geniusalz @ Jan 21 2004, 08:26 PM)

Yes, I was thinking about doing this. <

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 21, 2004, 08:25:00 PM

Wow, thanks for holding my hand geniusalz, I was scared to cross the street without you, you deserve a good samaritan award... But seriously I now do understand, plus with the addition of BJ's post I understand how to make 3-D elements (like you could make a sphere out of a ton of small triangles that looks like the Epcot center, imagine having somthing like that on a small scale tweening around the screen, that'd be sweet huh?) <

Title: How To Setup Rotating Menu...?
Post by: yourwishismine on January 22, 2004, 02:12:00 AM

QUOTE (Yuyu @ Jan 21 2004, 11:14 PM)

(like you could make a sphere out of a ton of small triangles that looks like the Epcot center, imagine having somthing like that on a small scale tweening around the screen, that'd be sweet huh?)

Yep.. and just think of all the great game playing time that you would have just wasted making that skin... Come on man, get of the skins, get in the game...
:lol: <

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 22, 2004, 07:12:00 AM

OK I can't get the text to be centered between the z points, how do achieve this ?

Seems as though it will only line up from the far left of the box I create ....also... the two lines below, what do they do ? I have changed them to many different things and it does not seem to matter because the only thing the text seems to go by is the zpoints I created for it...

CODE

Title: How To Setup Rotating Menu...?
Post by: flattspott on January 22, 2004, 11:33:00 AM

Z N TU TV ... I know what L T W an H but what are those for? More specifically, what do they stand for? Like L = Left, T = Top, etc, ect. <

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 22, 2004, 05:58:00 PM

QUOTE (flattspott @ Jan 22 2004, 02:22 PM)

Z N TU TV ... I know what L T W an H but what are those for? More specifically, what do they stand for? Like L = Left, T = Top, etc, ect.

Z: Position in the Z axis (depth) - 0.0 to 1.0, generally
N: "Normal" - defailts to 1.0, use this unless you understand vectors and how these can be used to properly "warp" and image texture.
TU: Texture "X" value. 0.0 is the left side, 1.0 is the right side.
TV: Texture "Y" value. 0.0 is the top, 1.0 is the bottom.

So, at each point, you can determine the exact placement of the image or text at a specific point.
<

Title: How To Setup Rotating Menu...?
Post by: geniusalz on January 22, 2004, 05:41:00 PM

Bump: read yuyu's post

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 22, 2004, 06:08:00 PM

Oh... yeah.... if you use ZPoints, that supercedes any "old style" positional points you set.

Basically, an "either-or"

I'll be doing a bit more finetuning on it once I get the UI stuff in place (turning out to be more involved than I thought)

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 22, 2004, 06:15:00 PM

OK say I have a recatngle on a skin I want the text to stay in, and I map out the Zpoints so that they are the same as the rectangle, the text always is justified from the left... I want it to be able to be centered so that I can have the text rotate into that rectangle and looked centered, because shorter filenames look like they are off to the left inside the rectangle, where as longer names of course fit perfect inside of it... How can I change this ? Because if I change the left side so that shorter text looks like it is centerd, the longer text then looks like it is off to the right when it is displayed....

Title: How To Setup Rotating Menu...?
Post by: flattspott on January 22, 2004, 06:46:00 PM

QUOTE

Thanks for the info. I'm gonna go add it to my WIP MXM Bible.

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 23, 2004, 02:01:00 AM

QUOTE (Yuyu @ Jan 22 2004, 10:15 PM)

Well, there are currently some issues with the text elements, which I have to revisit, as I said, with some more finetuning.

I will be working on it soon. System UI comes first.

Title: How To Setup Rotating Menu...?
Post by: Yuyu on January 23, 2004, 06:49:00 AM

Yeah take your time I just did not know if there was a way to fix it yet.... One thing I have noticed though, is I have my menu setup with the same stuff as your like proportional=True, scaling y=true x=false, and what not... For some reason when I scroll through the menu, the text is very big taking up the whole zpoint space at first, then it goes to a medium size finally shrinking toan even smaller size... Whats going on there ?
I don't get it... Anyways, I'll see what happens later tonight when I add all the text elements I want to have for the menu and hopefully have a WIP ScreenShot of the skin I am working on..

I'll post up my Skin.xml also when its as good as I can get it, and see if someone can pint me in the right drection (if I don't figure out how to make it look right on my own)

Title: How To Setup Rotating Menu...?
Post by: BenJeremy on January 23, 2004, 07:23:00 AM

QUOTE (Yuyu @ Jan 23 2004, 10:49 AM)

Yes, that's one of the things I need to fix. It's actually a simple problem... the texture created for the text element is rebuilt when a larger text item is used, but never when a smaller item is used. It's basically some internal tweaking I need to do to fix it.