Jump to content


Photo

How To Setup Rotating Menu...?


  • Please log in to reply
21 replies to this topic

#1 Yuyu

Yuyu

    X-S Spirit Detective

  • Moderator
  • PipPipPipPipPip
  • 1,231 posts
  • Location:Belleville, IL
  • Interests:Football (Soccer) ... Umm, Xbox?
  • Xbox Version:v1.1
  • 360 version:v2 (zephyr)

Posted 21 January 2004 - 03:38 AM

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 ?



#2 BenJeremy

BenJeremy

    X-S Elysian

  • Head Moderator
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 9,690 posts
  • Xbox Version:v1.1
  • 360 version:v1 (xenon)

Posted 21 January 2004 - 09:41 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)
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 ?

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

Edited by BenJeremy, 21 January 2004 - 09:41 AM.


#3 Yuyu

Yuyu

    X-S Spirit Detective

  • Moderator
  • PipPipPipPipPip
  • 1,231 posts
  • Location:Belleville, IL
  • Interests:Football (Soccer) ... Umm, Xbox?
  • Xbox Version:v1.1
  • 360 version:v2 (zephyr)

Posted 21 January 2004 - 02:48 PM

BJ I said I looked at the Test Skin with the wip cool.gif
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...

#4 geniusalz

geniusalz

    Team MXM

  • Head Moderator
  • PipPipPipPipPip
  • 1,827 posts
  • Xbox Version:v1.1
  • 360 version:unknown

Posted 21 January 2004 - 06:06 PM

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

#5 Yuyu

Yuyu

    X-S Spirit Detective

  • Moderator
  • PipPipPipPipPip
  • 1,231 posts
  • Location:Belleville, IL
  • Interests:Football (Soccer) ... Umm, Xbox?
  • Xbox Version:v1.1
  • 360 version:v2 (zephyr)

Posted 21 January 2004 - 06:46 PM

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

#6 yourwishismine

yourwishismine

    X-S Genius

  • Members
  • PipPipPipPip
  • 890 posts
  • Xbox Version:unk

Posted 21 January 2004 - 06:55 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++. tongue.gif

#7 geniusalz

geniusalz

    Team MXM

  • Head Moderator
  • PipPipPipPipPip
  • 1,827 posts
  • Xbox Version:v1.1
  • 360 version:unknown

Posted 21 January 2004 - 07:12 PM

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

As for the menu:

Here's the points being used:
QUOTE
  <MenuP1>
  <Point X="220" Y="183" Z="1.0" N="1.0" TU="0.0" TV="0.0" />
  <Point X="342" Y="100" Z="1.0" N="1.0" TU="1.0" TV="0.0" />
  <Point X="356" Y="127" Z="1.0" N="1.0" TU="1.0" TV="1.0" />
  <Point X="233" Y="211" Z="1.0" N="1.0" TU="0.0" TV="1.0" />
  </MenuP1>
  <Menu0>
  <Point X="239" Y="231" Z="1.0" N="1.0" TU="0.0" TV="0.0" />
  <Point X="380" Y="231" Z="1.0" N="1.0" TU="1.0" TV="0.0" />
  <Point X="380" Y="266" Z="1.0" N="1.0" TU="1.0" TV="1.0" />
  <Point X="239" Y="266" Z="1.0" N="1.0" TU="0.0" TV="1.0" />
  </Menu0>
  <MenuN1>
  <Point X="234" Y="288" Z="1.0" N="1.0" TU="0.0" TV="0.0" />
  <Point X="355" Y="369" Z="1.0" N="1.0" TU="1.0" TV="0.0" />
  <Point X="341" Y="399" Z="1.0" N="1.0" TU="1.0" TV="1.0" />
  <Point X="220" Y="316" Z="1.0" N="1.0" TU="0.0" TV="1.0" />
  </MenuN1>



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.

Edited by geniusalz, 21 January 2004 - 07:14 PM.


#8 BenJeremy

BenJeremy

    X-S Elysian

  • Head Moderator
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 9,690 posts
  • Xbox Version:v1.1
  • 360 version:v1 (xenon)

Posted 21 January 2004 - 11:08 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.

#9 geniusalz

geniusalz

    Team MXM

  • Head Moderator
  • PipPipPipPipPip
  • 1,827 posts
  • Xbox Version:v1.1
  • 360 version:unknown

Posted 22 January 2004 - 12:26 AM

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.

#10 BenJeremy

BenJeremy

    X-S Elysian

  • Head Moderator
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 9,690 posts
  • Xbox Version:v1.1
  • 360 version:v1 (xenon)

Posted 22 January 2004 - 01:01 AM

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.

#11 Yuyu

Yuyu

    X-S Spirit Detective

  • Moderator
  • PipPipPipPipPip
  • 1,231 posts
  • Location:Belleville, IL
  • Interests:Football (Soccer) ... Umm, Xbox?
  • Xbox Version:v1.1
  • 360 version:v2 (zephyr)

Posted 22 January 2004 - 03:14 AM

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

#12 yourwishismine

yourwishismine

    X-S Genius

  • Members
  • PipPipPipPip
  • 890 posts
  • Xbox Version:unk

Posted 22 January 2004 - 09:01 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...
laugh.gif

#13 Yuyu

Yuyu

    X-S Spirit Detective

  • Moderator
  • PipPipPipPipPip
  • 1,231 posts
  • Location:Belleville, IL
  • Interests:Football (Soccer) ... Umm, Xbox?
  • Xbox Version:v1.1
  • 360 version:v2 (zephyr)

Posted 22 January 2004 - 02:01 PM

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
<XPos L="136" T="183" W="183" H="52"/>
<Pos ZPoints="Menu0" L="107" T="238" W="205" H="52" />




#14 flattspott

flattspott

    X-S Freak

  • Moderator
  • PipPipPipPipPip
  • 1,787 posts
  • Location:Southern California
  • Xbox Version:v1.0
  • 360 version:v1 (xenon)

Posted 22 January 2004 - 06: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.

#15 BenJeremy

BenJeremy

    X-S Elysian

  • Head Moderator
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 9,690 posts
  • Xbox Version:v1.1
  • 360 version:v1 (xenon)

Posted 23 January 2004 - 12:47 AM

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.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users