Learning how to navigate the code

[Xilefian]

This is inspired by Xyphien's post here: Ask the Owner Anything

This guide follows the way I navigate the code, but written from the perspective of someone who has zero coding experience. This is almost exactly what I went through as a 12 year old in 2004 and this is basically the story of how I very, very, very first started programming (day 1) - updated to reflect MV and Javascript rather than RPG Maker XP and Ruby.

The goal is to move the "New Game, Continue and Options" command window and make the border disappear. This is literally the very first thing I learned to do when it came to anything related to "code" (it was probably before I knew the word "code" even existed).

As a hypothetical starting point, imagine I know a enough about RPG Maker events to move NPCs around and I've even managed to install a community-made Plugin successfully. I don't know everything about events, pretty much the very basics of moving an event and showing a message (don't even know how to show the character names in the message box). This is the situation I was in when I first touched the code.

Let's start the task

The first thing I'd do is look for "New Game" in each of the code files (Literally find/search for text in an editor) and if I get zero results for that - then I'd look for the next word I saw; "Continue". I get a lot of results for this. I want to modify a window so maybe save time by only searching in "rpg_windows.js". The third result I get is:

//-----------------------------------------------------------------------------
// Window_TitleCommand
//
// The window for selecting New Game/Continue on the title screen.

This is clearly in the right area. Let's look downward at all the "Window_TitleCommand" text. This one seems to mention "Placement":

Window_TitleCommand.prototype.updatePlacement = function() {
    this.x = (Graphics.boxWidth - this.width) / 2;
    this.y = Graphics.boxHeight - this.height - 96;
};

I know what X and Y mean, I've seen that before in maths class, computer spreadsheets and with placing and moving events. Maybe this is where we can move the "New Game, Continue and Options" over.

Let's set X to zero:

Window_TitleCommand.prototype.updatePlacement = function() {
    this.x = 0
    this.y = Graphics.boxHeight - this.height - 96;
};

So that moved the command window to the far-left edge. Excellent, I can now play with this number until I'm happy with it.

What about removing that white border? Let's look for "border" in this file. Zero results. Maybe "edge"? Nothing. I want to make this part of the window skin disappear, so maybe search for "window skin". I know it's a windowskin because that's what the community has been calling this thing in the game. Nothing again. Let's just go to the top of rpg_windows.js and read the code.
Not very far down, line 19, I can see this:

this.loadWindowskin();

So Windowskin is one-word. Let's look for "loadWindowskin":

Window_Base.prototype.loadWindowskin = function() {
    this.windowskin = ImageManager.loadSystem('Window');
};

Wait, the text above it talks about "BackOpacity":

Window_Base.prototype.standardBackOpacity = function() {
    return 192;
};

I know what opacity means from my science class. An opaque object does not allow light through it.

What if I change this number?

Window_Base.prototype.standardBackOpacity = function() {
    return 0
};

So this made the background disappear. The border is still there, so it's not quite what I wanted.

Where is "standardBackOpacity" used? Searching for it has two results, the second one being:

Window_Base.prototype.updateBackOpacity = function() {
    this.backOpacity = this.standardBackOpacity();
};

I'm seeing a lot of "this." everywhere. I have no idea what that means, but I can see "backOpacity" and I'm wondering if there's a "frontOpacity" that we can set to zero.

Window_Base.prototype.updateBackOpacity = function() {
    this.frontOpacity = 0
};

This didn't do anything. How frustrating. Okay let's just have a tantrum and try to FORCE the opacity to change. I really want to see a visual result, here:

Window_Base.prototype.updateBackOpacity = function() {
    this.opacity = 0
};

Aha! That did it! A breakthrough! But now all windows are missing their background. I just want this to happen to the title-screen window.

Let's undo these changes to the opacity text and go back to Window_TitleCommand.

I'm looking at all of the "this." stuff, I want to see something similar to "this.opacity =" that I wrote earlier.

Window_TitleCommand.prototype.initialize = function() {
    Window_Command.prototype.initialize.call(this, 0, 0);
    this.updatePlacement();
    this.openness = 0;
    this.selectLast();
};

I can see "this.openness = 0;" - now that looks promising.
I'll be daring and add a new line underneath and put my opacity text in there:

Window_TitleCommand.prototype.initialize = function() {
    Window_Command.prototype.initialize.call(this, 0, 0);
    this.updatePlacement();
    this.openness = 0;
    this.opacity = 0
    this.selectLast();
};

Eureka! We've done it.

That was stressful. But now I know that Window_TitleCommand is where I can make changes to the title screen's window. I know I can change the opacity with "this.opacity = 0" in this area and in "updatePlacement" I can change the X and Y values to move the window around. Mission accomplished.

So if I want to change the options window, I can try to predict the pattern and look for "Window_OptionsCommand". Zero results. Darn it. Maybe just "Window_Options" will work? I'm desperate so I'm going to try anything...


The end.