Gw Temp


Tutorial - 'User-Friendly CMS scrolling' by Jerm

An item about RPGMaker 2000 posted on


Making a user friendly CMS scroller is now avaliable to you in tutorial format, so that you too, can make a one!


User Friendly CMS: Scrolling
A CMS (Custom Menu System) is a sometimes fun, always time-consuming addition to a game to keep it from being too generic. Or in many cases, people create one to see if--or just because--they can. But oftentimes small problems arise in that they can look great but move like octogenarians having sex. This tutorial and those that may or may not follow will pick up on a few missing details that can help with navigating your CMS and make it more user-friendly.

This edition will show you how to have a cursor that scrolls continuously if you hold an arrow key down. It's a small detail to be sure, but you'd be amazed the difference it can make when your list of variable-based items reaches 50+ and mid-game you want to use item #25. I'd much rather hold the key once for a couple of seconds than press it 24 times.

So let's get to the basics. Almost predominantly, this is what the skeleton of a menu system looks like (this is RM2k3, incidentally):

(1) Loop
(2) Move Picture: 1, (V[X],V[Y]), 0.1 Sec (No Wait)
(3) Key Input Proc: [PASSWORD] (1,2,3,4,5,6) (Wait)
(4) Branch if Var [PASSWORD] is 1
[insert code here for moving cursor down]
(5) Branch if Var [PASSWORD] is 2
[insert code here for moving cursor left]
(6) Branch if Var [PASSWORD] is 3
[insert code here for moving cursor right]
(7) Branch if Var [PASSWORD] is 4
[insert code here for moving cursor up]
(8) Branch if Var [PASSWORD] is 5
(9) Branch if Var [PASSWORD] is 6
(10) End Loop

If this doesn't look familiar, it might be because I've numerated it for easier callback (for later on) and tacked on some important details. If it still doesn't look familiar, you've probably jumped the gun reading this tutorial first.

Simply put, you enter a key in line (3). It translates the key you pressed into a number (up=4, down=1, left=2, right=3, Enter or Z=5, Esc or X=6) and stores it as a variable (I call the variable PASSWORD as a habit back from RM2k). Based on the number, six things can happen, called up by lines (4)-(9). Generally, a CMS will have up, down, left, or right move the cursor up, down, left, or right. And that's the philosophy this tutorial will follow. Ignore 5 and 6 this time around, they aren't needed. After this, line (10) sends it back to line (1) and line (2) will move the picture (your cursor) to it's new destination.

Now using this, if you hit up and hold it, the cursor will scroll up once. And then stop. Hold the button down for as long as you want, it's not going to budge again until you release and press again. This is because line (3) has a (Wait) at the end. But if you try to circumvent this and uncheck the Wait box, then instead it will fly right by line (3) and you'd have to be holding the button down at the specific time to manage to catch it. One way is too slow, the other is too fast.

So now to use both options to create a balance. Below is the skeleton of what the new script will look like when you're done. I will explain each line and what it does afterwards.

(1) Loop
(2) Move Picture: 1, (V[X],V[Y]), 0.1 Sec (No Wait)
(3) Variable Oper: [PASSWORD] Set, 0
(4) Wait: 0.1 Sec
(5) Key Input Proc: [PASSWORD] (1,2,3,4) (No Wait)
(6) Branch if Var [PASSWORD] is 1 or more
(6.1) Branch if Switch [CURSOR PAUSE] is OFF
(6.11) Switch Operation: [CURSOR PAUSE] ON
(6.12) Variable Oper: [PASSWORD] Set, 0
(6.13) Wait: 0.2 Sec
(6.14) Key Input Proc: [PASSWORD] (1,2,3,4) (No Wait)
(6.2) Jump to Label: 1
(7) Key Input Proc: [PASSWORD] (1,2,3,4,5,6) (Wait)
(8) Switch Operation: [CURSOR PAUSE] OFF
(9) Label: 1
(10) Branch if Var [PASSWORD] is 1
[insert code here for moving cursor down]
(11) Branch if Var [PASSWORD] is 2
[insert code here for moving cursor left]
(12) Branch if Var [PASSWORD] is 3
[insert code here for moving cursor right]
(13) Branch if Var [PASSWORD] is 4
[insert code here for moving cursor up]
(14) Branch if Var [PASSWORD] is 5
(15) Branch if Var [PASSWORD] is 6
(16) End Loop

And it only took 12 more lines of code. Now let's get into the details.

Line (1) is self-explanatory. It's a bookend along with (16). Line (2) we've covered already, but (3) is new. Its purpose is to reset the Var:[PASSWORD] variable because in line (5), it's not going to wait for you to press a button. If you were to leave the variable as is, it would read it as the last button you pressed, whether you were still holding that button or not.

Line (4) is used to keep the code from outrunning the cursor's movement when you hold the button down since there's no wait for cursor movement in line (2). By separating picture movement and the Wait feature, you can allow the code to keep reading WHILE the cursor moves until you want it to stop.

Line (5) is the first Input point. As it has (No Wait), it will only activate if you're holding an arrow key down. If you don't, then Var:[PASSWORD] will stay at 0 as per line (3).

But if you did hold the button down, line (5) will designate Var:[PASSWORD] a number. Now line (6) comes up and reads it. If it's 0, it will ignore everything within the entire (6.?) and (6.??) branches. If not, we're off to the races.

Line (6.1) is called (.1) because it's within the (6) branch. Just to make that known. This section is a little more complicated. The Switch:[CURSOR PAUSE] switch is meant to activate or deactivate a small .2 second pause in line (6.13). Why? Mark your spot and go to the top of this tutorial and hold the arrow key down. Unless you're using an inferior browser, you'll have noticed the screen move once, pause briefly, THEN start scrolling. A little jump start before the breakaway. This is to create a little leeway for people who don't intend to hold the button down, but unfortunately have slow, clumsy fingers (and when applicable: unhappy girlfriends).

Anyway, Switch:[CURSOR PAUSE] will only be on when the game is sure someone is holding a button down with intent to scroll (line (6.11)). As such, it will switch back off when you release the key. This will set Var:[PASSWORD] back to 0 in line (3), thus causing you to skip line (6.2) in the line (6) branch and happily travel to line (8) and turn Switch:[CURSOR PAUSE] off. You get all that?

Line (6.11), now that it has been mentioned already earlier, simply turns on Switch :[CURSOR PAUSE] so there will be no .2 sec gap in line (6.13). This enables smooth scrolling.

Line (6.12) is similar to line (3), it sets Var:[PASSWORD] back to 0 again so line (6.14) can double-check if the person had merely tapped the button a split second too long or of they truly do intend to do some serious scrolling.

Line (6.13) is that 0.2 second gap I just spent a big paragraph and a small paragraph talking about. It merely creates a gap between the first movement when you hold the button and the actual scrolling motion.

Line (6.14) is to line (5) as line (6.12) is to line (3). Just a checkpoint if a person is holding the button or pressed a little too much. If the button is still held down, the variable will reset to the number it was supposed to be. If not, then line (6.12) made sure it was 0 again.

Line (6.2) will activate if line (5) registers a number over 1 (meaning the button was held). It's purpose is to jump ahead to line (9) so you skip line (7) and its wait command (you already have a password input from line (6.14) the first time around or line (5) when the scrolling begins). It also skips over line (8) because you don't want Switch:[CURSOR PAUSE] off until you've finished scrolling.

Line (7), and we're back to familiar territory. This was line (3) in the first skeleton display I created at the top of this page. Nothing new here.

Line (8) we've been over before, but more recently. It turns Switch:[CURSOR PAUSE] off, which means you released the button. So when you press it again to scroll, a fresh start begins and you get that jump, two second pause, then scrolling.

Line (9) is the recieving point from (6.2). It's placement is to skip over lines (7) and (8) for reasons already covered.

Lines (10)-(16) are just lines (4)-(10) in the first display. You should already be familiar with them.

And there we have it. No when you enter your item menu chock full of dozens of items. You can just hit the down key, hold it, and watch the cursor blow through the list much more rapidly than tapping the key repeatedly. Or if tapping is still faster, at least it's not as hard on your wrist.

Extra Notes:

1. There are three points in that final display where it asks for a keypress (Key Input Proc). The first two should only have #'s 1-4 checked. Those are the keys used with cursor movement, the others don't need to have a "scrolling" feature.

2. The [X] and [Y] variables in line (2) are of course the X and Y coordinates used to pinpoint where your cursor picture will be centered. A staple of the CMS.

3. If you're using an :Else Handler for the "If Var:[PASSWORD] is 1-6" Branches, by all means keep it. But they're not necessary if every option is accounted for with its own branch.

4. If the event page is already using a #1 Label, by all means change the one above. This is also why I didn't bother to number the variables or switch. It'd change between different games anyway.

5. To head off any story requests before they begin, I haven't actually seen octogenarians have sex. I'm just pretty sure it's the CSPAN of dalliances.

6. I could probably count on a cartoon character's hand the number of games that have a large enough CMS to put this to use. But still, I hadn't seen anything on the subject so I thought I might as well.