Cycling Menus

By xx1MAn1RIOTxx
Copied from

I typed most of this up in response to a question regarding attribute points, but I have seen a few other topics that may benefit from this so I decided to expand it a little and share it. This is the Kode that I use for the majority of my menus/skill trees in my games. I know there are other, less copy and paste heavy methods out there, but I find that this is a good start. Please feel free to correct something if you see a mistake.

Okay, a little Kode heavy but pretty straight forward.

We’ll start by setting up a boolean variable to turn the menu on and off.

W;) (D-pad)(left)(pressed)
—> W;) (started to) D;) (toggle)(attribute menu)

For this example, we are adding attribute points to three attributes, strength, speed and hitpoints. For this we will need to turn these attributes into number variables. We will also need to track the number of attribute points we have available. We will use these for our example.

W;) (once)
—>D;)(num. variable strength)(=)(0)

—>D;)(num. variable speed)(=)(6)

—>D;)(num. variable hitpoints)(=)(80)

—>D;)(num. variable attribute points)(=)(0) //For testing this should be raised. Normally this will be incremented by XP and start at 0.

From here on, all lines should fall under:

W;)(attribute menu)(equal to)(true)

Now that we have our menu boolean, the first thing you want to do is set up the display element. Make the display where you want it in you pause menu. There are several ways of going about this. You can make individual vector variables using the x and y coordinates, but for HUD elements I like to use a different method.

W;) D;) (display)(text; strength)(at screen position)(zero)(plus)(world up)(multiplied by)(.1)

I like this method because it keeps the position limited to one line. If you prefer to use variables, you can do it this way.

W;) D;) (vector variable 1)(position)(x)(=)(0)
W;) D;) (vector variable 1)(position)(y)(=)(.1)
W;) D;) (display)(text; strength)(at screen position)(vector variable 1)

You should end up with something like this.

W;)(attribute menu)(equal to)(true)

—> W;) D;) (display)(text; strength)(plus)(num. variable strength)(at screen position)(zero)(plus)(world up)(multiplied by)(.1)(opacity)(num. variable opacity 1) NOTE: All one line

—> W;) D;) (display)(text; speed)(plus)(num. variable speed)(at screen position)(zero)(opacity)(num. variable opacity 2)

—> W;) D;) (display)(text; hitpoints)(plus)(num. variable hitpoints)(at screen position)(zero)(plus)(world down)(multiplied by)(.1)(opacity)(num. variable opacity 3) NOTE: All one line

This part is optional but makes things look nicer.

W;) (attribute points)(greater than or equal to)(1)
—> D;) (display)(plus symbol)(at screen position)(zero)(plus)(world up)(multiplied by)(.1)(plus)(west)(multiplied by)(.15)
—> D;) (display)(plus symbol)(at screen position)(zero)(plus)(west)(multiplied by)(.15)
—> D;) (display)(plus symbol)(at screen position)(zero)(plus)(world down)(multiplied by)(.1)(plus)(west)(multiplied by)(.15)

This makes it so that a plus symbol only appears next to each attribute when the player has one or more attribute points to spend. To display the number of attribute points you can add a line like this.

—> W;) D;) (display)(text; Attribute Points: )(plus)(num. variable attribute points)(at screen position)(zero)(plus)(world up)(multiplied by)(.2)

The next thing you need to do is make a scroller to select the attributes. For this example I will make a scroller for three selections.

W;) (once) D;) (num. variable attribute select)(=)(1)
W;) (num. variable attribute select)(equal to)(0) D;) (num. variable attribute select)(=)(3)
W;) (num. variable attribute select)(equal to)(4) D;) (num. variable attribute select)(=)(1)
W;) (D-Pad)(down)(pressed)
—>W;)(started to)
——> D:) (play sfx)(UI swipe)
——>W;) D;) (num. variable attribute select)(increment by)(1)
W;) (D-Pad)(up)(pressed)
—>W;)(started to)
——> D:) (play sfx)(UI swipe)
——>W;) D;) (num. variable attribute select)(decrement by)(1)

This allows us to cycle through all of our three selections using the D-pad. Notice that d-pad down results in an increment of our selection variable. This is because selection 1 is at the top of our page and selection 3 is at the bottom.

Now we need to assign our attributes to a selection number.

W;) (num. variable attribute select)(equal to)(1)
—> W;) D;) (num. variable opacity 1)(=)(1)
—> W;) (else) D;) (num. variable opacity 1)(=)(.7)
—> W;) (attribute points)(greater than)(0)
——> W;) (A button)(Pressed)
———> W;) (started to)
————> D:) (play sfx)(UI select)
————> D;) (strength)(increment by)(1)
————> D;) (attribute points)(decrement by)(1)

W;) (num. variable attribute select)(equal to)(2)
—> W;) D;) (num. variable opacity 2)(=)(1)
—> W;) (else) D;) (num. variable opacity 2)(=)(.7)
—> W;) (attribute points)(greater than)(0)
——> W;) (A button)(Pressed)
———> W;) (started to)
————> D:) (play sfx)(UI select)
————> D;) (speed)(increment by)(1)
————> D;) (attribute points)(decrement by)(1)

W;) (num. variable attribute select)(equal to)(3)
—> W;) D;) (num. variable opacity 3)(=)(1)
—> W;) (else) D;) (num. variable opacity 3)(=)(.7)
—> W;) (attribute points)(greater than)(0)
——> W;) (A button)(Pressed)
———> W;) (started to)
————> D:) (play sfx)(UI select)
————> D;) (hitpoints)(increment by)(15)
————> D;) (attribute points)(decrement by)(1)

This is where all the action happens. You can repeat these segments as many times as needed to expand your menu, just remember to increase you cycling numbers to match. The opacity variables and sfx are optional but recommended. Let me know if I missed anything and I hope this is helpful.

Let me know if you guys find this useful and I will make more.

Comments are closed.

Website Powered by

Up ↑

%d bloggers like this: