Complete Beginner Exploring rpg_windows.js

Discussion in 'Learning Javascript' started by Zizka, Aug 17, 2019.

  1. Zevia

    Zevia Veteran Veteran

    Messages:
    621
    Likes Received:
    327
    First Language:
    English
    Primarily Uses:
    RMMV
    Yep - correct on all counts.

    As a minor correction to an earlier post, you're correct that Objects are constructor functions. What I meant by "functions are objects" was that the Function constructor function inherits from the Object constructor function.

    There is a data type in JavaScript called an object that, as Poryg mentioned, would be termed a struct or dictionary in other languages (or Map), which is a series of keys associated with values. They are made with the Object constructor function. Prototype is one of these data structures.

    Properties refer to a key-value pairing of an object.

    Code:
    var someObject = {
      someKey: 'Some value',
      anotherKey: 4,
      hello: function() {
        console.log('Hello World!');
      }
    };
    
    In JavaScript, you can create an object by using curly braces, then specifying a key, followed by a colon, followed by the value for that key. You can then reference that property with dot notation.

    So someObject has the key or "property" someKey, with a value of "some value". The anotherKey property has the value 4. The hello property is a function - properties that are functions have a special term, which is "method". So we say someObject has the hello method as a property.

    We can call those functions just like any other function:
    Code:
    someObject.hello(); // prints "Hello World!"
    
    Objects can also have properties that are themselves objects:
    Code:
    var nested = {
      objectProperty: {
        someKey: "Hi!"
      }
    };
    
    console.log(nested.objectProperty.someKey); // prints "Hi!"
    
    So prototype is a property on all constructor functions and prototype is an object.
     
    #21
    caethyril likes this.
  2. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    By I'm not forgetting the rest of your messages, I'm processing the information little by little otherwise it becomes too much. You might have noticed I'm slowly going through it. So even if I don't reply right away to new information, I eventually will.

    Is there a list of constructor functions? What are the other function categories? I googled constructor functions list but couldn't find anything.
     
    #22
  3. Zevia

    Zevia Veteran Veteran

    Messages:
    621
    Likes Received:
    327
    First Language:
    English
    Primarily Uses:
    RMMV
    I don't know if there's a list of the default constructor functions that JavaScript has, but the ones I can think of are:
    • Object
    • Function
    • Array
    • String
    • Number
    • Boolean
    • NodeList
    • HTMLCollection
    • XMLHttpRequest (not all browsers support this class, there are variations on it)
    I'm sure there are a lot more, but the first 6 are the ones you'd frequently use. The last 3 are special cases and I suspect there are a lot of "special case" functions I'm not thinking of.
    As far as function categories, the ones I can think of are:
    • Constructor functions (known as classes since ES6. In ES6, a constructor function is actually a special method you can declare on classes.)
    • Methods (functions that are properties of objects or classes)
    • Anonymous functions (functions that are not assigned to a variable and thus have no name - hence, "anonymous" - typically passed as arguments to other functions)
    • Callback functions (functions that are not immediately called and instead wait for some event to run their code)
    • Immediately invoked function expressions, abbreviated as IIFE (a function that's immediately called as soon as it's defined - mostly for scoping issues that aren't really a problem any more since ES6, but important for writing Plugins that are compatible with versions of RMMV before 1.6)
    • "Standard" functions (functions that don't fall into a special category and are just reusable pieces of code)
     
    Last edited: Aug 19, 2019
    #23
    caethyril likes this.
  4. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    Ok I see. I don't feel like I'm advanced enough to understand a lot of the things you are talking about but I'll get there eventually. You certainly seem to know what you're talking about.

    I'll go back to simple practical questions so I can leave the pure theory aside from a minute.

    upload_2019-8-19_8-31-49.png
    Suppose I wanted to modify this part of code. Should I modify it straight in the rpg_windows.js or should I use a script call? Is this a case by case basis or is it generally better not to touch the source code?
     
    #24
  5. Zevia

    Zevia Veteran Veteran

    Messages:
    621
    Likes Received:
    327
    First Language:
    English
    Primarily Uses:
    RMMV
    It's best not to touch the source code. If you accidentally break something, it might be difficult to restore.

    However, the RMMV code has been written in a way that you can generally overwrite almost everything with Plugins. When the game starts up, it loads all the default engine code first, then loads Plugins in the order you have them imported.

    If you create a Plugin, you can do something like:
    Code:
    Window_Base._iconWidth = 36;
    Window_Base._iconHeight = 36;
    
    Then when your Plugin loads, you're ultimately just reassigning the value of a property, similar to the following:
    Code:
    var someObject = {
      someKey: 'The original value'
    };
    console.log(someObject.someKey); // "The original value"
    
    someObject.someKey = 'A new value';
    console.log(someObject.someKey); // "A new value"
    
    The reason you don't want to do it in a script call is because you'd have to call it every time you start the game, as the change would only last for that session.
     
    #25
    caethyril likes this.
  6. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    Yay! First message of yours which I understand in its entirety.

    I'm seeing this a lot in the .js file. I think I'll need to learn that through my lessons before I can efficiently continue to understand what's being coded there.

    Here when it says:
    upload_2019-8-19_11-49-2.png
    In as simple terms as possible, what does 'superclass' means here? Does it mean that it's a class that supersedes all other windows?
     
    #26
  7. Zevia

    Zevia Veteran Veteran

    Messages:
    621
    Likes Received:
    327
    First Language:
    English
    Primarily Uses:
    RMMV
    The keyword "this" in JavaScript can be a lot to understand, but the simplest explanation is that it represents the current context (which means understanding scope and context). The default engine is also really inconsistent in its use, which makes it more confusing - it would be best used only on prototype methods to represent the current instance, but it's also used for static classes like BattleManager. If you want to dive more into the "this" keyword, here's the MDN article on it.

    Superclass means it doesn't extend or inherit from anything - it's the "parent" class to everything that extends it. So, every Window inherits from Window_Base, but not every Window inherits from, say, Window_Selectable.

    [​IMG]

    So a Window_ActorCommand is an extension of the Window_Selectable class, which is an extension of the Window_Base class, so Window_Base is the superclass of Window_ActorCommand. That's true of every single Window class in RMMV.
     
    #27
    Zizka likes this.
  8. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    Gotcha! So it's a class that supersedes the other class then. I think I understand. Everything else inherits from whatever characteristics this superclass has. I would imagine the same structure is true for other .js files in RMMV.

    upload_2019-8-19_14-22-21.png
    I think I understand this fairly easily as it's a way to support the game's language from other countries.

    Tweaking the game's font interests me so I tried to do a Ctrl+F to find it but came up with nothing. It's likely it's somewhere else in another .js file. Is there a way to 'open file location' in JS? I mean, to find where 'GameFont' is without checking each and every file and doing a Ctrl+F search there?
     
    #28
  9. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,591
    Likes Received:
    1,000
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    One of my favorite articles that explains the "this" keyword. It can be complicated to understand at first. With more practice, it begins to be intuitive.

    Font is different in that it's loaded by something called Cascading Style Sheets (CSS). CSS along with HTML and JS are the basis of basically all websites, and RPG Maker MV essentially creates web games. It just happens to be 98% Javascript, 1% HTML, and 1% CSS for RPG Maker MV games. Pretty much the only thing CSS does is load the fonts, you can find that CSS file in the fonts folder of your project.
     
    #29
    caethyril and Zizka like this.
  10. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    Ah ah! Very interesting, thank you. So RMMV is mostly javaScript with some CSS and some HTML.

    My question still stands however, how do you know where something this when it comes from a different .js file?

    upload_2019-8-19_15-15-51.png
    Code:
    $gameParty.size
    Is not declared in rpg_windows.js from what I can tell. It's in a different file. How can I find out where $gameParty.size is for example or any other code that's not in the file I'm currently "in" so to speak.
     
    #30
  11. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,591
    Likes Received:
    1,000
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    The easiest answer is to get a text editor that lets you ctrl-F across multiple files. I use VSCode, other options are Sublime, Brackets, Atom, Notepad++

    A couple comments earlier, people were talking about variables that are "instances" of classes. For example I might make a Garfield (variable) that is an instance of Cat (class). Or a Canada (variable) that is an instance of Country (class). Or a Harold (variable) that is an instance of Game_Actor (class).

    In your example, you are wondering where $gameParty.size() comes from. size must be a function because of the () parenthesis, so somewhere that function must be defined.

    First you want to figure out that $gameParty is an instance of ______ class.

    Start a playtest, then press F8 or F12 to open the console. In the console, type and press enter:
    Code:
    $gameParty.constructor.name
    You learn that the variable called $gameParty has a constructor called Game_Party. In other words, $gameParty (variable) is an instance of Game_Party (class).

    Then in your text editor that can ctrl-F across multiple files, search for "Game_Party" and you can scroll through to see all the definitions.
     
    #31
    Zevia and caethyril like this.
  12. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    I figured Ctrl+F would be involved, thank you. I would've imagined there'd be something more pragmatic and user friendly but apparently there isn't. I'm learning a lot, this is great.

    Regarding the SuperClass, does it go from 1 to 704 in the code? I'm wondering where the super class begins and ends.
     
    #32
  13. Zevia

    Zevia Veteran Veteran

    Messages:
    621
    Likes Received:
    327
    First Language:
    English
    Primarily Uses:
    RMMV
    I found this method of exploring the base JavaScript significantly more helpful than trying to read through the files in my IDE. Once I understood the design and thought process behind how everything is written, I could more efficiently search the files, but at first, nothing is put in an easily-readable or very well-documented manner in the source code.

    The console is what's known as a REPL and lets you view the various classes, data, instances of classes, etc. as they are at runtime or their current state. For example, if you want to know everything Window_Base does:
    [​IMG]

    All of the properties with arrows next to them are objects and arrays, and you can click them to expand them out. In this way, you can see everything a Window_Base gets when it's created, instead of having to try and piece it together one method at a time.

    Regarding your other question, yes, those lines are everything defined directly on Window_Base. The source code helpfully separates each class with a commented-out section to give some separation. You can see the next class, Window_Selectable, begins building on Window_Base:

    Code:
    Window_Selectable.prototype = Object.create(Window_Base.prototype);
    
    Then the code begins adding a bunch of methods to the prototype of Window_Selectable - so it does everything Window_Base does (at least everything set on the Window_Base.prototype property), plus extra.
     
    #33
    Zizka likes this.
  14. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    Ok cool, I wasn't sure about the separation in the actual file, one more thing I learned.

    I think that if I aim to modify my own game with custom code, it would probably be more efficient to start from a plug-in and modify it if necessary then starting a plug-in of my own from scratch considering how complex it seems to be.

    Regardless since the font isn't managed from here, suppose I'm interested in displaying icons in a text message. I realize I could use a plug-in. Suppose I wanted to do this on my own. How would I start at doing this?

    For instance, how do I know which part of the code I need to copy then modify to add to my own script?

    What I did is open up Notepad++ and Ctrl+F 'icon' until I found something which I found to be possibly relevant:
    upload_2019-8-19_19-54-51.png
    I think 'draw' here means to display. Then the IconIndex is like array elements to select the icon you want displayed in your iconset.

    textState however I don't know. I could probably ctrl+F it in the code to find out about it. But since I don't know what it does just yet, I find myself stuck. What could textState.x+2 even mean? Maybe it refers to the position the icon is drawn in regards to the text? Something plus 2 pixels?

    Window_Base.iconWidth + 4 is something that appeared in the super class, I remember that.

    Am I mislead in my assumptions here or am I right?
     
    #34
  15. Zevia

    Zevia Veteran Veteran

    Messages:
    621
    Likes Received:
    327
    First Language:
    English
    Primarily Uses:
    RMMV
    I believe the default editor allows you to draw icons in text using the \I escape character:
    [​IMG]
    [​IMG]

    If you want to do it yourself in JavaScript, though, I suspect processDrawIcon is probably what you're looking for. The function that takes formatted text and transforms it into colors, icons, variables, etc. is "drawTextEx", so "processDrawIcon" might be what gets called when it comes across the "I[n]" escape character.

    iconIndex references the index from the iconset.png file that the game stores every icon in it. It's not an Array, but more a number used to figure out the x and y coordinate in the iconset picture file to draw from. The RMMV engine makes heavy use of the canvas API, as the entire game is basically just a single canvas element. That's its own can of worms to dive into, though.

    textState is an object that likely has a few properties, but at the very least, there's an x property and a y property. When text is being drawn onscreen, you have to specify an x and a y coordinate, but drawing words and drawing icons have to be separate function calls with the canvas API. So with my example above, you'd really have three function calls:

    1. Draw "Here's a message with the"
    2. Draw the icon
    3. Draw "icon in it!"

    So textState is probably keeping track of the x and y coordinate in each step, so that it can figure out where to draw the icon correctly. 2 and 4 are pixels, yes, and I believe are the "padding" values they're using so that there's space around an icon and it's not butting right up against the edge of a window or another icon or something.
     
    #35
    caethyril and Zizka like this.
  16. Restart

    Restart Veteran Veteran

    Messages:
    212
    Likes Received:
    142
    First Language:
    English
    Primarily Uses:
    RMMV
    One important thing to know about the console is that putting an object into the console is a pointer, not a frozen image of its state when being triggered.

    So if you're trying to figure out what's going on with an event that triggers some code (like the x,y coordinates) you want to console.log() the relevant event.x or event.y, instead of console.log()ing the event itself and opening it (because that that point it'll open the event and let you see the CURRENT x and y)
     
    #36
    caethyril likes this.
  17. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    This is what I was trying to say regarding the iconIndex :). What's canvas API in relationship to JS then? From what I understand in your link, it's part of JS. It's not a different language. I looked up API on google: Application Programming Interface. So it's sort of a frontend under JS then?

    What do you mean by the part in green? Just generally speaking I mean.

    [​IMG]
    textState: So this manages where the icon will be displayed in the window message if I understand correctly.
    iconIndex: this is a reference to the iconset.png.

    Very interesting, thanks! It's easier for me to understand when you vulgarize things like that.

    Here is you say you suspect. How can you find out what processDrawIcon does exactly? It's probably documented somewhere. Is it in the tutorial of RMMV? Do I have to google it every time? Is it explained as // comments somewhere in the code?
     
    #37
  18. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,591
    Likes Received:
    1,000
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    API is a general term that applies across all programming languages (and beyond), it basically means "a way for one thing to interact with another thing". It's pretty general.

    Imagine you want to draw some text on a screen. There's many ways to display stuff in web browsers. One of those ways is by using a <canvas> element. If you have such an element, the web browser allows you to interact with it using the Canvas API as said above and you use Javascript to interact with the Canvas API.
    As a game developer using RPG Maker MV, you wouldn't need to use that directly because the MV program developers already wrote functions that interact with it for you. In fact, MV also uses an open source library called PIXI that handles a lot of the details. So you might interact with the PIXI API instead of the Canvas API directly, since PIXI already interacts with the Canvas API. But a normal user of MV wouldn't even need to do that because they would use event commands.

    Still following?
    Much of programming is about *abstraction*. There are layers of systems, languages, and tools on top of each other all with the goal of abstracting the details for the final person, so you can focus on making an awesome RPG instead of worrying about all the details.

    Agreeing with Zevia, that's a pretty big topic and getting into it in the context of this conversation is a bit of a can of worms, so to speak.

    The unfortunate truth is that the documentation in MV for the Javascript code is extremely poor and/or nonexistent. The best way to learn what a function does is to use the console + read the function code + do some tests yourself.
     
    #38
    Zizka and caethyril like this.
  19. Zizka

    Zizka Veteran Veteran

    Messages:
    127
    Likes Received:
    24
    First Language:
    English
    Primarily Uses:
    RMMV
    That is indeed very unfortunate. I find that creating my own plug-ins is a lot harder a thing to do than I had previously imagined. Not only do you need to learn JavaScript, you also need to decipher whatever cryptic code has already been set in place. I think I'll stick to editing already existing plug-ins to fit my needs as otherwise the time investment is probably not one I would be willing to make. This being said, I'm always up to learning new things so I'll keep asking questions :).

    I'm not too sure what you mean by that. I find that theory is easier to understand with a set lexicon which you can depend on to understand things. The more abstract something feels to me, the harder it is for me to understand what is being explained. I need to ground in reality abstract terminology. That might just be me however but abstracting the details doesn't help me generally speaking, it just makes things harder. Unless I missed your point which is entirely possible.

    To sum things up:
    1. The canvas API is called upon by JS in order to do certain things.
    2. You don't need to worry about canvas API as whatever interaction with it is done automatically by JS.
    3. PIXI is another API which I might interact with directly but it's unlikely.

    So the icon example wasn't a good one because it was already supported natively by the engine itself.


    Suppose I wanted to have a text system where my text is displayed one letter at a time with a sound for each letter just like in that video there at 1:07:46 with the option of displaying the full message by having the player input something.

    Would I be in the right place in order to do this? Because since there's no information I really wouldn't be able to tell. I'd like to know this to see if I could figure out how to modify the code to make it do what I want it to do.
     
    #39
  20. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,591
    Likes Received:
    1,000
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    I think you got part of what I was saying about abstraction. Let's say you wanted to show a picture on a screen in MV, as an example:
    • You don't have to communicate directly with hardware (computer monitor, laptop screen, etc.) to display a picture, those details are abstracted away by the operating system (Windows, Mac, Linux)
    • You don't have to communicate directly with the operating system, those details are abstracted away by a web browser (Firefox, Chrome, NWjs - used by MV for desktop deployments, Safari, etc.)
    • You don't have to communicate directly with the browser (such as using the Canvas API), those details are abstracted away by a rendering library called PIXI
    • You don't have to communicate directly with PIXI, those details are abstracted away by the MV core code (rpg_core.js, rpg_scenes.js, etc.) written by the MV developers
    • You don't have to communicate directly with the MV core code, those details are abstracted away by Event Commands
    It's layers of abstraction to the result where to display a picture, you just make an event command Show Picture and it works.

    If an event command doesn't have a feature you want, you have to go one layer deeper to interact with the MV core code directly. If the core code doesn't have a feature you want, you have to go one layer deeper and interact with PIXI directly. For your sake, don't go any deeper than that when working with MV.

    I didn't watch the video because it was super long and I couldn't scroll to the right spot on my phone. There's a way to share YouTube videos so it starts at a certain point.

    If you want to learn how to modify something, you have to first understand how it currently works. Study and analyze how the code is currently drawing letters in windows (one letter at a time or all at once) to learn how to change it.
    You can also look at how other plugin writers implement the same feature. I googled "rpg maker mv letter sounds" and found a bunch.
     
    #40

Share This Page