Howto make a basic window

Discussion in 'Learning Javascript' started by SilverDash, Nov 1, 2015.

    Tags:
  1. SilverDash

    SilverDash Veteran Veteran

    Messages:
    349
    Likes Received:
    107
    For display on the map itself. This is as far as I got:

    There is no error, but also no window... The alert message in the constructor is shown so the window is created.

    Also the update method is never called.

    Also I suppose that I have to dispose or close the window in Scene_Map.prototype.terminate to prevent memory leaks?

    But I think windows don't update themselves. Meaning I probably have to alias the update method in the scenemanager and make it update my window.
     
    Last edited by a moderator: Nov 1, 2015
    #1
  2. Jeremy Cannady

    Jeremy Cannady Coldfire Veteran

    Messages:
    449
    Likes Received:
    260
    Location:
    Texas
    First Language:
    English
    Doesn't look like your doe is drawing anything, i put a few things in but I don't know what you are trying to display.

    Code:
    function Window_DashStamina() { this.initialize.apply(this, arguments); }// Inherit from base windowWindow_DashStamina.prototype = Object.create(Window_Base.prototype);// Set ConstructorWindow_DashStamina.prototype.constructor = Window_DashStamina;// ConstructorWindow_DashStamina.prototype.initialize = function(x, y, width, height) {    var width = this.windowWidth();    var height = this.windowHeight();    Window_Base.prototype.initialize.call(this, x, y, width, height);    this._helpWindow = null;    this._handlers = {};    this._touching = false;    this.deactivate();    alert('window created');     this.update();};// UpdateWindow_DashStamina.prototype.update = function() {    Window_Base.prototype.update.call(this);      this.contents.clear();    this.drawStaminaWindow( 0, 0, width);    console.log('updating'); // Erm... How do I hook this into the window_base update without an alias (because we inherit from Window_Base)... This is never called.    // Update stamina bar};Window_DashStamina.prototype.drawStaminaWindow = function( x, y, width) {    var unitWidth = Math.min(80);    this.resetTextColor();    this.drawText("something", x, y, width, 'left');    this.changeTextColor(this.systemColor());   };//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////var alias_SceneMapOnMapLoaded = Scene_Map.prototype.onMapLoaded;Scene_Map.prototype.onMapLoaded = function() {    alias_SceneMapOnMapLoaded.apply(this, arguments);    this.dashStaminaWindow = new Window_DashStamina(10,10,100,64);}
     
    Last edited by a moderator: Nov 1, 2015
    #2
  3. SilverDash

    SilverDash Veteran Veteran

    Messages:
    349
    Likes Received:
    107
    Just a basic window with "Hello world" would be great.

    this.windowWidth(); is from Window_Command and not from Window_Base.

    I added the drawing to the window (even though I assumed a window would always draw itself or atleast it's skin) but still no visible window at all. Also no errors:

    Code:
    function Window_DashStamina() { this.initialize.apply(this, arguments); }// Inherit from base windowWindow_DashStamina.prototype = Object.create(Window_Base.prototype);// Set ConstructorWindow_DashStamina.prototype.constructor = Window_DashStamina;// ConstructorWindow_DashStamina.prototype.initialize = function(x, y, width, height) {    Window_Base.prototype.initialize.call(this, x, y, width, height);    this._helpWindow = null;    this._handlers = {};    this._touching = false;    this.deactivate();    //alert('window created');    this.update();};// UpdateWindow_DashStamina.prototype.update = function() {    Window_Base.prototype.update.call(this);      this.contents.clear();    this.drawStaminaWindow( 0, 0, 100);};Window_DashStamina.prototype.drawStaminaWindow = function( x, y, width) {    var unitWidth = Math.min(80);    this.resetTextColor();    this.drawText("Hello world!", x, y, width, 'left');    this.changeTextColor(this.systemColor());	console.log('draw');   };//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////var alias_SceneMapOnMapLoaded = Scene_Map.prototype.onMapLoaded;Scene_Map.prototype.onMapLoaded = function() {    alias_SceneMapOnMapLoaded.apply(this, arguments);    this.dashStaminaWindow = new Window_DashStamina(10,10,100,64);}
     
    #3
  4. Jeremy Cannady

    Jeremy Cannady Coldfire Veteran

    Messages:
    449
    Likes Received:
    260
    Location:
    Texas
    First Language:
    English
    Ok, I got it to display Hello World for you. Please note that I haven't messed with Scene_Map before so I don't know how it operates just yet.
    You can figure that out i think.

    function Window_DashStamina() { this.initialize.apply(this, arguments); }// Inherit from base windowWindow_DashStamina.prototype = Object.create(Window_Base.prototype);// Set ConstructorWindow_DashStamina.prototype.constructor = Window_DashStamina;// ConstructorWindow_DashStamina.prototype.initialize = function(x, y, width, height) { Window_Base.prototype.initialize.call(this, x, y, width, height); this._helpWindow = null; this._handlers = {}; this._touching = false; this.deactivate(); //alert('window created'); this.update();};// UpdateWindow_DashStamina.prototype.update = function() { Window_Base.prototype.update.call(this); this.contents.clear(); this.drawStaminaWindow( 0, 0, 100);};Window_DashStamina.prototype.drawStaminaWindow = function( x, y, width) { var unitWidth = Math.min(80); this.resetTextColor(); this.drawText($gamePlayer.dashStamina, x, y, width, 'left'); this.changeTextColor(this.systemColor()); };//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////var alias_SceneMapOnMapLoaded = Scene_Map.prototype.onMapLoaded;Scene_Map.prototype.onMapLoaded = function() { alias_SceneMapOnMapLoaded.apply(this, arguments);}Scene_Map.prototype.createDashWindow = function() {this.dashStaminaWindow = new Window_DashStamina(10,10,100,64); this.addChild(this.dashStaminaWindow);};var alias_createDisplayObjects= Scene_Map.prototype.createDisplayObjects;Scene_Map.prototype.createDisplayObjects = function() {alias_createDisplayObjects.call(this); this.createDashWindow();};
    Nvm this makes the game lag so it is not the correct way.

    Edit 2: Ok I got it to work with no lag and display the correct dash amount. Let me know if this is what you wanted.
     
    Last edited by a moderator: Nov 2, 2015
    #4
    DreamX and Maliki79 like this.
  5. SilverDash

    SilverDash Veteran Veteran

    Messages:
    349
    Likes Received:
    107
    I love you! Works great.

    Looks like I have to dive deeper into how Javascript works with classes&objects (which are functions), prototypes (which every function has), this-keyword, polymorphism and much more... Ugh I never thought I would say this. But I really really miss the simplicity of Ruby.

    I will attempt to add it to my stamina script tomorrow with a progressbar (can't be that hard).
     
    Last edited by a moderator: Nov 2, 2015
    #5
    Jeremy Cannady likes this.
  6. Jeremy Cannady

    Jeremy Cannady Coldfire Veteran

    Messages:
    449
    Likes Received:
    260
    Location:
    Texas
    First Language:
    English
    Also if you want to change the opacity so you cant see the window and the border just put

       this.opacity = 0;

    before the line where you draw everything and then you will only see the bar.

    See the spoiler for example of a bar on map.

    [​IMG]
     
    Last edited by a moderator: Nov 2, 2015
    #6
  7. HomickNation

    HomickNation Villager Member

    Messages:
    6
    Likes Received:
    0
    Location:
    Pittsburgh Pennsylvania
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm also trying to accomplish this, but in a bit of a different way. I put the last edit of this script in, however nothing shows up on my screen and i get no errors. Any thoughts on how to make it appear for me?
     
    #7

Share This Page