[Filled] Simple Custom Menu System

[Megalomania]

Intro:
Hello everyone!
At the moment I'm trying to make a very simple (but, hopefully fun) game in RPG Maker XP, using as few outside materials as possible (because I tend to get hung up on them and the game doesn't progress.) The game also aims to make a stand against some views that a game needs new graphics, custom battle systems, vast arrays of scripts to be a good game.
So why am I asking for a CMS you ask?
Well - my game is so simple, the standard menu system has pretty much nothing to do with it!
So I need a simpler menu.

Description:
The menu system needs the following information placed on it:
Player face image
Player health as a bar with numbers under it (Current Health / Max Health).
Player mana (though it is renamed "Hunger") as a bar. With numbers under it (Current Mana / Max Mana)
Player Inventory (Just items, no weapons or armour.) (Not a button to the inventory, but the actual player's inventory, showing all of the items. )
Gold,
The Save Button
The Exit button (still going to the Exit menu)

Picture
http://img104.imageshack.us/my.php?image=cmstotlyj7.jpg

Windows are the Black rectangles (unless they contain a picture, such as the portrait or bars)
The rounded rectangles are Buttons (like Save, Exit, etc. in the standard menu)

The Default Cursor Position starts on the Items button (as shown by the red), if you move right, it goes to save then exit. Left will take it back through the cycle.
If you select items, you are able to highlight an item in your inventory with Left, Right, Up and Down (this will show their descriptions in the space allocated) and when you select one of them, you can "Use" or "Cancel" if you hit Cancel, you are taken back a stage - being able to select a different item.

If possible, show how many of each item the character has please

If you don't want to select an item, you can hit B (which is X, IIRC) to return to the main sequence of Buttons (Items, Save, Exit).

The Face is 100x100 Pixels

Closing:
Thanks for the help - I hope you can get it done quickly and without trouble - also, I'll need help installing it, so if you could post instructions with the scripts that would be great.

Thanks again,
Megalomania

 

[Megalomania]

Bump

 

[Brewmeister]

I have to say, as requests go this one is better than most. You did however overlook a few things...

Are the black lines in your prototype window borders?
The Health, Hunger, Gold, STeps, Time are not shown in a window. Do you want the normal window background in this area?
If so, You should probably include that area in a window, or windows as well.
I would suggest the face & stats in one window; the gold, steps & time in another window (or each in their own),
and Save & Exit each in their own window, or together in a single window.

How do you want the menu selection to work? What is the default cursor position? (Save)?

How about this:
Default cursor position (when you enter menu): Save
Right Arrow moves to Exit
Another right arrow moves to the Item Window
Navigate through the item window using arrow keys.
If you are in the 1st (left) column of the item window, and you use the Left arrow, you go back to Exit.

Do you want descriptions in the Item Window (Like the small top window in the default menu?)
Or is the Item Window just layed out with the Icons & the Item Names?
Should it also show the quantity of items?

What happens if the player selects an item in the Item Window? (It sounds like you have only one character, so should it just use the item if it's usable?)

What size will your face graphic(s) be?

 

[Megalomania]

I have to say, as requests go this one is better than most. You did however overlook a few things...

Are the black lines in your prototype window borders?
The Health, Hunger, Gold, STeps, Time are not shown in a window. Do you want the normal window background in this area?
If so, You should probably include that area in a window, or windows as well.
I would suggest the face & stats in one window; the gold, steps & time in another window (or each in their own),
and Save & Exit each in their own window, or together in a single window.

How do you want the menu selection to work? What is the default cursor position? (Save)?

How about this:
Default cursor position (when you enter menu): Save
Right Arrow moves to Exit
Another right arrow moves to the Item Window
Navigate through the item window using arrow keys.
If you are in the 1st (left) column of the item window, and you use the Left arrow, you go back to Exit.

Do you want descriptions in the Item Window (Like the small top window in the default menu?)
Or is the Item Window just layed out with the Icons & the Item Names?
Should it also show the quantity of items?

What happens if the player selects an item in the Item Window? (It sounds like you have only one character, so should it just use the item if it's usable?)

What size will your face graphic(s) be?

Sorry for the near week-long wait, I've been a little busy >.<

Thanks for the questions you asked - first off because it will help my request, but also because it make me see a big problem in my old menu system.
For starters, I realised I don't need time played or steps taken - they are unnecessary, and just distractions.
And then I started thinking about the Player's interactions with the menu, such as where they would start, and what features they would use most (and thus, the player should start on).

So, all in all, I drew up a new diagram.
http://img104.imageshack.us/my.php?image=cmstotlyj7.jpg

Windows are the Black rectangles (unless they contain a picture, such as the portrait or bars)
The rounded rectangles are Buttons (like Save, Exit, etc. in the standard menu)

The Default Cursor Position starts on the Items button (as shown by the red), if you move right, it goes to save then exit.
If you select items, you are able to highlight an item in your inventory with Left, Right, Up and Down (this will show their descriptions in the space allocated) and when you select one of them, you can "Use" or "Cancel" if you hit Cancel, you are taken back a stage - being able to select a different item.

If possible, show how many of each item the character has please

If you don't want to select an item, you can hit B (which is X, IIRC) to return to the main sequence of Buttons (Items, Save, Exit).

The Face is 100x100 Pixels

I hope that helps

 

[Brewmeister]

How's this look?

I need to add the bars. Any idea what you want them to look like?
There are lots of options. Search on Hp bars, Gradient bars, Progress bars
(search both here on the site, and on google too. it might be nice to have something no one else has used.)

Oh, and if you noticed I used "Energy" instead of "Hunger". Why?
"Hunger" is a negative concept, while Energy is positive like Health.
If a "Hunger" bar was at 100%, it would imply 100% hungry,
which seems like the opposite of the way HP works. Make sense?
Also, the values for Energy use SP, so you can easily control the value by
adding SP when the player eats, and subtracting when he's hungry.

Be Well

 

[SephirothSpawn]

Brew, you need to probably space out the items names and icons by a few pixels (standard is 4).

 

[Brewmeister]

thanks. I just did it a few minutes ago. I guessed at first, then fine tuned once everything was working.
I decided to make my own gradient bars just to go through the exercise of doing it.
It's pretty much done, but I want to go through & document better, and clean up before posting it.
Here's a snapshot

Mega, I also made your Energy bar blue instead of red, because the bars turn red when they get below 20%

Be Well

 

[SephirothSpawn]

Those bars are pretty Brew. Those done with a pixel method or image? If they are done with a pixel method, would you mind me adding that into the MACL bar methods? I'm anxious to see your algorithm for them as well. :smile:

 

[Megalomania]

Perfect! Thank you soooo much! Couldn't have hoped for more.

I'll credit you both ^_^

Thankyou again ^_^

 

[SephirothSpawn]

I deserve no credit at all. It's all brew. I am here just to bug brew. :p

 

[Brewmeister]

Seph, you deserve a little credit for educating me! :scruff:


Mega, here ya go...

Download This file, and save it in your projects Data folder. (MyProject\Data\Mega_Menu_Scripts.rxdata)

If you have not touched the default scripts,

• Close your project
• Rename Scripts.rxdata => Scripts.rxdata.bak
• Rename Mega_Menu_Scripts.rxdata => Scripts.rxdata
• Open your project & have fun

If you have made any modifications, or added scripts, you'll need to copy these over to your project

• Open your project
• Start another session of RMXP, and create a new project.
• Close the new project, and follow the instructions above to add the scripts to that project
• Open the new project again.
• In both projects, open the scripts editor. Scroll to the bottom in both.
• In your project, Select Main (the very last script), Right-Click -> Insert. Do this 8 times to make 8 empty slots
• Copy the scripts from the new project to your project. Copy/Paste the name & all of the code in the code window.
  The scripts named "---------------------------" are just spacers to make things look neat.
• double check the headers (top of the code window) to make sure you got them all in the right place. Compare with the new project.
• Read the instructions in the header of the Mega_Scene_Menu script

That should do it. Test it up & let me know if anything is broken.


Seph,
Here's the gradient bar method. It's just a series of shrinking rectangles, with the color fading toward white (half way between current RGB value & 255).
I did it with the fade to pure white (255, 255, 255), but it looked to (shiny / bright). I'll add MACL docs to it. And you can check it for standards.
Actually, I probably should have added it to the Bitmap class for consistency. Here I just added it to Window_Status where it is used.

Spoiler: Brew_Bars

  #--------------------------------------------------------------------------
  # * Draw Progress Bar
  #--------------------------------------------------------------------------
  def draw_bar(x, y, w = 148, h = 32, level = 100, color = normal_color)
    r_step = (255 - color.red) / h
    g_step = (255 - color.green) / h
    b_step = (255 - color.blue) / h
    len = w * level / 100
    clear = Color.new(0,0,0,0)
    self.contents.fill_rect(x, y, w, h, normal_color)
    self.contents.fill_rect(x + 1, y + 1, w - 2, h - 2, clear)
    for i in 1...h/2
      self.contents.fill_rect(x + i, y + i, len - 2 * i, h - i * 2, color)
      # to draw sqare ended bars
      # self.contents.fill_rect(x + 1, y + i, len - 2, h - i * 2, color)
      color.red += r_step
      color.green += g_step
      color.blue += b_step
    end
  end

Be Well

 

[SephirothSpawn]

Pretty clever method. Though I do wonder which would be faster, using fill_rect once, with 1 big rect (drawing over previous layers) or 4 sides, 1 pixel wide/tall each, to to prevent filling the same pixel over and over.

Time to test. lol

There's no noticeable difference between drawing edges or setting entire rect regions. This is what I tested:

Spoiler

class Bitmap
  def draw_brew_bar1(x, y, w = 148, h = 32, level = 100.0, color = Color.new(0, 0, 200))
    old_time = Time.now.dup
    r_step = (255 - color.red) / h
    g_step = (255 - color.green) / h
    b_step = (255 - color.blue) / h
    len = w * level / 100
    clear = Color.new(0,0,0,0)
    fill_rect(x, y, w, h, Color.new(255, 255, 255))
    fill_rect(x + 1, y + 1, w - 2, h - 2, clear)
    for i in 1...h/2
      fill_rect(x + i, y + i, len - 2 * i, h - i * 2, color)
      color.red += r_step
      color.green += g_step
      color.blue += b_step
    end
    p Time.now - old_time
  end  
  def draw_brew_bar2(x, y, w = 148, h = 32, level = 100.0, color = Color.new(0, 0, 200))
    old_time = Time.now.dup
    r_step = (255 - color.red) / h
    g_step = (255 - color.green) / h
    b_step = (255 - color.blue) / h
    len = w * level / 100
    clear = Color.new(0,0,0,0)
    fill_rect(x, y, w, h, Color.new(255, 255, 255))
    fill_rect(x + 1, y + 1, w - 2, h - 2, clear)
    for i in 1...h/2
      fill_rect(x + i, y + i, len - 2 * i, 1, color)
      fill_rect(x + i, y + h - 1 - i, len - 2 * i, 1, color)
      fill_rect(x + i, y + i + 1, 1, h - i * 2 - 1, color)
      fill_rect(x + len - 1 - i, y + i + 1, 1, h - i * 2 - 1, color)
      color.red += r_step
      color.green += g_step
      color.blue += b_step
    end
    p Time.now - old_time    
  end  
end

$sprite = Sprite.new
$sprite.bitmap = Bitmap.new(640, 480)
$sprite.bitmap.draw_brew_bar1(0, 0, 640, 240)
$sprite.bitmap.draw_brew_bar2(0, 240, 640, 240)

Method 1, doing the half the screen took 0.015-0.016, and method 2 took 0.0. So there's really no difference at all.

(I am bored, up all night looking at API. I needed something to get me away from it lol)

 

[Brewmeister]

I'm assuming, if I remember correctly from the wee bit of graphics programming I did, that the rect method uses built-in graphics functions that are low-level & draw the rectangle very fast. Drawing 1 pixel at a time, or even 1 pixel wide rectangles in an interpreted script would be slower (I think). Although in this context, the user would probably never see the difference unless there were a lot of bars in the scene.

You could benchmark it with a whole bunch of bars. If you're that ambitious, let me know what you find out.

[ edit ] damn, you're too quick!

Be Well

 

[SephirothSpawn]

lolz Rect bars are simple, once you make bars in the shape of an arc, apply a gradient to them, or merge them with straight bars (IE, those damn kingdom hearts bars).

But its good to know, so I can be lazier in the future. :cheers:

 

[Brewmeister]

I'm surprised drawing 4 rectangles is faster than drawing 1. Even if it's drawing a lot less pixels overall.
I like the Time object. I'll add that to my debugging repertoire.
0.015 (seconds?) could be significant if it was a function that was used a lot. It could add up quick.

You want I should add it to the MACL on OWAI?

Be Well

 

[SephirothSpawn]

I was semi surprised myself, Ruby being as slow as it is, calling a method four times and doing 4 times the calculations. Yeah, I believe it returns in seconds.

If you want to put a reminder in the MACL topic, be my guest, but I have added it already to my current MACL update project, so it shouldn't be necessary. Thanks. And good work on the menu.

 

[Megalomania]

Well, the menu is working perfectly, thankyou very much! :D

Request fullfilled ^_^