Help with a Window "Z position" Issue

Discussion in 'Learning Javascript' started by ArkDG, Dec 4, 2015.

  1. ArkDG

    ArkDG Veteran Veteran

    Messages:
    143
    Likes Received:
    45
    First Language:
    portuguese
    Well, I'm trying to make an addon for a plugin of mine. The addon is complete and works fine, the unique problem that I'm having now is that this addon adds a new window in the save menu and that this is appearing above windows that should be above it.

    I'm using aliases to make this change, as I want it to be a flexible change. So, the aliasing method I'm using to add this window is:

     

    var _alias_SceneFile_create_for_var = Scene_File.prototype.create; Scene_File.prototype.create = function() { _alias_SceneFile_create_for_var.call(this); this._variablesWindow = new Window_Variables(); this._variablesWindow.setMode(this.mode()); this._variablesWindow.opacity = 0; this._listWindow.variablesWindow = this._variablesWindow; this._listWindow.callUpdateHelp(); this._listWindow.refresh(); this.addChild(this._variablesWindow);}; 

        

    Where the previous window is an alias too, it's this:

    var _Scene_File_create = Scene_File.prototype.create; Scene_File.prototype.create = function() { _Scene_File_create.call(this); this._listWindow.height = this._listWindow.fittingHeight(8); var x = 0; var y = this._listWindow.y + this._listWindow.height; var width = Graphics.boxWidth; var height = Graphics.boxHeight - y; this._statusWindow = new Window_SavefileStatus(x, y, width, height); this._statusWindow.setMode(this.mode()); this._listWindow.statusWindow = this._statusWindow; this._listWindow.callUpdateHelp(); this._listWindow.refresh(); this.addWindow(this._statusWindow); this._actionWindow = new Window_FileAction(); this._actionWindow.setHandler('salvar', this.commandSave.bind(this)); this._actionWindow.setHandler('carregar', this.commandLoad.bind(this)); this._actionWindow.setHandler('deletar', this.commandErase.bind(this)); this._actionWindow.setHandler('cancel', this.commandCancel.bind(this)); this.addChild(this._actionWindow); this._actionWindow.hide(); this._statusWindow.refresh(); };What I want is this:

    [​IMG]
    What I'm getting is that:

    [​IMG]
    I tryied to do this:

    var _alias_SceneFile_create_for_var = Scene_File.prototype.create; Scene_File.prototype.create = function() { _alias_SceneFile_create_for_var.call(this); this._variablesWindow = new Window_Variables(); this._variablesWindow.setMode(this.mode()); this._variablesWindow.opacity = 0; this._listWindow.variablesWindow = this._variablesWindow; this._listWindow.callUpdateHelp(); this._listWindow.refresh(); this.addChild(this._variablesWindow); this.addChild(this._actionWindow); this._actionWindow.hide();};That's even the way I get the first picture. But that way I get a worse problem, because the action window do not disappears from the screen after it's used.

    I tryied removechild too, but didn't work.

    How do I do to fix this problem? I tryied aliasing the methods of the command action window too, to see if it makes the problem end, but got no effect. ):

    How do we work properly with z indexing in rmmv?
     
    Last edited by a moderator: Dec 4, 2015
    #1
  2. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    855
    First Language:
    German
    In general, windows that are added later appear on top of windows added earlier. If you want to change this, take a look at "this._windowLayer.children" (inside the scene). This array contains all windows added to the scene, and their order determines their z-index.

    So, if you want, you could just move them around to order them correctly, but in this case, it would be easier to just add the windows in a different order.

    /edit: Also, if you are adding a window with "addChild", it will either be displayed above or below all other windows, because the WindowLayer itself is a child of the scene. So it could look like this:

    Code:
    - window A- windowLayer    - window B- window C
    Now, if you are adding window D with "addWindow", it will appear below window C, because it's added to the WindowLayer. If you add it with "addChild", instead, it will appear on top of everything else.
     
    Last edited by a moderator: Dec 4, 2015
    #2
    ArkDG likes this.
  3. ArkDG

    ArkDG Veteran Veteran

    Messages:
    143
    Likes Received:
    45
    First Language:
    portuguese
    I see... I can't reorganize all the windows in this place, as you see. Because when I do it the command stops working properly, and the windows that were made to disappear after a command is taken do not disappear.

    And if I do addwindow, this happens:

    [​IMG]
    Yet, I don't want to have to change the original script/plugin, because this makes the aliasing thing unecessary. I could only overwrite everything and job done. I'm trying to do not do that. ):

    So, how do I do to change the order that the windows are called without needing to make this in the original plugin? 
     
    #3
    Zalerinian likes this.
  4. Zalerinian

    Zalerinian Jack of all Errors Veteran

    Messages:
    4,695
    Likes Received:
    921
    Location:
    The Internet.
    First Language:
    English
    Primarily Uses:
    N/A
    How are you drawing that text on the bottom window? You did it properly before with addChild, because when using addWindow, overlapping windows will overwrite each other, as you're eperiencing using addWindow. So when you used addChild, it was layers properly, except the text. I can tell because you'll notice that both the file list and file information windows have their borders behind the action window, but the text is drawn above it.

    So, it seems the problem is how the text is drawn. Do you not just draw it on the window itself? Are they separate sprites, for some reason (They don't seem to look like normal text, as they're rather pixelated, while normally drawn text is pretty smooth)? Do you drawn it separate from the window for some reason? 
     
    #4
    ArkDG likes this.
  5. ArkDG

    ArkDG Veteran Veteran

    Messages:
    143
    Likes Received:
    45
    First Language:
    portuguese
    Well, it's pixalated because of another plugin that I'm using in this game folder, the Kadokawa Text Decoration. This game that I show the pictures is just a "workshop clean slate project" that I'm using to create and test things. (as my currently project folder is full of other plugins that can cause issues and confusion in my tests)

    About the way I'm drawing the text:

    this.drawText(ark_variables_box[ark_create_vartext - 1] + ' ' + ark_var_check, 0, ark_text_Y, this.windowWidth());And about the borders of the window that appears behind the text, I think that is happening because the text that I added was in a new window, and this window was being called after the other windows, with another name and zero opacity (so its borders do not appear)

    When I started this plugin addon, I tryied to alias the "drawcontents" function of the "windowFileStatus" itself, but I was not having success in doing this. The text was just refusing to show. Then I did another window to place it with this zero oppacity configuration and above the File Status one, making it seems like the text is in this same window. (but it is not)

    I was researching in the topics that you people were (are) discussing about aliases, and then concluded that what was making things go wrong was really the order the statements were being called thanks to de alias organization. I also think that this is what Iavra was trying to tell me (or he telled me that, but I - in my big ignorance - do not understood ><)

    So, I want to thank you two for the help and atention here, because I managed to fix the problem!

    I was lucky that the original plugin had the windows called separated, so I changed the function I was aliasing to one that is called before the windowFileStatus and managed to call my new window behind the actionWindow and Confirmation ones. (because they are called with the windowFileStatus , my error. ): )
    This made me think about what could be a good way to keep easy access to change old methods in aliased plugins with anonimous functions. But my english is not good enough to express me well, so I will try to talk about it later. Maybe it's an idea that everyone uses and I just figured out it now, so... maybe my thoughts aren't that important.

    Anyway, thanks again people. I finally managed to do what I was trying.

    I will put bellow what I changed:

    ===============

     var _alias_SceneFile_create_for_var = Scene_File.prototype.createListWindow;

     

    // This window is created before the statusWindow one, and called by the Scene_File.prototype.create function.

     

    Scene_File.prototype.createListWindow = function() {

    _alias_SceneFile_create_for_var.call(this);

     

            this._variablesWindow = new Window_Variables();        

            this._variablesWindow.setMode(this.mode());

            this._variablesWindow.opacity = 0;

            this._listWindow.variablesWindow = this._variablesWindow;        

            this._listWindow.callUpdateHelp();                

            this._listWindow.refresh();   

            this.addChild(this._variablesWindow);

    };

     

    // I needed the existence of the _listwindow to my addon to work, so that were the perfect place to put it. Well, it just took me time to figure it out. Stupid me. ):

     

    =======================================

    And I will change it again, with what I learned, so in the future people (and I) don't have problems to change this addon. :p

    if (Imported.ArkDG_SaveScreen){ if (ark_variables_box[0] == 'y') { var _alias_SceneFile_create_for_var = Scene_File.prototype.createListWindow; Scene_File.prototype.createListWindow = function() { _alias_SceneFile_create_for_var.call(this); this.createVariableBox(); }; Scene_File.prototype.createVariableBox = function() { this._variablesWindow = new Window_Variables(); this._variablesWindow.setMode(this.mode()); this._variablesWindow.opacity = 0; this._listWindow.variablesWindow = this._variablesWindow; this._listWindow.callUpdateHelp(); this._listWindow.refresh(); this.addChild(this._variablesWindow); }; var _alias_to_Var_the_callUpdateHelp = Window_SavefileList.prototype.callUpdateHelp; Window_SavefileList.prototype.callUpdateHelp = function() { _alias_to_Var_the_callUpdateHelp.call(this); if (this.active && this.variablesWindow) { this.variablesWindow.setId(this.index() + 1); } };} }

    ^-^!
     

    Yet, is it possible to change what is inside (stored in) the alias?

    If it is, how do I do that?

    I wish to learn everything I don't know about aliasing.
     
    Last edited by a moderator: Dec 4, 2015
    #5
  6. Zalerinian

    Zalerinian Jack of all Errors Veteran

    Messages:
    4,695
    Likes Received:
    921
    Location:
    The Internet.
    First Language:
    English
    Primarily Uses:
    N/A
    No, you can't change an alias. You alias it so you can change the function itself, but you can't change the alias. Programming is designed to run in a certain order. If you run things out of order, then you're not going to get the result you expected. When you alias something, you need to be sure that what you do won't break what's already there, and this include putting different function calls, or variable definitions in the proper place. If you don't, you'll experience undefined behavior, which is when you're not sure what can happen. Maybe it'll produce a bug. Maybe it'll just out-right crash. Maybe everything will seem fine, but a few weeks later something is broken, because of that, and you don't even know where to begin looking.

    Also, I'd recommend you change this

    if (Imported.ArkDG_SaveScreen){ if (ark_variables_box[0] == 'y') {to this

    if (Imported.ArkDG_SaveScreen && ark_variables_box[0] == 'y') {Like I said above, programming is executed in order, but your computer is smart. If you're in a condition like the one above, where you have an AND (&&). If the computer hits an instance where there's a false condition, it won't check the rest of the conditions. In this case, all conditions must be true. If one is false, there is no point in checking anymore, the whole condition itself cannot be true if one is false, so the computer doesn't waste time running it. 

    The only 'possible exception' is when you're using OR (||). If you have ORs in your conditions, and something evaluates to false, the computer will jump to the next 'block' or conditions. For example,

    if(true && true && true && false || true && true && true) { // do stuff}the condition will result in true. Computers split conditions on ||, kind of like we might split strings on a comma. Now, you might see this and think, ok, this is the same as this:

    if(true && true && true && (false || true) && true && true) { // do stuff}But it's not. The computer will evaluate the condition as 

    if((true && true && true && false) || (true && true && true)) { // do stuff}Similar to what I said before about the computer not wasting time if a condition is false, it will check conditions from left and right. If two sets of conditions are separated by an OR, and the set on the left contains a false, the computer will skip the rest of set 1, and go check set 2, because we want to know if either set is true. The computer uses OR to split large conditions into smaller sets, allowing us to create composite if functions that will run under different conditions.

    Now, I've ranted on long enough. I hope you understood what I was saying to better understand conditions. If not, try looking up a tutorial somewhere online, there's going to be a ton of them, so you should be able to understand some of them.
     
    #6
    ArkDG likes this.
  7. ArkDG

    ArkDG Veteran Veteran

    Messages:
    143
    Likes Received:
    45
    First Language:
    portuguese
    hehe, Thank you. I understand about conditions, But this thing of using && and || together is new to me! It gives me good ideas! Tks! Really! 

    That one that you asked me to change was just a lazy thing that I leaved way. Most of the times I use && and ||, but sometimes I do this ugly thing. >< Newbie vices :p

    Anyway, when I did it I was separating some statements between the two conditions, making it needded to be this way,  but I changed it and forgeted to change the condition structure. (It is a lie, I really was just lazy)



    So, now I understand better how this alias thing works.

    Tks guys! ^^

     
     
    Last edited by a moderator: Dec 4, 2015
    #7

Share This Page