omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
13
Reaction score
1
First Language
English
Primarily Uses
RMMV
Hey Makers, how's it going?

I'm not that skilled when it comes to using JavaScript. The only stuff I know is from when I was taking web development 1 in college, plus we barely touch it in that course. So, little to say, my knowledge when it comes to JavaScript, is next to none. That's why I've come here to get some help. All I would like to know is how to display text (and possibly in a text window) anywhere I want using JavaScript, and also display in game variables within the text on screen. I'd also like to know how I can use JavaScript to Hide/Show and update my text, using a call script, so every time the variable within the text on screen changes, it updates, and I can choose when to display the text on screen.

Basically it should look something like this (Picture taken in RPG Maker VX Ace):Scoring system.jpg What I want to do is take the concept I found from a YouTube video, and apply it in JavaScript so I can use it in RPG Maker MV.

Here's the video for reference:
I'd greatly appreciate your help, to make my game the best it can be. Thank you for your time and help!

Regards,
Omar
 
Last edited:

Zero_G

Veteran
Veteran
Joined
Mar 28, 2020
Messages
69
Reaction score
47
First Language
English
Primarily Uses
RMVXA
You can start with this tutorial, part 4 talks about displaying text anywhere.


And for reference, here is a plugin I made to display text in the corners of the screen, and then fade out.
JavaScript:
//=============================================================================
// Text_Popup.js
//=============================================================================
/*:
 * @Text_Popup
 * @plugindesc Display a popup text
 * @version 1.0
 * @author Zero_G
 * @filename Text_Popup.js
 * @help
 -------------------------------------------------------------------------------
 == Description ==
 This plugin is an example of how to pop up text

 == Terms of Use ==
 - Free for use in non-commercial projects with credits
 - Free for use in commercial projects
 - Please provide credits to Zero_G

 == Usage ==
 Press de C key during gameplay to show popup

 function SceneManager.callPopup(text, position, maxWidht)
 text = text of popup
 position = position of popup ['topRight', 'bottomRight', 'topLeft',
            'bottomLeft'], default is 'topRight'
 maxWidht = max widht of popup in pixels, text will compress to this widht.
            if text is too long, increase it. Deafult 100
 
 -------------------------------------------------------------------------------
*/

var Imported = Imported || {};
var ZERO = ZERO || {};
Imported.ZERO_TextPopup = 1;
ZERO.TextPopup = ZERO.TextPopup || {};

(function ($) {
  document.addEventListener('keydown', event => {
    if (event.keyCode == 67) {  // C
        SceneManager.callPopup('testing popup');
      }
  });

  // Create sprite object
  var popupSprite;
  var _Scene_Base_start = Scene_Base.prototype.start;
  Scene_Base.prototype.start = function () {
    _Scene_Base_start.call(this);

    popupSprite = new Sprite(new Bitmap(Graphics.width, Graphics.height));
    popupSprite.opacity = 255;
    this.addChild(popupSprite);
  };

  // Call popup

  /* drawText info
  * @param {String} text The text that will be drawn
  * @param {Number} x The x coordinate for the left of the text
  * @param {Number} y The y coordinate for the top of the text
  * @param {Number} maxWidth The maximum allowed width of the text
  * @param {Number} lineHeight The height of the text line
  * @param {String} align The alignment of the text
  **/
  SceneManager.callPopup = function (text, position = 'topRight', maxWidth = 100) {
    popupSprite.bitmap.clear();
    popupSprite.opacity = 255;

    switch(position){
        case 'topRight':
            popupSprite.bitmap.drawText(String(text), Graphics.width - maxWidth - 10, 10, maxWidth, 30, 'right');
            break;
        case 'bottomRight':
            popupSprite.bitmap.drawText(String(text), Graphics.width - maxWidth - 10, Graphics.height - 50, maxWidth, 30, 'right');
            break;
        case 'topLeft':
            popupSprite.bitmap.drawText(String(text), 10, 10, maxWidth, 30, 'left');
            break;
        case 'bottomLeft':
            popupSprite.bitmap.drawText(String(text), 10, Graphics.height - 50, maxWidth, 30, 'left');
            break;
    }
  };

  // Fade popup
  var _Scene_Base_update = Scene_Base.prototype.update;
  Scene_Base.prototype.update = function() {
  _Scene_Base_update.call(this);

  if (typeof popupSprite !== 'undefined'){
    if(popupSprite.opacity > 0) {
        popupSprite.opacity -= 1;
    }
  }
};
})(ZERO.TextPopup);
 
Last edited:

Zero_G

Veteran
Veteran
Joined
Mar 28, 2020
Messages
69
Reaction score
47
First Language
English
Primarily Uses
RMVXA
But there should be a plugin that does this already, for example one that displays current gold (then modify it to your convenience). Look in the plugin lists.
 

omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
13
Reaction score
1
First Language
English
Primarily Uses
RMMV
But there should be a plugin that does this already, for example one that displays current gold (then modify it to your convenience). Look in the plugin lists.
Can you tell me how cause I tried one time and had no clue what I was doing.
 

Zero_G

Veteran
Veteran
Joined
Mar 28, 2020
Messages
69
Reaction score
47
First Language
English
Primarily Uses
RMVXA
 

omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
13
Reaction score
1
First Language
English
Primarily Uses
RMMV
Thanks!
 

TheGentlemanLoser

"And when we fall, we will fall together..."
Veteran
Joined
Dec 30, 2020
Messages
222
Reaction score
268
First Language
English
Primarily Uses
RMMV
OrangeHUD is the family of plugins you want: be advised I found it a ***** and a half to configure and still am not entirely happy with the results, but then again, I know (even) less about JavaScript than you do (approaching nothing)
 

omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
13
Reaction score
1
First Language
English
Primarily Uses
RMMV
OrangeHUD is the family of plugins you want: be advised I found it a ***** and a half to configure and still am not entirely happy with the results, but then again, I know (even) less about JavaScript than you do (approaching nothing)
Thanks!
 

Riazey

Master of None
Veteran
Joined
Feb 27, 2014
Messages
167
Reaction score
251
First Language
English
Primarily Uses
RMMV
There's also SRD Hudmaker which can display not only text but a bunch of other stuff as well~
 

omarproductions

Villager
Member
Joined
Oct 14, 2017
Messages
13
Reaction score
1
First Language
English
Primarily Uses
RMMV
Thank you guys for your support! After going through all the things you recommended I do, I decided that I will use SRD Hudmaker, since it’s the easiest plugin I can use. I’d also like to add that those who recommend this plugin, will be in the credits of my game!
 

Latest Threads

Latest Posts

Latest Profile Posts

If it gets 6 degrees hotter we've reach 100
I am finally done making the 'superbosses' in my game!
I'm happy because oh my gosh they were a lot of work, but I'm also sad because I love database work... And also because I loved making stupid powerful bosses ._.
Question for anyone who reads Slip into Ruby or Jump into Javascript: do I sometimes get too "explainy" with the methods/functions? Would it be more useful if I stuck to explaining what the code is doing rather than also delving into minutiae of the technical side of it?
That moment when you try to figure out a color scheme for an alien ship so that it's something other than "Grey on Grey".
It's up for viewing! See what happened when EquestriAlert got tested in 1997... or was it a test? Did somepony hack the system? Or did somepony push the wrong switch? Even Adagio Dazzle (the owner of the channel) has no clue.

Can you put the pieces together? Don't worry, the game isn't over yet! There's more pieces to add on!

Forum statistics

Threads
111,118
Messages
1,058,460
Members
144,338
Latest member
shadowsoul
Top