help with drawing text in menu...

Discussion in 'Learning Javascript' started by lonewolph, Feb 7, 2018.

Thread Status:
Not open for further replies.
  1. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    I have a variable in game that contains a word.
    I wanna draw this word on the screen for each character
    how would I go about doing this? its variable number 10

    i declare the variable for the menu and set the in-game variable to that?
    not sure where to start. i managed to lay out my menu but i dont know
    how to add stuff beyond what the menu has to begin with...
    can anyone help me?


    //DISPLAY OF HEALTH, MANA, LEVEL, ICONS, CLASS ETC BELOW
    Window_MenuStatus.prototype.drawItemStatus = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    var x = rect.x
    var y = rect.y
    var width = rect.width - x - this.textPadding();
    var lineHeight = this.lineHeight();
    //variable for the morality
    var morality = 'pure evil' (i dont know how to set it from the game variable....)

    //width2 is the length of the bar
    var width2 = 160;
    //the actor name location
    this.drawActorName(actor, x + 130, y + 30);
    //the actor level location
    this.drawActorLevel(actor, x, y + 100 + lineHeight * 1);
    //the actors debuffs location
    this.drawActorIcons(actor, x, y + lineHeight * 2);
    //the actors class name location
    this.drawActorClass(actor, x + 252, y -40 + lineHeight * 3);
    //X and Y is position, width is length of the bars (lineHeight is the spacing between the bars)
    this.drawActorHp(actor, x + 150, y + 47 + lineHeight, width2);
    this.drawActorMp(actor, x + 150, y + 47 + lineHeight + 26, width2);
    // this.drawActorHp(actor, x, y + lineHeight * 4, width2);
    // this.drawActorMp(actor, x, y + lineHeight * 5, width2);
    this.draw(morality, x, y); ?????
     
    #1
  2. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    Try this:

    Code:
    var morality = $gameVariables.value(10);
    
    and

    Code:
    this.drawText(morality, x, y);
    
    It helps if you can wrap your code in CODE tags (press Insert --> Code) to help see the formatting more easily.
     
    #2
  3. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    thank you aloe. could you also make any sense of this here? ill try to explain more.
    i got a variable named moralityLevel which is a number from -100 to 100, this is the players morality level, it changes based on the players action.

    the other 3 characters also have moralityLevels but i want them to be static and dont change, but also be printed above their HP gauges in the menu, like the players one

    i also need a if statement thatll also take the moralityLevel number and convert that to the appropriate string then print it on the right character

    id also like the morality name to be a specific color according to what it is. like lawful good = blue, chaotic evil = red

    Lawful Good = 100 or more
    Chaotic Good = 50 to 99
    Lawful Neutral = 1 to 49

    Neutral = 0

    Chaotic Neutral = -1 to -49
    Lawful Evil = -50 to -99
    Chaotic Evil = -100 or less

    Code:
        var moralityLevel = $gameVariables.value(10);
    
    
    
        var playerMorality = 'Neutral'
       //The Ones Below are supposed to be constant and dont change,
       //only the player morality changes 
        var PaladinMorality = 'Lawful Good'
        var EmpathMorality = 'Chaotic Good'
        var NecroMorality = 'Lawful Evil'
    
        //havent done if statements before yet
        if moralityLevel <= -100
            playerMorality = 'Chaotic Evil'
        else if moralityLevel <= -50
            playerMorality = 'Lawful Evil'
        else if moralityLevel <= -1
            playerMorality = "Chaotic Neutral"
        else if moralityLevel == 0
            playerMorality = 'Neutral'
        else if moralityLevel >= 100
            playerMorality = 'Lawful Good'
        else if moralityLevel >= 50
            playerMorality = 'Chaotic Good'
        else if moralityLevel >= 1
            playerMorality = 'Lawful Neutral'
    
    
    //width2 is the length of the HP/MP bar
        var width2 = 160;
    //the actor name location
        this.drawActorName(actor, x + 130, y + 30);
    //the actor level location
        this.drawActorLevel(actor, x, y + 100 + lineHeight * 1);
    //the actors debuffs location 
        this.drawActorIcons(actor, x, y + lineHeight * 2);
    //the actors class name location
        this.drawActorClass(actor, x + 252, y -40 + lineHeight * 3);
    //X and Y is position, width is length of the bars (lineHeight is the spacing between the bars)
        this.drawActorHp(actor, x + 150, y + 47 + lineHeight, width2);
        this.drawActorMp(actor, x + 150, y + 47 + lineHeight + 26, width2);
    //draw the morality to the screen. but how do I tell it to only draw on the
    //correct character and to be above the actor HP gauge?
        this.drawText(playerMorality, x, y);
    
     
    #3
  4. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    This seems to be working below, except the problem is. it draws the morality name on every single character in the menu, and I want to have a specific seperate morality for each character........

    Code:
    //DISPLAY OF HEALTH, MANA, LEVEL, ICONS, CLASS ETC BELOW
    Window_MenuStatus.prototype.drawItemStatus = function(index) {
        var actor = $gameParty.members()[index];
        var rect = this.itemRect(index);
        var x = rect.x
        var y = rect.y
        var width = rect.width - x - this.textPadding();
        var lineHeight = this.lineHeight();
        
    
        //variable for the morality level for the player from the game
        var moralityLevel = $gameVariables.value(10);
    
        //this player morality name is based on the morality level and can change
    //    var playerMorality = 'Neutral'
        //these moralities names are set and dont change, only the players morality can change
        var paladinMorality = 'Lawful Good'
        var empathMorality = 'Chaotic Good'
        var necroMorality = 'Lawful Evil'
    
    //Check Morality Level and set the Morality to the appropriate name
        if (moralityLevel <= -100) {
              playerMorality = 'Chaotic Evil'}
        else if (moralityLevel <= -50) {
             playerMorality = 'Lawful Evil'}
         else if (moralityLevel <= -1) {
            playerMorality = "Chaotic Neutral"}
         else if (moralityLevel == 0) {
            playerMorality = 'Neutral'}
         else if (moralityLevel >= 100) {
            playerMorality = 'Lawful Good'}
         else if (moralityLevel >= 50) {
            playerMorality = 'Chaotic Good'}
         else if (moralityLevel >= 1) {
              playerMorality = 'Lawful Neutral'}
    
    
    
    //width2 is the length of the HP/MP bar
        var width2 = 160;
    //the actor name location
        this.drawActorName(actor, x + 130, y + 30);
    //the actor level location
        this.drawActorLevel(actor, x, y + 100 + lineHeight * 1);
    //the actors debuffs location   
        this.drawActorIcons(actor, x, y + lineHeight * 2);
    //the actors class name location
        this.drawActorClass(actor, x + 252, y -40 + lineHeight * 3);
    //X and Y is position, width is length of the bars (lineHeight is the spacing between the bars)
        this.drawActorHp(actor, x + 150, y + 47 + lineHeight, width2);
        this.drawActorMp(actor, x + 150, y + 47 + lineHeight + 26, width2);
    //draw the morality to the screen
        this.drawText(playerMorality, x, y);
    
    
    };
     
    #4
  5. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    It's because the entire function
    Code:
    Window_MenuStatus.drawItemStatus()
    Is called multiple times in the status menu (it's called for each actor). So the whole box of code you have is actually executed the exact same way for each actor, and that's why it always draws the Player's Morality instead of the other characters (Paladin, Empath, Necromancer).

    You can solve this by adding some "if" statements to the bottom of what you already have.

    Here is an example:

    Code:
    //draw the morality to the screen
       if(actor.actorId() === 1) {
          this.drawText(playerMorality, x, y);
       } else if(actor.actorId() === 2) {
          this.drawText(paladinMorality, x, y);
       } else if(actor.actorId() === 3) {
          this.drawText(empathMorality, x, y);
       } else if(actor.actorId() === 4) {
          this.drawText(necroMorality, x, y);
       }
    
     
    #5
  6. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    awesome that worked perfect, thank you!! one more question, is there a way to draw a gauge/bar as well based on a variable and also to set the color of the text drawn to the screen? thanks again!
     
    #6
  7. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    Gauge:

    The class of Window_Base includes a function to draw a gauge, which means that every window in the game has the ability to draw a gauge.
    Code:
    Window_Base.prototype.drawGauge = function(x, y, width, rate, color1, color2) {
        var fillW = Math.floor(width * rate);
        var gaugeY = y + this.lineHeight() - 8;
        this.contents.fillRect(x, gaugeY, width, 6, this.gaugeBackColor());
        this.contents.gradientFillRect(x, gaugeY, fillW, 6, color1, color2);
    };
    
    Here is an example of how the game uses the drawGauge function.
    Note that "rate" is a fraction between 0 and 1 which determines how much the gauge is filled. This could be tricky for you because your morality starts at zero and can extend to -100 or +100.
    So you'd either want to change it so that the gauge fills from the middle instead of the left side (i.e. starts filling at zero until -1 or +1), or you can put two gauges next to each other where one fills from the left and one fills from the right.
    Code:
    Window_Base.prototype.drawActorHp = function(actor, x, y, width) {
       width = width || 186;
       var color1 = this.hpGaugeColor1();
       var color2 = this.hpGaugeColor2();
       this.drawGauge(x, y, width, actor.hpRate(), color1, color2);
       this.changeTextColor(this.systemColor());
       this.drawText(TextManager.hpA, x, y, 44);
       this.drawCurrentAndMax(actor.hp, actor.mhp, x, y, width,
       this.hpColor(actor), this.normalColor());
    };
    

    Color:

    The class of Window_Base also includes a function to change the color.
    Here it is:
    Code:
    Window_Base.prototype.changeTextColor = function(color) {
        this.contents.textColor = color;
    };
    
    A common way to do this is:
    Code:
    // this code is inside a window's drawItem / refresh / drawStatus etc. function
    this.changeTextColor(this.textColor(X)); // X is the index on the Window.png file
    // for example 0 is white, 1 is blue, etc. based on the Window.png file
    this.drawText("I'm in a different color!", x, y);
    this.resetTextColor();
    
     
    #7
  8. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    this is what I got so far. I got the bars to show up but they fill up entirely if moralityLevel is over 0 at all? trying to figure out how to do the rate part....
    I think I want to do your idea of two gauges side by side with one max -100, and the other max 100


    Code:
    //variable for the morality level for the player from the game
        var moralityLevel = $gameVariables.value(10);
        //paladin morality level/number
        var palmoralityLevel = 100;
        //empath morality level/number
        var empmoralityLevel = 80;
        //necromancer morality level/number
        var necromoralityLevel = -70;
    
    
    //Create the Morality Gauges
    Window_Base.prototype.drawActorMorality = function(moralityLevel, x, y, width) {
       width = width || 186;
       var color1 = this.hpGaugeColor1();
       var color2 = this.hpGaugeColor2();
       var moRate =
       //
       //this.drawGauge(x, y, width, actor.hpRate(), color1, color2);
       this.drawGauge(x, y, width, actor.hpRate(), color1, color2);
       this.changeTextColor(this.systemColor());
       this.drawText(TextManager.hpA, x, y, 44);
       //the gauges text information XX / XX
       this.drawCurrentAndMax(moralityLevel, 100, x, y, width,
       this.hpColor(actor), this.normalColor());
    };
    
    
    //draw the Morality Gauges for the corresponding Actor ID
       if(actor.actorId() === 1) {
        this.drawActorMorality(moralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       } else if(actor.actorId() === 2) {
        this.drawActorMorality(palmoralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       } else if(actor.actorId() === 3) {
        this.drawActorMorality(empmoralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       } else if(actor.actorId() === 4) {
        this.drawActorMorality(necromoralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       }
    
    
     
    #8
  9. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    this one is working but i cant manipulate the height of this bar (I want it thinner than the other bars so you can see its different), and if moralityLevel goes over 100, it will spill out beyond the width thats set. Also I dont know if two bars would work, one for the negative one for positive because I am filling both these bars based on the moralityLevel and one of the bars are still going to spill over into the negative unless I can contrain each bar to only show within a certain range, although it will probably overlap each other anyway and maybe wont be visible...?

    Code:
      
        //variable for the morality level for the player from the game
        var moralityLevel = $gameVariables.value(10);
        //paladin morality level/number
        var palmoralityLevel = 100;
        //empath morality level/number
        var empmoralityLevel = 80;
        //necromancer morality level/number
        var necromoralityLevel = -70;
    
    //Create the Morality Gauges
    Window_Base.prototype.drawActorMorality = function(moralityLevel, x, y, width) {
       //width = width || 186;
       var color1 = this.hpGaugeColor1();
       var color2 = this.hpGaugeColor2();
       //width of the gauges
       var width = 160;
    
       //(the x and y location of the bar), (rate of how much the bar fills up)
       this.drawGauge(x, y, width, moralityLevel/100, color1, color2);
       //not sure what this does
       this.changeTextColor(this.systemColor());
       //not sure what this does exactly
       this.drawText(TextManager.hpA, x, y, 44);
       //Text (moralityLevel / 100) (x and y text location) (width=bar width)
       this.drawCurrentAndMax(moralityLevel, 100, x, y, width, this.hpColor(actor), this.normalColor());
    };
    
    
    //draw the Morality Gauges for the corresponding Actor ID
       if(actor.actorId() === 1) {
        this.drawActorMorality(moralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       } else if(actor.actorId() === 2) {
        this.drawActorMorality(palmoralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       } else if(actor.actorId() === 3) {
        this.drawActorMorality(empmoralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       } else if(actor.actorId() === 4) {
        this.drawActorMorality(necromoralityLevel, x + 150, y + 47 + lineHeight - 26, width2);
       }
    
    
    
     
    #9
  10. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    I think you have a few questions here so I'll try them one-by-one.

    Height of the gauge:
    If you look through the rpg_windows.js file and find the Window_Base.prototype.drawGauge function, you'll see the height is hard-coded to 6 pixels. You can change that but it will affect all gauges in the game. Maybe you can write your own function that isn't hard-coded.

    Morality Level is over 100 it's spilling over:
    The 'rate' argument of the function is expecting a number between 0 and 1. Right now you have it like 'moralityLevel/100' so if morality is over 100, then the rate is over 1 and the function doesn't expect that. You can 'clamp' it to stay within 0 and 1 like this:
    Code:
    (moralityLevel/100).clamp(0, 1);
    
    Negative morality bar:
    It looks like by default the bar always fills from left-to-right. You can try to find a way to make it fill from right-to-left for your negative gauge, or find a way to flip the gauge upside-down (that way when "it" fills from left-to-right, it appears to "you" that it fills right-to-left).
     
    #10
  11. lonewolph

    lonewolph Veteran Veteran

    Messages:
    191
    Likes Received:
    14
    First Language:
    English
    thank you so much aloe. the way to reverse the gauge was to set it at a negative width, then it started to fill the other direction
     
    #11
    Aloe Guvner likes this.
  12. Aloe Guvner

    Aloe Guvner Walrus Veteran

    Messages:
    1,561
    Likes Received:
    978
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    RMMV
    That's really neat, I didn't think of that. Good trick!

    Glad you got it figured out. If your issue is solved, you can go ahead and click "report" on the first post and mention that the issue is solved. A moderator will come around and mark the thread as solved. Of course, if it's not solved you can keep asking questions here.
     
    #12
    lonewolph likes this.
  13. mlogan

    mlogan Global Moderators Global Mod

    Messages:
    13,745
    Likes Received:
    7,593
    Location:
    Texas
    First Language:
    English
    Primarily Uses:
    RMMV

    This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.

     
    #13
Thread Status:
Not open for further replies.

Share This Page