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
81
Reaction score
52
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
81
Reaction score
52
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
81
Reaction score
52
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
238
Reaction score
272
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

Sometimes you Just need to realise someone is beyond help... Still hard to walk away tho :(
100 Horror/Tragedy Sample Maps, Penguin Mech Sprite, & TileD Templates | RPG Maker News #70

Continuing working on abs. So far I have done the workout twice. I am excited to see the results after a couple of weeks. How is everyone doing? :)
MZ: oh boy imma work today
Me, excited: Really?
MZ, doesn't do what I tell It too
Me: I Thought-
MZ: I am Working!
Oof, this "side project" of mine is starting to get as complex as a VS plugin, at least as far as plugin parameters are concerned. I think I now understand why a plugin like this doesn't already exist(that I know of). Learning a lot while trying to make it work though!

Forum statistics

Threads
112,216
Messages
1,066,604
Members
145,821
Latest member
Adra
Top