Tip #4 - A Simple but Nice-Looking Menu

This tutorial should give you some basic understanding of how to make a decent-looking menu screen. I will cover more advanced menus in later tutorials, but for now, this should give you some ideas if you have been unsure how it's done. Click on the pictures to zoom in or get a better view of them.

  • First create your aesthetic background. This isn't absolutely necessary, but it makes the menu look nicer in the end. I made a kind of morphing pattern animation. The robot which does it, like the other robots, is in the top left hand corner and is the same colour and character as the animating background, so as to be un-noticeable.
    The code for this animation robot is:
    : "loop"
char edit '„' to 130 68 130 1 16 0 1 130 68 130 1 16 0 1
wait 2
char edit '„' to 68 0 68 146 40 16 130 68 0 68 146 40 16 130
wait 2
char edit '„' to 0 1 16 40 68 40 16 0 1 16 40 68 40 16
wait 2
char edit '„' to 1 130 41 68 0 68 40 1 130 41 68 0 68 40
wait 2
goto "loop"

  • Next step is to draw your buttons, or otherwise, what the player will select choices from. I have done 3 buttons for this example.

  • I am also, just to make the large area remaining look a little more interesting, going to add a scrolling blue-ish area, as shown in the screenshot below. The blue area will scroll down constantly while the user is making his or her selection.


    The code for the scrolling blue areas is as follows:
    : "loop"
. "preserve the bottom row so we can scroll the rest down"
copy block at 9 20 for 13 1 to 0 25

. "copy the two blue blocks down 1 character lower"
copy block at 9 4 for 13 16 to 9 5
copy block at 57 4 for 13 16 to 57 5

. "copy the saved bottom row to the top of top of the two"
. "blue blocks, giving the effect of `wrap-around'"

copy block at 0 25 for 13 1 to 9 4
copy block at 0 25 for 13 1 to 57 4
wait 1
goto "loop"


  • Next we need selection bars, and a graphic to make the buttons look as though they've been depressed when the user presses them. The depression graphic should be empty in the middle so that when copied, it preserves the label on the button. Both the depression graphic and the selection bars are on the overlay so that we can copy and remove them without affecting the rest of the screen.


  • Now we must make the main robot. The first part of the robot will initialise the screen as follows:
    1) LOCKPLAYER
    2) SCROLLVIEW POSITION 0 0 - so the player won't be seen
    3) COPY OVERLAY BLOCK # # # # # # - for the selection bars
    normally you would also load a character set and a palette file for the screen, but since our entire megazeux file is composed of only the one character set and palette, they're saved in the MZX file, so we won't bother.

  • Now to write the main part which controls the selection bars and whatnot. The code is as follows:
    . "lock the player so that they cant mess around with our"
. "pretty screen"
lockplayer

. "make sure the viewport is where we want it and not on"
. "the player."
scrollview position to 0 0

. "copy the selection bars over selection #1"
copy overlay block at 26 28 for 27 3 to 26 6

. "this counter will represent the vertical coordinate"
. "that the selection bars and button-depressed graphic"
. "will need to operate at."
set "y" to 6

. "this counter will represent the number of the current"
. "selection."
set "current" to 1

. "now the main loop must begin. It will check for key"
. "presses of up, down and spacebar. Notice in particular"
. "the spacepressed line. If you don't understand, look"
. "at tip #2 - `Counter Checking'"

: "main"
if uppressed "up"
if downpressed "down"
if spacepressed "selection"
goto "main"

. "For the up selection, first check to see if we're"
. "already at the top, in which case we'll return to"
. "the main loop to await an alternative key-press."
. "Otherwise, we'll overwrite the selection bars with"
. "a blank piece of overlay, decrease the two counters"
. "appropriately and re-write the selection bars in"
. "their new location."

: "up"
if "current" = 1 "main"
copy overlay block at 26 0 for 27 3 to 26 "y"
dec "y" by 5
dec "current" by 1
copy overlay block at 26 28 for 27 3 to 26 "y"
wait 3
goto "main"

. "the code for down is pretty much the same, just"
. "in reverse."

: "down"
if "current" = 3 "main"
copy overlay block at 26 0 for 27 3 to 26 "y"
inc "y" by 5
inc "current" by 1
copy overlay block at 26 28 for 27 3 to 26 "y"
wait 3
goto "main"

. "to make a button depress, just copy the depression"
. "graphic over where the current button is, wait a"
. "few cycles, then copy a blank space to clear it."
. "The button will appear to be pushed. The code then"
. "jumps to the appropriate selection label."

: "selection"
copy overlay block at 28 25 for 23 3 to 28 "y"
wait 3
copy overlay block at 28 0 for 23 3 to 28 "y"

. "this line comes out strange on the homepage for"
. "some strange reason, so in your code, remove
. "the space after the first ampersand."
goto "choice& current&"

: "choice1"
. "this space for rent"
goto "main"

: "choice2"
. "this space for rent"
goto "main"

: "choice3"
. "this space for rent"
goto "main"

    Click here to download the finished product. This tutorial by Legendd.
    • 1