Possible CMS

[RageMage 5]

I started thinking about the menu system I would use in my game and I decided on something similar to the Secret of Mana style menu using a ring around the character, however my plan was to "lay it down" to look more along the lines of a halo that fades behind the lead character. Any thoughts on this or advice on the steps I could take to do this, all help is appreciated.

 

Edit: I should have taken the time to mention that I'm doing this in RMXP and not RMVX.

(I don't really like VX because it limits the size of sprites unlike XP, I would probably change how I feel about VX if I knew how to fix this problem as it is the only thing that bothers me.)

 

Got a sketch of the planned rings:

Will look something like this when it's completed and working.

Edited January 5, 2012 by RageMage

[kellessdee 48]

Are you looking for a script like this, or looking for how to do it?

I can actually provide you with a bit of both.

 

First, I'll explain the math a bit. You remember trigonometry? If you do, it will help. If not, that's okay -- you just need the basic concepts anyways.

 

So to create a menu like this, we essentially need to be able to plot points on a circle, evenly distributed, to position our menu items and we need to be able to rotate those points.

To do this, we need a couple of things (luckily, when working with a menu, we generally already know or at least can acquire these)

1. The circle's center point x, y

2. The circle's radius

 

So how do we plot the points? Well, we know a circle is made up of 360 degrees of rotation (think like a compass, you start out at one line segment (0, 0) -> (0, radius) (or something) and rotate that line 360 degrees, and the end points would define the boundaries of that circle)

So, we can set a "section" of the circle (or piece of the pie, if you will) for each menu item. We can refer to each piece, as being a portion of 360 degrees. So, say you have 8 menu items, each item would get their own 45 degree section - 0, 45, 90, 135, 180, 225, 270, 335, respectively.

Now, we need to find their specific points on that circle. We can think of each point on a circle's circumference as being the end point of a line from the center of the circle -> the edge of the circle. In a circle, we know that each point must be an equal distance from the center -- the distance/length being the radius of course.

So let's look at the very bottom point. Assuming the circle's center is the origin (0, 0), we know that this would be (0, radius), and in a 90 degrees (clockwise) rotation, the next point would be (-radius, 0).

But how do we calculate that rotation?

Well, the rotation of a line segment (or vector) is calculated as so:

x = cos(angle) * length
y = sin(angle) * length

in this case, the length would be the circle's radius. Now, this would assume we are rotating this line around the origin (0, 0), so to apply this to rotating around a specific point, we would just shift the origin over to the center point of rotation (in this case the center of the circle)

x = cos(angle) * length + cx
y = sin(angle) * length + cy

cx being the center's x and cy being the center's y.

As a forewarning, since we are referring to applying this to a game, in most programming languages (that I know of, anyways), the built in sine/cosine functions take the angle in radians rather than degrees. If we need to convert to radians, the formula is:

radians = degrees * PI/180

So, some pseudocode:

set rotation step to 360 / number of menu items
for each step in rotation from 0 to 360
 get rotation in radians
 set x to cos(radians) * radius + center x
 set y to sin(radians) * radius + center y

Then we can easily draw each item at that specific position. Or, you could even just go through each menu item:

for each menu item
 set rotation to (360 / number of menu items) * current index of menu item
 get rotation in radians
 set x to cos(radians) * radius + center x
 set y to sin(radians) * radius + center y

 

You'll probably want to save the "step" (degree increments) value, for if you wish to rotate each item in an animation, then you can simply add x degrees of rotation to the item from 0 to the maximum rotation step and calculate that intermediary position each frame (until it reaches it's destination)

 

With those basics, we can apply this to the halo scenario as well -- in a 2D environment, a "halo" as you described is simply just an elongated circle (or ellipse). The difference between an ellipse and a circle, is mainly that an ellipse has 2 radii - a width or x radius and a height or y radius. So, calculating the points would be slightly different:

x = cos(angle) * x_radius + cx
y = sin(angle) * y_radius + cy

 

Then, the only thing you have to ensure, is that the items "behind" the player are drawn underneath the player (using the z component) -- at this point you could even apply some zooming techniques, to give it a pseudo-3d feel.

 

Important Note: In standard math, 0 degrees/radians points right (or east), if you want to convert degrees to radians where 0 is north, simply "shift" the degrees part to where you want it, before converting.

So, to get 0 to be north, we need to subtract 90 degrees and then convert: (degrees - 90) * PI / 180.

Likewise, if you want 0 to be south, we need to add 90 degrees and then convert: (degrees + 90) * PI / 180

 

Now, if you wanna see this actually applied somewhere:

http://www.rmxpunlimited.net/resources/scripts/item/ring-menu-vx?category_id=10

http://xrpg2.clicdev.com/f/index.php?showtopic=111

 

(I used to know one that was REALLY good, extensible and included the "halo" effect you described, with proper zooming/z-ordering...if I find it again, I'll let you know)

 

Hope this helps, or at least gets you on the right track :D

[RageMage 5]

Thanks kellessdee that helps a lot, I'm really looking forward to working on this since it will be my first actual "elaborate" RGSS script. Thanks for actually taking the time to explain it.

 

Minor update:

I have decided to take the idea to essentially the next level and set it up as a dual ring menu system, one ring to choose a group of options like bag -- character -- skills -- settings and under each of these have a new ring crossing the main ring containing the options in each category.

 

 

I've pretty much figured out how to make that work now I just have to do it.

Edited January 4, 2012 by RageMage

[kellessdee 48]

Hey no problem. I'm glad it made sense, and wasn't just more inane rambling...

 

also, I really like your take on the ring menu, that sounds like a really neat approach!

[RageMage 5]

Hey no problem. I'm glad it made sense, and wasn't just more inane rambling...

 

also, I really like your take on the ring menu, that sounds like a really neat approach!

 

To tell the truth I had gotten the idea from watching some of the videos on your youtube channel.

Can't remember which video it was.

Edited January 5, 2012 by RageMage