[RESOLVED] Option to open a window to display contols?

[mattertatter]

Is there a way to make a menu selection that displays a window with the controls in it. Right now I have the option created I just don't know how to make it display anything when clicked.
Here is what I want it to display.

CONTROLS
Up Arrow - Move Up
Down Arrow - Move Down
Left Arrow - Move Left
Right Arrow - Move Right
Space Bar, and Enter - Accept/Action Key
ESC, and X - Cancel/Menu
Q - Open Journal
V - Page Up
B - Page Down

[KK20]

So, you're essentially asking for a window to be drawn with text thrown in it displaying the controls. Sounds pretty easy--only takes a new scene class and a new window class to make it.

[mattertatter]

That's exactly what I'm looking for.

[mattertatter]

So how do I make this window?

[diagostimo]

i couldnt find where i found these so heres a re-uploaded version of some guides, to be specific look into mr mo's advanced scenes and windows, i used these guides alot when getting the ropes of scripting, you should be able to get what you want following his tutorial, i hope they help
http://www.mediafire.com/?knwcc229no4qj50

[mattertatter]

Thanks for the tutorial, I did it!!! My first time trying to write a script. What do you think?

Spoiler: ShowHide

http://i.imgur.com/oFgqP.png

I feel like for my first script it worked out pretty good.

[diagostimo]

that looks pretty good but i can help feel that some of the text looks a little squished, to get the texts exact width you can do the following:

text = "this is text"
width = contents.text_size(text).width
height = contents.text_size(text).height
self_contents.draw_text(0, 0, width, height, text)

as you see in the contents.draw_text it uses the values of the variables before it so you dont have to guess it yourself also you can re-use the same variables in the script so your not having to make up new names how about getting some images of buttons ect to pretty it up?

[mattertatter]

I don't understand where I should put the code you gave me. Ill include the script in this post if you could add it in so I can see where it is supposed to go. And pictures would be great, but what should the pictures be of? I was thinking the button that the corresponding control is talking about so for Menu/Cancel there would be a picture of an X key and the ESC key. What do you think of the idea?

Spoiler: ShowHide

class ControlsWindow < Window_Base
  #----------------------------------------------------------------------
  # * Object Initialization
  #----------------------------------------------------------------------
  def initialize
    super (90, 70, 460, 330)
    self.contents = Bitmap.new(width - 32, height - 32)
    refresh # Calls the refresh funtion in this class
  end
  
  def refresh
    self.contents.clear
    self.contents.font.color = normal_color
    self.contents.font.size = 20
    self.contents.draw_text(50, 0, 70, 32, "CONTROLS")
    self.contents.draw_text(70, 70, 100, 32, "Up Arrow - Move Up")
    self.contents.draw_text(70, 90, 130, 32, "Down Arrow - Move Down")
    self.contents.draw_text(70, 110, 160, 32, "Left Arrow - Move Left")
    self.contents.draw_text(70, 130, 190, 32, "Right Arrow - Move Right")
    self.contents.draw_text(70, 150, 240, 32, "Space Bar or Enter - Accept/Action Key")
    self.contents.draw_text(70, 170, 200, 32, "ESC or X - Cancel/Menu")
    self.contents.draw_text(70, 190, 100, 32, "Q - Open Journal")
    self.contents.draw_text(70, 210, 100, 32, "V - Page Up")
    self.contents.draw_text(70, 230, 120, 32, "B - Page Down")
    end

end

[KK20]

  Nice work! My work here is no longer needed

And what my acolyte diagostimo stated is ideal, in this case, you can manage with making the text fields' widths large. In the draw_text commands, the third number within the parentheses is the text field width. Change all of them to something like 300 (or more if needed). But what diagostimo meant is something like this:

  def refresh
    self.contents.clear
    self.contents.font.color = normal_color
    self.contents.font.size = 20
    text = "CONTROLS"
    self.contents.draw_text(50, 0, contents.text_size(text).width, contents.text_size(text).height, text)
    text = "Up Arrow - Move Up"
    self.contents.draw_text(70, 70, contents.text_size(text).width, contents.text_size(text).height, text)
    # and so forth
  end

That way, your text field will always be big enough to fit your text.

[mattertatter]

Thanks for your help but I am far from done needing assistance. Here is the new menu, now how would I go about adding the Button graphic?

Spoiler: ShowHide

http://i.imgur.com/bbpCn.png

[diagostimo]

exactly what kk put, you see the problem is that if the width of the area the text is being drawn in is too small it scales the text to fit inside it, you can set the width really high but i find it easier to just automate it then you dont really bump into those problems, as for the buttons, images of the keyboard keys would be great, also how about spicing up a custom banner in an image program for the controls title? its amazing what a few images can do for a window, if you need any help just ask
edit:
to add the images you can simply make your code as follows:

 def refresh
    self.contents.clear
    self.contents.font.color = normal_color
    self.contents.font.size = 20

    self.contents.draw_text(50, 0, 70, 32, "CONTROLS")
    @bitmap = RPG::Cache.picture("IMAGENAME")
    self.contents.blt(0, 0, @bitmap, Rect.new(0, 0, @bitmap_width, @bitmap_height), 255)

    self.contents.draw_text(70, 70, 100, 32, "Up Arrow - Move Up")
    @bitmap = RPG::Cache.picture("IMAGENAME")
    self.contents.blt(0, 0, @bitmap, Rect.new(0, 0, @bitmap_width, @bitmap_height), 255)
  end

@bitmap is the image to draw, RPG::Cache.picture roots to the picture directory in your project folder so if you wanted to get an image from the battlers folder it would look like this: RPG::Cache.battler
"self.contents.blt(0, 0, @bitmap, Rect.new(0, 0, @bitmap_width, @bitmap_height), 255)" this draws the image onto the window ill explain what each segment does:

self.contents.blt(X1, Y1, IMAGE, Rect.new(X2, Y2, WIDTH, HEIGHT), OPACITY)
X1 = the x postion in the window
Y1 = the y postion in the window
IMAGE = the image to draw in ourcase @bitmap
Rect.new creates a rectangle to draw the content in
X2 = the x position of the rect (from the last x)
Y2 = the y position of the rectangle (from the last y)
WIDTH = the rects width, in this case we want it to be @bitmap_width
HEIGHT = the rect height in this case we want it to be @bitmap_height
OPACITY = the transparency of the image, min = 0, max = 255

that should get you going

[mattertatter]

Alright so I have a picture of all the keys I need, what would be a good size to get them all to fit?
I like the banner idea, but im a terrible artist, so i don't know what I could make

[diagostimo]

i think a good size of the images would be 32 by 32 pixles for square keys, then just compensate the width for bigger keys, ill have a go at making a banner in photoshop now for you, also take a look at my last post, i explained how to add the images to the code
edit: i whiped this up let me know what you think, i can change the colors ect if you like:

Spoiler: ShowHide

[mattertatter]

Ok, and a banner would be awesome. I'm putting the buttons in now.

Wow, it looks way better than anything I could do, could you capitalize the 'C' sorry to be a grammar Nazi. but other than that it looks perfect
--------------------------------------------
Ok so after testing the script to display buttons with the Up Arrow I am getting this error
Script 'Controls Window' line18: TypeError occurred
no implicit conversion from nil to interger

This is the entire def refresh of the Controls Window

Spoiler: ShowHide

  def refresh
    self.contents.clear
    self.contents.font.color = normal_color
    self.contents.font.size = 20
    self.contents.draw_text(50, 30, 300, 32, "CONTROLS")
    self.contents.draw_text(70, 70, 300, 32, "Up Arrow - Move Up")
    @bitmap = RPG::Cache.picture("Up Arrow")
    self.contents.bit(40, 30, @bitmap, Rect.new(10, 15, @bitmap_with, @bitmap_height), 255)
    self.contents.draw_text(70, 90, 300, 32, "Down Arrow - Move Down")
    self.contents.draw_text(70, 110, 300, 32, "Left Arrow - Move Left")
    self.contents.draw_text(70, 130, 300, 32, "Right Arrow - Move Right")
    self.contents.draw_text(70, 150, 300, 32, "Space Bar or Enter - Accept/Action Key")
    self.contents.draw_text(70, 170, 300, 32, "ESC or X - Cancel/Menu")
    self.contents.draw_text(70, 190, 300, 32, "Q - Open Journal")
    self.contents.draw_text(70, 210, 300, 32, "V - Page Up")
    self.contents.draw_text(70, 230, 300, 32, "B - Page Down")
    end

end

[diagostimo]

no problem heres the edit:

Spoiler: ShowHide

also sorry but when drawing the image it needs to be like this:

self.contents.blt(40, 30, @bitmap, Rect.new(10, 15, @bitmap.width, @bitmap.height), 255)

also on a side note you put "self.contents.bit" not self.contents.blt and you also spelt width wrong

[mattertatter]

alright, the controls banner shows up but the box that it is inside cuts off part of the image, so you cant see the top of the letters

[diagostimo]

self.contents.blt(40, 30, @bitmap, Rect.new(10, 15, @bitmap.width, @bitmap.height), 255)

the problem would be the 10 and 15 inside Rect.new, this changes the x any y inside the rect, as the rect is the size of the image(@bitmap.width, @bitmap.height) if part of the image goes outside the rect it is not drawn, try changing these values to 0 and only editing the base x any y

[mattertatter]

Ok that fixed the problem, I will post a picture when I add all the buttons

EDIT
I tried it with a couple of buttons and it didn't look good, so this is the final version of the menu.

Spoiler: ShowHide

P.S. I finally figured out how to insert images instead of just the link lol

[diagostimo]

ye that looks cool, maybe the buttons would overcramp it but it deffinatly looks alot better with a banner

[mattertatter]

of course I have something good and I messed it up lol. When you hit the back button it goes back up to the top of the menu, but on every other window they go back to to selected option. Thinking I could fix it on my own I looked at a different script and copied def update part to make it look like this

Spoiler: ShowHide

now I'm getting this error

Spoiler: ShowHide

[G_G]

Add an "end" after line 46.

[mattertatter]

that fixed the error but it is still going to "items" when I close it and not back to "controls"

[diagostimo]

when and where does @callback get set a value? i am guessing that your problem is that that is not setting to the value if 0, if you call $scene = Scene_Menu.new that will take you to the index point defined in the initialize method so im guessing that its going straight off of the else command
edit:
im guessing that your just wanting it to go straight back to the control option no matter what so change that section to this:

if Input.trigger?(Input::B)
  # Play cancel SE
  $game_system.se_play($game_system.cancel_se)
  # Switch to the Menu screen
  $scene = Scene_Menu.new(INDEX VALUE)
end

INDEX VALUE should be changed to wherever in the index your wanting to go, just bear in mind it starts from 0 not 1

[mattertatter]

Ok all is good now, thanks for all the help guys.