Save-Point
Need help with my menu - Current issue is item grid layout - Printable Version

+- Save-Point (https://www.save-point.org)
+-- Forum: Games Development (https://www.save-point.org/forum-4.html)
+--- Forum: Code Support (https://www.save-point.org/forum-20.html)
+--- Thread: Need help with my menu - Current issue is item grid layout (/thread-7322.html)

Pages: 1 2 3 4 5

Need help with my menu - Current issue is item grid layout - LilyFrog - 08-31-2018

So for the past couple days I've been playing around with trying to construct my own menu. I've looked around for something I can use to figure out how to make this work, however I can't find anything that really fits what I'm trying to do.

I'm experiencing a number of technical snags (all due to my own ignorance of how to script), but the one I'm focused on at the moment is trying to make a character graphic and background image for the menu that changes based on a variable, which changes depending on story events.

So for example, the graphic of the character would change based one which character is being controlled or if they're in a different physical or emotional state, and likewise with the background, and I want to do that with the variable being equal to a specific number.

I have absolutely no idea how to assign images to specific variable amounts, or really any of it, but I figured that'd be a fair place to start.

RE: Creating a menu with variable controlled pictures - DerVVulfman - 08-31-2018

Okay, I got something for you.

The Scene_Menu script is your basic main menu. But it doesn't draw your characters.... It is handled by the Windows_ codes. Or more specifically right now the Window_MenuStatus class. But the Window_MenuStatus class doesn't hold the actual code that draws your character. It's the Window_Base class.

Window_Base is the 'base' class that holds a lot of resuable code that other Windows_ classes can access. And of that code, the one you would be looking at is the draw_actor_graphic method starting at line 108. We call the groups of code within a class as a 'method'. Another way of saying a function or subroutine as they're known in other programming languages.

The default draw_actor_graphic method looks like this:
Code:
def draw_actor_graphic(actor, x, y)
    bitmap = RPG::Cache.character(actor.character_name, actor.character_hue)
    cw = bitmap.width / 4
    ch = bitmap.height / 4
    src_rect = Rect.new(0, 0, cw, ch)
    self.contents.blt(x - cw / 2, y - ch, bitmap, src_rect)
  end

Now assuming you are using the old Game_Variables, you can use code like this. Bare in mind, the below code takes the current actor's Charactername and includes the value of the game variable itself... IE: If aluxes's character is 001-Fighter01 ... and the value of Game_Variable 1 is 0, the system will look for 001-Fighter010. And if his character is 001-Fighter01 and the value in Game Variable 1 is 23, then it would look for 001-Fighter0123.

Code:
def draw_actor_graphic(actor, x, y)
    # get a value from the Game_Variable matching your hero
    pic = $game_variables[actor.id]
    # Take the actor's graphic and include the value from the variable
    charname = actor.character_name + pic.to_s
    # Draw it with the new character name with the suffix
    bitmap = RPG::Cache.character(charname, actor.character_hue)
    cw = bitmap.width / 4
    ch = bitmap.height / 4
    src_rect = Rect.new(0, 0, cw, ch)
    self.contents.blt(x - cw / 2, y - ch, bitmap, src_rect)
  end

Now if you want to keep the default draw_actor_graphic method untouched, you could just add a new method, just so long as it is within Window_Base.

RE: Creating a menu with variable controlled pictures - LilyFrog - 08-31-2018

Ohh, that is interesting, thank you. I've been messing around with it for a bit to try to figure it out, because I am terribly dense and have to see how something works to actually understand it. I'm still trying to figure out exactly how to utilize this for what I want it to do, but my other question is how would I make a variable determine an image that would be displayed on the menu, using pictures instead character graphics? Is that possible?

I'm sorry if I'm asking really obvious questions.

RE: Creating a menu with variable controlled pictures - DerVVulfman - 09-01-2018

It takes a bit more work. And it would depend upon the menu itself, where you want it, and the whole gamut. A mockup of what you want would help so one wants to know exactly what is desired.

How do you like how I describe things? I try to not only work things out, but show you how things work. Winking

RE: Creating a menu with variable controlled pictures - LilyFrog - 09-01-2018

I actually do have a mock up, which I managed to partially construct in the code (only pictures though) after finally figuring out how to display pictures. But it's really ugly and full of other things I haven't figured out yet. Here it is though:

[Image: xHwuPjv.png]

It's supposed to replace the main menu (I'm trying to make something kind of like an item based puzzle game or adventure game). Most if not all of it will probably end up being image based, but I'm trying to approach it one thing at a time, for the most part. I'm still trying to figure out how to get rid of that dumb black space around the inside edge of the window border.

So I want to be able to change the character image and the background (which I just copied one of the panorama graphics to test it with) back and forth between different images depending on what's going on. So say that maybe the character changed outfits, or got hurt, and the character graphic changed accordingly. I want to be able to use a variable within events, if that's possible, to determine that.

Also I really do appreciate that. I do want to understand how everything works so I can apply that information later.

RE: Creating a menu with variable controlled pictures - kyonides - 09-01-2018

Depending on what kind of variable you wanna use to let your script know the character's current status or story progress, you might need to add a control structure like if statements or even case ones since it should test if a single variable matches any of the possible values you might have in mind. First you would need to retrieve the actor's character name (its picture) by assigning it to some local variable you create right there. If you need to add some sort of suffix to its file name, you may put it together right there by means of a string addition; think it's like adding up a number but you use a string instead. Then you would add a call to the draw_actor_graphic method (if you've been using it), passing that local variable holding the full name of the picture you're looking for. If you weren't using a window but a sprite to display it, things change a little bit then. Laughing + Tongue sticking out

RE: Creating a menu with variable controlled pictures - DerVVulfman - 09-04-2018

Okay, we have a mockup of a Menu. You have a Save Option, a Load Option, and an Exit Game option. There also seems to be an option for 'Story', however I am unsure what that option entails.

So what we have is... a collection of 16 squares in a 4x4 pattern, what appears to be a fairly large-scaled render of the lead hero in the right (would that be your artwork?), and the lead hero's name in the top.

I'm only making assumptions. However, I am curious about the 4x4 grid. Would that be a member-select? A collection of menu functions in picture format? An RMXP Rubix Cube?

RE: Creating a menu with variable controlled pictures - LilyFrog - 09-04-2018

(09-04-2018, 04:07 AM)DerVVulfman Wrote: Okay, we have a mockup of a Menu.   You have a Save Option, a Load Option, and an Exit Game option.   There also seems to be an option for 'Story', however I am unsure what that option entails.

So what we have is... a collection of 16 squares in a 4x4 pattern, what appears to be a fairly large-scaled render of the lead hero in the right (would that be your artwork?), and the lead hero's name in the top.

I'm only making assumptions.  However, I am curious about the 4x4 grid.  Would that be a member-select?   A collection of menu functions in picture format?  An RMXP Rubix Cube?

Well, I plan to have a story recap of sorts? I haven't decided how I want that to work, it's just part of my concept at the moment. I may or may not choose to cut it out later.

I've managed to figure out a system of sorts for how to make the images change, but it's probably not the most efficient or neatly coded piece of work. If you're interested I can show it, but I'm almost certain it's not great. I've got it functioning though. (And yes, that's a quick doodle I did of a character of mine.)

Haha, no, not a rubix cube. The grid is actually meant to be for items, so the player can check what's in the inventory. I forgot to add it to the mockup, but the help window that displays the item's description is meant to be displayed below the box. Which is actually what I'm trying to figure out now (and how to make the other buttons work on the same screen), but I don't know if it's alright to ask things about that here, or if I need to make a new thread.

RE: Creating a menu with variable controlled pictures - DerVVulfman - 09-04-2018

Erm... [Full Edit] --- Change the title to 'Need Help with my menu - Current issue is... (fill in here).

I could take a look at the portrait change system... see how it looks. I tend to have ideas. ^_^

An inventory section, eh? It sounds like you're having the menu be a single menu system, no Item or Skills... It's making me wonder if you're going for a visual novel or point-n-click adventure using a mouse script.

RE: Need help with my menu - Current issue is item grid layout - LilyFrog - 09-04-2018

Thank you! Title has been updated.

Here is the code for the menu graphics.
Code:
#==============================================================================
# **Menu Graphics
#==============================================================================

class Menu_Graphics < Window_Base

#----------------------------------------------------------------------
# * Object Initialization
#----------------------------------------------------------------------
def initialize
 
super(0, 0, 640, 480)
 self.contents = Bitmap.new(width - 32, height - 32)
 self.opacity = 0
#-----------------------------------------------------------------------
# * Draw Background
#-----------------------------------------------------------------------
  @menuback = Sprite.new
   @menuback.x = 0
   @menuback.y = 0
#-----------------------------------------------------------------------
# * Variable Graphic Changes For Background
#-----------------------------------------------------------------------
 #Background 1 
 if $game_variables[1] < 5
   @menuback.bitmap = RPG::Cache.picture('backtest1')
 #Background 2
 else $game_variables[1] >= 5
   @menuback.bitmap = RPG::Cache.picture('backtest2')
 end
#-----------------------------------------------------------------------
# * Draw Character Graphic
#-----------------------------------------------------------------------
 #Display character graphic
  @charactergraphic = Sprite.new    
   @charactergraphic.x = 375
   @charactergraphic.y = 50
#-----------------------------------------------------------------------
# * Variable Graphic Changes For Character
#-----------------------------------------------------------------------
 if $game_variables[1] == 0
   @charactergraphic.bitmap = RPG::Cache.picture('hanneutral')
 elsif $game_variables[1] == 1
   @charactergraphic.bitmap = RPG::Cache.picture('hanworry')
 elsif $game_variables[1] == 2  
   @charactergraphic.bitmap = RPG::Cache.picture('penneutral')
 elsif $game_variables[1] == 3
   @charactergraphic.bitmap = RPG::Cache.picture('penhappy')
 elsif $game_variables[1] == 4
   @charactergraphic.bitmap = RPG::Cache.picture('penworry')
 elsif $game_variables[1] == 5
   @charactergraphic.bitmap = RPG::Cache.picture('penpsych')
 else $game_variables[1] == 6
   @charactergraphic.bitmap = RPG::Cache.picture('penaffect')
 end
#-----------------------------------------------------------------------
# * Character Names And Changes
#-----------------------------------------------------------------------
@charactername = Sprite.new    
 @charactername.x = 310
 @charactername.y = 15
 if $game_variables[1] <= 2
   @charactername.bitmap = RPG::Cache.picture('testname1')
 else $game_variables[1] > 2
   @charactername.bitmap = RPG::Cache.picture('testname2')
 end
 end
end
I then call it on the Scene_Menu (replacement) script like
@menu_graphics = Menu_Graphics.new

    @menu_graphics.x = 0
    @menu_graphics.y = 0

Which I don't know if it's the best way to do it, but it functions okay so far
Here's an example of $game_variables[1] at 0, versus at 5, just to give a visual. (All I did was change the colors around. The filenames are just specific for my own reference.)
Content Hidden
That is pretty much exactly what I'm trying to do. Kind of a mix of point and click and visual novel. I haven't tried playing around with mouse scripts just yet (I plan to), but I will take just about anything over the default control scheme. Any items collected will be pretty much exclusively for puzzles or referencing things like passwords. 

I'm having a lot of trouble figuring out how the placement of icons and selection stuff works on the item window though. It may be down to me being absolutely terrible at math, but I can't figure out how to get the selection box to actually line up properly with the icons. I'm legitimately at a loss. It's all been trial and error and comparing different menu edits to the base code, but I can't actually understand which numbers do what and why. So I just keep having this same issue but in slightly different ways:
Content Hidden

I'm also not sure if it's even possible to put them horizontally closer together and/or vertically further apart.