[Help] Learning Windows and Scenes

[lordvalinar]

So I'm trying to spread my wings and get away from the more common object functions (actors, events, maps, etc.) and try my hand into making my own windows/scenes. Might help me develop other more complicated scenes in the future...

I have looked up via Google and search functions, and although helpful in their own right, I believe I understand enough to -create- the basic window. However, I am lacking in the more advanced methods that I feel are necessary to proceed with this project.

What am I trying to make:
- A window centered in the middle of the screen for x,y
- text at the top (but inside) of the window "Choose a nation to sail for:" with enough room in between that and the flags
- Text for the nation appear when "highlighted" (either through arrow keys or hover with mouse)
- Long enough to fit 4 small-ish images (these will be the nation flags the player can choose from)
- If using keyboard = left/right will select and change the highlighter, instead of like most menus (up/down)
- opacity of highlighter changes (to be "flashing" on the selected option).

Alright now that you know what I'm trying to do, I am -NOT- trying to get you to make the plugin for me. I just need assistance along the way. I have the bare bones window coded (not tested yet)

Spoiler

function Window_NationSelect() {
    this.initialize.apply(this, arguments);
}

Window_NationSelect.prototype = Object.create(Window_Selectable.prototype);
Window_NationSelect.prototype.constructor = Window_NationSelect;

Window_NationSelect.prototype.initialize = function(actor) {   
    var width = this.windowWidth();
    var height = this.windowHeight();
    var x = (Graphics.boxWidth - width) / 2;
    var y = (Graphics.boxHeight - height) / 2;
    Window_Selectable.prototype.initialize.call(this, x, y, width, height);
    // TODO: Setup initial actor faction and reputation based on class    
    // TODO: Setup an update? refresh?
};

Window_NationSelect.prototype.windowWidth = function() {
    return 300;
};

Window_NationSelect.prototype.windowHeight = function() {
    return this.fittingHeight(2) + this.flagHeight();
};

Window_NationSelect.prototype.flagHeight = function() {
    return 35;
};

Window_NationSelect.prototype.update = function() {
    Window_Selectable.prototype.update.call(this);   
};

So what am I asking for?
- Positioning of box, text, Icons (I'll make the flags into icons) regardless of resolution (does the window x,y look good?)
- How to update the positioning of the curse upon input (update? refresh? Both?)
- (Optional, but not required): Mouse Support (change highlighter based on cursor position, selection, etc)

Mostly the first two... the Scene_* I can work out for myself mostly. Might need help understanding the "setHandlers" if those are required for this window... not sure.

EDIT: Added a "mock-up":

Spoiler

 

[caethyril]

Some pointers/suggestions~

• Check the updateCursor method of Window_Selectable: this handles cursor updates. Should apply automatically, you might not need to define custom behaviour for your window.
  
  
• Check the maxRows and maxCols functions: these let you set a custom grid size for your selectable window.
  
  
• Check the maxItems function: this determines how many selectable items will be drawn.
  
  
• Check the drawItem method: this handles how each selectable item is drawn.
  
  
• Check the processOk method: this handles what happens when an item is "clicked".
  
  
• For positioning, remember that windows have "padding" between their edges and the edges of their content, e.g. the width of the window's content is typically the window width minus two sets of padding. Shortcuts: this.contentsWidth and this.contentsHeight, inherited from Window_Base via Window_Selectable.

You may want to consider two custom windows:

1. For enclosing the flags and title - inherit from Window_Base, use drawText to write the centred title. Likewise with the selection name, which can be updated from its child window. Could set up something similar to Window_Message & Window_ChoiceList windows?
   
   
2. For selecting the flag - inherit from Window_Selectable, with an invisible background. You can set the background type to transparent like this (maybe in the window's initialize or create method):
   

   this.setBackgroundType(2);

   Then just position it on top of the "main" window.

Hope some of that helps!

 

[lordvalinar]

It might help a lot actually Will have to play around naturally and see if I can get it working. These are my first steps into windows and scenes, and I am eager to learn! Will also want to keep this thread open for a bit since I have no clue when I'll need to come back here (probably soon )

 

[mlogan]

Closed at OP's request.