Topic: How To Setup Rotating Menu...? (Read 1105 times)

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 ?

BenJeremy · « **Reply #1 on:** January 21, 2004, 02:52:00 AM »

QUOTE (Yuyu @ Jan 20 2004, 11:38 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)
(IMG:http://YuYu.home.mchsi.com/Files/rotatingmenu.png)
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 ?

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 <

Yuyu · « **Reply #2 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...

geniusalz · « **Reply #3 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.

Yuyu · « **Reply #4 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... <

yourwishismine · « **Reply #5 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++.

<

geniusalz · « **Reply #6 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.

BenJeremy · « **Reply #7 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. <

geniusalz · « **Reply #8 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. <

BenJeremy · « **Reply #9 on:** January 21, 2004, 06:12:00 PM »

QUOTE (geniusalz @ Jan 21 2004, 08:26 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.

Yes, I was thinking about doing this. <

Yuyu · « **Reply #10 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?) <

yourwishismine · « **Reply #11 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: <

Yuyu · « **Reply #12 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

<

flattspott · « **Reply #13 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. <

BenJeremy · « **Reply #14 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.
<

Author Topic: How To Setup Rotating Menu...? (Read 1105 times)