Menu System Refactor

Avatar

By ShadowApex 7 Oct 2015 07:24

Lead Developer · 374 comments

Having a good menu system is a vital component to making almost any kind of turn-based RPG. The menu system has come quite a way since the earlier versions of the project, but it had unfortunately become a bit unwieldy to use. In order to simplify using the menu system, I had decided to rewrite large portions of the base menu class in order to make it easier to use menus in different parts of the game. Now creating new menus will be better and easier than ever.

Along with making it easier to use, I have also added a few new cool features to the menu system that we can use in any of our menus. Here's a list of some of the new features!

  • Move Menu Animation
  • Menu Border Animations
  • Menu Background Animations

Here's a more in-depth review of each of these new features:

Menu Move Animation


You can now move a menu across the screen over any given amount of time!

fuawB2y.gif

Example Code

menu = NewMenu(game, position=('75%', '50%'), size=(100, 100))
menu.add_text("This is some dialog!", justify="center", align="middle")
menu.move((400, 500), duration=3.5)

Menu Border Animations


Menus can now have animated borders!

dZEVPky.gif

Example Code

border_images = {}
border_directions = ["left", "right", "top", "bottom", "left-top",
                     "left-bottom", "right-top", "right-bottom"]
for d in border_directions:
    border_images[d] = []
    for i in range(9):
        border_images[d].append("resources/gfx/tmp/menu-" + d + "_0" + str(i + 1) + ".png")

menu = NewMenu(game, position=('75%', '50%'), size=(100, 100), border_images=border_images)
menu.add_text("This is some dialog!", justify="center", align="middle")

Menu Background Animations


Menus can now have animated backgrounds!

TQy0bHW.gif

Example Code

menu_anim = []
base = "resources/gfx/sprites/menu/tv"
for i in range(9):
    menu_anim.append(base + str(i + 1) + ".png")

menu = NewMenu(game, ('75%', '50%'), (100, 100), background=menu_anim)
menu.add_text("This is some dialog!", justify="center", align="middle")