Basic Window Creation and Manipulation

[Drykul]

Plenty of experience with Ruby and Ace, very little with JS and MV. I feel like such a noob again trying to figure out the basics of JS. The first thing I'm really struggling with is simply creating a window. I don't need it in it's own scene. Just a simple window that I can specify the parameters of (X and Y coords, width and height, transparency, etc). I can't find a good noob tutorial that covers this information. Soulpour777 has one on his YouTube channel but its a little too in-depth. Can anyone explain in VERY layman's terms how this is done?

 

[CT_Bolt]

The first thing I'm really struggling with is simply creating a window. I don't need it in it's own scene. Just a simple window that I can specify the parameters of (X and Y coords, width and height, transparency, etc). Can anyone explain in VERY layman's terms how this is done?

I'm still new to JS with MV but I'll attempt to answer this.
However it does seem that to answer this I would still need to know what scene(s) you'd like this window displayed.
Did you need it to be in every scene, perhaps just the menu or maybe just on the map?

This is how to create a simple window on the in the menu scene:

Spoiler: Simple Window in Menu Scene

/********************\
    Simple Window
  (Window_SimpleCTB)
\********************/

// Window Object declared as a Function
function Window_SimpleCTB() {
    // Initialize the object using the function that is defined below
    // this refers to the Window Object, arguments will be x & y
    this.initialize.apply(this, arguments);
};

// Window Object defined/created
Window_SimpleCTB.prototype = Object.create(Window_Base.prototype);
Window_SimpleCTB.prototype.constructor = Window_SimpleCTB;

//******************************************************
// Note: The following are functions of Window_SimpleCTB

// Function: Initialize the object using x & y
Window_SimpleCTB.prototype.initialize = function(x, y) {
    var width = this.windowWidth();
    var height = this.windowHeight();
    Window_Base.prototype.initialize.call(this, x, y, width, height);
    this.refresh();
};

// Function: Simply returns the width for the window (hard coded in this example)
Window_SimpleCTB.prototype.windowWidth = function() {
    return 240;
};

// Function: Simply returns the height for the window
Window_SimpleCTB.prototype.windowHeight = function() {
    return this.fittingHeight(1);
};

// Function: Refreshes the window
// Note: This is where the drawing happens
Window_SimpleCTB.prototype.refresh = function() {
    // x is set to textPadding() which is defined in Window_Base
    // Q: What is textPadding?
    // A: textPadding is the space before and after text in pixels, sort of like an offset
    var x = this.textPadding();

    // width is set to the width of the window - (textpading * 2)
    var width = this.contents.width - this.textPadding() * 2;

    // clear the window
    this.contents.clear();

    // draws an icon
    //           (iconIndex, x, y)
    this.drawIcon(    2,     0, 0);

    // draws text
    //            (text,   x, y, maxWidth, align)
    this.drawText('Text', 36, 0,    80,   'left');
};

// Function: Opens the window
Window_SimpleCTB.prototype.open = function() {
    this.refresh();
    Window_Base.prototype.open.call(this);
};


/********************\
     Scene Menu
    (Scene_Menu)
\********************/
// Note: The following are functions of Scene_Menu

// Function: creates the scene
// Note: This is an overwrite of the menu scene not using an alias
Scene_Menu.prototype.create = function() {
    // Calls the create function from Scene_MenuBase to help setup the basics of a scene
    Scene_MenuBase.prototype.create.call(this);

    // Creates the command window (Item, Equip, Skill, Options, Save, Exit, Etc.)
    this.createCommandWindow();

    // Creates the gold window
    //Note: Created before the simple window because it is used for the 'y' position
    this.createGoldWindow();

    // Creates the simple window using the function below
    this.createSimpleWindow();

    // Creates the status window
    this.createStatusWindow();
};

// Function: creates the simple window
Scene_Menu.prototype.createSimpleWindow = function() {
  // Create the new simple window and add it to the Mene Scene's window list

  // Create a new variable the calls the function of the object
  //                       Window_SimpleCTB(x,y)
  this._simpleWindow = new Window_SimpleCTB(0,0);

  // Set the 'y' position and uses the gold window's height to find the right position
  this._simpleWindow.y = Graphics.boxHeight - this._simpleWindow.height - this._goldWindow.height;

  // Add the window using a function named addWindow defined in Scene_Menu
  this.addWindow(this._simpleWindow);
};

 

[Drykul]

Hey, sorry for the late reply. This was very helpful. Thank you so much!

Side note. Aren't you the guy that I signed up with a couple years back to help make that Chrono Trigger fan game? Had a script and assets and whatnot already? Needed me to convert assets into Ace format?

 

[CT_Bolt]

Hey, sorry for the late reply. This was very helpful. Thank you so much!

Oh no problem, glad I could help.

Side note. Aren't you the guy that I signed up with a couple years back to help make that Chrono Trigger fan game? Had a script and assets and whatnot already? Needed me to convert assets into Ace format?

Hmm...yeah most likely was. I do believe so, lol. I still would love to possibly someday. Perhaps I'll use MV for that project.

Sidenote (/attempt to boost contest awareness): Have you played any of these games? https://rpgmakermv.co/forums/game-battles.71/

 

[Drykul]

Lol I thought that was you. Had a website for the group and everything. Kind of fell silent. You had written up most of the storyline already. Small world lol.

And I found out about the contest literally the day of or after the submissions were due in otherwise I'd be competing too. :(

 

[LTN Games]

I'm closing thread due to being addressed & solved if for any reason you would like it re-opened please report the post.